html5的一些表单属性。

<pre>
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[].validity,v3=inpFields.val();

console.log('不是数字：',km.badInput,'超出范围：',km.rangeOverflow,'小于最小值：',km.rangeUnderflow);

if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true

alert(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://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

邮箱：<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" />
<hr />
自动填充表单<br/>
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>
<hr />
输出表单output
<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result" ></output>
</form>
<hr />

巴特西

html5的一些表单属性。

最新文章

热门文章