HTML5技术

html5表单及新增的改良元素 - Honker书生

字号+ 作者:H5之家 来源:博客园 2016-06-13 10:00 我要评论( )

!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/title/headbody!--表单内元素的form属性:为元素指定一个form属性,属性值为该表单的id--forminput type="submit" //formtextarea form="testform"/textarea br /hr /!--表单内元素的formaction属性:可以提

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--表单内元素的form属性:为元素指定一个form属性,属性值为该表单的id--> <form> <input type="submit" /> </form> <textarea form="testform"></textarea> <br /><hr /> <!--表单内元素的formaction属性:可以提交到不同页面--> <form action="test.aspx"> <input type="submit" value="内部提交到test2" formaction="test2.aspx" /> <input type="submit" /> </form> <!--formmethod:可以为每个表单元素指定不同的提交方法--> <form action="test.aspx"> name:<input type="text" /><br /> <input type="submit" value="post方式提交" formmethod="post"/> <input type="submit" value="get方式提交" formmethod="get"/> </form><br/><hr /> <!--formenctype:可以指定不同的编码方式--> <form action="test2.aspx" method="post"> <input type="text" value="test" /> 文件:<input type="file" /> <input type="submit" value="上传" formaction="test.aspx" formenctype="multipart/form-data"/> <input type="submit" value="提交" /> </form><br /><hr /> <!--formtarget:提交后再何处打开页面--> <form action="test.aspx"> <input type="submit" value="s1本页打开" formaction="test2.aspx" formtarget="_self"/>提交到test2 <input type="submit" value="s新页打开" formaction="test.aspx" formtarget="_blank"/>提交到test </form><hr /> <!--autofocus:自动获得光标焦点--> <input type="text" autofocus /><br /> <!--control:通过该属性来访问该表单元素--> <form > <label> 邮编:<input maxlength="6" /><small>请输入6位数字</small> </label> <input type="button" value="设置默认值" /> </form> <!--placeholder:未输入状态的输入提示--> <input type="text" placeholder="请输入内容" /><br /> <!--list:单行文本框的list属性,属性值为datalist的id。 autocomplete:自动完成--> list属性:<input type="text" list="mylist" autocomplete="on"/> <datalist > <option value="第一">第一</option> <option value="第二">第二</option> <option value="第三">三</option> </datalist><br /> <!--pattern:设置正则表达式验证--> <form> 输入一个字母与三个大写字母:<input type="text" pattern="[0-9][A-Z]{3}" required=""/> <input type="submit" /> </form><br /> <!--indeterminate:说明复选框处于尚未明确是否选取状态--> <input type="checkbox" indeterminate />indeterminate<br /> <!--image的height和width设置图片高宽--> 设置图片宽高:<input type="image" src="img/webp.jpg" alt="编辑" /><br /> <!--textarea:maxlength和wrap属性:hard换行也要指定cols,soft不换行--> <form action="test.aspx" method="post"> <textarea maxlength="10" rows="5" cols="5" wrap="hard"></textarea> <input type="submit" value="提交" /> </form><br /> <!--url类型:只能提交url地址格式--> url:<input type="url" required=""/><input type="submit" /><br /> email:<input type="email" required=""/><input type="submit" /><br /> date(谷歌浏览器):<input type="date" /><br /> time(谷歌浏览器):<input type="time" /><br /> datetime-local:<input type="datetime-local" value="2016-05-26T22:31:30"/><br /> <!--日期时间类型的step属性:单击调整时对选择值多大限定--> step:<input type="date" step="3" /><br /><hr /> number:<input type="number" value="25" min="10" min="20" max="30" step="2" /><br /> range:<input type="range" value="25" min="10" max="100" step="5" /><br /> search:<input type="search"/><br /> tel:<input type="tel" /><br /> color:<input type="color" /><br /> <hr /> output元素的追加: <form> 请选择一个值:<input type="range" min="5" max="100" step="5" value="10" onchange="out();"/> <output>10</output> </form> </body> </html> <script type="text/javascript"> function setValue(){ var lable=document.getElementById("label"); var txtbox=lable.control;//通过control该属性来访问该表单元素 txtbox.value="213001"; } //indeterminate测试设置为true var cb=document.getElementById("cb"); cb.indeterminate=true; //选择的值output输出 function out(){ Debug; var number=document.getElementById("range").value; document.getElementById("out").value=number; } </script>

  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评