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

网络
月亮的影子倒印在江面，宛如一个害羞的小姑娘，发出淡淡的光芒，桥上星星点点的路灯灯光，像一颗颗小星星，为人们照亮前方的道路，闭上眼睛，风夹带着蟋蟀的歌声，荡漾在路上。
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <!--表单内元素的form属性：为元素指定一个form属性，属性值为该表单的id-->
  9. <formid="testform">
  10. <inputtype="submit"/>
  11. </form>
  12. <textareaform="testform"></textarea><br/><hr/>
  13. <!--表单内元素的formaction属性：可以提交到不同页面-->
  14. <formid="form1"action="test.aspx">
  15. <inputtype="submit"name="s1"value="内部提交到test2"formaction="test2.aspx"/>
  16. <inputtype="submit"/>
  17. </form>
  18. <!--formmethod:可以为每个表单元素指定不同的提交方法-->
  19. <formid="form2"action="test.aspx">
  20. name:<inputtype="text"name="name"/><br/>
  21. <inputtype="submit"value="post方式提交"formmethod="post"/>
  22. <inputtype="submit"value="get方式提交"formmethod="get"/>
  23. </form><br/><hr/>
  24. <!--formenctype:可以指定不同的编码方式-->
  25. <formaction="test2.aspx"method="post">
  26. <inputtype="text"name="name"id="name"value="test"/>
  27. 文件:<inputtype="file"name="files"/>
  28. <inputtype="submit"value="上传"formaction="test.aspx"formenctype="multipart/form-data"/>
  29. <inputtype="submit"value="提交"/>
  30. </form><br/><hr/>
  31. <!--formtarget:提交后再何处打开页面-->
  32. <formaction="test.aspx">
  33. <inputtype="submit"name="s1"value="s1本页打开"formaction="test2.aspx"formtarget="_self"/>提交到test2
  34. <inputtype="submit"name="s"value="s新页打开"formaction="test.aspx"formtarget="_blank"/>提交到test
  35. </form><hr/>
  36. <!--autofocus:自动获得光标焦点-->
  37. <inputtype="text"autofocus/><br/>
  38. <!--control:通过该属性来访问该表单元素-->
  39. <form>
  40. <labelid="label">
  41. 邮编：<inputid="txtzip"maxlength="6"/><small>请输入6位数字</small>
  42. </label>
  43. <inputtype="button"value="设置默认值"onclick="setValue()"/>
  44. </form>
  45. <!--placeholder:未输入状态的输入提示-->
  46. <inputtype="text"placeholder="请输入内容"/><br/>
  47. <!--list:单行文本框的list属性，属性值为datalist的id。autocomplete：自动完成-->
  48. list属性：<inputtype="text"list="mylist"autocomplete="on"/>
  49. <datalistid="mylist">
  50. <optionvalue="第一">第一</option>
  51. <optionvalue="第二">第二</option>
  52. <optionvalue="第三">三</option>
  53. </datalist><br/>
  54. <!--pattern：设置正则表达式验证-->
  55. <form>
  56. 输入一个字母与三个大写字母：<inputtype="text"pattern="[0-9][A-Z]{3}"required=""/>
  57. <inputtype="submit"/>
  58. </form><br/>
  59. <!--indeterminate:说明复选框处于尚未明确是否选取状态-->
  60. <inputtype="checkbox"indeterminateid="cb"/>indeterminate<br/>
  61. <!--image的height和width设置图片高宽-->
  62. 设置图片宽高:<inputtype="image"src="img/webp.jpg"alt="编辑"width="23"height="23"/><br/>
  63. <!--textarea:maxlength和wrap属性：hard换行也要指定cols，soft不换行-->
  64. <formaction="test.aspx"method="post">
  65. <textareaname="name"maxlength="10"rows="5"cols="5"wrap="hard"></textarea>
  66. <inputtype="submit"value="提交"/>
  67. </form><br/>
  68. <!--url类型：只能提交url地址格式-->
  69. url:<inputtype="url"name="url"required=""/><inputtype="submit"/><br/>
  70. email:<inputtype="email"name="email"required=""/><inputtype="submit"/><br/>
  71. date(谷歌浏览器)：<inputtype="date"name="date"/><br/>
  72. time(谷歌浏览器):<inputtype="time"name="time"/><br/>
  73. datetime-local:<inputtype="datetime-local"name="datetime"value="2016-05-26T22:31:30"/><br/>
  74. <!--日期时间类型的step属性：单击调整时对选择值多大限定-->
  75. step：<inputtype="date"step="3"/><br/><hr/>
  76. number:<inputtype="number"value="25"min="10"min="20"max="30"step="2"/><br/>
  77. range：<inputtype="range"value="25"min="10"max="100"step="5"/><br/>
  78. search:<inputtype="search"/><br/>
  79. tel:<inputtype="tel"/><br/>
  80. color:<inputtype="color"/><br/>
  81. <hr/>
  82. output元素的追加：
  83. <formid="testform">
  84. 请选择一个值:<inputtype="range"id="range"min="5"max="100"step="5"value="10"onchange="out();"/>
  85. <outputid="out">10</output>
  86. </form>
  87. </body>
  88. </html>
  89. <scripttype="text/javascript">
  90. functionsetValue(){
  91. varlable=document.getElementById("label");
  92. vartxtbox=lable.control;//通过control该属性来访问该表单元素
  93. txtbox.value="213001";
  94. }
  95. //indeterminate测试设置为true
  96. varcb=document.getElementById("cb");
  97. cb.indeterminate=true;
  98. //选择的值output输出
  99. functionout(){
  100. Debug;
  101. varnumber=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