html5表单及新增的改良元素详解

1. !DOCTYPE html>     
2. html>     
3.     head>     
4.         meta charset="UTF-8">     
5.         tITle> /title>     
6.     /head>     
7.     body>     
8.         !--表单内元素的form属性：为元素指定一个form属性，属性值为该表单的id-->   
9.         form id="testform">     
10.             input type="submit" />     
11.         /form>     
12.         textarea form="testform"> /textarea>  br /> hr />     
13.         !--表单内元素的formaction属性：可以提交到不同页面-->   
14.         form id="form1" action="test.aspx">     
15.             input type="submit" name="s1" value="内部提交到test2" formaction="test2.aspx" />     
16.             input type="submit"  />     
17.         /form>     
18.         !--formmethod:可以为每个表单元素指定不同的提交方法-->   
19.         form id="form2" action="test.aspx">     
20.             name:input type="text" name="name" /> br />     
21.             input type="submit" value="post方式提交"  formmethod="post"/>     
22.             input type="submit" value="get方式提交"  formmethod="get"/>     
23.         /form> br/> hr />     
24.         !--formenctype:可以指定不同的编码方式-->   
25.         form action="test2.aspx" method="post">     
26.             input type="text" name="name" id="name" value="test" />     
27.             文件:input type="file" name="files" />     
28.             input type="submit"  value="上传" formaction="test.aspx"  formenctype="multipart/form-data"/>     
29.             input type="submit" value="提交" />     
30.         /form> br /> hr />     
31.         !--formtarget:提交后再何处打开页面-->   
32.         form action="test.aspx">     
33.             input type="submit" name="s1"  value="s1本页打开" formaction="test2.aspx"  formtarget="_self"/> 提交到test2    
34.             input type="submit" name="s"  value="s新页打开" formaction="test.aspx"  formtarget="_blank"/> 提交到test    
35.         /form> hr />     
36.         !--autofocus:自动获得光标焦点-->   
37.         input type="text" autofocus /> br />     
38.         !--control:通过该属性来访问该表单元素-->   
39.         form >     
40.             label id="label">     
41.             邮编：input id="txtzip" maxlength="6" /> small> 请输入6位数字/small>     
42.             /label>     
43.             input type="button" value="设置默认值" onclick="setValue()" />     
44.         /form>     
45.         !--placeholder:未输入状态的输入提示-->   
46.         input type="text" placeholder="请输入内容" /> br />     
47.         !--list:单行文本框的list属性，属性值为datalist的id。    autocomplete：自动完成-->   
48.         list属性：input type="text" list="mylist" autocomplete="on"/>     
49.         datalist id="mylist" >     
50.             option value="第一"> 第一/option>     
51.             option value="第二"> 第二/option>     
52.             option value="第三"> 三/option>     
53.         /datalist> br />     
54.         !--pattern：设置正则表达式验证-->   
55.         form>     
56.         输入一个字母与三个大写字母：input type="text" pattern="[0-9][A-Z]{ 3} "  required=""/>     
57.         input type="submit" />     
58.         /form> br />     
59.         !--indeterminate:说明复选框处于尚未明确是否选取状态-->   
60.         input type="checkbox" indeterminate id="cb" /> indeterminatebr />     
61.         !--image的height和width设置图片高宽-->   
62.         设置图片宽高:input type="image" src="img/webp.jpg" alt="编辑" width="23" height="23" /> br />     
63.         !--textarea:maxlength和wrap属性：hard换行也要指定cols，soft不换行-->   
64.         form action="test.aspx" method="post">     
65.             textarea name="name" maxlength="10" rows="5" cols="5" wrap="hard"> /textarea>     
66.             input type="submit" value="提交" />     
67.         /form> br />     
68.      !--url类型：只能提交url地址格式-->   
69.         url:input type="url" name="url"  required=""/> input type="submit" /> br />     
70.         email:input type="email" name="email" required=""/> input type="submit" /> br />     
71.         date(谷歌浏览器)：input type="date" name="date"  /> br />     
72.         time(谷歌浏览器):input type="time" name="time" /> br />     
73.         datetime-local:input type="datetime-local" name="datetime"  value="2016-05-26T22:31:30"/> br />     
74.         !--日期时间类型的step属性：单击调整时对选择值多大限定-->   
75.         step：input type="date" step="3" /> br /> hr />     
76.         number:input type="number"  value="25" min="10" min="20" max="30" step="2"  /> br />     
77.         range：input type="range" value="25" min="10" max="100" step="5" /> br />     
78.         seArch:input type="search"/> br />     
79.         tel:input type="tel"  /> br />     
80.         color:input type="color" /> br />     
81.         hr />     
82.         output元素的追加：    
83.         form id="testform">     
84.             请选择一个值:input type="range" id="range" min="5" max="100" step="5" value="10" onchange="out(); "/>     
85.             output id="out"> 10/output>     
86.         /form>     
87.     /body>     
88. /html>     
89. script type="text/javascript">     
90.     function setValue(){     
91.         VAR lable=document.getElementById("label");     
92.         var txtbox=lable.control; //通过control该属性来访问该表单元素    
93.         txtbox.value="213001";     
94.     }     
95.     //indeterminate测试设置为true    
96.     var cb=document.getElementById("cb");     
97.     cb.indeterminate=true;     
98.     //选择的值output输出    
99.     function out(){     
100.         Debug;     
101.         var number=document.getElementById("range").value;     
102.         document.getElementById("out").value=number;     
103.     }     
104. /script>   

念念不忘，必有回响。技术成就梦想！

以上这篇html5表单及新增的改良元素详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/qinyi173/archive/2016/06/06/5565163.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！