1表单元素新增和废弃的属性
表单新增的属性可以分成两类：
提交类：提交给副武器的相关属性，formaction，formmcthod，formtype
控制类：required，antofocus，labels
(1) form属性：
在H5之前，表单内所有的从属标签（下级标签），必须书写在form标签内部。
H5：允许标签写在任何地方，但是，需要做两步操作：（1）给form设置一个id（2）给元素设置form属性，form属性的值就是form id属性的值。
<form action="" id="testForm"> 请输入日期：<input name="date" type="text"/> <input type="submit" value="提交"/> </form> 请输入密码：<input form="testForm"name="psd"type="password"/>
(2) formation
在H5之前，表单内所有的submit，只能提交到一个统一的地址，也就是指定的action，
H5可以为每一个submit设置不同的action，是通过设置formaction属性来实现的。
<form id="testForm"> 请输入日期：<input name="date" type="text"/> 请输入密码：<input form="testForm" name="psd" type="password"/> <input type="submit" value="提交1"formaction="xx.api"/> <input type="submit" value="提交2"formaction="xx2.api"/> </form>
(3)formmethod
<form> 请输入日期：<input name="date" type="text"/> 请输入密码：<input name="psd" type="password"/> <input type="submit" value="提交1" formmethod="GET"/> </form>
(4) formenctype 编码方式
<form> 请输入日期：<input name="date" type="text"/> 请输入密码：<input name="psd" type="password"/> <input type="submit" value="提交1" formenctype="text/plain"/> </form>
(5)formtarget
<form> 请输入日期：<input name="date" type="text"/> 请输入密码：<input name="psd" type="password"/> <input type="submit" value="提交1"formtarget="_self"/> <input type="submit" value="提交1"formtarget="_blank"/> </form>
(6) autofocus
为输入框或者按钮添加autofocus属性，当页面打开时，该元素自动获取光标焦点。
注意：如果对多个元素设置了autofocus，则只对第一个设置了autofocus的元素生效。
<form> 请输入日期：<input name="date" type="text"/> 请输入密码：<input name="psd" type="password" /> <input type="submit" value="提交1"formtarget="_blank" autofocus/> </form>
(7)required
如果在输入框设置了该属性，在输入框没有输入内容的时候，点击提交按钮，会提示“请填写此字段。”
<form> 请输入日期：<input name="date" type="text" required/> 请输入密码：<input name="psd" type="password" /> <input type="submit" value="提交1" formtarget="_blank" autofocus/> </form>
8.output
注意：IE浏览器不支持该标签。
9.labels
labels它的属性值是一个notelist
<form action="" id="testForm"> <div> <label for="data">请输入日期：</label><input id="data" type="text"/><br> </div> <div> <label for="psd">请输入密码：</label> <inputform="testForm"id="psd"type="password"/> <label for="psd"></label> </div> <input type="button" οnclick="valiDate()" value="提交"/> </form> </body> <script> function valiDate(){ var psd = document.getElementById("psd"); psd.labels[1].innerHTML = "密码"; psd.labels[1].setAttribute("style","font-size:9px;color:yellow") } </script>
10.文本框placeholder
当输入框没有内容的时候，模糊显示placeholder的值，
当输入框有内容的时候，placeholder被隐藏
11.文本框list
h5新增了list属性，这个属性“搜索”功能，会从datalist中搜索出和输入相关的东西。
<form id="testForm"> <div> <input id="selectLanguage" list="languageList" name="date" placeholder="请选择你喜欢的编程语言" type="text"/><br> <datalist id="languageList"> <option>JS</option> <option>JAVA</option> <option>C#</option> <option>Object-C</option> </datalist> </div> </form>
12.pattern
input输入的内容，可以通过配合pattern属性进行校验，pattern写校验的正则表达式。
<div> <input pattern="[A-Z]{5}" placeholder="请输入5个大写的字符" type="text"/> <input type="submit" value="提交"/> </div>
4.2 HTML5改良的input元素的种类
1.颜色输入框
输入框中type属性设置为color的时候，可以直接调用系统提供的调色盘。唯一的缺点就是缺少了对透明度的调试功能。这个属性有兼容性问题，目前发现在iPhone手机微信浏览器桑没法弹窗颜色选项卡。
2.地址输入框
当输入框中type属性设置为URL的时候，只接受地址输入，当输入的地址或格式有误，会不允许提交。具有自我检测功能。如果在移动端虚拟键盘会自动切换成与网址相关的键入页面。（www./.com）
3.邮箱输入框
当输入框中type属性设置为email的时候，该输入框会有一个判断功能，若输入内容不为邮箱，或者邮箱格式有误，该输入框会不允许提交。如果在移动端虚拟键盘会自动切换成与网址相关的键入页面。(@/.)
4.电话输入框
当输入框中type属性设置为tel的时候，该输入框是为电话号码专门设置的，但是它并没有任何的检验规则，可以通过设置pattern进行设置规则。
如果在移动端虚拟键盘会自动切换成与手机的数字键盘。
5.搜索输入框
search类型的输入框是一种专门用来搜索关键词的文本框，search类型与text类型仅仅在外形上有所不同。
6.数字输入框
input的type属性设为number，可以设置输入框所接受的数字的输入域，可以用min，max来控制所输入数字的范围。
7.range
当输入框属性设置为“range”的时候，可以设置一段范围内数值的文本框，它的类型显示为一个滑块，同样可以对它设置min和max控制范围，默认范围是0-100，当设置了step属性的时候，可以指定拖动的步幅。
对于设置了type的input，如果input输入框是空的，提交的时候不做检验，但是如果填写了内容，而且填写的内容格式不对的话，提交的收会有提示框出现，同时鼠标光标会聚焦到该输入框。
时间控件:
日期：<input type="date" name="date" value=""/><br>
date在input元素属性是以日历的形式显示给用户，缺点是该属性只有在谷歌浏览器支持，
在其他浏览器上显示的就是一个普通的文本框。
时间：<input type="time" name="time" value="10:20"/>
time属性就是input元素中一种专门输入时间的文本框，它会接受用户输入的时间并进行判断输入是否有误，同样的，该属性目前只有谷歌浏览器支持。
时间+日期：<input type="datetime" name="datetime" value="2017-08-25"/><br>
datetime和前两个不同的就是直接出现文本框，让用户输入。
时间+日期：<input type="datetime-local" name="datetime-local" value="2017-08-25"/><br>
datetime 在input中综合了时间和日期的属性，该效果只在谷歌浏览器上显示。
周 <input type="week" name="week"/>
在input中新属性中主要是显示日期第几周，注：只会以周的形式显示。
月份： <input type="month" name="month" value="5"/>
month属性主要显示月份，跟date相比较月份在input元素中少了后面的天数。
