新增的input输入类型
HTML5中增加了表单方面的诸多功能，包括增加input输入类型、表单元素、form属性和input属性等。
新的input输入类型
- email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值，如果不是一个有效的E-mail地址，该输入框不允许提交该表单。
<input type="email" name="user_email">
- url类型的input元素提供用于输入url地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交。
<input type="url" name="user_url">
- number类型的input元素提供用于输入数值的文本框，可以设定所接受的数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。
<input type="number" name="number1"min="1" max="20" step="4">
max:规定允许的最大值
min：规定允许的最小值
step：规定合法的数字间隔（例如step="4",合法数字是-4、0、4、8等）
value：规定默认值
- range类型的input元素提供用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。
<input type="range" name="range1"min="1" max="30" step="4">
max:规定允许的最大值
min：规定允许的最小值
step：规定合法的数字间隔（例如step="4",合法数字是-4、0、4、8等）
value：规定默认值
- Date Pickers日期检出器是网页中经常要用到的一种控件，HTML5提供了多个可用于选取日期和时间的输入类型，即6中日期检出器控件，分别用于选择以下日期格式：日期、月、星期、时间、日期+时间和日期+时间+时区。
|
输入类型 |
HTML代码 |
功能与说明 |
|
date |
<input type="date"> |
选取日、月、年 |
|
month |
<input type="month"> |
选取月、年 |
|
week |
<input type="week"> |
选取周和年 |
|
time |
<input type="time"> |
选取时间(小时和分钟) |
|
datetime |
<input type="datetime"> |
选取时间、日、月、年(UTC时间) |
|
datetime-local |
<input type="datetime-local"> |
选取时间、日、月、年(本地时间) |
date、month、week、time类型支持使用一些属性来限定时间的大小范围或合法的时间间隔。
- search类型的input元素提供用于输入搜索关键词的文本框。
<input type="search" name="search1">
- tel类型的input元素提供专门用于输入电话号码的文本框。它并不限定只输入数字。
<input type="tel" name="tel1">
- color类型的input元素提供专门用户设置颜色的文本框。通过单击文本框，可以快速打开拾色器面板，方便用户可视化选择一种颜色。
<input type="color" name="color1">
新增的input属性
input元素不但新增了输入类型，还新增了几个input属性，用于指定输入类型的行为和限制，这些属性分别是autocomplete、autofocus、form、formoverrides、placeholder、height和width、min和max、step、list、pattern以及required。
- 新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容输入。autocomplete属性有3种值：on、off和空值。
- 新增的autofocus属性可以使得在页面加载时，某表单控件自动获得焦点，它是一个布尔值。这些控件可以是文本框、复选框、单选按钮和普通按钮等所有<input>标签的类型。在同一页面中只能指定一个antofocus属性值。
- 新增form属性可以把表单内的从属元素写在页面中的任意位置，然后只需要为这个元素指定form属性并设置属性值为该表单的id。
<form action="" method="get"id="form1">
如果一个form属性要引用两个或两个以上的表单，则需要使用空格将表单id分隔开。
<input type="text" name="address1"form="form1 form2 form3" />
- 新增的form override表单重新属性，用于重写form元素的某些属性设定。表单重写属性并不适用于所有的input输入类型，而是只适用于submit和image输入类型。
- formaction:用于重写表单的action属性（实现将表单提交到不同的页面中去）；
- formenctype：用于重写表单的enctype属性；
- formmethod：用于重写表单的method属性；
- formnovalidate：用于重写表单的novalidate属性；
- formtarget：用于重写表单的target属性
- 新增的height和width属性规定用于image类型的input标签的图像高度和宽度，只适用于image类型的input标签。
- 新增的datalist元素可以实现数据列表的下拉效果，外观类似autocomplete，用户可从列表中选择，也可自行输入，而list属性用于指定输入框所绑定的datalist元素，其值是某个datalist的id。
- 新增的min、max、step属性用于为包含数字或日期的input输入类型规定限制，适用于date、pickers、number和range标签。
max:规定输入框所允许的最大值
min：规定输入框所允许的最小值
step：规定输入框合法的数字间隔
- 新增的multiple属性支持一次性选择多个文件，并且该属性同时支持新增的email类型。
选择要上传的多个文件：
<input type="file" name="img"multiple="multiple" />
- 新增pattern属性用于验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配，适用于text、search、url、telephone、email、password等input标签。pattern属性允许用户自定义一个正则表达式，但用户的输入必须符合正则表达式所指定的规则。
- 新增placeholder属性用于为input类型的输入框提供一种提示（hint），这些提示可以描述输入框期待用户输入何种内容，在输入框为空时显式出现，而当输入框获得焦点时则会消失。
- 新增required属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。该属性适用于以下input输入类型：text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file。
新增的form元素
HTMl5新增了几个form元素，分别是datalist、keygen和output。
- 新增的datalist元素用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一预设的项，从而免去输入的麻烦。
- 新增的keygen元素是密钥对生成器（key-pair generator），能够使用户验证更为可靠。
<keygen name="security"/>
- 新增的output元素用于在浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签。
新增的form属性
- 新增的autocomplete属性用于规定form中所以元素都拥有自动完成功能
- 新增的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所以元素的有效性检查
来源：https://www.cnblogs.com/liuling608/p/6804236.html