XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><!--表单内元素的form属性：为元素指定一个form属性，属性值为该表单的id--><formid="testform"><inputtype="submit"/></form><textareaform="testform"></textarea><br/><hr/><!--表单内元素的formaction属性：可以提交到不同页面--><formid="form1"action="test.aspx"><inputtype="submit"name="s1"value="内部提交到test2"formaction="test2.aspx"/><inputtype="submit"/></form><!--formmethod:可以为每个表单元素指定不同的提交方法--><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/><!--formenctype:可以指定不同的编码方式--><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/><!--formtarget:提交后再何处打开页面--><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/><!--autofocus:自动获得光标焦点--><inputtype="text"autofocus/><br/><!--control:通过该属性来访问该表单元素--><form><labelid="label">邮编：<inputid="txtzip"maxlength="6"/><small>请输入6位数字</small></label><inputtype="button"value="设置默认值"onclick="setValue()"/></form><!--placeholder:未输入状态的输入提示--><inputtype="text"placeholder="请输入内容"/><br/><!--list:单行文本框的list属性，属性值为datalist的id。autocomplete：自动完成-->list属性：<inputtype="text"list="mylist"autocomplete="on"/><datalistid="mylist"><optionvalue="第一">第一</option><optionvalue="第二">第二</option><optionvalue="第三">三</option></datalist><br/><!--pattern：设置正则表达式验证--><form>输入一个字母与三个大写字母：<inputtype="text"pattern="[0-9][A-Z]{3}"required=""/><inputtype="submit"/></form><br/><!--indeterminate:说明复选框处于尚未明确是否选取状态--><inputtype="checkbox"indeterminateid="cb"/>indeterminate<br/><!--image的height和width设置图片高宽-->设置图片宽高:<inputtype="image"src="img/webp.jpg"alt="编辑"width="23"height="23"/><br/><!--textarea:maxlength和wrap属性：hard换行也要指定cols，soft不换行--><formaction="test.aspx"method="post"><textareaname="name"maxlength="10"rows="5"cols="5"wrap="hard"></textarea><inputtype="submit"value="提交"/></form><br/><!--url类型：只能提交url地址格式-->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属性：单击调整时对选择值多大限定-->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测试设置为truevarcb=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
