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> 标签。