时间:2021-05-26
input属性:
placeholder:输入框的默认值,向用户显示描述性说明文字或者提示信息
autocomplete:值为on和off。。on则代表当该字段填写并提交后再返回该页,再输入时会显示以前输入的。off则是关闭,包含用户输入数据的安全。默认为on
autofocus:页面载入时设置某个input自动获取焦点,注意该页面只能设置一个input的这个属性,设置多个相当于没有设置。
list特性和datalist:通过list为某个输入框增加下拉列表。。相当于js实现的“自动完成”功能,但是不能进行模糊查询
如果datalist内有2项值:"a34343"和"并24234",用户希望的是输入了3后这2个值都出现,但实际上一个也不出现。
它要求是完全匹配,比如输入a,则下拉a34343出现,接着输入4,那么这个下拉值也就没有了。
required:表单提交前该元素必须填写,即不能为空。不建议使用,因为提示信息‘请填写此字段',除非有属性可以代替该提示信息。
pattern:给input标签内写正则的地方。。type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。。
不建议给type为email或url的元素使用,因为提示信息固定,正则固定。。还不如js直接重写。
一些输入设置:
rangeUnderflow 限制数值控件的最小值 设置min, input type="number" min="0" value="20"
rangeOverflow 限制数值控件的最大值 设置max,input type="number" max="100" value="20"
stepMismatch 确保输入值符合min,max,step的设置 设置max min step, input type="number" min="0" max="100" step="10" value="20"
</pre>
下面是input=number用的一个小函数:
function inputV(inpFields,tips){//input值范围判断。。0-100.正正数/*** input值范围判断。。0-100.正正数* range 范围:使用<input type="number" min="0" max="100"/>* if(inputV(v3,msgABC.t4)==false){return false;}* **/var km=inpFields[0].validity,v3=inpFields.val();console.log('不是数字:',km.badInput,'超出范围:',km.rangeOverflow,'小于最小值:',km.rangeUnderflow);if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 truealert(tips);return false;}if(isNaN(parseInt(v3))){console.log('NaN 不判断.因为值为空');return true;}else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')alert(tips);return false;}return true;}list特性和datalist:
<input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3School" value="http://" /></datalist><form action="http://localhost/test.php" method="post" id="register"></form>url:<input type="url" name="url" form="register" required/><br />user:<input type="text" name="user" value="" form="register"/><br />pwd:<input type="password" name="pwd" value="" form="register" /><br /><select name="year" form="register"><option value="1970">1970</option> <option value="1980">1980</option> <option value="1990">1990</option> </select><input type="submit" value="注册" form="register"/>正则:<input type="text" name="tt" pattern="\d{3}" value="" form="register"/>
邮箱:<input type="email" name="youxinag" value="" placeholder="这是默认值" autofocus="autofocus" form="register" required="required" /><br />
地址:<input type="url" name="url" form="register" form="register"/>
DATE:<input type="date" name="riqi" value="" form="register"/><br />
TIME:<input type="time" name="shijian" value=""/>
MONTH:<input type="month" name="yue" value="" />
周:<input type="week" name="zhou" value="" />
数字:<input type="number" name="suzhi" value="" form="register" /><br />
滑动条<input type="range" name="suzhi" value="" form="register" max="10" step="2"/>
搜索 :<input type="search" name="huadong" value="" form="register" results="n"/>
颜色:<input type="color" name="huadong" form="register"/><br />
<input type="file" id="a33" />
自动填充表单<br/>
输出表单output
以上所述就是本文的全部内容了,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在HTML5增强的元素中,最值得关注的就是表单元素。在HTML5中,表单已经做了重大的修整,一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻
HTML5新的表单属性HTML5的和标签添加了几个新属性.新属性:autocompletenovalidate新属性:autocompleteautofocus
什么是HTML5的form自动完成功能?首先,HTML5中有个新属性autocomplete,autocomplete属性规定表单是否应该启用自动完成功能,它自
HTML5的表单新特性。HTML5的表单是在HTML4表单部分的基础上新增加了一些特性,这些特性不仅能满足用户新的需求,而且减少了开发人员的工作量,提高了开发效
首先,先介绍一下关于javascript中dataset属性。。html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。下面是元素应用