å¨html5 ä¸ï¼å¨å¢å äºå¤§éç表åå ç´ ä¸å±æ§çåæ¶ï¼ä¹å¢å äºå¤§éå¨æ交æ¶å¯¹è¡¨åä¸è¡¨åå æ°å¢å ç´ è¿è¡å 容æææ§éªè¯çåè½ï¼æ¥ä¸æ¥æ们æ¥è¯´1ä¸èªå¨éªè¯ã
å¨html5ä¸ï¼éè¿å¯¹å ç´ ä½¿ç¨å±æ§çæ¹æ³ï¼å¯ä»¥å®ç°å¨è¡¨åæ交æ¶å±¥è¡èªå¨éªè¯çåè½ï¼å¨å±¥è¡ä»£ç åï¼å°å¨è¡¨åæ交æ¶èªå¨éªè¯è¾å ¥çå 容æ¯ä¸æ¯ä¸ºæ°åï¼å¦æéªè¯éä¸è¿ï¼å°æ¾ç¤ºæ¯ç ä¿¡æ¯æåã
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTFâ»">
<title>表åéªè¯ç¤ºä¾</title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text" required pattern="^\w.*$">
<input type="submit" value="æ交">
</form>
</body>
</html>
æ¥ä¸æ¥æ们æ¥ç1ä¸å¨html5 ä¸è¿½å çå ³äºå¯¹å ç´ å è¾å ¥å 容è¿è¡éå¶çå±æ§çæå®ã
1.requiredå±æ§
html5 ä¸æ°å¢çrequiredå±æ§å¯ä»¥å©ç¨å¨å¤§å¤æ°è¾å ¥å ç´ ä¸ï¼é¤éèå ç´ ï¼å¾çå ç´ æé®ä¸ï¼ãå¨æ交æ¶ï¼å¦æå ç´ ä¸å 容为空ç½ãåä¸å 许æ交ï¼åæ¶å¨é 读å¨ä¸æ¾ç¤ºä¿¡æ¯æ示æåï¼æ示ç¨æ·è¿ä¸ªå ç´ ä¸å¿ é¡»è¾å ¥å 容ï¼ææå¦å¾
2.patternå±æ§Â
ä¹æ¡ä»¶å°çæ°å¢çinputå ç´ ï¼æ¯å¦emailï¼numberï¼URLçï¼è¦æ±è¾å ¥å 容符å1å®çæ ¼å¼ï¼å¯¹inputå ç´ ä½¿ç¨patternå±æ§ï¼å¹¶ä¸å°å±æ§å¼è®¾ç½®ä¸ºæä¸ªæ ¼å¼çâââæ£åââ表达å¼ï¼å¨æ交æ¶ä¼æ£æ¥å ¶å 容æ¯ä¸æ¯ç¬¦åç»å®æ ¼å¼ãå½è¾å ¥çå 容ä¸ç¬¦åç»å®æ ¼å¼æ¶ï¼åä¸å 许æ交ï¼åæ¶å¨é 读å¨ä¸æ¾ç¤ºä¿¡æ¯æ示æåï¼æ交è¾å ¥çå å®¹å¿ é¡»ç¬¦åç»å®æ ¼å¼ï¼ä»£ç 以ä¸ï¼è¦æ±è¾å ¥å 容为1个æ°åä¸3个大ååæ¯ï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTFâ»">
<title>表åéªè¯ç¤ºä¾</title>
</head>
<body>
<form action="#" method="post">
请è¾å
¥æå®å
容:<input pattern="[0â¼][A-Z]{3}" name="part" placeholder="è¾å
¥:1个æ°å3个大ååæ¯">
<input type="submit" value="æ交">
</form>
</body>
</html>
å±¥è¡ææ以ä¸ï¼
3.minå±æ§ä¸maxå±æ§
minä¸maxè¿ä¸¤ä¸ªå±æ§æ¯æ¥æç±»åææ°å¼ç±»åçinputå ç´ çä¸ç¨å±æ§ï¼ä»ä»¬éå¶äºå¨inputå ç´ ä¸è¾å ¥çæ°å¼ä¸æ¥æçèå´ã
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTFâ»">
<title>表åéªè¯ç¤ºä¾</title>
</head>
<body>
<form action="#" method="post">
请è¾å
¥æ°å¼:<input type="number" name="point" min="0" max="100" />
<input type="submit" value="æ交">
</form>
</body>
</html>
å±¥è¡ææ以ä¸ï¼
4.stepå±æ§
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTFâ»">
<title>表åéªè¯ç¤ºä¾</title>
</head>
<body>
<form action="#" method="get">
<input type="number" name="point" step="5" />
<input type="submit" />
</form>
</body>
</html>