javascript遇到html5的一些表单属性
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，inputtype="number"min="0"value="20"
rangeOverflow限制数值控件的最大值设置max，inputtype="number"max="100"value="20"
stepMismatch确保输入值符合min,max,step的设置设置maxminstep，inputtype="number"min="0"max="100"step="10"value="20"
</pre>
下面是input=number用的一个小函数：
functioninputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
*input值范围判断。。0-100.正正数
*range范围：使用<inputtype="number"min="0"max="100"/>
*if(inputV(v3,msgABC.t4)==false){returnfalse;}
***/
varkm=inpFields[0].validity,v3=inpFields.val();
console.log('不是数字：',km.badInput,'超出范围：',km.rangeOverflow,'小于最小值：',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true22返回true-1返回true
alert(tips);
returnfalse;
}
if(isNaN(parseInt(v3))){
console.log('NaN不判断.因为值为空');
returntrue;
}
elseif(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')
alert(tips);
returnfalse;
}
returntrue;
}
list特性和datalist:
<inputtype="url"list="url_list"name="link"/> <datalistid="url_list"> <optionlabel="W3School"value="http://www.w3school.com.cn"/> <optionlabel="Google"value="http://www.google.com"/> <optionlabel="Microsoft"value="http://www.microsoft.com"/> </datalist> <formaction="http://localhost/test.php"method="post"id="register"></form> url：<inputtype="url"name="url"form="register"required/><br/> user：<inputtype="text"name="user"value=""form="register"/><br/> pwd：<inputtype="password"name="pwd"value=""form="register"/><br/> <selectname="year"form="register"> <optionvalue="1970">1970</option> <optionvalue="1980">1980</option> <optionvalue="1990">1990</option> </select> <inputtype="submit"value="注册"form="register"/>
正则：<inputtype="text"name="tt"pattern="\d{3}"value=""form="register"/>
邮箱：<inputtype="email"name="youxinag"value=""placeholder="这是默认值"autofocus="autofocus"form="register"required="required"/><br/>
地址：<inputtype="url"name="url"form="register"form="register"/>
DATE:<inputtype="date"name="riqi"value=""form="register"/><br/>
TIME:<inputtype="time"name="shijian"value=""/>
MONTH:<inputtype="month"name="yue"value=""/>
周：<inputtype="week"name="zhou"value=""/>
数字：<inputtype="number"name="suzhi"value=""form="register"/><br/>
滑动条<inputtype="range"name="suzhi"value=""form="register"max="10"step="2"/>
搜索:<inputtype="search"name="huadong"value=""form="register"results="n"/>
颜色：<inputtype="color"name="huadong"form="register"/><br/>
<inputtype="file"id="a33"/>
自动填充表单<br/>
<inputtype="text"name="auto"value=""list="movie"/> <datalistid="movie"> <option>11111111</option> <option>243234234</option> <option>3324234</option> </datalist>
输出表单output
<formaction=""method="post"oninput="result.value=parseInt(no1.value*no2.value)"> <inputtype="number"name="no1"value=""/> <inputtype="number"name="no2"value=""/> <outputname="result"></output> </form>
以上所述就是本文的全部内容了，希望大家能够喜欢。