??? ??????

HTML5? type.png
其中標(biāo)有`紅色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>測(cè)試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>

? ?? ?? ??.png
??? ?? ??? ?? ?? ??
* 點(diǎn)擊不同type的input標(biāo)簽會(huì)有不一樣的彈出內(nèi)容
* 如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索
* 并不是每一個(gè)新type屬性,在PC端都有不同的顯示
* color, date, number 這些效果較為明顯
? ????? ???. ?????? ??????. email地址``電話長(zhǎng)度
?? ??? ??? ? ?? ??? ??? ? ????. ???? 10? ??? ?? ??? ??? ????? ?? ??? ?? ??? ???? ??? ?? ????
w3cSchool ?? ??
??? ?? api ??? ?? ??? ??
??? ??
H5
input
? ?? type
? ??? email
??? ?? ??? ?? ?????
?? ??:
??<a href="http://m.miracleart.cn/code/5991.html" target="_blank" > ??<code>提交<a href="http://m.miracleart.cn/code/5991.html" target="_blank">按鈕</a>
? ????< /code>, ??? email
??? ???? ??? ???? ???? ?????.
email
??? ??? ?? ??? ???? ?????. >

????? ????? ???? ????.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/>
<input type="submit">
</form>
</body>
</html>
?? ?? ??? ?? ??? ?? ??? ???? ???? ??? ??? ???.

requiredproperty.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>
<br/>
<input type="submit">
</form>
</body>
</html>
?? ??? ??
?? ??
??
??? ?? ??? ??? ? ????. ??? ????? ? ? ???? ???? ??? ?? ??? ?? ???? ???. required
- ???:
- ?? ??
required
- ??? ??
?? ?? ??
- ?? ??:
??? ??? ??? ? ??? ???? ??? ?? ????? ?????

?? ??.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}">
<br/>
<input type="submit">
</form>
</body>
</html>
自定義驗(yàn)證信息
系統(tǒng)的提示消息只能夠提示格式錯(cuò)誤,如果想要更為詳細(xì)的就需要我們通過(guò)js來(lái)自定義了

輸入中.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");
// 正在輸入時(shí)
telInput.oninput=function () {
this.setCustomValidity("請(qǐng)正確輸入哦");
}
// 驗(yàn)證失敗時(shí)
telInput.oninvalid=function(){
this.setCustomValidity("請(qǐng)不要輸入火星的手機(jī)號(hào)好嗎?");
};
</script>
總結(jié)
? ??? HTML5? ?? ??(?? ??)? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!