新type属性介绍

HTML5中的type.png
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
form {
width: 80%;
background-color: #F7F7F7;
}
label {
display: block;
width: 80%;
margin: 0 auto;
font-size: 30px;
font-weight: bold;
}
input {
display: block;
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<form action= "" >
<fieldset>
<legend>测试type属性
</legend>
<label for = "" >color:
</label>
<input type= "color" >
<label for = "" > date :
</label>
<input type= "date" >
<label for = "" >datetime:
</label>
<input type= "datetime" >
<label for = "" >datetime-local:
</label>
<input type= "datetime-local" >
<label for = "" >month:
</label>
<input type= "month" >
<label for = "" >week:
</label>
<input type= "week" >
<label for = "" >time:
</label>
<input type= "time" >
<label for = "" >email:
</label>
<input type= "email" >
<label for = "" >number:
</label>
<input type= "number" >
<label for = "" >range:
</label>
<input type= "range" >
<label for = "" >search:
</label>
<input type= "search" >
<label for = "" >tel:
</label>
<input type= "tel" >
<input type= "submit" >
</fieldset>
</form>
</body>
</html>
|
Salin selepas log masuk

input新type属性.png
新type属性的注意要点
1 2 3 4 | * 点击不同type的input标签会有不一样的弹出内容
* 如果发现w3cschool内容不全,建议去MDN搜索
* 并不是每一个新type属性,在PC端都有不同的显示
* color, date , number 这些效果较为明显
|
Salin selepas log masuk
兼容性问题
由于ie的兼容性的问题,在不同的浏览器中显示效果不尽相同
但是在移动设备上的支持效果较好,可以将该页面发送到手机进行测试
实际开发中可以按照需求选用
用户在输入内容的时候不可能做到全部正确,比如email地址``电话长度
等等都有可能出现输入错误,试想一下,当用户辛辛苦苦的输入了10多个表单内容,点击提交由于输入错误,内容被清空了
w3cSchool 查阅位置
下面把api文档的查阅位置添加如下
email标签
在H5
中的input
的新type
属性email
自带格式验证
示例代码:
当我们点击提交<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>
时,如果输入的email
格式不正确,会弹出提示信息
email
标签并不会验证内容是否为空,这个需要注意

email自带提示.png
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Title</title>
</head>
<body>
<form action= "" >
email:<input type= "email" name= "userEmail" >
<br/>
<input type= "submit" >
</form>
</body>
</html>
|
Salin selepas log masuk
对于没有自带验证效果的标签,就需要手动添加属性增加验证了

required属性.png
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Title</title>
</head>
<body>
<form action= "" >
email:<input type= "email" name= "userEmail" >
<br/>
tel:<input type= "tel" required>
<br/>
<input type= "submit" >
</form>
</body>
</html>
|
Salin selepas log masuk
pattern 自定义验证规则
使用required
标签只能够验证内容是否为空,如果想要验证的更为准确就需要自定义验证规则了

自定义验证.png
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Title</title>
</head>
<body>
<form action= "" >
email:<input type= "email" name= "userEmail" >
<br/>
tel:<input type= "tel" required pattern= "[0-9]{3}" >
<br/>
<input type= "submit" >
</form>
</body>
</html>
|
Salin selepas log masuk
自定义验证信息
系统的提示消息只能够提示格式错误,如果想要更为详细的就需要我们通过js来自定义了

输入中.png
验证失败时,会弹出oninvalid
绑定的代码

验证失败.png
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Title</title>
</head>
<body>
<form action= "" >
email:<input type= "email" name= "userEmail" >
<br/>
tel:<input type= "tel" required pattern= "[0-9]{3}" id= "telInput" >
<br/>
<input type= "submit" >
</form>
</body>
</html>
<script>
var telInput = document.getElementById( "telInput" );
telInput.oninput= function () {
this.setCustomValidity( "请正确输入哦" );
}
telInput.oninvalid= function (){
this.setCustomValidity( "请不要输入火星的手机号好吗?" );
};
</script>
|
Salin selepas log masuk
总结
Atas ialah kandungan terperinci 关于HTML5中input标签(type属性)的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!