XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <> <formid="testform"> <inputtype="submit"/> </form> <textareaform="testform"></textarea><br/><hr/> <> <formid="form1"action="test.aspx"> <inputtype="submit"name="s1"value="内部提交到test2"formaction="test2.aspx"/> <inputtype="submit"/> </form> <> <formid="form2"action="test.aspx"> name:<inputtype="text"name="name"/><br/> <inputtype="submit"value="post方式提交"formmethod="post"/> <inputtype="submit"value="get方式提交"formmethod="get"/> </form><br/><hr/> <> <formaction="test2.aspx"method="post"> <inputtype="text"name="name"id="name"value="test"/> 文件:<inputtype="file"name="files"/> <inputtype="submit"value="上传"formaction="test.aspx"formenctype="multipart/form-data"/> <inputtype="submit"value="提交"/> </form><br/><hr/> <> <formaction="test.aspx"> <inputtype="submit"name="s1"value="s1本页打开"formaction="test2.aspx"formtarget="_self"/>提交到test2 <inputtype="submit"name="s"value="s新页打开"formaction="test.aspx"formtarget="_blank"/>提交到test </form><hr/> <> <inputtype="text"autofocus/><br/> <> <form> <labelid="label"> 邮编：<inputid="txtzip"maxlength="6"/><small>请输入6位数字</small> </label> <inputtype="button"value="设置默认值"onclick="setValue()"/> </form> <> <inputtype="text"placeholder="请输入内容"/><br/> <> list属性：<inputtype="text"list="mylist"autocomplete="on"/> <datalistid="mylist"> <optionvalue="第一">第一</option> <optionvalue="第二">第二</option> <optionvalue="第三">三</option> </datalist><br/> <> <form> 输入一个字母与三个大写字母：<inputtype="text"pattern="[0-9][A-Z]{3}"required=""/> <inputtype="submit"/> </form><br/> <> <inputtype="checkbox"indeterminateid="cb"/>indeterminate<br/> <> 设置图片宽高:<inputtype="image"src="img/webp.jpg"alt="编辑"width="23"height="23"/><br/> <> <formaction="test.aspx"method="post"> <textareaname="name"maxlength="10"rows="5"cols="5"wrap="hard"></textarea> <inputtype="submit"value="提交"/> </form><br/> <> url:<inputtype="url"name="url"required=""/><inputtype="submit"/><br/> email:<inputtype="email"name="email"required=""/><inputtype="submit"/><br/> date(谷歌浏览器)：<inputtype="date"name="date"/><br/> time(谷歌浏览器):<inputtype="time"name="time"/><br/> datetime-local:<inputtype="datetime-local"name="datetime"value="2016-05-26T22:31:30"/><br/> <> step：<inputtype="date"step="3"/><br/><hr/> number:<inputtype="number"value="25"min="10"min="20"max="30"step="2"/><br/> range：<inputtype="range"value="25"min="10"max="100"step="5"/><br/> search:<inputtype="search"/><br/> tel:<inputtype="tel"/><br/> color:<inputtype="color"/><br/> <hr/> output元素的追加： <formid="testform"> 请选择一个值:<inputtype="range"id="range"min="5"max="100"step="5"value="10"onchange="out();"/> <outputid="out">10</output> </form> </body> </html> <scripttype="text/javascript"> functionsetValue(){ varlable=document.getElementById("label"); vartxtbox=lable.control;//通过control该属性来访问该表单元素 txtbox.value="213001"; } //indeterminate测试设置为true varcb=document.getElementById("cb"); cb.indeterminate=true; //选择的值output输出 functionout(){ Debug; varnumber=document.getElementById("range").value; document.getElementById("out").value=number; } </script>
念念不忘，必有回响。技术成就梦想！
以上这篇html5表单及新增的改良元素详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。
原文地址：http://www.cnblogs.com/qinyi173/archive/2016/06/06/5565163.html
【html5表单及新增的改良元素详解】相关文章：