详解HTML5表单新增属性

2020-04-21 23:21:00易采站长站整理

autocomplete有三种值"on"、"off"、""(不指定)。不进行指定时,使用游览器的默认值。使用方法如下

<input type="text" name="greeting" list="greetings" autocomplete="on">

当你在文本框内输入如“我是人”点击提交后,返回前一页,再在文本框中输入“我”,就会出线提示“我是人”。

13. 文本框的pattern属性

相当于直接在html部分用正则表达式判断值输入是否符合要求。

请输入内容:<input type="text" pattern="[0-9][A-Z]{3}">

此段代码要求输入一个数字三个大写字母,如果输入不正确,则出现“请与所要求的内容保持一致(谷歌)”的提示。

14. 文本框的selectionDirection属性

针对input的text和textarea元素,当用户在这两个元素中用鼠标选取部分文字时,可以使用该元素来获取选择方向。

<script type="text/javascript">
function alertSelectionDirection() {
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="text" name="text">
<input type="button" value="惦记我" onclick="alertSelectionDirection()" >
</form>

15. 复选框的indeterminate属性

对于复选框来说,过去只有选取和与非选取状态,html5中,可以在js中对该元素使用indeterminate属性,以说明复选框“尚未明确选取”状态。

 <script>
var cb = document.getElementById("cb");
//将indeterminate的属性设置为true
cb.indeterminate = true;
</script>
<input type="checkbox" indeterminate id="cb">indeterminate属性测试

16. image提交按钮的height属性与width属性

height:指定图片按钮中图片的高度;
width:指定图片按钮中图片的宽度;

<input type="image" src="img/2.png" width="23" height="23">

17. textarea元素的maxlength属性与wrap属性

maxlength :使用整数值进行设定,用于限定textarea元素中可输入文字的个数。
wrap:可指定属性值为soft与hard.当属性为hard时,在没有用回车键而是文字超出一排规定范围而自动换行时,提交表单时会在换行处添加一个换行标志。