HTML5 ??? ?? ??

HTML5? ??? ?? ??

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

?? ??

<input> ? ??:

????

????
??
formaction
formenctype
formmethod
formnovalidate
formtarget
?? ? ??
??
?? ? ??
??
??(?? ???)
?? ???
??
??

< ;form> / <input> autocomplete ??

autocomplete ??? ?? ?? ?? ??? ?? ?? ??? ??? ?? ?????. ???? ?? ???? ??? ??? ???? ????? ?? ??? ??? ??? ???? ???.

?: ?? ?? ??? ?? ???? ???? ? ??? ?? ????? ????? ? ????.

??: ?? ??? <form> ???? ??? ???, ??, URL, ??, ???, ????, ?? ???, ?? ?? <input> ???? ?????. ??.

????

HTML ???? ?? ?? ??(?? ??? ?? ??? ???):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="" autocomplete="on">
    姓名:<input type="text" name="fname"><br/>
    留言<input type="text" name="content"><br/>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>
<p>填寫(xiě)并提交表單，然后重新刷新頁(yè)面查看如何自動(dòng)填充內(nèi)容。</p>
<p>注意 form的 autocomplete屬性為  "on"（開(kāi)），但是e-mail自動(dòng)為“off”（關(guān)）。</p>
</body>
</html>

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

?: ?? ??????? ? ??? ????? ?? ??? ????? ? ?? ????.

<form> novalidate ??

novalidate ??? ?? ??

novalidate ??? ??? ??? ? ?? ?? ?? ??? ???? ???? ??? ?????.

????

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form>
<p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 屬性。</p>
</body>
</html>

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

<input> autofocus ??

autofocus ??? ?? ?????.

autofocus ??? ???? ???? ???? ???? ?????.

???? ??? ? "???" ?? ??? ???? ?????? ???.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    姓名: <input type="text" name="fname" ><br>
    留言: <input type="text" name="content" autofocus><br>
    <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input標(biāo)簽的 autofocus 屬性。</p>
</body>
</html>

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

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

<input> ; ?? ??

?? ??? ?? ??? ??? ?? ??? ??? ?????.

?: ? ? ??? ??? ???? ?? ?? ???? ??? ??? ?????.

????

?? ??? ?? ?? ??? HTML ??? ?????(?? ??? ??? ????? ?????).

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="" id="form1">
    姓名: <input type="text" name="fname"><br>
    <input type="submit" value="Submit">
</form>
<p> "留言" 字段沒(méi)有在form表單之內(nèi)，但它也是form表單的一部分。</p>
留言: <input type="text" name="lname" form="form1">
</body>
</html>

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

??: IE? ?? ??? ???? ????

<input> formaction ??

formaction ??? ?? ??? URL ??? ???? ? ?????.

formaction ??? <form> ??.

??: formaction ??? type="submit" ? type="image"? ?????.

????

?? HTML ???? ? ?? ?? ?? ??? ?? ?? ??? ???? ????.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="demo.php">
    姓名: <input type="text" name="fname"><br>
    密碼: <input type="text" name="lname"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formaction="admin.php" value="提交">
</form>
</body>
</html>

? ???? ? ??? ??.php ???? ???? ?? ??? ????? ?????. .php ???

< ;input> formenctype ??

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

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

Main: ? ??? type="submit" ? type="image"? ?? ?????.

????

? ?? ?? ???? ?? ???? ??? ?? ?? ???? ??, ? ?? ?? ??? "multipart/form"?? ?? ???? ????. -data" ??? ???? ?? ??? ???:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
</body>
</html>

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

<input> formmethod ??

formmethod ??? ??? ???? ??? ?????.

formmethod ??? <form> ??? method ??? ??????.

??: ? ??? type="submit" ? type="image"? ?? ??? ? ????.

????

?? ?? ?? ??? ?:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>


<form action="" 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>

</body>
</html>

? ??? get ???? ???? ?????. ??? formmethod? ???? ?? ??? ????? ??? ??

<input> formnovalidate ?? ?? emo-post.php ???? ???? ????.

novalidate ??? ?? ?????.

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

formnovalidate ??? <form> ??? novalidate ??? ??????.

??: formnovalidate ??? type="submit

? ?? ?????. ??>

? ?? ?? ??? ?? ??(?? ??):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    E-mail: <input type="email" name="userid"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formnovalidate="formnovalidate" value="不驗(yàn)證提交">
</form>
</body>
</html>

?? ??? ????

<input> formtarget ??

formtarget ??? ??? ???? ???? ???? ?????.

formtarget ???

??? target ??? ??????. submit" ? type="image" .? ?????.

????

?? ?? ???? ? ?? ?? ??? ?? ??:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action=" ">
     作者姓名: <input type="text" name="fname"><br>
     書(shū)本名: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一個(gè)新的頁(yè)面上">
