<form>
标签用来定义一个表单,所有表单内容放到这个容器元素之中。
<form>
</form>
有以下属性。
accept-charset:服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。
action:服务器接收数据的 URL。
autocomplete:如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为off
和on
。
method:提交数据的 HTTP 方法,可能的值有post,get,dialog。
multipart/form-data
(文件上传的情况),text/plain
。
name:表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置name属性,那么这个控件的值就不会作为键值对,向服务器发送。
novalidate:布尔属性,表单提交时是否取消验证。
target:在哪个窗口展示服务器返回的数据,可能的值有_sel,_blank,_parent,_top,标签的name属性。
enctype 属性
<form>
表单的enctype
属性,指定了采用 POST 方法提交数据时,浏览器给出的数据的 MIME 类型。该属性可以取以下值。
(1)application/x-www-form-urlencoded
application/x-www-form-urlencoded
是默认类型,控件名和控件值都要转义,控件名和控件值之间用=
分隔。控件按照出现顺序排列,控件之间用&
分隔。
(2)multipart/form-data
multipart/form-data
主要用于文件上传。这个类型上传大文件时,会将文件分成多块传送,每一块的 HTTP 头信息都有Content-Disposition
属性,值为form-data
,以及一个name
属性,值为控件名。
<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>
的一大优势是增加了控件的可用性。有些控件比较小(比如单选框),不容易点击,那么点击对应的<label>
标签,也能选中该控件。点击<label>
,就相当于控件本身的click
事件。
<label>
的for
属性关联相对应的控件,它的值是对应控件的id
属性。所以,控件最好设置id
属性。
控件也可以放在<label>
之中,这时不需要for
属性和id
属性。
<label>
的属性如下。
for
:关联控件的id
属性。
form
:关联表单的id
属性。设置了该属性后,<label>
可以放置在页面的任何位置,否则只能放在<form>
内部。
一个控件可以有多个关联的<label>
标签。
<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>
的形式。该属性可以取以下值。
(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"
。某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入。
(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">
上面代码中,图像文件是一个可以点击的按钮,点击后会提交数据到服务器。
(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>
上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中,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
。
(8)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>
上面代码中,性别只能在两个选项之中,选择一项。
(9)email
type="email"
是一个只能输入电子邮箱的文本输入框。表单提交之前,浏览器会自动验证是否符合电子邮箱的格式,如果不符合就会显示提示,无法提交到服务器。
<input type="email" pattern=".+@foobar.com" size="30" required>
上面代码会生成一个必填的文本框,只能输入后缀为foobar.com
的邮箱地址。
该类型有一个multiple
的布尔属性,一旦设置,就表示该输入框可以输入多个逗号分隔的电子邮箱。
<input id="emailAddress" type="email" multiple required>
(10)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)等。
(11)file
type="file"
是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能。
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
(12)hidden
type="hidden"
是一个不显示在页面的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息。比如,CSRF 攻击会伪造表单数据,那么使用这个控件,可以为每个表单生成一个独一无二的隐藏编号,防止伪造表单提交。
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
(13)number
type="number"
是一个数字输入框,只能输入数字。浏览器通常会在输入框的最右侧,显示一个可以点击的上下箭头,点击向上箭头,数字会递增,点击向下箭头,数字会递减。
<input type="number" id="tentacles" name="tentacles"
min="10" max="100">
(14)range
type="range"
是一个滑块,用户拖动滑块,选择给定范围之中的一个数值。因为拖动产生的值是不精确的,如果需要精确数值,不建议使用这个控件。常见的例子是调节音量。
<input type="range" id="start" name="volume"
min="0" max="11">
上面代码会产生一个最小值为0
、最大值为11
的滑块区域。用户拖动滑块,选择想要的音量。
(15)url
type="url"
是一个只能输入网址的文本框。提交表单之前,浏览器会自动检查网址格式是否正确,如果不正确,就会无法提交。
<input type="url" name="url" id="url"
placeholder="https://example.com"
pattern="https://.*" size="30"
required>
上面代码的pattern
属性指定输入的网址只能使用 HTTPS 协议。
注意,该类型规定,不带有协议的网址是无效的,比如foo.com
是无效的,http://foo.com
是有效的。
该类型的配套属性如下。
maxlength
:允许的最大字符数。minlength
:允许的最少字符串。pattern
:输入内容必须匹配的正则表达式。placeholder
:输入为空时显示的示例文本。readonly
:布尔属性,表示该控件的内容是否只读。size
:一个非负整数,表示该输入框显示宽度为多少个字符。spellcheck
:是否启动拼写检查,可能的值为true
(启用)和false
(不启用)。
该类型与<datalist>
标签搭配使用,可以形成下拉列表供用户选择。随着用户不断键入,会缩小显示范围,只显示匹配的备选项。
上面代码中,<option>
的label
属性表示文本标签,显示在备选下拉框的右侧,网址显示在左侧。
(16)tel
type="tel"
是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890</small>
(17)color
type="color"
是一个选择颜色的控件,它的值一律都是#rrggbb
格式。
<input type="color" id="background" name="background"
value="#e66465">
(18)date
type="date"
是一个只能输入日期的输入框,用户可以输入年月日,但是不能输入时分秒。输入格式是YYYY-MM-DD
。
<input type="date" id="start" name="start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31">
上面代码会显示一个输入框,默认日期是2018年7月22日。用户点击以后,会日期选择器,供用户选择新的日期。
该类型有以下配套属性。
max
:可以允许的最晚日期,格式为yyyy-MM-dd
。min
:可以允许的最早日期,格式为yyyy-MM-dd
。step
:步长值,一个数字,以天为单位。
(19)time
type="time"
是一个只能输入时间的输入框,可以输入时分秒,不能输入年月日。日期格式是24小时制的hh:mm
,如果包括秒数,格式则是hh:mm:ss
。日期选择器的形式则随浏览器不同而不同。
<input type="time" id="appt" name="appt"
min="9:00" max="18:00" required>
<small>营业时间上午9点到下午6点</small>
该类型有以下配套属性。
max
:允许的最晚时间。min
:允许的最早时间。readonly
:布尔属性,表示用户是否不可以编辑时间。step
:步长值,单位为秒。