HTML之于浏览者交互

本文详细介绍了HTML表单的各种元素及其使用方法,包括文本框、密码框、单选按钮、复选框、提交按钮及下拉列表等。还介绍了如何通过设置属性实现不同功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<form   method="传送方式"   action="服务器文件">

讲解:

1.form :<form>标签是成对出现的,以<form>开始,以</form>结束。

2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method : 数据传送的方式(get/post)。
所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间
text:

<input type="text"  name="username" id="username" value="" placeholder="请输入用户名"/>

password:

<input type="password"  name="pass" id="pass" value="" placeholder="请输入密码"/>

radio:
(name相同则为单选按钮)

男性:
<input type="radio" checked="checked" name="Sex" value="male" />
女性:
<input type="radio" name="Sex" value="female" />

submit:

<input type="submit" value="确定"  name="submit" />

checkbox:复选框
file:文件选择框


当用户需要在表单中输入大段文字时,需要用到文本输入域。

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

2、cols :多行输入域的列数。

3、rows :多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。


下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。

下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。

<select>/<select multiple="multiple">
  <option value="看书">看书</option>
  <option value="旅游">旅游</option>
  <option value="运动">运动</option>
  <option value="购物">购物</option>
</select>

不加label的话鼠标一定要点击小圆点才能激活条目,加了label可以直接点击对应的文字来激活条目。
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值