新表单属性
<form>
/ <input>
autocomplete 属性
autocomplete
适用于<form>
标签,以及以下类型的<input>
标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
autocomplete
,控制用户在输入时。浏览器是否显示填写的选项。
off
:关闭on
:开启
设置 autocomplete="off"
会有两种效果:
- 这会告诉浏览器,不要为了以后在类似表单上自动填充而保存用户输入的数据。但浏览器不一定遵守。
- 这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录,用户提交表单后,再点击返回按钮返回之前的表单页面,则会显示用户之前输入的数据。
登录场景
现代浏览器实现了内建的密码管理功能:当用户在一个网站上输入了用户名和密码,浏览器会为用户提供记忆功能。当用户再次访问这个网站时,浏览器使用保存的值自动填写登录字段。用户不需要记住已被浏览器存储的密码,因此他们可以放心选择更强的密码。
由于这个原因,许多现代浏览器都不支持在登录字段中设置 autocomplete="off"
,但浏览器检测到用户名和密码字段,它仍会为这次登录提供记忆功能,并且如果用户同意,用户在下一次访问网站时,浏览器会自动填写这些字段。
使用 autocomplete="new-password" 阻止自动填充
那么在一些不需要密码字段自动填充的场景下,该如何组织浏览器的自动填充行为呢?比如,定义了一个用户管理页面,其中用户可以为其他人指定新的密码。
我们可以尝试使用 autocomplete="new-password"
(这只是一个提示,浏览器不一定要遵守)。
<form>
novalidate 属性
novalidate
,布尔值属性,表示提交表单时不需要验证表单。
该属性可以被表单中的 <button>
、<input type="submit">
或 <input type="image">
元素中的 formnovalidate
属性覆盖。
<form novalidate></form>
<input>
autofocus 属性
autofocus
,页面加载时自动聚焦到此表单控件。
form 属性
form
属性可以将控件和一个或多个 <form>
元素联系在一起
<form id="form1"></form>
<form id="form2"></form>
<!-- "Last name" 字段没有在 form 表单之内,但它也是 form1 和 form2 表单的一部分。 -->
First name: <input type="text" form="form1 form2" />
form* 属性
适用
<input type="submit | image">
和<button>
-
formaction 用于描述表单提交的 URL 地址。会覆盖
<form>
元素中的action
属性。<input type="submit" formaction="demo-admin.php" value="提交" />
-
formenctype
描述了表单提交到服务器的数据编码(只对
form
表单中method="post"
表单),覆盖form
元素的enctype
属性。application/x-www-form-urlencoded
,默认值,它使用encodeURI()
之类的算法对文本进行 URL 编码后,以字符串形式发送表单数据。multipart/form-data
,使用 FormData API 来管理数据,从而允许将文件提交到服务器。 如果您的表单包含<input type="file">
的任何<input>
元素,则必须使用此编码类型。text/plain
,纯文本; 通常仅对调试有用,因此您可以轻松查看要提交的数据。
-
formmethod 指示了提交表单数据时要使用的 HTTP 方法,覆盖了
<form>
元素的method
属性。get
post
dialog
,用于指示按钮仅关闭与输入关联的对话框,而不传输表单数据。
-
formnovalidate 布尔属性,在表单提交时无需被验证,覆盖
<form>
元素的novalidate
属性。<input type="submit" formnovalidate value="不验证提交" />
-
formtarget 指示了提交表单后在何处显示收到的响应。
_self
,替换当前文档页_blank
,通常是一个与当前文档相同的窗口中的新选项卡_parent
_top
width / height 属性
适用于以下类型的
<input>
标签:image(图片提交按钮)
<input type="image" width="48" height="48" />
list 属性
自动填充选项的 <datalist>
的 id 值:
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
min / max 属性
适用于以下类型的
<input>
标签:number
,range
,date
,datetime-local
,month
,time
和week
。
用于为包含数字或日期的 input
类型添加约束,无法限制输入的值,但在提交时会做验证。
<!-- 输入 1980-01-01 之前的日期: -->
<input type="date" name="bday" max="1979-12-31" /><br />
<!-- 输入 2000-01-01 之后的日期: -->
<input type="date" name="bday" min="2000-01-02" /><br />
<!-- 数量 (在1和5之间): -->
<input type="number" name="quantity" min="1" max="5" />
multiple 属性
适用于以下类型的
<input>
标签:file
和
布尔属性,是否允许多个值。但输入多个 email 地址时,每个地址之间用逗号分隔(1@qq.com,2@qq.com
)。
Select images: <input type="file" name="img" multiple />
pattern 属性
适用于以下类型的
<input>
标签:text
,search
,url
,tel
,password
。
描述了一个正则表达式(用于验证 <input>
元素的值)。
<!-- 只能包含三个字母 -->
<input type="text" name="country_code" pattern="[A-Za-z]{3}" />
placeholder 属性
适用于以下类型的
<input>
标签:text
,search
,url
,telephone
,password
。
当表单控件为空时,控件中显示的内容,描述了控件所期待的值。
required 属性
布尔属性,是否为必填项(不为空)。
step 属性
适用于以下类型的
<input>
标签:number
,range
,date
,datetime-local
,month
,time
和week
。
声明一个数字间隔,step
属性可以与 max
和 min
属性创建一个区域值。
<input type="number" name="points" step="3" />
<input>
type 属性
Type | 描述 | 基础例子 |
---|---|---|
color | 定义拾色器。 | |
date | 输入日期的控件(年、月、日,不包括时间)。 | |
datetime-local | 输入日期和时间的控件,不包括时区。 | |
month | 输入年和月的控件,没有时区。 | |
range | 输入不需要精确的数字的一个范围组件,默认值为正中间的值。 | |
search | 用于搜索字符串的单行文字区域。可能有一个删除按钮,用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 | |
tel | 输入电话号码的控件。拥有动态键盘的设备(移动端)上会显示电话数字键盘。 | |
time | 用于输入时间的控件,不包括时区。 | |
url | 用于输入 URL 的控件。类似 text 输入,但有验证参数,在支持动态键盘的设备上有相应的键盘。 |
新表单元素
datalist
<datalist>
,包含了一组 <option>
元素(选项列表),可以为其他表单控件所用(list
属性):
<label
>Choose a browser from this list: <input list="browsers" name="myBrowser"
/></label>
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
output
<output>
,表示计算或用户操作的结果。
for
,其它影响计算结果的标签的 ID,可以多个。form
,与当前标签有关联的 form(从属的表单)。如果未指明该属性,output 标签必须是一个 form 的后代标签。name
<form oninput="result.value = parseInt(a.value)+parseInt(b.value)" id="form">
<input type="test" name="a" value="50" />+
<input type="test" name="b" value="10" />=
</form>
<output form="form" name="result" for="a b"></output>