HTML5 ?? ??
HTML5 擁有多個新的表單輸入類型。 ??? ??? ??? ? ?? ?? ?? ? ??? ?????.
? ???? ??? ?? ??? ?? ??? ?? ???? ??? ?????.
color
date
-
????
????-??
???
?
??
??
??
??
??
url
?
??: ?? ?? ????? ??? ?? ??? ???? ?? ???? ?? ?? ?? ?????? ??? ? ????. ???? ???? ?? ??? ??? ??? ? ????.
?? ??: ??
?? ??? ?? ??? ???? ??? ?? ?? ??? ???? ? ?????. ??:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action=" " method="post"> 選擇你喜歡的顏色: <input type="color" name="favcolor"><br> <input type="submit"> </form> <?php echo $_POST['favcolor']; ?> </body> </html>
????? ???? ??? ???
?? ??: ??
?? ?? ?? ??? ???? ??? ??? ? ????.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
????? ???? ??? ???
?? ??: datetime
datetime ??? ??? ?????. you to select a date ( UTC time).
????
?? ? ?? ???? ??(?? ??):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 (日期和時間): <input type="datetime" name="bdaytime"> <input type="submit"> </form> </body> </html>
????? ???? ??? ???.
?? ?? : datetime-local
datetime-local ??? ???? ??? ??? ??? ? ????(??? ??).
????
?? ? ?? ??(??? ??):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 (日期和時間): <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </body> </html>
????? ???? ??? ???.
?? ??: ???
??? ??? ??? ??? ???? ?? ?? ??? ?????.
????
??? ??? ? ??? ??? ?? ????? ???? ???? ?????.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> </body> </html>
????? ???? ???? ?? ?????. ?? ???? ??? ???
??: Internet Explorer 9 ? ?? IE ??? type="email"? ???? ????
?? ??: ?
? ??? ???? ?? ??? ? ????.
?
?? ?? ??(??? ??):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 ( 月和年 ): <input type="month" name="bdaymonth"> <input type="submit"> </form> </body> </html>
????? ???? ??? ???
?? ??: ??
?? ??? ?? ?? ???? ?? ?? ??? ?????.
???? ??? ??? ??? ?? ????.
?
?? ?? ?? ??(??):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 數(shù)量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> </body> </html>
????? ???? ??? ???
?? ??? ???? ?? ??? ?? ??? ?????.
max- ?? ?? ?? ?
min - ?? ?? ?? ?????.
step - ?? ?? ??? ?????(step="3"? ??, ??? ??? -3, 0, 3, 6 ????.)
? - ???? ?????.
?
?? ??? ??? ??? ?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo_form.php" method="get"> <input type="number" name="points" min="0" max="10" step="3" value="6"> <input type="submit"> </form> </body> </html>
????? ???? ??? ???
?? ??: ??
?? ??? ?? ?? ?? ?? ?? ???? ?? ?? ??? ?????.
?? ??? ????? ?????.
?
?? ??? ??? ?? ? ??(???? ???? ??):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> </body> </html>
???? ?? ??? ???
?? ??? ???? ?? ??? ?? ??? ?????.
max - ???? ???? ?????.
min - ???? ???? ?????.
?? - ??? ?? ??? ?????.
? - ???? ?????.
?? ??: ??
?? ??? ??? ?????. ??? ?? ?? Google ??? ?? ?????.
?
?? ?? ??(??? ?? ?? Google ??? ??):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> Search Google: <input type="search" name="googlesearch"><br> <input type="submit"> </form> </body> </html>
????? ???? ??? ???
?? ??: tel
????
?? ?? ?? ?? ??:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 電話號碼: <input type="tel" name="usrtel"><br> <input type="submit"> </form> </body> </html>
????? ???? ??? ???
?? ??: ??
?? ??? ???? ??? ??? ? ????.
?
?? ?? ???? ??(??? ??):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 選擇時間: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html>
????? ???? ??? ???.
?? ??: url
url ??? URL ??? ???? ?? ?? ??? ?????.
??? ???? URL ?? ?? ???? ?????.
????
?? URL ?? ??:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="demo-form.php"> 添加你的主頁: <input type="url" name="homepage"><br> <input type="submit"> </form> </body> </html>
????? ???? ??? ???.
?? ??: ?
? ??? ???? ?? ??? ??? ? ????.
?
?? ?? ??(??? ??):
<form action="demo-form.php"> 選擇周: <input type="week" name="year_week"> <input type="submit"> </form>
????? ???? ??? ???
HTML5 <input> ??
?? | ?? | ||||
| < ;input> | ?? ?? ?? ?? |
??