</form>
</body>
</html>

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

<input> ?? ? ?? ??

?? ? ?? ??? ???? ?????. type <input> ??? ??? ??? ?????.

??: ?? ? ?? ??? ??? ??? <input> ???? ?? ?????.

?: ???? ????? ??? ?? ??? ?? ?????. ???? ??? ??? ??? ?? ???? ??? ? ???? ??? ??? ?????. ??? ??? ??? ????? ???? ??? ? ? ??? ??? ??? ??? ? ????. ???? ???? ?? ??? ???? ??? ?????(???? ??? ???? ????).

Instance

? ?? ? ?? ??? ???? ??? ?? ??? ?????.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="http://img3.imgtn.bdimg.com/it/u=4163745010,2599120287&fm=21&gp=0.jpg"  alt="Submit" width="100" height="80">
</form>
</body>
</html>

????? ???? ??? ???. it out

<input> ?? ??

list ??? ?? ??? ??? ??? ?????. datalist? ?? ??? ?? ?? ?????.

????

<datalist>:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    <input list="browsers" name="">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

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

<input> min ? max ??

min, max ? step ??? ?? ?? ??? ??? ??? ?????. ??(??)? ?????.

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

<input> ?? ??? ? ??? ??:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    輸入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>
    輸入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>
    數(shù)量 (在1和5之間):
    <input type="number" name="quantity" min="1" max="5"><br>
    <input type="submit">
</form>
</body>
</html>

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

??: Internet Explorer 9 ?? IE ??? Firefox? ?? ??? ?? ? ?? ??? ???? ????.

??: max ? min ??? Internet Explorer 10?? ?? ? ?? ??? ???? ??? IE 10? ??? ?? ??? ???? ????.

<input> ?? ??

?? ??? ?? ?????.

?? ?? ??< ?? ;input> ?? ??? ?? ??? ? ????.

??: multiple ??? ??? ? ??? ?? <input> ?? ??? ?????. : ???, ??.

????

?? ?? ???:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    選擇圖片: <input type="file" name="img" multiple>
    <input type="submit">
</form>
<p>嘗試選取一張或者多種圖片。</p>
</body>
</html>

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

<input> ?? ??

?? ??? <input> .

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

?: ?? ??? ?????. ?? ?? ??? ??? ?????.

?: JavaScript ????

??? ?? ???? ?? ??? ? ????. ??>

?? ???? ? ??? ??? ? ?? ??? ??? ?????(?? ? ?? ?? ??).

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    請(qǐng)輸入3位字母: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    <input type="submit">
</form>
</body>
</html>

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

????? ??

placeholder ??? ?? ??? ?? ?? ???? ??? ?????.

???? ?? ???? ?? ?? ??? ??? ????? ?????.

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

????

?? ?? ???? ???:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    姓名：<input type="text" name="fname" placeholder="請(qǐng)輸入你的姓名"><br>
    密碼：<input type="text" name="lname" placeholder="請(qǐng)輸入你的密碼"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

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

<input> ?? ??

?? ??? ?? ?????.

?? ??? ?? ??? ??? ??? ?? ?????. ?? ?? ???????(null? ? ??).

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

????

??? ? ?? ???:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    姓名: <input type="text" name="usrname" required>
    <input type="submit">
</form>
</body>
</html>

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

<input> ?? ??

?? ?? ??? ?? ??? ?? ??? ?? ??? ?????.

step="3"? ?? ??? ??? -3,0,3,6 ????.

?: step ??? ??? ???? ??? ? ????. ?? ? ?? ?? ?? ?.

??: ?? ??? ??, ??, ??, ??/??, ??/??-??, ?, ?? ? ? ?? ??? ?? ?????. .

????? 3?? ?????:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<form action="">
    <input type="number" name="points" step="3">
    <input type="submit">
</form>
</body>
</html>

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

??: Internet Explorer 9 ? ?? IE ?? ?? Firefox? ?? ??? ?? ??? ???? ????.

HTML5 <input> ??

? ? ?標(biāo)簽

標(biāo)簽	描述
<form>	定義一個(gè)form表單
<input>	定義一個(gè) input 域

? ? ?描述

? ??<form>

????form表單

? ??<input>

?? ?? 域

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="" autocomplete="on"> 姓名:<input type="text" name="fname"><br/> 留言<input type="text" name="content"><br/> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> <p>填寫(xiě)并提交表單，然后重新刷新頁(yè)面查看如何自動(dòng)填充內(nèi)容。</p> <p>注意 form的 autocomplete屬性為 "on"（開(kāi)），但是e-mail自動(dòng)為“off”（關(guān)）。</p> </body> </html>

?????? ???

????