value 屬性

value 屬性規(guī)定輸入字段的初始值：

實(shí)例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

readonly 屬性

readonly 屬性規(guī)定輸入字段為只讀（不能修改）：

實(shí)例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

readonly 屬性不需要值。它等同于 readonly="readonly"。

disabled 屬性

disabled 屬性規(guī)定輸入字段是禁用的。

被禁用的元素是不可用和不可點(diǎn)擊的。

被禁用的元素不會被提交。

實(shí)例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

disabled 屬性不需要值。它等同于 disabled="disabled"。

size 屬性

size 屬性規(guī)定輸入字段的尺寸（以字符計(jì)）：

實(shí)例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

maxlength 屬性

maxlength 屬性規(guī)定輸入字段允許的最大長度：

實(shí)例

<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

如設(shè)置 maxlength 屬性，則輸入控件不會接受超過所允許數(shù)的字符。

該屬性不會提供任何反饋。如果需要提醒用戶，則必須編寫 JavaScript 代碼。

注釋：輸入限制并非萬無一失。JavaScript 提供了很多方法來增加非法輸入。如需安全地限制輸入，則接受者（服務(wù)器）必須同時對限制進(jìn)行檢查。

HTML5 屬性

HTML5 為 <input> 增加了如下屬性：

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height 和 width
• list
• min 和 max
• multiple
• pattern (regexp)
• placeholder
• required
• step

并為 <form> 增加如需屬性：

• autocomplete
• novalidate

autocomplete 屬性

autocomplete 屬性規(guī)定表單或輸入字段是否應(yīng)該自動完成。

當(dāng)自動完成開啟，瀏覽器會基于用戶之前的輸入值自動填寫值。

提示：您可以把表單的 autocomplete 設(shè)置為 on，同時把特定的輸入字段設(shè)置為 off，反之亦然。

autocomplete 屬性適用于 <form> 以及如下 <input> 類型：text、search、url、tel、email、password、datepickers、range 以及 color。

實(shí)例

自動完成開啟的 HTML 表單（某個輸入字段為 off）：

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form> 

提示：在某些瀏覽器中，您也許需要手動啟用自動完成功能。

novalidate 屬性

novalidate 屬性屬于 <form> 屬性。

如果設(shè)置，則 novalidate 規(guī)定在提交表單時不對表單數(shù)據(jù)進(jìn)行驗(yàn)證。

實(shí)例

指示表單在被提交時不進(jìn)行驗(yàn)證：

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form> 

autofocus 屬性

autofocus 屬性是布爾屬性。

如果設(shè)置，則規(guī)定當(dāng)頁面加載時 <input> 元素應(yīng)該自動獲得焦點(diǎn)。

實(shí)例

使 "First name" 輸入字段在頁面加載時自動獲得焦點(diǎn)：

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

form 屬性

form 屬性規(guī)定 <input> 元素所屬的一個或多個表單。

提示：如需引用一個以上的表單，請使用空格分隔的表單 id 列表。

實(shí)例

輸入字段位于 HTML 表單之外（但仍屬表單）：

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>

 Last name: <input type="text" name="lname" form="form1">

formaction 屬性

formaction 屬性規(guī)定當(dāng)提交表單時處理該輸入控件的文件的 URL。

formaction 屬性覆蓋 <form> 元素的 action 屬性。

formaction 屬性適用于 type="submit" 以及 type="image"。

實(shí)例

擁有兩個兩個提交按鈕并對于不同動作的 HTML 表單：

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form> 

formenctype 屬性

formenctype 屬性規(guī)定當(dāng)把表單數(shù)據(jù)（form-data）提交至服務(wù)器時如何對其進(jìn)行編碼（僅針對 method="post" 的表單）。

formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。

formenctype 屬性適用于 type="submit" 以及 type="image"。

實(shí)例

發(fā)送默認(rèn)編碼以及編碼為 "multipart/form-data"（第二個提交按鈕）的表單數(shù)據(jù)（form-data）：

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data"
   value="Submit as Multipart/form-data">
