總結
注: 參考文件 -ofollow,noindex">菜鳥教程
<input> 標籤屬性
accept - 檔案選擇
-
定義
accept 屬性規定了可通過檔案上傳提交的伺服器接受的檔案型別
-
注意
accept 屬性僅適用於 <input type="file">
-
提示
請不要將該屬性作為您的驗證工具。應該在伺服器上對檔案上傳進行驗證
-
語法
<input accept="audio/*|video/*|image/*|MIME_type"> <!--提示:如需規定多個值,請使用逗號分隔(比如 <input accept="audio/*,video/*,image/*" />) -->
- 例項
<form action="demo_form.php"> <input type="file" name="test-1" accept="audio/*"> <!-- 接受所有的聲音檔案 --> <input type="file" name="test-2" accept="video/*"> <!-- 接受所有的視訊檔案 --> <input type="file" name="test-3" accept="image/*"> <!-- 接受所有的影象檔案 --> <input type="file" name="test-4" accept="MIME_type"> <!-- 一個有效的 MIME 型別,不帶引數 --> </form>
alt - 影象替代文字
-
定義
alt 屬性為使用者由於某些原因(比如網速太慢、src 屬性中的錯誤、瀏覽器禁用影象、使用者使用的是螢幕閱讀器)無法檢視影象時提供了替代文字
-
注意
alt 屬性只能與 <input type="image" name="test"> 配合使用
-
語法
<input alt="text"> <!-- text 規定影象的替代文字 -->
- 例項
<form action="demo_form.php"> <input type="image" src="submit.gif" alt="Submit" width="48" height="48"> </form>
autocomplete - 顯示歷史紀錄下拉框
-
定義
autocomplete 屬性規定輸入欄位是否應該啟用自動完成功能
自動完成允許瀏覽器預測對欄位的輸入。當用戶在欄位開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在欄位中填寫的選項
-
注意
必須有 name 屬性
autocomplete 屬性適用於下面的 <input> 型別:text、search、url、tel、email、password、datepickers、range 和 color
-
提示
所有主流瀏覽器都支援 autocomplete 屬性
在某些瀏覽器中,您可能需要手動啟用自動完成功能(在瀏覽器選單的"引數設定"中進行設定)
-
語法
<input autocomplete="on|off"> <!-- on 預設。規定啟用自動完成功能 --> <!-- off 規定禁用自動完成功能 -->
- 例項
<form action="demo_form.html" autocomplete="on"> <input type="text" name="test-1"><br> <input type="text" name="test-2" autocomplete="off"><br> <input type="submit" name="test"> </form>
autofocus - 自動獲取焦點
-
定義
autofocus 屬性是一個布林屬性
autofocus 屬性規定當頁面載入時 <input> 元素應該自動獲得焦點
-
語法
<input autofocus>
- 例項
<form action="demo_form.html"> First name: <input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form>
checked - 預設選項
-
定義
checked 屬性是一個布林屬性
checked 屬性規定在頁面載入時應該被預先選定的 <input> 元素。
checked 屬性適用於<input type="checkbox">
和<input type="radio">
checked 屬性也可以在頁面載入後,通過 JavaScript 程式碼進行設定
-
語法
<input checked>
- 例項
<form action="demo_form.php" method="get"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br> <input type="submit" value="提交"> </form>
disabled - 禁用
-
定義
disabled 屬性是一個布林屬性
disabled 屬性規定應該禁用的 <input> 元素
被禁用的 input 元素是無法使用和無法點選的
disabled 屬性進行設定,使使用者在滿足某些條件時(比如選中複選框,等等)才能使用 <input> 元素。然後,可使用 JavaScript 來刪除 disabled 值,使該<input> 元素變為可用的狀態
-
注意
disabled 屬性不適用於 <input type="hidden">
-
提示
表單中被禁用的 <input> 元素不會被提交
-
語法
<input disabled>
- 例項
<form action="demo_form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname" disabled><br> <input type="submit" value="提交"> </form>
form - 表單
-
定義
form 屬性規定 <input> 元素所屬的一個或多個表單
-
注意
IE 不支援 form 屬性
-
語法
<input form="form_id"> <!-- form_id: 規定 <input> 元素所屬的一個或多個表單的 id 列表,以空格分隔 -->
- 例項
<form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> <p> "Last name" 欄位沒有在 form 表單之內,但它也是 form 表單的一部分</p> Last name: <input type="text" name="lname" form="form1">
formaction - 當表單提交時處理輸入控制元件的檔案的 URL
-
定義
formaction 屬性規定當表單提交時處理輸入控制元件的檔案的 URL
formaction 屬性覆蓋 <form> 元素的action 屬性
-
注意
formaction 屬性只適用於 type="submit" 和 type="image"
-
語法
<input formaction="URL">
- 例項
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"><br> <input type="submit" formaction="demo-admin.php" value="提交"> </form>
formenctype - 當表單資料提交到伺服器時如何編碼
-
定義
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支援 formenctype 屬性
-
注意
Internet Explorer 9 及之前的版本不支援 <input> 標籤的 formenctype 屬性
-
語法
<input formenctype="value">
- 例項
<form action="demo-post-enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form>
formmethod - 傳送表單資料到 action URL 的 HTTP 方法
-
定義
formmethod 屬性定義傳送表單資料到 action URL 的 HTTP 方法
formmethod 屬性覆蓋 <form> 元素的 method 屬性
-
注意
formmethod 屬性與 type="submit" 和 type="image" 配合使用
-
提示
表單資料可被作為 URL 變數的形式來發送(method="get")或者作為 HTTP post 事務的形式來發送(method="post")
-
語法
<input formmethod="get|post">
- 例項
<form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"> <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交"> </form>
formnovalidate - 表單提交不驗證
-
定義
novalidate 屬性是一個布林屬性
novalidate 屬性規定當表單提交時 <input> 元素不進行驗證
formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性 (表單提交驗證)
-
注意
formnovalidate 屬性可與 type="submit" 配合使用
-
語法
<input formnovalidate="formnovalidate"> <!-- formnovalidate 屬性是一個布林屬性,且可通過下面的方式進行設定 --> <!-- <input formnovalidate> --> <!-- <input formnovalidate="formnovalidate"> --> <!-- <input formnovalidate=""> -->
- 例項
<form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="提交"><br> <input type="submit" formnovalidate="formnovalidate" value="不驗證提交"> </form>
formtarget - 提交表單後在哪裡顯示接收到響應的名稱或關鍵詞
-
定義
formtarget 屬性規定表示提交表單後在哪裡顯示接收到響應的名稱或關鍵詞
formtarget 屬性覆蓋 <form> 元素的 target 屬性
-
注意
formtarget 屬性可以與 type="submit" 和 type="image" 配合使用
-
語法
<input formtarget="_blank|_self|_parent|_top|framename"> <!-- _blank 在新視窗/選項卡中顯示響應 --> <!-- _self 在同一框架中顯示響應(預設) --> <!-- _parent 在父框架中顯示響應 --> <!-- _top 在整個視窗中顯示響應 --> <!-- framename 在指定的 iframe 中顯示響應 -->
- 例項
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="正常提交"> <input type="submit" formtarget="_blank" value="提交到一個新的頁面上"> </form>
height - <input>元素的高度
-
定義
height 屬性規定 <input> 元素的高度
-
注意
height 屬性只適用於 <input type="image">
-
提示
為圖片指定 height 和 width 屬性是一個好習慣。如果設定了這些屬性,當頁面載入時會為圖片預留需要的空間。而如果沒有這些屬性,則瀏覽器就無法瞭解影象的尺寸,也就無法為其預留合適的空間。情況是當頁面和圖片載入時,頁面佈局會發生變化
-
語法
<input height="pixels"> <!-- pixels 以畫素計的高度(比如 height="100") -->
- 例項
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="image" src="img_submit.gif"alt="Submit" width="48" height="48"> </form>
list - 下拉框
-
定義
list 屬性引用<datalist> 元素,其中包含 <input> 元素的預定義選項
-
注意
Safari 或者 Internet Explorer 9 及之前的版本不支援 <input> 標籤的 list 屬性
-
語法
<input list="datalist_id"> <!-- datalist_id 規定繫結到 <input> 元素的 datalist 的 id -->
- 例項
<form action="demo-form.php" 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>
max - 最大值
-
定義
max 屬性規定 <input> 元素的最大值
-
注意
max 和 min 屬性適用於以下 input 型別:number、range、date、datetime、datetime-local、month、time 和 week
-
提示
max 屬性與 min 屬性配合使用,可建立合法值範圍
-
語法
<input max="number|date"> <!-- number 數字值。規定輸入欄位允許的最大值 --> <!-- date 日期。規定輸入欄位允許的最大值 -->
- 例項
<form action="demo-form.php"> 輸入 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> 數量 (在1和5之間): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit"> </form>
maxlength - 允許的最大字元數
-
定義
maxlength 屬性規定 <input> 元素中允許的最大字元數
-
語法
<input maxlength="number"> <!-- number 在 <input> 元素中允許的最大字元數 -->
- 例項
<form action="demo_form.php"> Username: <input type="text" name="usrname" maxlength="10"><br> <input type="submit" value="提交"> </form>
min - 最小值
-
定義
min 屬性規定 <input> 元素的最小值
-
注意
max 和 min 屬性適用於以下 input 型別:number、range、date、datetime、datetime-local、month、time 和 week
-
提示
min 屬性與 max 屬性配合使用,可建立合法值範圍
-
語法
<input min="number|date"> <!-- number 數字值。規定輸入欄位允許的最小值 --> <!-- date 日期。規定輸入欄位允許的最小值 -->
- 例項
<form action="demo-form.php"> 輸入 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> 數量 (在1和5之間): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit"> </form>
multiple - 可選擇多個檔案
-
定義
multiple 屬性是一個布林屬性
multiple 屬性規定允許使用者輸入到 <input> 元素的多個值
-
注意
multiple 屬性適用於以下 input 型別:email 和 file
-
語法
<input multiple>
- 例項
<form action="demo-form.php"> 選擇圖片: <input type="file" name="img"> <input type="submit"> </form>
name -<input> 元素名稱
-
定義
name 屬性規定 <input> 元素的名稱
name 屬性用於在 JavaScript 中引用元素,或者在表單提交後引用表單資料
-
注意
只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值
-
語法
<input name="text"> <!-- text 規定 <input> 元素的名稱 -->
- 例項
<form action="demo_form.php"> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"><br> <input type="submit" value="提交"> </form>
pattern - 正則表示式
-
定義
pattern 屬性規定用於驗證 <input> 元素的值的正則表示式
-
注意
pattern 屬性適用於下面的 input 型別:text、search、url、tel、email 和 password
-
提示
請使用全域性的title 屬性來描述模式以幫助使用者
-
語法
<input pattern="regexp"> <!-- regexp 規定用於驗證 <input> 元素的值的正則表示式 -->
- 例項
<form action="demo-form.php"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input type="submit"> </form>
placeholder - 輸入提示資訊
-
定義
placeholder 屬性規定可描述輸入欄位預期值的簡短的提示資訊(比如:一個樣本值或者預期格式的短描述)
該提示會在使用者輸入值之前顯示在輸入欄位中
-
注意
placeholder 屬性適用於下面的 input 型別:text、search、url、tel、email 和 password
-
提示
可通過 CSS 設定顏色
-
語法
<input placeholder="text"> <!-- text 規定可描述輸入欄位預期值的簡短的提示資訊 -->
- 例項
<form action="demo-form.php"> <input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="提交"> </form> <style> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#909; opacity:1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#909; opacity:1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#909; } </style>
readonly - 輸入欄位只讀
-
定義
readonly 屬性是一個布林屬性
readonly 屬性規定輸入欄位是隻讀的
-
注意
只讀欄位是不能修改的。不過,使用者仍然可以使用 tab 鍵切換到該欄位,還可以選中或拷貝其文字
readonly 屬性可以防止使用者對值進行修改,直到滿足某些條件為止(比如選中了一個複選框)。然後,需要使用 JavaScript 消除 readonly 值,將輸入欄位切換到可編輯狀態
-
語法
<input readonly>
- 例項
<form action="demo_form.php"> Email: <input type="text" name="email"><br> Country: <input type="text" name="country" value="Norway" readonly><br> <input type="submit" value="提交"> </form>
required - 必需在提交表單之前填寫輸入欄位
-
定義
required 屬性是一個布林屬性
required 屬性規定必需在提交表單之前填寫輸入欄位
-
注意
required 屬性適用於下面的 input 型別:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file
-
語法
<input required>
- 例項
<form action="demo-form.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </form>
size -<input> 元素寬度
-
定義
size 屬性規定以字元數計的 <input> 元素的可見寬度
-
注意
size 屬性適用於下面的 input 型別:text、search、tel、url、email 和 password
-
提示
如需規定 <input> 元素中允許的最大字元數,請使用maxlength 屬性
-
語法
<input size="number"> <!-- number 規定以字元數計的 <input> 元素的寬度。預設值是 20 -->
- 例項
<form action="demo_form.php"> Email: <input type="text" name="email" size="35"><br> PIN: <input type="text" name="pin" maxlength="4" size="4"><br> <input type="submit" value="提交"> </form>
src - 影象 URL
-
定義
src 屬性規定顯示為提交按鈕的影象的 URL
-
注意
src 屬性對於 <input type="image"> 是必需的屬性,且只能與 <input type="image"> 配合使用
-
語法
<input src="URL"> <!-- URL 規定作為提交按鈕來使用的影象的 URL -->
- 例項
<form action="demo_form.php"> First name: <input type="text" name="fname"><br> <input type="image" src="submit.gif" alt="Submit" width="48" height="48"> </form>
step - 合法數字間隔
-
定義
step 屬性規定 <input> 元素的合法數字間隔
例項:如果 step="3",則合法數字應該是 -3、0、3、6,以此類推
-
注意
step 屬性適用於下面的 input 型別:number、range、date、datetime、datetime-local、month、time 和 week
-
提示
step 屬性可以與 max 和 min 屬性配合使用,以建立合法值的範圍
-
語法
<input step="number"> <!-- number 規定輸入欄位的合法數字間隔 -->
- 例項
<form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </form>
type - <input> 元素的型別
-
定義
type 屬性規定要顯示的 <input> 元素的型別
預設型別是:text
-
提示
該屬性不是必需的,但是我們認為您應該始終使用它
-
語法
<input type="value"> <!-- value 輸入 <input> 元素的型別 -->
- 例項
<form action="demo-form.php"> 普通按鈕: <input type="button" value="確認" name="type-1"><br> 複選框: <input type="checkbox" name="type-2"><br> 拾色器: <input type="color" name="type-3"><br> 日期 (年月日): <input type="date" name="type-4"><br> 日期+時間 (基於 UTC 時區, 需配合JS): <input type="datetime" name="type-5"><br> 日期+時間 (不帶時區): <input type="datetime-local" name="type-6"><br> 郵箱: <input type="email" name="type-7"><br> 選擇檔案: <input type="file" name="type-8"><br> 隱藏輸入欄位: <input type="hidden" name="type-9"><br> 影象作為提交按鈕: <input type="image" src="//www.baidu.com/img/bd_logo1.png?qua=high" width="80" name="type-10"><br> 日期 (年月): <input type="month" name="type-11"><br> 數字: <input type="number" name="type-12"><br> 密碼: <input type="password" name="type-13"><br> 單選: <input type="radio" name="type-14"><br> 滑動條: <input type="range" min="1" max="10" name="type-15"><br> 重置按鈕: <input type="reset" name="type-16"><br> 搜尋框 (可清空): <input type="search" name="type-17"><br> 提交按鈕: <input type="submit" name="type-18"><br> 電話號碼: <input type="tel" name="type-19"><br> 單行的文字 (預設, 寬度為20字元): <input type="text" name="type-20"><br> 時間: <input type="time" name="type-21"><br> 輸入 URL: <input type="url" name="type-22"><br> 年+周: <input type="week" name="type-23"><br> </form>
value -<input> 元素 value 的值
-
定義
value 屬性規定 <input> 元素的值
value 屬性對於不同 input 型別,用法也不同:
- 對於 "button"、"reset"、"submit" 型別 - 定義按鈕上的文字
- 對於 "text"、"password"、"hidden" 型別 - 定義輸入欄位的初始(預設)值
- 對於 "checkbox"、"radio"、"image" 型別 - 定義與 input 元素相關的值,當提交表單時該值會發送到表單的 action URL
-
注意
value 屬性對於 <input type="checkbox"> 和 <input type="radio"> 是必需的
value 屬性不適用於 <input type="file">
-
語法
<input value="text"> <!-- text 規定 <input> 元素的值 -->
- 例項
<form action="demo_form.php"> First name: <input type="text" name="fname" value="John"><br> Last name: <input type="text" name="lname" value="Doe"><br> <input type="submit" value="提交表單"> </form>
width - <input> 元素的寬度 (只針對type="image")
-
定義
width 屬性規定 <input> 元素的寬度
-
注意
width 屬性只適用於 <input type="image">
-
提示
為圖片指定 height 和 width 屬性是一個好習慣。如果設定了這些屬性,當頁面載入時會為圖片預留需要的空間。而如果沒有這些屬性,則瀏覽器就無法瞭解影象的尺寸,也就無法為其預留合適的空間。情況是當頁面和圖片載入時,頁面佈局會發生變化
-
語法
<input width="pixels"> <!-- pixels 以畫素計的寬度(比如 width="100") -->
- 例項
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="image" src="img_submit.gif"alt="Submit" width="48" height="48"> </form>