表单标签
表单(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 类型。该属性可以取以下值。
(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
的内容。
<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>
的上边框。
<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>
。