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> 也是单标签 -->

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

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 来控制。