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

前端技术 2023/09/03 HTML
XML/HTML Code复制内容到剪贴板
  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\" />indeterminate<br />    
  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表单及新增的改良元素详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

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

本文地址：https://www.stayed.cn/item/8572

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案