<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>有以下属性。
  • 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>窗口)。

1.2、enctype 属性

<form>表单的enctype属性,指定了采用 POST 方法提交数据时,浏览器给出的数据的 MIME 类型。该属性可以取以下值。
(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文件,然后点击“上传”。浏览器发送的实际数据如下。

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的内容。

2、<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>
上面代码中,这个控件组的标题会,嵌入显示在<fieldset>的上边框。

3、<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>有两个关联的<label>。

4、<input>

4.1、简介

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

<input>
<!-- 等同于 -->
<input type="text">
上面代码会生成一个单行的输入框,用户可以在里面输入文本。
<input>的属性非常多,有些属性是某个类型专用的,放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。
  • autofocus:布尔属性,是否在页面加载时自动获得焦点。
  • disabled:布尔属性,是否禁用该控件。一旦设置,该控件将变灰,用户可以看到,但是无法操作。
  • form:关联表单的id属性。设置了该属性后,控件可以放置在页面的任何位置,否则只能放在<form>内部。
  • list:关联的<datalist>的id属性,设置该控件相关的数据列表,详见后文。
  • name:控件的名称,主要用于向服务器提交数据时,控件键值对的键名。注意,只有设置了name属性的控件,才会向服务器提交,不设置就不会提交。
  • readonly:布尔属性,是否为只读。
  • required:布尔属性,是否为必填。
  • type:控件类型,详见下文。
  • value:控件的值。

4.2、类型

type属性决定了<input>的形式。该属性可以取以下值。
(1)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)search
type="search"是一个用于搜索的文本输入框,基本等同于type="text"。某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入。
下面是一个例子。

<form>
  <input type="search" id="mySearch" name="q"
    placeholder="输入搜索词……" required>
  <input type="submit" value="搜索">
</form>
(3)button
type="button"是没有默认行为的按钮,通常脚本指定click事件的监听函数来使用。

<input type="button" value="点击">
建议尽量不使用这个类型,而使用<button>标签代替,一则语义更清晰,二则<button>标签内部可以插入图片或其他 HTML 代码。
(4)submit
type="submit"是表单的提交按钮。用户点击这个按钮,就会把表单提交给服务器。

<input type="submit" value="提交">
如果不指定value属性,浏览器会在提交按钮上显示默认的文字,通常是Submit。
该类型有以下配套属性,用来覆盖<form>标签的相应设置。
  • formaction:提交表单数据的服务器 URL。
  • formenctype:表单数据的编码类型。
  • formmethod:提交表单使用的 HTTP 方法(get或post)。
  • formnovalidate:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。
  • formtarget:收到服务器返回的数据后,在哪一个窗口显示。
(5)image
type="image"表示将一个图像文件作为提交按钮,行为和用法与type="submit"完全一致。

<input type="image" alt="登陆" src="login-button.png">
上面代码中,图像文件是一个可以点击的按钮,点击后会提交数据到服务器。
该类型有以下配套属性。
  • alt:图像无法加载时显示的替代字符串。
  • src:加载的图像 URL。
  • height:图像的显示高度,单位为像素。
  • width:图像的显示宽度,单位为像素。
  • formaction:提交表单数据的服务器 URL。
  • formenctype:表单数据的编码类型。
  • formmethod:提交表单使用的 HTTP 方法(get或post)。
  • formnovalidate:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。
  • formtarget:收到服务器返回的数据后,在哪一个窗口显示。
用户点击图像按钮提交时,会额外提交两个参数x和y到服务器,表示鼠标的点击位置,比如x=52&y=55。
x是横坐标,y是纵坐标,都以图像左上角作为原点(0, 0)。如果图像按钮设置了name属性,比如name="position",那么将以该值作为坐标的前缀,比如position.x=52&position.y=55。这个功能通常用来地图类型的操作,让服务器知道用户点击了地图的哪个部分。
(6)reset
type="reset"是一个重置按钮,用户点击以后,所有表格控件重置为初始值。

<input type="reset" value="重置">
如果不设置value属性,浏览器会在按钮上面加上默认文字,通常是Reset。
这个控件用处不大,用户点错了还会使得所有已经输入的值都被重置,建议不要使用。
(7)checkbox
type="checkbox"是复选框,允许选择或取消选择该选项。

<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意</label>