h5 input新增属性

最新推荐文章于 2023-09-14 00:37:20 发布

weixin_44387746

最新推荐文章于 2023-09-14 00:37:20 发布

阅读量927

点赞数 1

本文详细介绍了HTML5中新增的表单控件及其属性，包括颜色选择器、日期选择器、时间选择器等，深入探讨了这些控件如何提升用户体验及网页交互能力。

1.autofocus 页面加载完后获得焦点
//当页面加载时获得焦点

autocomplete 是否显示与现在输入内容相匹配得历史输入记录
//可设置得值：no-显示匹配的历史输入记录 off 不显示历史输入记录
form 设置元素归属表单的ID
//用于声明元素属于哪个表单，而不关心元素在页面哪个位置，表单之外都行
formaction 设置表单action属性的值

First name:
Last name:

formenctype 覆盖表单enctype属性的值

First name:

formmethod 覆盖表单method属性的值

First name:
Last name:

formnovalidate 关闭表单的验证

E-mail:

formtarget 设置表单target属性的值

First name:
Last name:

max min 设置最大/最小值
minlength 设置输入最小程度
pattern 设置元素文本内容需匹配的正则表达式
//浏览器不会验证空值，若想必填可加上 required 属性
//若含有 title 属性的值，当匹配失败会显示 title 的信息

手机号码：

placeholder 设置预先显示内容
readonly 设置元素是否只读
required 设置是否为必填项
方法
boolean checkValidity() 判断控件的内容是否校验通过
console.log(document.getElementById(‘webURL’).checkValidity()); // => false ：验证不通过 true : 验证通过
1
void setCustomValidity(string msg) 设置校验不通过时的自定义信息

新的密码：

确认密码：

// 校验2个密码是否一致
var validityPwd = function(){
var newPwd = document.getElementById(‘newPwd’);
var newPwdConfirm = document.getElementById(‘newPwdConfirm’);
if(newPwd.value != newPwdConfirm.value){
newPwdConfirm.setCustomValidity(‘两次密码输入不一致’);
}else{
newPwdConfirm.setCustomValidity(’’);
}
}

新控件