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 設定
無。