value 屬性

value?屬性規定輸入字段的初始值：

實例

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

親自試一試

readonly 屬性

readonly?屬性規定輸入字段為只讀（不能修改）：

實例

<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?屬性規定輸入字段是禁用的。

被禁用的元素是不可用和不可點擊的。

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

實例

<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?屬性規定輸入字段的尺寸（以字符計）：

實例

<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?屬性規定輸入字段允許的最大長度：

實例

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

親自試一試

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

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

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

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 屬性規定表單或輸入字段是否應該自動完成。

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

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

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

實例

自動完成開啟的 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> 屬性。

如果設置，則 novalidate 規定在提交表單時不對表單數據進行驗證。

實例

指示表單在被提交時不進行驗證：

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

親自試一試

autofocus 屬性

autofocus 屬性是布爾屬性。

如果設置，則規定當頁面加載時 <input> 元素應該自動獲得焦點。

實例

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

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

親自試一試

form 屬性

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

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

實例

輸入字段位于 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 屬性規定當提交表單時處理該輸入控件的文件的 URL。

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

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

實例

擁有兩個兩個提交按鈕并對于不同動作的 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 屬性規定當把表單數據（form-data）提交至服務器時如何對其進行編碼（僅針對 method="post" 的表單）。

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

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

實例

發送默認編碼以及編碼為 "multipart/form-data"（第二個提交按鈕）的表單數據（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 發送表單數據（form-data）的 HTTP 方法。

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

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

實例

第二個提交按鈕覆蓋表單的 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 屬性是布爾屬性。

如果設置，則規定在提交表單時不對 <input> 元素進行驗證。

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

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

實例

擁有兩個提交按鈕的表單（驗證和不驗證）：

<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 屬性規定的名稱或關鍵詞指示提交表單后在何處顯示接收到的響應。

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

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

實例

這個表單有兩個提交按鈕，對應不同的目標窗口：

<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 屬性規定 <input> 元素的高度和寬度。

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

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

實例

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

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

親自試一試

list 屬性

list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預定義選項。

實例

使用 <datalist> 設置預定義值的 <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 屬性規定 <input> 元素的最小值和最大值。

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

實例

具有最小和最大值的 <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 屬性是布爾屬性。

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

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

實例

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

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

親自試一試

pattern 屬性

pattern 屬性規定用于檢查 <input> 元素值的正則表達式。

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

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

提示：請在我們的 JavaScript 教程中學習更多有關正則表達式的知識。

實例

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

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

親自試一試

placeholder 屬性

placeholder 屬性規定用以描述輸入字段預期值的提示（樣本值或有關格式的簡短描述）。

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

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

實例

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

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

親自試一試

required 屬性

required 屬性是布爾屬性。

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

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

實例

必填的輸入字段：

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

親自試一試

step 屬性

step 屬性規定 <input> 元素的合法數字間隔。

示例：如果 step="3"，則合法數字應該是 -3、0、3、6、等等。

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

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

示例

擁有具體的合法數字間隔的輸入字段：

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

親自試一試

from:?http://www.w3school.com.cn/html/html_form_attributes.asp

總結

以上是生活随笔為你收集整理的HTML Input 属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。