HTML标签 之 表单

在网页中，在我们需要收集用户信息的时候，就会用到表单。比如注册账号时有时候需要用户的名字、性别、出生日期、电话、邮箱等，就可以用表单来处理。

一个完整的表单通常由表单域、表单控件（表单元素）和提示信息 3 个部分构成。

一、表单域

表单域是一个包含表单控件的区域，在 HTML 标签中，<form> 标签用来定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。

<form action="url" method="post" name="test">
   ...    // 表单控件
</form>

• action：值为 url 地址，用于指定接收并处理表单数据的服务器程序的url地址
• method：值为 get 或 post， 用于设置表单数据的提交方式
• name：用于指定表单的名称，因为同一个页面中可能有多个表单域。

二、表单控件

1、<input> 表单控件

input 是输入的意思，在表单控件中，<input> 标签用于收集用户信息。

在 <input> 标签中，包含一个必须的 type 属性，根据 type 不同的值，<input> 可以有多种形式：文本、复选框、单选按钮、按钮等。

<input type="text" />    <!-- <input> 也是单标签 -->

type 属性值	说明
text	定义单行的输入字段，用户可以在里面输入文本，例如输入用户名
password	定义密码字段，用户输入后看不到明文，一般输入密码时用到
radio	定义单选按钮，比如在选择性别时，实现多选一（多个 radio 必须有相同的 name 才能实现真正的多选一）
checkbox	定义复选框，比如在选择“我喜欢的栏目”时，可以同时选择多个（多个 checkbox 有相同的 name 才能把所有的选择都正确传到服务端）
button	定义可点击按钮，value 值可以设置按钮文字
file	定义输入字段和“浏览”按钮，供文件上传
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮

<input> 标签其他常用属性：

属性	属性值	说明
name	自定义	定义 input 控件的名称
value	自定义	定义 input 控件的值
checked	checked	此 input 控件首次加载时应当被选中
maxlength	正整数	输入文字时字符的最大长度

1. name 和 value 是每个表单控件都有的属性值，主要给后台人员使用
2. name 是表单控件的名字，要求单选按钮和复选框都要有相同的 name 值

2、<label> 标签

<label> 标签用于绑定一个表单控件，当点击 <lable> 标签内的文本时，浏览器就会自动将光标转到对应的表单控件上，提升用户体验。（可以理解为增大点击区域了）

  <!-- 这样在点击“男”这个字时，也会选中该单选框 -->
  <label for="sex">男</label>
  <input type="radio" name="sex" id="sex" />

注意：<label> 标签的 for 属性应当与相关控件的 id 属性相同

3、<select> 下拉表单控件

当页面中有多个选项让用户选择时，想要节约页面空间，我们可以使用 <select> 标签控件定义下拉列表。例如我们在选择省份和地区时。

<select>
  <option>北京</option>
  <option>天津</option>
  <option>河北</option>
  <option selected="selected">山西</option> 
  <!--在 <option> 中定义 selected="selected"，当前项为默认选中项-->
  ...
</select>

4、<label> 文本域控件

当用户需要输入较多内容时，可以使用 <textarea> 标签，它用于定义多行文本输入的控件。比如留言板、评论等。

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

其中属性 cols 为每行中的字符数，rows 为显示的行数，实际开发中用 CSS 来控制。