HTML5:增强型表单

1,401 阅读5分钟

新表单属性

<form> / <input> autocomplete 属性

autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

autocomplete,控制用户在输入时。浏览器是否显示填写的选项。

  • off:关闭
  • on:开启

01.png

设置 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>

01.png

min / max 属性

适用于以下类型的 <input> 标签: number, range, date, datetime-local, month, timeweek

用于为包含数字或日期的 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> 标签:fileemail

布尔属性,是否允许多个值。但输入多个 email 地址时,每个地址之间用逗号分隔(1@qq.com,2@qq.com)。

Select images: <input type="file" name="img" multiple />

pattern 属性

适用于以下类型的 <input> 标签: text, search, url, tel, emailpassword

描述了一个正则表达式(用于验证 <input> 元素的值)。

<!-- 只能包含三个字母 -->
<input type="text" name="country_code" pattern="[A-Za-z]{3}" />

placeholder 属性

适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password

当表单控件为空时,控件中显示的内容,描述了控件所期待的值。

required 属性

布尔属性,是否为必填项(不为空)。

step 属性

适用于以下类型的 <input> 标签: number, range, date, datetime-local, month, timeweek

声明一个数字间隔,step 属性可以与 maxmin 属性创建一个区域值。

<input type="number" name="points" step="3" />

<input> type 属性

Type描述基础例子
color定义拾色器。01.png
date输入日期的控件(年、月、日,不包括时间)。02.png
datetime-local输入日期和时间的控件,不包括时区。01.png
month输入年和月的控件,没有时区。01.png
range输入不需要精确的数字的一个范围组件,默认值为正中间的值。02.png
search用于搜索字符串的单行文字区域。可能有一个删除按钮,用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。01.png
tel输入电话号码的控件。拥有动态键盘的设备(移动端)上会显示电话数字键盘。03.png
time用于输入时间的控件,不包括时区。04.png
url用于输入 URL 的控件。类似 text 输入,但有验证参数,在支持动态键盘的设备上有相应的键盘。01.png

新表单元素

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>

参考资料

HTML5 系列