HTML5表单新特性-优快云博客

本文介绍了HTML5中新增的表单元素如<datalist>、<keygen>、<output>，以及新属性如autocomplete、novalidate等，还有新增的input类型如email、tel、url、search、color、number、range、date等，这些新特性增强了网页表单的功能性和用户体验。

新增的表单元素：

<datalist>：规定输入域的选项列表，与 input 配合使用。当用户输入的内容与选项列表的文字相同时，将会智能感应显示。

<!-- 鼠标放到 input 上会在右边出现一个小倒三角形，点击会弹出 datalist 的选项列表；也可以手写输入，会显示满足的列表 -->
<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

新增的表单属性：

HTML5 的 <form> 标签和 <input> 标签添加了几个新属性。

`<form>` 的新属性：

autocomplete：表单是否有自动完成功能。属性值为 on/off。

自动完成功能：允许浏览器自动记录用户之前输入的值，当用户再次输入时自动填写字段。也就是浏览器会保留以前键入的内容，当输入框再次获得焦点时，会弹出有以前内容的下拉列表。
密码框没有自动完成功能。

novalidate：提交表单时是否进行验证。

<form action=”” method=”” novalidate=”true”>
   <input type=”email” >
   <input type=”submit” value=”提交”>
</form>

`<input>` 的新属性：

width：指定<input>元素的宽度；height：指定<input> 元素的高度。
min：规定输入框所输入的最小值； max：规定输入框所输入的最大值；step：规定输入框加减时合法的数字间隔。
autocomplete：<input>元素是否拥有自动完成功能。属性值为 on/off。
autofoucs：<input>元素是否自动获得焦点，属性值为 on/off。
placeholder：是为用户输入<input>中的字段进行提示的淡灰色的简短信息。当输入任意字符时，提示信息将会消失。
required：规定必须在提交表单之前填写输入字段。
multiple：规定 <input> 元素中可选择多个值。
pattern：描述了一个正则表达式，用于验证<input>元素的值。

<form action="/example/html5/demo_form.asp" method="get">
	<input type="text" name="country_code" pattern="[A-z]{3}"mtitle="三个字母的国家代码" />
	<input type="submit" />
</form>

在这里插入图片描述

form：规定输入域所属的一个或多个表单。<input>位于<form></form>表单外部，但因为指定的 form 属性，并且属性值为表单的 id 值，所以仍然是表单的一部分。
```
<form action=”” method=”get” id=”f1”>
	    ……
</form>     

<input type=”submit” form=”f1”>
```
list：规定输入域的 datalist，datalist 是输入域的选项列表，其属性值是 datalist 的 id 值。
表单重写属性：
- formaction：用于定义表单提交的 URL 地址，会覆盖 <form> 元素中的 action 属性。
- formmethod：用于定义表单提交的方式，会覆盖了 <form> 元素的 method 属性。
- formtarget ：用于定义表单提交数据接收后的展示，会覆盖 <form>元素的 target 属性。
- formenctype：用于定义表单提交到服务器的数据编码，会覆盖 <form>元素的 enctype 属性。
- formnovalidate:：用于定义 <input> 元素在表单提交时是否需要被验证，会覆盖 <form> 元素的novalidate属性。

新增的 input 类型：

email：定义用于输入 email 地址的输入框。外观上就是一个纯文本框。在提交表单时，会自动验证值是否有效，有效自动提交，否则弹出提示框。
```
<input type=”email”>
```
tel：定义用于输入电话号码的输入框（不限于数字，是字符串，因为有的会有区号）。外观上就是一个纯文本框。
url：定义用于输入 url 网址的输入框。外观上就是一个纯文本框。在提交表单时，会自动验证值是否有效，有效自动提交，否则弹出提示框。
number：定义用于输入数字的输入框。外观是一个文本输入框，获得焦点右侧有上下小三角形，点击就会按照步幅来增加或减少数值。当输入的数字在最大最小范围之外，提交时会弹出提示框。属性有 value、max、min、step。
range：定义用于精确值不重要的输入数字的控件。与 number 功能相似，外观不同，是一条横杠上有滑动块。属性有 value、max、min、step。
date：定义日期选择器。文本框中默认是年/月/日，选择日期后，获得焦点右侧有删除符号x，再右侧有上下小三角形，点击年或月或日后，点击小三角形就会增加或减少日期，再右侧有倒三角形，点击会弹出一个日历表，能用来选择日期。

dateTime：定义一个日期和时间选择器（UTC 时间）。
dateTime-local：定义一个日期和时间选择器（不带时区）。
month：定义—年–月控件。
week：定义—年第–周控件。
time:：定义时分秒的控件。
search：定义用于输入搜索字符串的文本输入框。为纯文本框，输入字符后右侧有删除符号 x。
color：定义拾色器。文本框中有一个黑色块，点击出现拾色器。