</form> 

formmethod 屬性

formmethod 屬性定義用以向 action URL 發(fā)送表單數(shù)據(jù)（form-data）的 HTTP 方法。

formmethod 屬性覆蓋 <form> 元素的 method 屬性。

formmethod 屬性適用于 type="submit" 以及 type="image"。

實(shí)例

第二個提交按鈕覆蓋表單的 HTTP 方法：

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp"
   value="Submit using POST">
</form> 

formnovalidate 屬性

novalidate 屬性是布爾屬性。

如果設(shè)置，則規(guī)定在提交表單時不對 <input> 元素進(jìn)行驗(yàn)證。

formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。

formnovalidate 屬性可用于 type="submit"。

實(shí)例

擁有兩個提交按鈕的表單（驗(yàn)證和不驗(yàn)證）：

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form> 

formtarget 屬性

formtarget 屬性規(guī)定的名稱或關(guān)鍵詞指示提交表單后在何處顯示接收到的響應(yīng)。

formtarget 屬性會覆蓋 <form> 元素的 target 屬性。

formtarget 屬性可與 type="submit" 和 type="image" 使用。

實(shí)例

這個表單有兩個提交按鈕，對應(yīng)不同的目標(biāo)窗口：

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank"
   value="Submit to a new window">
</form> 

height 和 width 屬性

height 和 width 屬性規(guī)定 <input> 元素的高度和寬度。

height 和 width 屬性僅用于 <input type="image">。

注釋：請始終規(guī)定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會在圖像加載時閃爍。

實(shí)例

把圖像定義為提交按鈕，并設(shè)置 height 和 width 屬性：

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

list 屬性

list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預(yù)定義選項(xiàng)。

實(shí)例

使用 <datalist> 設(shè)置預(yù)定義值的 <input> 元素：

<input list="browsers">

<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 

min 和 max 屬性

min 和 max 屬性規(guī)定 <input> 元素的最小值和最大值。

min 和 max 屬性適用于如需輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。

實(shí)例

具有最小和最大值的 <input> 元素：

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

multiple 屬性

multiple 屬性是布爾屬性。

如果設(shè)置，則規(guī)定允許用戶在 <input> 元素中輸入一個以上的值。

multiple 屬性適用于以下輸入類型：email 和 file。

實(shí)例

接受多個值的文件上傳字段：

Select images: <input type="file" name="img" multiple>

pattern 屬性

pattern 屬性規(guī)定用于檢查 <input> 元素值的正則表達(dá)式。

pattern 屬性適用于以下輸入類型：text、search、url、tel、email、and password。

提示：請使用全局的 title 屬性對模式進(jìn)行描述以幫助用戶。

提示：請?jiān)谖覀兊?JavaScript 教程中學(xué)習(xí)更多有關(guān)正則表達(dá)式的知識。

實(shí)例

只能包含三個字母的輸入字段（無數(shù)字或特殊字符）：

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder 屬性

placeholder 屬性規(guī)定用以描述輸入字段預(yù)期值的提示（樣本值或有關(guān)格式的簡短描述）。

該提示會在用戶輸入值之前顯示在輸入字段中。

placeholder 屬性適用于以下輸入類型：text、search、url、tel、email 以及 password。

實(shí)例

擁有占位符文本的輸入字段：

<input type="text" name="fname" placeholder="First name">

required 屬性

required 屬性是布爾屬性。

如果設(shè)置，則規(guī)定在提交表單之前必須填寫輸入字段。

required 屬性適用于以下輸入類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

實(shí)例

必填的輸入字段：

Username: <input type="text" name="usrname" required>

step 屬性

step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。

示例：如果 step="3"，則合法數(shù)字應(yīng)該是 -3、0、3、6、等等。

提示：step 屬性可與 max 以及 min 屬性一同使用，來創(chuàng)建合法值的范圍。

step 屬性適用于以下輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。

示例

擁有具體的合法數(shù)字間隔的輸入字段：

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