html5表单及新增的改良元素详解

2020-03-24 16:24:25

字体：大中小

来源：转载

供稿：网友

body !--表单内元素的form属性：为元素指定一个form属性，属性值为该表单的id-- formid= testform inputtype= submit / /form textareaform= testform /textarea br/ hr/ !--表单内元素的formaction属性：可以提交到不同页面-- formid= form1 action= test.aspx inputtype= submit name= s1 html' target='_blank'>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测试设置为true varcb=document.getElementById( cb cb.indeterminate=true; //选择的值output输出 functionout(){ Debug; varnumber=document.getElementById( range ).value; document.getElementById( out ).value=number; } /script
念念不忘，必有回响。技术成就梦想！以上这篇html5表单及新增的改良元素详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/qinyi173/archive/2016/06/06/5565163.htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：通过HTML设置超链接字体的颜色和点击后的字体颜色

下一篇：使用HTML5做个画图板的方法介绍