HTML <input> 標籤
示例
一個帶有三個輸入欄位的 HTML 表單;兩個文字欄位和一個提交按鈕
<form action="/action_page.php">
<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="submit" value="提交">
</form>
自己動手試一試 »定義和用法
HTML <input>
標籤用於指定使用者可以輸入資料的輸入欄位。
<input>
元素是最重要的表單元素。
<input>
元素可以顯示多種方式,具體取決於 type 屬性。
不同的輸入型別如下:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
(預設值)<input type="time">
<input type="url">
<input type="week">
檢視 type 屬性,瞭解每種輸入型別的示例!
提示和註釋
提示:始終使用 <label> 標籤為 <input type="text">
、<input type="checkbox">
、<input type="radio">
、<input type="file">
和 <input type="password">
定義標籤。
瀏覽器支援
元素 | |||||
---|---|---|---|---|---|
<input> | 是 | 是 | 是 | 是 | 是 |
屬性
Attribute | 值 | 描述 |
---|---|---|
accept | file_extension audio/* video/* image/* media_type |
指定使用者在檔案選擇對話方塊中可以選擇的檔案型別的過濾器(僅適用於 type="file") |
alt | text | 為影像指定替代文字(僅適用於 type="image") |
autocomplete | on off |
指定是否啟用 <input> 元素的自動完成功能 |
autofocus | autofocus | 指定頁面載入時 <input> 元素應自動獲得焦點 |
checked | checked | 指定頁面載入時 <input> 元素應預先選中(適用於 type="checkbox" 或 type="radio") |
dirname | inputname.dir | 指定將提交文字方向 |
disabled | disabled | 指定 <input> 元素應被停用 |
form | form_id | 指定 <input> 元素所屬的表單 |
formaction | URL | 指定提交表單時表單資料應如何編碼(適用於 type="submit" 和 type="image") |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
指定提交表單時表單資料應如何編碼(適用於 type="submit" 和 type="image") |
formmethod | get post |
定義提交到 action URL 的資料的 HTTP 方法(適用於 type="submit" 和 type="image") |
formnovalidate | formnovalidate | 定義提交時表單元素不應進行驗證 |
formtarget | _blank _self _parent _top framename |
指定提交表單後收到的響應應顯示的位置(適用於 type="submit" 和 type="image") |
height | 畫素 | <input> 元素的 height(僅適用於 type="image") |
列表 | datalist_id | 引用包含 <input> 元素的預定義選項的 <datalist> 元素 |
max | 數字 date |
指定 <input> 元素的最大值 |
maxlength | 數字 | 指定 <input> 元素允許的最大字元數 |
分鐘 | 數字 date |
指定 <input> 元素的最小值 |
minlength | 數字 | 指定 <input> 元素所需的最小字元數 |
multiple | multiple | 指定使用者可以在 <input> 元素中輸入多個值 |
name | text | 指定 <input> 元素的名稱 |
pattern | regexp | 指定 <input> 元素的值要檢查的正則表示式 |
placeholder | text | 指定描述 <input> 元素預期值的簡短提示 |
popovertarget | element_id | 指定要呼叫的彈出式元素(僅適用於 type="button") |
popovertargetaction | hide show toggle |
指定點選按鈕時彈出式元素會發生什麼(僅適用於 type="button") |
readonly | readonly | 指定輸入欄位是否為只讀 |
required | required | 指定在提交表單之前必須填寫輸入欄位 |
大小 | 數字 | <input> 元素的寬度(以字元為單位) |
src | URL | 指定用作提交按鈕的影像的 URL(僅適用於 type="image") |
step |
number any |
指定輸入欄位中合法數字的間隔 |
type | button checkbox color date datetime-local 電子郵件 file hidden 圖片 month 數字 password 收音機 range reset search submit tel text time url week |
指定要顯示的 <input> 元素型別 |
value | text | 指定 <input> 元素的值 |
width | 畫素 | <input> 元素的 width(僅適用於 type="image") |
全域性屬性
<input>
標籤也支援 HTML 中的全域性屬性。
事件屬性
<input>
標籤也支援 HTML 中的事件屬性。
相關頁面
HTML 教程
HTML DOM 參考
- Input Button 物件
- Input Checkbox 物件
- Input Color 物件
- Input Date 物件
- Input Datetime 物件
- Input DatetimeLocal 物件
- Input Email 物件
- Input FileUpload 物件
- Input Hidden 物件
- Input Image 物件
- Input Month 物件
- Input Number 物件
- Input Password 物件
- Input Range 物件
- Input Radio 物件
- Input Reset 物件
- Input Search 物件
- Input Submit 物件
- Input Text 物件
- Input Time 物件
- Input URL 物件
- Input Week 物件
預設 CSS 設定
無。