HTML form表单新增元素

相信大家对html中表单不陌生吧，下面我们来聊一下在H5里面表单新增的元素和废弃元素。

4表单相关新增元素和属性
4.1表单元素新增和废弃的属性 
表单新增的属性可以分成2类：
提交类：提交给服务器设置的相关属性，formaction、formmethod，formtype
控制类：required、autofocus、labels。

4.1.1 form属性
在H5之前，表单内的所有从属标签（下级标签），必须书写在form标签内部
H5:允许标签写在任何地方，但是，我们需要做两步操作，必须给form设置一个id，给元素设置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"/>

4.1.2  formaction
在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="提交0" formaction="xx.api"/>
    <input type="submit" value="提交1" formaction="xxx.api"/>
</form>
4.1.3 formmethod
<form id="testForm" method="get">
    请输入日期：<input name="date" type="text"/>
    密码：<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交0" formaction="xx.api" formmethod="get"/>
    <input type="submit" value="提交1" formaction="xxx.api" formmethod="post"/>
</form>

4.1.4 formenctype 编码方式
<form id="testForm" enctype="text/plain">
    请输入日期：<input name="date" type="text"/>
    密码：<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交0" formaction="xx.api" formenctype="text/plain"/>
    <input type="submit" value="提交1" formaction="xxx.api" formenctype="application/x-www-form-urlencoded"/>
</form>
4.1.5 formtarget
<form id="testForm">
    请输入日期：<input name="date" type="text"/>
    密码：<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交0" formtarget="_self"/>
    <input type="submit" value="提交1" formtarget="_blank" formenctype="application/x-www-form-urlencoded"/>
</form>
4.1.6 autofocus
为输入框或者按钮自动添加autofocus，当页面打开时，该页面自动获取焦点，光标焦点
如果对多个元素设置该属性，默认第一个有效
4.1.7  required
如果在输入框中设置required，如果该输入框没有内容的时候，点击提交的时候，会提示“请填写此字段”。
<form id="testForm">
    请输入日期：<input type="text"/>
    密码：<input  type="password" required/>
   <input type="submit" value="提交0" formtarget="_self" formaction="11.api" autofocus/>
    <input type="submit" value="提交1" formtarget="_blank" formaction="11.api"/>
</form>

4.1.8 labels
Labels 他的属性值是一个notelist
<form id="testForm">
    <label for="psd">请输入密码：</label>
    <input type="password" id="psd" required/>
    <label for="psd"></label>
    </div><br>
    <input type="button" οnclick="validate()" value="提交0"/>
</form>
</body>
<script>
    function validate(){
        var psd = document.getElementById("psd");
        psd.labels[1].innerHTML = "密码";
        psd.labels[1].setAttribute("style","font-size:9px;color:yellow");
    }
4.1.9 文本框placeholder
当输入框没有内容的时候，模糊显示placeholder的值
当输入框有内容的时候，placeholder被隐藏。
4.1.10 文本框 list
H5新增了list属性 这个属性的值 一个datalist元素的id的值datalist也是h5新增的一个元素，设置了list属性，该属性框有搜索功能，会从datalist中搜索出和输入相关的东西
<input list="languageList" id="selectLanguageList" placeholder="请输入你喜欢的编程语言"/>
<datalist id="languageList">
    <option>JS</option>
    <option>JAVA</option>
    <option>C#</option>
    <option>Object-c</option>
</datalist>
4.1.11 pattern
<form id="testForm">
    <div>
        <input pattern="[A-Z]{5}" placeholder="请输入五个大写的字符"/>
        <input type="submit" value="提交"/>
    </div>
</form>
Input标签输入的内容，可以配合pattern属性进行校验，pattern写校验的正则表达式。
4.1.12 input type=image的width和height
一般情况下，input标签设置width和height是没有效果的，但是对于type=image的时候，可以设置长度和宽度。

4.2 HTML5改良的input元素的种类 
 新增功能：
1.Color：当输入框中属性设置为color时，可以直接调用习题噢能够提供的调色盘，唯一的缺点是调色盘缺少一个透明度。这个属性有兼容性问题，目前发现在iphone'手机微信浏览器，没有弹出颜色选项卡
2.url：当输入框属性设置为url时，只接收地址输入域或者地址输入，当输入url为错误时，会有提示。具有自我检测功能。如果是移动端，虚拟键盘会切换到数据网址的虚拟键盘。
（.com/www.）
3.email
当输入框中的属性设置为email的时候，只接收邮箱输入，当输入的不为邮箱或者邮箱格式有误的时候，也会报错，同样具有自我检测功能.
如果是移动端，虚拟键盘会切换到数据邮箱的虚拟键盘（@）。
（.com/www.）
4.Tel
当输入框中的属性设置为tel时，那么输入框就是为电话号码专门设置的，他并没有特殊的检验规则，可以通过设置pattern属性来完成检测功能。
如果是移动端，虚拟键盘会切换到输入电话的虚拟键盘（数字、+、*、#）。
5.search：
Search类型的input元素是一种专门用来输入搜索关键词的文本框，search类型仅仅在外观上有所不同。
6.Number
7.当输入框属性设置为number的时候，可以设置输入框接收的数字的输入域，可以用num，Max实现这一点。同时还可以设置最小值和最大值 min和max属性
事件控件
8.range
<input type="date" name="date" value=""/>

当输入框属性设置为range的时候，可以设置一段范围内数值的文本框，它的类型显示为一个滑块，同样可以对它设置min和max控制范围，默认范围是0-100，当设置了step属性的时候，可以指定每次拖动的步幅
9.Date在input元素属性中是以日历形式显示给用户，缺点：只有在谷歌浏览器上才能够具有效果，其他浏览器暂时不支持，例如IE、火狐。了解即可，有兼容问题。
10.时间：
时间：<input type="time" name="time" value=""/>
浏览器支持情况同上
time属性input元素中一种输入时间的文本框；
他会接受用户输入的时间进行自我检测
了解即可，有兼容问题。

11.Datetime和前两个不同的就是直接出现文本框，让用户输入！
本人感觉和普通的输入框没有什么区别
了解即可，有兼容问题。

在input中综合了时间和日期的属性，浏览器兼容情况同上！
Week：
星期：<input type="week" name="week"/>
在input中新元素主要是显示日期第几周
注意：只会以周的形式呈现
了解即可，有兼容问题。

Month
月份：<input type="month" name="month"/>
这个属性主要显示月份，与date相比，月份在input元素少了天数；
对于设置了对应的input，如果input输入框没有写东西，提交的时候不做检验，但是如果填写了内容，填写的内容形式不对的话，提交的提示显示xxx不对，同时鼠标光标focus到该输入框
14.Output 元素
<output> 标签作为计算结果输出显示(比如执行脚本的输出)。
Firefox、Opera、Chrome 和 Safari 浏览器都支持 <output> 标签。
注意:Internet Explorer 浏览器不支持 <output> 标签。