HTML总结（五）之表单标签

表单标签

1.为什么需要表单
使用表单目的是为了收集用户信息
2.表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单控件）和提示信息三部分组成
3.表单域
表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>

常用属性：
4.表单控件（表单元素）
1）input输入表单元素
2）select下拉表单元素
3） textarea文本与元素
4.1 <input>表单元素
<input>标签用于收集用户信息
语法格式：

<input type="属性值"/>

• <input/>标签为单标签
• type属性设置不同的属性值用来指定不同的控件类型
  type属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段（不常用）
image	定义图像形式的提交按钮（不常用）
password	定义密码字段 该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮 重置按钮会清除表单中的所有数据
submit	定义提交按钮 提交按钮会把表单数据发送到服务器
text	定义单行的输入字段 用户可在其中输入文本 默认宽度为20字符

除type属性外，<input>标签还有其他很多属性
其常用属性如下：
（1）name和value是每个表单元素都有的属性值，主要给后台人员使用
（2）name表单元素的名字，要求单选按钮和复选按钮都要有自己相同的名字
举例：

/*要有相同的name,这样在单选时，才可以只选择一个，否则两个按钮可以同时选中*/
<input type="radio" name="sex" value="男" id="man">
  <input type="radio" name="sex" value="女" id="woman">

（3）checked属性主要针对单选框和复选框，主要作用一打开页面，就要可以默认选中某个表单元素
（4）maxlengtn是用户可以在表单元素输入的最大字符数，一般很少使用

/*默认选中"男"这个按钮*/
<input type="radio" name="sex" value="男" id="man"checked="checked">
  <input type="radio" name="sex" value="女" id="woman">

4.2<label>标签
<lable>标签为input元素定义标注（标签）
<lable>标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
举例：

/*当点击“男”这个字时，光标就会转到按钮位置并选中。即点击“男”后，男这个按钮就选中了*/
<input type="radio" name="sex" value="男" id="man"> 
<label for="man">男</label>
<input type="radio" name="sex" value="女" id="woman">
<label for="woman">女</label>

核心：<lable>标签的for属性应当与相关元素的id属性相同
4.3<select>表单元素
在页面中如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表
语法：

<select>
<option>选择1</option>
<option>选择2</option>
.......
</select>

注意：（1）<select>中至少包含一对<option>
（2）在<option>中定义selected="selected"时，当前项即为默认选中项
4.4<textarea>表单元素
使用场景：当用户输入内容较多时，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签
语法：

<textarea rows="3" cols="20">
文本内容
</textarea>

注：cols=“每行中的字符数” rows="显示的行数"
我们在实际开发中不会使用，都用css来改变大小
到此，我们大概介绍完了HTML的全部内容。后面将会再来一个系列，介绍css相关知识。
好啦，HTML完美收官。
若有不对之处，欢迎评论指正。感谢！