HTML 輸入屬性
本章描述了 HTML <input> 元素的不同屬性。
value 屬性
輸入 value 屬性為輸入欄位指定一個初始值。
示例
具有初始（預設）值的輸入欄位
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
自己動手試一試 »
readonly 屬性
輸入 readonly 屬性指定輸入欄位為只讀。
只讀輸入欄位無法修改（但是，使用者可以對其進行 Tab 鍵操作，高亮顯示，並從中複製文字）。
提交表單時將傳送只讀輸入欄位的值！
示例
一個只讀輸入欄位
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
自己動手試一試 »
disabled 屬性
輸入 disabled 屬性指定輸入欄位應被停用。
停用的輸入欄位不可用，也無法點選。
提交表單時將不會發送停用輸入欄位的值！
示例
一個停用的輸入欄位
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
自己動手試一試 »
size 屬性
輸入 size 屬性指定輸入欄位的可見寬度（以字元為單位）。
size 的預設值為 20。
注意： size 屬性適用於以下輸入型別：text、search、tel、url、email 和 password。
示例
設定輸入欄位的寬度
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
自己動手試一試 »
maxlength 屬性
輸入 maxlength 屬性指定輸入欄位中允許的最大字元數。
注意： 當設定了 maxlength 時，輸入欄位將不會接受超過指定字元數。但是，此屬性不提供任何反饋。因此，如果您想提醒使用者，您必須編寫 JavaScript 程式碼。
示例
設定輸入欄位的最大長度
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
自己動手試一試 »
min 和 max 屬性
輸入 min 和 max 屬性指定輸入欄位的最小和最大值。
min 和 max 屬性適用於以下輸入型別：number、range、date、datetime-local、month、time 和 week。
提示： 同時使用 max 和 min 屬性可以建立合法值的範圍。
示例
設定最大日期、最小日期和合法值的範圍
<form>
<label for="datemax">輸入 1980-01-01 之前的日期:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">輸入 2000-01-01 之後的日期:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">數量 (1 到 5 之間):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
自己動手試一試 »
multiple 屬性
輸入 multiple 屬性指定使用者可以在輸入欄位中輸入多個值。
multiple 屬性適用於以下輸入型別：email 和 file。
示例
一個接受多個值的檔案上傳欄位
<form>
<label for="files">選擇檔案:</label>
<input type="file" id="files" name="files" multiple>
</form>
自己動手試一試 »
pattern 屬性
輸入 pattern 屬性指定一個正則表示式，用於在提交表單時檢查輸入欄位的值。
pattern 屬性適用於以下輸入型別：text、date、search、url、tel、email 和 password。
提示： 使用全域性 title 屬性來描述模式以幫助使用者。
提示： 在我們的 JavaScript 教程中瞭解更多關於 正則表示式 的資訊。
示例
一個只能包含三個字母（不能有數字或特殊字元）的輸入欄位
<form>
<label for="country_code">國家程式碼:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="三個字母的國家程式碼">
</form>
自己動手試一試 »
placeholder 屬性
輸入 placeholder 屬性指定一個簡短的提示，描述輸入欄位的預期值（一個示例值或預期格式的簡短描述）。
在使用者輸入值之前，簡短提示會顯示在輸入欄位中。
placeholder 屬性適用於以下輸入型別：text、search、url、number、tel、email 和 password。
示例
帶佔位符文字的輸入欄位
<form>
<label for="phone">輸入電話號碼:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
自己動手試一試 »
required 屬性
輸入 required 屬性指定在提交表單之前必須填寫輸入欄位。
required 屬性適用於以下輸入型別：text、search、url、tel、email、password、日期選擇器、number、checkbox、radio 和 file。
示例
一個必填輸入欄位
<form>
<label for="username">使用者名稱:</label>
<input type="text" id="username" name="username" required>
</form>
自己動手試一試 »
step 屬性
輸入 step 屬性指定輸入欄位的合法數字間隔。
示例：如果 step="3"，合法數字可以是 -3、0、3、6 等。
提示： 此屬性可以與 max 和 min 屬性一起使用，以建立合法值的範圍。
step 屬性適用於以下輸入型別：number、range、date、datetime-local、month、time 和 week。
示例
具有指定合法數字間隔的輸入欄位
<form>
<label for="points">點數:</label>
<input type="number" id="points" name="points" step="3">
</form>
自己動手試一試 »
注意： 輸入限制並非萬無一失，JavaScript 提供了多種方法來新增非法輸入。為了安全地限制輸入，它還必須由接收方（伺服器）進行檢查！
autofocus 屬性
輸入 autofocus 屬性指定頁面載入時輸入欄位應自動獲得焦點。
示例
讓“名字”輸入欄位在頁面載入時自動獲得焦點
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname">
</form>
自己動手試一試 »
height 和 width 屬性
輸入 height 和 width 屬性指定 <input type="image"> 元素的高度和寬度。
提示： 始終為影像指定 height 和 width 屬性。如果設定了 height 和 width，則在頁面載入時會為影像保留所需的空間。如果沒有這些屬性，瀏覽器不知道影像的大小，因此無法為其保留適當的空間。結果將是頁面佈局在載入過程中（影像載入時）發生變化。
示例
將影像定義為提交按鈕，並帶有 height 和 width 屬性
<form>
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="提交" width="48" height="48">
</form>
自己動手試一試 »
list 屬性
輸入 list 屬性引用一個 <datalist> 元素，其中包含 <input> 元素的預定義選項。
示例
帶有 <datalist> 中預定義值的 <input> 元素
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
自己動手試一試 »
autocomplete 屬性
輸入 autocomplete 屬性指定表單或輸入欄位是否應啟用自動填充。
自動填充允許瀏覽器預測值。當用戶開始在欄位中輸入時，瀏覽器應根據之前輸入的值顯示選項以填充該欄位。
autocomplete 屬性適用於 <form> 和以下 <input> 型別：text、search、url、tel、email、password、日期選擇器、range 和 color。
示例
一個啟用了自動填充的 HTML 表單，以及一個停用自動填充的輸入欄位
<form action="/action_page.php" autocomplete="on">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="提交">
</form>
自己動手試一試 »
提示：在某些瀏覽器中，您可能需要啟用自動完成功能才能使其生效（請檢視瀏覽器選單中的“首選項”）。
HTML 表單和輸入元素
| 標籤 | 描述 |
|---|---|
| <form> | 定義一個用於使用者輸入的 HTML 表單 |
| <input> | 定義一個輸入控制元件 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
