XML/HTML Code 复制内容到剪贴板 <!DOCTYPE html>     < html >           < head >               < meta   charset = "UTF-8" >               < title > </ title >           </ head >           < body >               <!--表单内元素的form属性：为元素指定一个form属性，属性值为该表单的id-->             < form   id = "testform" >                   < input   type = "submit"   />               </ form >               < textarea   form = "testform" > </ textarea >   < br   /> < hr   />               <!--表单内元素的formaction属性：可以提交到不同页面-->             < form   id = "form1"   action = "test.aspx" >                   < input   type = "submit"   name = "s1"   value = "内部提交到test2"   formaction = "test2.aspx"   />                   < input   type = "submit"    />               </ form >               <!--formmethod:可以为每个表单元素指定不同的提交方法-->             < form   id = "form2"   action = "test.aspx" >                  name: < input   type = "text"   name = "name"   /> < 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"   name = "name"   id = "name"   value = "test"   />                  文件: < input   type = "file"   name = "files"   />                   < 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"   name = "s1"    value = "s1本页打开"   formaction = "test2.aspx"    formtarget = "_self" /> 提交到test2                  < input   type = "submit"   name = "s"    value = "s新页打开"   formaction = "test.aspx"    formtarget = "_blank" /> 提交到test              </ form > < hr   />               <!--autofocus:自动获得光标焦点-->             < input   type = "text"  autofocus  /> < br   />               <!--control:通过该属性来访问该表单元素-->             < form   >                   < label   id = "label" >                  邮编： < input   id = "txtzip"   maxlength = "6"   /> < small > 请输入6位数字 </ small >                   </ label >                   < input   type = "button"   value = "设置默认值"   onclick = "setValue()"   />               </ form >               <!--placeholder:未输入状态的输入提示-->             < input   type = "text"   placeholder = "请输入内容"   /> < br   />               <!--list:单行文本框的list属性，属性值为datalist的id。    autocomplete：自动完成-->            list属性： < input   type = "text"   list = "mylist"   autocomplete = "on" />               < datalist   id = "mylist"   >                   < 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  id = "cb"   /> indeterminate < br   />               <!--image的height和width设置图片高宽-->            设置图片宽高: < input   type = "image"   src = "img/webp.jpg"   alt = "编辑"   width = "23"   height = "23"   /> < br   />               <!--textarea:maxlength和wrap属性：hard换行也要指定cols，soft不换行-->             < form   action = "test.aspx"   method = "post" >                   < textarea   name = "name"   maxlength = "10"   rows = "5"   cols = "5"   wrap = "hard" > </ textarea >                   < input   type = "submit"   value = "提交"   />               </ form > < br   />            <!--url类型：只能提交url地址格式-->            url: < input   type = "url"   name = "url"    required = "" /> < input   type = "submit"   /> < br   />              email: < input   type = "email"   name = "email"   required = "" /> < input   type = "submit"   /> < br   />              date(谷歌浏览器)： < input   type = "date"   name = "date"    /> < br   />              time(谷歌浏览器): < input   type = "time"   name = "time"   /> < br   />              datetime-local: < input   type = "datetime-local"   name = "datetime"    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   id = "testform" >                  请选择一个值: < input   type = "range"   id = "range"   min = "5"   max = "100"   step = "5"   value = "10"   onchange = "out();" />                   < output   id = "out" > 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 >   

念念不忘，必有回响。技术成就梦想！

以上这篇html5表单及新增的改良元素详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://imgbuyun.weixiu-service.com/up79/202309/ls5dqyv3gmz.html