# 表单标签
表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。
## 1.`<form>`
### 1.1 简介
`<form>`标签用来定义一个表单，所有表单内容放到这个容器元素之中。
~~~
<form>
<!-- 各种表单控件-->
</form>
~~~
上面代码就是表单的基本形式。
下面是一个比较常见的例子。
~~~
<form action="https://example.com/api" method="post">
<label for="POST-name">用户名：</label>
<input id="POST-name" type="text" name="user">
<input type="submit" value="提交">
</form>
~~~
上面代码就是一个表单，一共包含三个控件：一个`<label>`标签，一个文本输入框，一个提交按钮。其中，文本输入框的`name`属性是`user`，表示将向服务器发送一个键名为`user`的键值对，键值就是这个控件的`value`属性，等于用户输入的值。
用户在文本输入框里面，输入用户名，比如`foobar`，然后点击提交按钮，浏览器就会向服务器`https://example.com/api`发送一个 POST 请求，发送`user=foobar`这样一段数据。
`<form>`常用属性。
* `action`：服务器接收数据的 URL。
* `method`：提交数据的 HTTP 方法，可能的值有`post`（表单数据作为 HTTP 数据体发送），`get`（表单数据作为 URL 的查询字符串发送），`dialog`（表单位于`<dialog>`内部使用）。
* `enctype`：当`method`属性等于`post`时，该属性指定提交给服务器的 MIME 类型。可能的值为`application/x-www-form-urlencoded`（默认值），`multipart/form-data`（文件上传的情况），`text/plain`。
* `target`：在哪个窗口展示服务器返回的数据，可能的值有`_self`（当前窗口），`_blank`（新建窗口），`_parent`（父窗口），`_top`（顶层窗口），`<iframe>`标签的`name`属性（即表单返回结果展示在`<iframe>`窗口）。
### 1.2 encrypt 属性
`<form>`表单的`encrypt`属性，指定了采用 POST 方法提交数据时，浏览器给出的数据的 MIMI 类型。该属性可以取以下值。
（1）`application/x-www-form-urlencoded`
`application/x-www-form-urlencoded`是默认类型，控件名和控件值都要转义（空格转为`+`号，非数字和非字母转为`%HH`的形式，换行转为CR LF），控件名和控件值之间用`=`分隔。控件按照出现顺序排列，控件之间用`&`分隔。
（2）`multipart/form-data`
`multipart/form-data`主要用于文件上传。这个类型上传大文件时，会将文件分成多块传送，每一块的 HTTP 头信息都有`Content-Disposition`属性，值为`form-data`，以及一个`name`属性，值为控件名。
~~~
Content-Disposition: form-data; name="mycontrol"
~~~
下面是上传文件的表单。
~~~
<form action="https://example.com/api"
enctype="multipart/form-data"
method="post">
用户名：<input type="text" name="submit-name"><br>
文件：<input type="file" name="files"><br>
<input type="submit" value="上传"> <input type="reset" value="清除">
</form>
~~~
上面代码中，输入用户名`Larry`，选中一个`file1.txt`文件，然后点击“上传”。
## 2.`<label>`
`<label>`标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。
~~~
<label for="user">用户名：</label>
<input type="text" name="user" id="user">
~~~
上面代码中，输入框前面会有文字说明“用户名：”。
`<label>`的一大优势是增加了控件的可用性。有些控件比较小（比如单选框），不容易点击，那么点击对应的`<label>`标签，也能选中该控件。点击`<label>`，就相当于控件本身的`click`事件。
`<label>`的`for`属性关联相对应的控件，它的值是对应控件的`id`属性。所以，控件最好设置`id`属性。
控件也可以放在`<label>`之中，这时不需要`for`属性和`id`属性。
~~~
<label>用户名：
<input type="text" name="user">
</label>
~~~
`<label>`的属性如下。
* `for`：关联控件的`id`属性。
* `form`：关联表单的`id`属性。设置了该属性后，`<label>`可以放置在页面的任何位置，否则只能放在`<form>`内部。
## 3.`<input>`
### 3.1 简介
`<input>`标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。
它有多种类型，取决于`type`属性的值，默认值是`text`，表示一个输入框。
~~~
<input>
<!-- 等同于 -->
<input type="text">
~~~
上面代码会生成一个单行的输入框，用户可以在里面输入文本。
`<input>`的属性非常多，有些属性是某个类型专用的，放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。
* `autofocus`：布尔属性，是否在页面加载时自动获得焦点。
* `disabled`：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
* `form`：关联表单的`id`属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在`<form>`内部。
* `list`：关联的`<datalist>`的`id`属性，设置该控件相关的数据列表，详见后文。
* `name`：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了`name`属性的控件，才会向服务器提交，不设置就不会提交。
* `readonly`：布尔属性，是否为只读。
* `required`：布尔属性，是否为必填。
* `type`：控件类型，详见下文。
* `value`：控件的值。
### 3.2 类型
`type`属性决定了`<input>`的形式。该属性可以取以下值。
#### （1）`type="text"`
`type="text"`是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。
~~~
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
~~~
`text`输入框有以下配套属性。
* `maxlength`：可以输入的最大字符数，值为一个非负整数。
* `minlength`：可以输入的最小字符数，值为一个非负整数，且必须小于`maxlength`。
* `pattern`：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成`pattern="[a-z]{4,8}"`。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。
* `placeholder`：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。
* `readonly`：布尔属性，表示该输入框是只读的，用户只能看，不能输入。
* `size`：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。
* `spellcheck`：是否对用户输入启用拼写检查，可能的值为`true`或`false`。
#### （2）`type="search"`
`type="search"`是一个用于搜索的文本输入框，基本等同于`type="text"`。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。
~~~
<form>
<input type="search" id="mySearch" name="q"
placeholder="输入搜索词……" required>
<input type="submit" value="搜索">
</form>
~~~
#### （3）`type="button"`
`type="button"`是没有默认行为的按钮，通常脚本指定`click`事件的监听函数来使用。
~~~
<input type="button" value="点击">
~~~
建议尽量不使用这个类型，而使用`<button>`标签代替，一则语义更清晰，二则`<button>`标签内部可以插入图片或其他 HTML 代码。
#### （4）`type="submit"`
`type="submit"`是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。
~~~
<input type="submit" value="提交">
~~~
如果不指定`value`属性，浏览器会在提交按钮上显示默认的文字，通常是`Submit`。
#### （5）`type="reset"`
`type="reset"`是一个重置按钮，用户点击以后，所有表格控件重置为初始值。
~~~
<input type="reset" value="重置">
~~~
如果不设置`value`属性，浏览器会在按钮上面加上默认文字，通常是`Reset`。
这个控件用处不大，用户点错了还会使得所有已经输入的值都被重置，建议不要使用。
#### （6）`type="checkbox"`
`type="checkbox"`是复选框，允许选择或取消选择该选项。
~~~
<input type="checkbox" name="agreement" checked>
<label for="agreement">是否同意</label>
~~~
上面代码会在文字前面，显示一个可以点击的选择框，点击可以选中，再次点击可以取消。上面代码中，`checked`属性表示默认选中。
`value`属性的默认值是`on`。也就是说，如果没有设置`value`属性，以上例来说，选中复选框时，会提交`agreement=on`。如果没有选中，提交时不会有该项。
多个相关的复选框，可以放在`<fieldset>`里面。
~~~
<fieldset>
<legend>你的兴趣</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">编码</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐</label>
</div>
</fieldset>
~~~
上面代码中，如果用户同时选中两个复选框，提交的时候就会有两个`name`属性，比如`interest=coding&interest=music`。
#### （7）`type="radio"`
`type="radio"`是单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。
~~~
<fieldset>
<legend>性别</legend>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
</fieldset>
~~~
上面代码中，性别只能在两个选项之中，选择一项。
注意，多个单选框的`name`属性的值，应该都是一致的。提交到服务器的就是选中的那个值。
该类型的配套属性如下。
* `checked`：布尔属性，表示是否默认选中当前项。
* `value`：用户选中该项时，提交到服务器的值，默认为`on'`。
#### （8）`type="password"`
`type="password"`是一个密码输入框。用户的输入会被遮挡，字符通常显示星号（`*`）或点（`·`）。
~~~
<input type="password" id="pass" name="password"
minlength="8" required>
~~~
如果用户输入内容包含换行符（`U+000A`）和回车符（`U+000D`），浏览器会自动将这两个字符过滤掉。
该类型的配套属性如下。
* `maxlength`：可以输入的最大字符数。
* `minlength`：可以输入的最少字符数。
* `pattern`：输入必须匹配的正则表达式。
* `placeholder`：输入为空时的显示文本。
* `readonly`：布尔属性，该输入框是否只读。
* `size`：一个非负整数，表示输入框的显示长度为多少个字符。
* `autocomplete`：是否允许自动填充，可能的值有`on`（允许自动填充）、`off`（不允许自动填充）、`current-password`（填入当前网站保存的密码）、`new-password`（自动生成一个随机密码）。
* `inputmode`：允许用户输入的数据类型，可能的值有`none`（不使用系统输入法）、`text`（标准文本输入）、`decimal`（数字，包含小数）、`numeric`（数字0-9）等。
#### （9）`type="file"`
`type="file"`是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能。
~~~
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
~~~
该类型有以下属性。
* `accept`：允许选择的文件类型，使用逗号分隔，可以使用 MIME 类型（比如`image/jpeg`），也可以使用后缀名（比如`.doc`），还可以使用`audio/*`（任何音频文件）、`video/*`（任何视频文件）、`image/*`（任何图像文件）等表示法。
* `capture`：用于捕获图像或视频数据的源，可能的值有`user`（面向用户的摄像头或麦克风），`environment`（外接的摄像头或麦克风）。
* `multiple`：布尔属性，是否允许用户选择多个文件。
#### （10）`type="hidden"`
`type="hidden"`是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交。
~~~
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
~~~
上面这个控件，页面上是看不见的。用户提交表单的时候，浏览器会将`prodId=xm234jq`发给服务器。
## 4.`<button>`
`<button>`标签会生成一个可以点击的按钮，没有默认行为，通常需要用`type`属性或脚本指定按钮的功能。
~~~
<button>点击</button>
~~~
上面代码会产生一个按钮，上面的文字就是“点击”。
`<button>`内部不仅放置文字，还可以放置图像，这可以形成图像按钮。
~~~
<button name="search" type="submit">
<img src="search.gif">搜索
</button>
~~~
## 5.`<select>`
`<select>`标签用于生成一个下拉菜单。
~~~
<label for="pet-select">宠物：</label>
<select id="pet-select" name="pet-select">
<option value="">--请选择一项--</option>
<option value="dog">狗</option>
<option value="cat">猫</option>
<option value="others">其他</option>
</select>
~~~
上面代码中，`<select>`生成一个下拉菜单，菜单标题是“--请选择一项--”，最右侧有一个下拉箭头。点击下拉箭头，会显示三个菜单项，供用户点击选择。
下拉菜单的菜单项由`<option>`标签给出，每个`<option>`代表可以选择的一个值。选中的`<option>`的`value`属性，就是`<select>`控件发送的服务器的值。
`<option>`有一个布尔属性`selected`，一旦设置，就表示该项是默认选中的菜单项。
~~~
<select name="choice">
<option value="first">First Value</option>
<option value="second" selected>Second Value</option>
<option value="third">Third Value</option>
</select>
~~~
上面代码中，第二项`Second Value`是默认选中的。页面加载的时候，会直接显示在下拉菜单上。
`<select>`有如下属性。
* `autofocus`：布尔属性，页面加载时是否自动获得焦点。
* `disabled`：布尔属性，是否禁用当前控件。
* `form`：关联表单的`id`属性。
* `multiple`：布尔属性，是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住`Shift`或其他功能键，选中多项。
* `name`：控件名。
* `required`：布尔属性，是否为必填控件。
* `size`：设置了`multiple`属性时，页面显示时一次可见的行数，其他行需要滚动查看。
## 6.`<textarea>`
`<textarea>`是一个块级元素，用来生成多行的文本框。
~~~
<textarea id="story" name="story"
rows="5" cols="33">
这是一个很长的故事。
</textarea>
~~~
上面代码会生成一个长度为5行，宽度为33个字符的文本框。
该标签有如下属性。
* `autofocus`：布尔属性，是否自动获得焦点。
* `cols`：文本框的宽度，单位为字符，默认值为20。
* `disabled`：布尔属性，是否禁用该控件。
* `form`：关联表单的`id`属性。
* `maxlength`：允许输入的最大字符数。如果未指定此值，用户可以输入无限数量的字符。
* `minlength`：允许输入的最小字符数。
* `name`：控件的名称。
* `placeholder`：输入为空时显示的提示文本。
* `readonly`：布尔属性，控件是否为只读。
* `required`：布尔属性，控件是否为必填。
* `rows`：文本框的高度，单位为行。
* `spellcheck`：是否打开浏览器的拼写检查。可能的值有`true`（打开），`default`（由父元素或网页设置决定），`false`（关闭）。
* `wrap`：输入的文本是否自动换行。可能的值有`hard`（浏览器自动插入换行符`CR + LF`，使得每行不超过控件的宽度），`soft`（输入内容超过宽度时自动换行，但不会加入新的换行符，并且浏览器保证所有换行符都是`CR + LR`，这是默认值），`off`（关闭自动换行，单行长度超过宽度时，会出现水平滚动条）。
