HTML5 ??? ?? ??

HTML5? <form> ? <input> ??? ? ?? ??? ??? ???????.

<form>? ??: ???? ???

<input> ??? ??:
?? ??
?? ??
form
formaction
formenctype
formmethod
formnovalidate
formtarget
?? ? ??
??
?? ? ??
??
??(?? ???)
?? ???
??
??

<form> / <input> autocomplete ??
autocomplete ??? ?? ?? ?? ??? ?? ?? ??? ??? ?? ?????.
???? ?? ???? ??? ??? ???? ????? ??? ?? ? ?? ??? ????? ???.
?: ?? ?? ??? ?? ???? ???? ? ??? ?? ????? ????? ? ????.
??: ?? ??? <form> ???? ??? ???, ??, URL, ??, ???, ????, ?? ???, ?? ? ??? ?? ??? <input>??? ?????.
?
HTML ???? ?? ?? ??(??? ?? ??? ?? ??? ???):

<form action="demo-form.php" autocomplete =" on">

??:<input type="text" name="fname"><br>

?: <input type="text" name="lname"><br>

???: <input type="email " name ="email" autocomplete="off"><br>

<input type="submit"> ;/form> ?? ?? ?? ??? ??? ??? ? ?????. ?

??? ?? ???? ??? ??? ????

<input> autofocus ??
autofocus ??? ?? ?????.
autofocus ??? ???? ???????.
?
???? ??? ? "??" ?? ?? ??? ???? ?????? ???.

??:<input type="text" name ="fname" autofocus>

<input> ?? ??
?? ??? ?? ??? ???? ?? ??? ????.
?: ? ? ??? ??? ???? ?? ?? ???? ??? ??? ?????.
????
?? ??? ?? ?? ??? HTML ??? ?????(?? ??? ??? ????? ?????):

<input> ?? >formaction ??? ?? ??? URL ??? ???? ? ?????.
formaction ??? <form> ??? action ??? ??????.
??: formaction ??? type=" submit" ? type="image"? ?????.
?
?? HTMLform ???? ??? ?? ? ?? ?? ??? ???? ????.

< form action=" ??-form.php">

??: <input type="text" name="fname"><br> ??>

?: <input type="text" name="lname"><br>

<input type="submit" formaction="demo-admin.php"

value="???? ??">

</form> ??

formenctype ??? ??? ???? ???? ?????. ??? ?? ??(?? ??? method="post" ???? ??)

formenctype ??? ?? ??? enctype ??? ??????.

??: ? ??? type="submit" ? type="image"? ?? ?????.
?? ?? ?? ???? ?? ???? ??? ?? ?? ???? ?? ? ?? ?? ??? "multipart/form-data" ??? ???? ?? ???? ????.

<form action="demo-post_enctype.php" method="post">

??: <input type="text" name="fname"><br>

<input type="submit" value= "??">

<input type="submit" formenctype="multipart/form-data"

value="?? Multipart/form-data">

</form>

<input> formmethod ??
formmethod ??? ??? ???? ??? ?????.
formmethod ??? <form> ??? method ??? ??????.
??: ? ??? type="submit" ? type="image"? ?? ??? ? ????.
?
?? ?? ?? ??? ?:

<form action="demo-form.php" method="get">

??: <input type="text" name="fname"><br>

?: < ;input type="text" name="lname"><br>

<input type="submit" value="??"> > <input type="submit" formmethod="post" formaction="demo-post.php"

value="POST? ???? ??"> ;

</form>

<input> formnovalidate ??

novalidate ??? ?? ???? ?????. ??? ??? ? <input> ??? ???? ??? ??? ????.

formnovalidate ??? <form> ??? novalidate ??? ??????.
??: formnovalidate ??? type="submit
?
? ?? ?? ??? ?? ??( ?? ??) :

<form action="demo-form.php">

E -mail: < ;input type="email" name="userid"><br>

<input type="submit" value="Submit">< ;br>

<input type="submit" formnovalidate value="?? ?? ??">

</form>

<input> >formtarget ??? ?? ?? ???? ??? ? ???? ???? ???? ?????. formtarget ??? <form> ??? target ??? ??????.
??: formtarget ??? type="submit" ? type="image"? ?? ?????.
?
? ?? submit ?? ?? ?? ???? ??:

<form action="demo-form.php">

??: <input type="text" name="fname"><br>
?: <input type="text" name=" lname"><br>
<input type="submit" value="????? ??">
< ;input type="submit" formtarget="_blank"
value="? ?? ??">
</ form>

<input> ?? ? ?? ?? ?? ? ?? ??? ??? ??? ?? <input>? ?????. ??? ??? ??? ?????. ??: ?? ? ?? ??? ??? ??? <input> ???? ?????.
?: ???? ????? ??? ?? ??? ?? ?????. ???? ??? ??? ??? ?? ???? ??? ? ???? ??? ??? ?????. ??? ??? ??? ????? ???? ??? ? ? ??? ??? ??? ??? ? ????. ???? ?? ?? ???? ?? ??? ???? ??? ?????(???? ??? ????).
?
? ?? ? ?? ??? ???? ??? ?? ??? ?????.

