html5表单新增的类型:
邮箱验证:email网址验证:url电话号码验证:tel数字验证:number查找:search日期选择:date选择周:week选择月:month日期和时间:datetime 非本地时间日期和时间:fatetime-local 本地时间颜色:color范围值:range
文本框中,输入一次,下一次会自动提示的属性为autocomplete
初始化页面后,让第一个输入框为焦点的属性为autofocus
设置表单元素必须填写的属性为required
设置表单验证使用正则的属性为pattern
不验证的属性为novalidate(form),按钮为formnovalidate
如果要设置一个上传文件的input,需要在form标签中添加enctype属性,这里设置了autocomplete为off,不会有记住密码的功能。
placeholder默认显示的值,required表示必填字段,autofocus在刷新页面时焦点在这个输入框
pattern当中可以写正则表达式进行一个匹配
list属性可以为输入框添加一个候选,需要给出id字段的值,在下面写出datalist 并且id等于,然后写option value=""
label的for用于单选框比较多一点,也是id属性对应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5表单测试</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" name="" id="">
<label for="">用户名:</label>
<input type="text" name="user" placeholder="请输入用户名" required autofocus />
<label for="">工号:</label>
<input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[test]$" >
<input type="text" list="tips">
<datalist id = "tips">
<option value="test1"></option>
<option value="test2"></option>
</datalist>
<label for="man">男</label>
<input type="radio" name="sex" id="man" required>
<label for="feman">女</label>
<input type="radio" name="sex" id="feman" required>
<!-- <input type="submit" formnovalidate /> -->
<input type="submit">
</form>
</body>
</html>
validity属性中有很多属性用于判断输入框中是否满足一些约束,obj.validity.valueMissing为是否为空,如果不为空则是false,空则是true。obj.validity.patternMismatch表示正则是否匹配,匹配则是false,不匹配则是true
obj.setCustomValidity("必须是五个数字!");setCustomValidity可以设置提醒的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validity</title>
</head>
<body>
<form action="" method="post">
<label for="">id:</label>
<input type="text" name="username" id="username" oninput="checkit(this)" placeholder="请输入id" required pattern="^\d{5}$">
<input type="submit" value="提交">
</form>
<script>
function checkit(obj){
if( true== obj.validity.valueMissing){
obj.setCustomValidity("不能为空!");
}
else{
if (obj.validity.patternMismatch == true){
obj.setCustomValidity("必须是五个数字!");
}else{
obj.setCustomValidity('');
}
}
}
</script>
</body>
</html>