html5表单及新增的改良元素详解
更新时间:2023-04-03 05:01:13 阅读： 评论：0
xml/html code
复制内容到剪贴板
<!doctypehtml> <html> <head> <metachart=“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> <!–for尺度松木家具mmethod:可以为每个表单元素指定不同的提交方法–><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=“_lf”/>提交到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=“tvalue()”/> </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”> <textareanam杂合突变e=“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/>高考录取通知书查询; arch:<inputtype=“arch”/><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”> functiontvalue(){ varlable=document.getelementbyid(“label”); vartxtbox=lable.control;//通过control该属性来访问该表单元素 txtbox.value=“213001”; } //indeterminate测试设置为true varcb=document.getelementbyid(“cb”); cb.indeterminate=true; //选择的值o中国霸气语录utput输出 functionout(){ debug; varnumber=document.getelementbyid(“range”).value; document.getelementbyid(“out”).value=number; } </script>念念不忘，必有回响。技术成就梦想！
以上这篇html5表单及新增的改良元素详解就是www.887551.com分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持www.887551.com。
原文地址：
本文word下载地址：html5表单及新增的改良元素详解.doc
本文 PDF 下载地址：html5表单及新增的改良元素详解.pdf