<input type="image" src="img_submit.gif " alt="Submit" width="48" height="48">

<input> ?? ?? ?? ??? ?? ??? ??? ??? ?????. datalist? ?? ??? ?? ?? ?????. OperaSafariChromeFirefoxInternet Explorer
????
<datalist>? ?? ??? <input> ?:

<input list="browsers"> ??>
<datalist id="browsers">
<?? ?="Internet Explorer"> >
<option value="Firefox">
<option value="Chrome">
> <?? ?="???">
<?? ?="???">
<input> min ? max ??

min, max ? step ??? ??? ??? ?? ??? ?? ??(????)? ???? ? ?????. ?? ??. ??: min, max ? step ??? ?? ???, ?? ? ??? ?? <input> ?? ??? ?????.
?
<input> ?? ??? ? ??? ??:

1980? ?? ??? ?????. -01-01:
<input type="date" name="bday" max="1979-12-31">

2000-01-01 ?? ??? ?????.
<input type="date" name="bday " min="2000-01-02">

??(1~5):

<input type="number" name="Quantity" min="1" max="5">
< ; input> multiple attribute
multiple ??? ?? ?????.
multiple ??? <input> ???? ?? ?? ??? ? ??? ?????.
??: ?? ??? ??? ? ??? ?? <input> ?? ??? ?????. : ???, ??.
??? ?? ???:??? ??: <input type="file" name="img" multiple>

<input> ?? ??
?? ??? <input> ??? ?? ???? ? ???? ???? ?????.
??: ?? ??? ???, ??, URL, ????, ???, ???? ?? <input> ?? ??? ?????.
?: ??? ???? ?? ?? ?? ??? ?? ?????. .
?
?? ?? ? ??? ??? ? ?? ??? ??? ?????(?? ? ?? ?? ??).
?? ??: <input type= "text" name="country_code" ??="[A-Za-z]{3}" title="3?? ?? ??">

<input> ?? ??? ??
?? ??? ??? ?? ??? ?? ?? ???? ??? ?????.
???? ?? ???? ?? ?? ??? ??? ????? ?????.
??: ?? ??? ??? ???, ??, URL, ??, ???, ???? ?? <input> ?? ??? ?????.
?
?? ?? ???? ??? t:
<input type="text" name="fname" placeholder="First name"> ??>

<input> ?? ???? ??? ?? ?????.
?? ??? ???? ?? ?? ??? ?????(??? ? ??).
??: ?? ??? ???, ??, URL, ??, ???, ????, ?? ???, ??, ???, ??? ? ??? ?? <input> ?? ??? ?????.
?
??? ? ?? ?? ??:

??? ??: <input type="text" name="usrname" ??> ??>
<input> ?? ??
?? ??? ?? ??? ??? ?? ??? ?????. step="3"? ?? ??? ??? -3, 0, 3, 6 ????.?: step ??? max ? min ??? ?? ???? ?? ?? ??? ? ????.
??: step ??? ??, ??, ??, ??/??, ??/??-??, ?, ??, ? ?? ??? ?? ???? ?? ????.
????
? ?? ??? 3?? ?????.

<input type="number" name="points" step="3">

<output> ??
HTML5?? ????? ??? ??? ?? ??? ??? ?? ??? ???? ? ???? ??? ?? <output>? ???????.
for ??? ???? ?? ??? ??? ??? ??? ??? ?? ??(?: ?? ?? ?? ????) ?? ??? ??? ?? ????. for ??? ?? ???? ??? ?? ??? ID ?????.
placeholder ??
HTML5?? placeholder?? ??? ??? ???????. <input> ? <textarea> ??? ?? ? ??? ????? ??? ??? ? ?? ??? ?? ??? ?????. ?? ??? ???? ??? ???? ? ??? ??? ? ????.
??? ?? ??? ??? ??? ?????.
<input type="text" name="search" placeholder="search the web"/> ??>
? ??? ?? ??? Mozilla, Safari ? Chrome ??????? ?????.
?? ?? ?? ??? ? ?? ? ??? ??? ?? ?????? ??? ??? ???? ?? JavaScript? ??? ??? ????. HTML5? ??? ??? ????? ?????. ?? ????? ?? ?? ??? ?? ??? ???? ? ??? ? ????.

<input type="text" name="search" ??/> ??>? ??? ?? ??? Mozilla, Safari ? Chrome ??????? ?????.
???? 1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> <p> "Last name" 字段沒(méi)有在form表單之內(nèi)，但它也是form表單的一部分。</p> Last name: <input type="text" name="lname" form="form1"> <p><b>注意:</b> IE不支持form屬性</p> </body> </html>
???? 2:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 標(biāo)簽。</p> </body> </html>

???? ??

||

??? ??

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action=""> 輸入 1970-01-01 之前的日期: <input type="date" name="bday" max="1969-12-31"><br> 輸入 2010-12-31 之后的日期: <input type="date" name="bday" min="2011-01-01"><br> 數(shù)量 (在1和9之間): <input type="number" name="quantity" min="1" max="9"><br> <input type="submit"> </form> </body> </html>

?????? ???
????