5 表单标签

表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。

表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。

form 标签

<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> 有以下属性。

• accept-charset：服务器接受的字符编码列表，使用空格分隔，默认与网页编码相同。
• action：服务器接收数据的 URL。
• autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为 off（不自动填写）和 on（自动填写）。
• method：提交数据的 HTTP 方法，可能的值有 post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于 <dialog> 内部使用）。
• **enctype**：当 method 属性等于 post 时，该属性指定提交给服务器的 MIME 类型。可能的值为 application/x-www-form-urlencoded（默认值），multipart/form-data（文件上传的情况），text/plain。
• name：表单的名称，应该在网页中是唯一的。注意，如果一个控件没有设置 name 属性，那么这个控件的值就不会作为键值对，向服务器发送。
• novalidate：布尔属性，表单提交时是否取消验证。
• target：在哪个窗口展示服务器返回的数据，可能的值有 _self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe> 标签的 name 属性（即表单返回结果展示在 <iframe> 窗口）。

enctype 属性

<form> 表单的 enctype 属性，指定了采用 POST 方法提交数据时，浏览器给出的数据的 MIME 类型。该属性可以取以下值。

application/x-www-form-urlencoded

application/x-www-form-urlencoded 是默认类型，控件名和控件值都要转义（空格转为 + 号，非数字和非字母转为 %HH 的形式，换行转为 CR LF），控件名和控件值之间用=分隔。控件按照出现顺序排列，控件之间用 & 分隔。

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 文件，然后点击 “ 上传 “。浏览器发送的实际数据如下：

Content-Type: multipart/form-data; boundary=–AaB03x

–AaB03x Content-Disposition: form-data; name=”submit-name”

Larry –AaB03x Content-Disposition: form-data; name=”files”; filename=”file1.txt” Content-Type: text/plain

… contents of file1.txt … –AaB03x–

上面代码中，浏览器将这个表单发成多个数据块。最上面使用 Content-Type 字段告诉服务器，数据格式是 multipart/form-data（即多个数据块），每个数据块的分隔标志是 –AaB03x。每个数据块的第一行是 Content-Disposition，其中的 name 字段表示这个数据块的控件名，数据体则是该控件的数据值，比如第一个数据块的 name 属性是 submit-name 控件，数据体是该控件的值 Larry。第二个数据块是控件 files，由于该控件是上传文件，所以还要用 filename 属性给出文件名 file1.txt，数据体是 file1.txt 的内容。

# <fieldset>，<legend>

<fieldset> 标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。

<form>
  <fieldset>
    <p>年龄：<input type="text" name="age"></p>
    <p>性别：<input type="text" name="gender"></p>
  </fieldset>
</form>

上面代码中，两个输入框是一组，它们的外面会显示一个方框。

<fieldset> 有以下属性。

• disabled：布尔属性，一旦设置会使得 <fieldset> 内部包含的控件都不可用，都变成灰色状态。
• form：指定控件组所属的 <form>，它的值等于 <form> 的 id 属性。
• name：该控件组的名称。

<legend> 标签用来设置 <fieldset> 控件组的标题，通常是 <fieldset> 内部的第一个元素，会嵌入显示在控件组的上边框里面。

<fieldset>
  <legend>学生情况登记</legend>
  <p>年龄：<input type="text" name="age"></p>
  <p>性别：<input type="text" name="gender"></p>
</fieldset>

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> 内部。

一个控件可以有多个关联的 <label> 标签。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>

input 标签

https://wangdoc.com/html/form#input
<input> 标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。
它有多种类型，取决于 type 属性的值，默认值是 text，表示一个输入框。

<input>
<!-- 等同于 -->
<input type="text">

<input> 的属性非常多，有些属性是某个类型专用的，放在下文的 “ 类型 “ 部分介绍。这里介绍一些所有类型的共同属性。

• autofocus：布尔属性，是否在页面加载时自动获得焦点。
• disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
• form：关联表单的 id 属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在 <form> 内部。
• list：关联的 <datalist> 的 id 属性，设置该控件相关的数据列表，详见后文。
• name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了 name 属性的控件，才会向服务器提交，不设置就不会提交。
• readonly：布尔属性，是否为只读。
• required：布尔属性，是否为必填。
• type：控件类型，详见下文。
• value：控件的值。

类型

type 属性决定了 <input> 的形式。该属性可以取以下值。

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。

search

type=”search” 是一个用于搜索的文本输入框，基本等同于 type=”text”。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。

<form>
  <input type="search" id="mySearch" name="q"
    placeholder="输入搜索词……" required>
  <input type="submit" value="搜索">
</form>

button

submit

image

reset

checkbox

radio

email

password

file

hidden

number

range

url

tel

color

date

time

month

week

datetime-local

button

<button> 标签会生成一个可以点击的按钮，没有默认行为，通常需要用 type 属性或脚本指定按钮的功能。

<button>点击</button>

上面代码会产生一个按钮，上面的文字就是 “ 点击 “。

button>内部不仅放置文字，还可以放置图像，这可以形成图像按钮。

<button name="search" type="submit">
  <img src="search.gif">搜索
</button>

<button> 具有以下属性。

• autofocus：布尔属性，表示网页加载时，焦点就在这个按钮。网页里面只能有一个元素，具有这个属性。
• disabled：布尔属性，表示按钮不可用，会导致按钮变灰，不可点击。
• name：按钮的名称（与 value 属性配合使用），将以 name=value 的形式，随表单一起提交到服务器。
• value：按钮的值（与 name 属性配合使用），将以 name=value 的形式，随表单一起提交到服务器。
• type：按钮的类型，可能的值有三种：submit（点击后将数据提交给服务器），reset（将所有控件的值重置为初始值），button（没有默认行为，由脚本指定按钮的行为）。
• form：指定按钮关联的 <form> 表单，值为 <form> 的 id 属性。如果省略该属性，默认关联按钮所在父表单。
• formaction：数据提交到服务器的目标 URL，会覆盖 <form> 元素的 action 属性。
• formenctype：数据提交到服务器的编码方式，会覆盖 <form> 元素的 enctype 属性。可能的值有三种：application/x-www-form-urlencoded（默认值），multipart/form-data（只用于文件上传），text/plain。
• formmethod：数据提交到服务器使用的 HTTP 方法，会覆盖 <form> 元素的 method 属性，可能的值为 post 或 get。
• formnovalidate：布尔属性，数据提交到服务器时关闭本地验证，会覆盖 <form> 元素的 novalidate 属性。
• formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖 <form> 元素的 target 属性。可能的值有 _self（当前窗口），_blank（新的空窗口）、_parent（父窗口）、_top（顶层窗口）。

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>

option，optgroup

<option> 标签用在 <select>、<optgroup>、<datalist> 里面，表示一个菜单项，参见 <select> 的示例。

textarea

<textarea> 是一个块级元素，用来生成多行的文本框。

output

<output> 标签是一个行内元素，用于显示用户操作的结果。