首先讓我們來看一張表格
HTML5中的type.png
其中标有`红色5`的代表`HTML5`中推出的
測試程式碼:
<!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>
* 点击不同type的input标签会有不一样的弹出内容 * 如果发现w3cschool内容不全,建议去MDN搜索 * 并不是每一个新type属性,在PC端都有不同的显示 * color, date, number 这些效果较为明显
表單驗證
##用戶在輸入內容的時候不可能做到全部正確,比如email地址``電話長度
等等都有可能出現輸入錯誤,試想一下,當用戶辛辛苦苦的輸入了10多個表單內容,點選提交由於輸入錯誤,內容被清空了w3cSchool 查閱位置
[w3cSchool_事件屬性]w3School[w3cSchool_input標籤]w3cSchool
#email標籤
中的input<a href="//m.sbmmt.com/code/5991.html" target="_blank">的新</a>type屬性email自帶格式驗證
範例程式碼:
當我們點擊
提交
<!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>
當
控制項沒有輸入任何內容直接點擊提交時,會彈出提示
<!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>pattern 自訂驗證規則
標籤只能夠驗證內容是否為空,如果想要驗證的更為準確就需要自訂驗證規則了
#在需要新增自訂驗證規則的元素中新增
required
標籤
<!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>系统的提示消息只能够提示格式错误,如果想要更为详细的就需要我们通过js来自定义了
使用方法:
注册事件:oninput:输入时,oninvalid验证失败
设置自定义信息dom.setCustomValidity("这里输入提示信息");
示例代码:
输入时,会弹出oninput绑定的代码
输入中.png
验证失败时,会弹出oninvalid绑定的代码
验证失败.png
<!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>优点:
html5自带的验证使用便捷
不需要额外的js框架
缺点:
兼容性问题
如果想要兼容所有浏览器,建议使用js验证框架
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
以上是關於HTML5中input標籤（type屬性）的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
