編程教程HTML < input> 標簽
實例
一個簡單的 HTML 表單，包含兩個文本輸入框和一個提交按鈕：
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
(本頁底部可以查看更多實例)
瀏覽器支持
目前大多數瀏覽器支持 <input>標簽。
標簽定義及使用說明
<input> 標簽規定了用戶可以在其中輸入數據的輸入字段。
<input> 元素在 <form> 元素中使用，用來聲明允許用戶輸入數據的 input 控件。
輸入字段可通過多種方式改變，取決于 type 屬性。它可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
提示和注釋
注意:<input> 元素是空的,它只包含標簽屬性。
提示:你可以使用 <label> 元素來定義 <input> 元素的標注。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中, "align" 數據已經不再使用。HTML5 中不支持該屬性。 可以使用CSS來定義 <input> 元素的對齊方式。
在 HTML5中, <input> 添加了幾個屬性，并且添加了對應的值。
HTML 與 XHTML 之間的差異
在 HTML 中，<input> 標簽沒有結束標簽。
在 XHTML 中，<input> 標簽必須被正確地關閉。
屬性
New : HTML5新標簽。
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | audio/*video/*image/*MIME_type | 規定通過文件上傳來提交的文件的類型。(只針對type="file") |
| align | leftrighttopmiddlebottom | HTML5已廢棄，不贊成使用。規定圖像輸入的對齊方式。 (只針對type="image") |
| alt | text | 定義圖像輸入的替代文本。 (只針對type="image") |
| autocompleteNew | onoff | autocomplete 屬性規定 <input> 元素輸入字段是否應該啟用自動完成功能。 |
| autofocusNew | autofocus | 屬性規定當頁面加載時 <input> 元素應該自動獲得焦點。 |
| checked | checked | checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio") |
| disabled | disabled | disabled 屬性規定應該禁用的 <input> 元素。 |
| formNew | form_id | form 屬性規定 <input> 元素所屬的一個或多個表單。 |
| formactionNew | URL | 屬性規定當表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image") |
| formenctypeNew | application/x-www-form-urlencodedmultipart/form-datatext/plain | 屬性規定當表單數據提交到服務器時如何編碼(只適合 type="submit" 和 type="image")。 |
| formmethodNew | getpost | 定義發送表單數據到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image") |
| formnovalidateNew | formnovalidate | formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。 |
| formtargetNew | _blank_self_parent_topframename | 規定表示提交表單后在哪里顯示接收到響應的名稱或關鍵詞。(只適合 type="submit" 和 type="image") |
| heightNew | pixels | 規定 <input>元素的高度。(只針對type="image") |
| listNew | datalist_id | 屬性引用 <datalist> 元素，其中包含 <input> 元素的預定義選項。 |
| maxNew | numberdate | 屬性規定 <input> 元素的最大值。 |
| maxlength | number | 屬性規定 <input> 元素中允許的最大字符數。 |
| minNew | numberdate | 屬性規定 <input>元素的最小值。 |
| multipleNew | multiple | 屬性規定允許用戶輸入到 <input> 元素的多個值。 |
| name | text | name 屬性規定 <input> 元素的名稱。 |
| patternNew | regexp | pattern 屬性規定用于驗證 <input> 元素的值的正則表達式。 |
| placeholderNew | text | placeholder 屬性規定可描述輸入 <input> 字段預期值的簡短的提示信息。 |
| readonly | readonly | readonly 屬性規定輸入字段是只讀的。 |
| requiredNew | required | 屬性規定必需在提交表單之前填寫輸入字段。 |
| size | number | size 屬性規定以字符數計的 <input> 元素的可見寬度。 |
| src | URL | src 屬性規定顯示為提交按鈕的圖像的 URL。 (只針對type="image") |
| stepNew | number | step 屬性規定 <input> 元素的合法數字間隔。 |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week | type 屬性規定要顯示的 <input> 元素的類型。 |
| value | text | 指定 <input> 元素 value 的值。 |
| widthNew | pixels | width 屬性規定 <input> 元素的寬度。 (只針對type="image") |
全局屬性
<input> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。
事件屬性
<input> 標簽支持所有 HTML事件屬性。
在線實例
創建文本字段 (Text field)
本例演示如何在 HTML 頁面創建文本域。用戶可以在文本域中寫入文本。
創建密碼字段
本例演示如何創建 HTML 的密碼域。
單選按鈕(Radio buttons)
本例演示如何在 HTML 中創建單選按鈕。
復選框(Checkboxes)
本例演示如何在 HTML 頁中創建復選框。用戶可以選中或取消選取復選框。
簡單的下拉列表
本例演示如何在 HTML 頁面中創建簡單的下拉列表框。下拉列表框是一個可選列表。
預選下拉列表
本例演示如何創建一個簡單的帶有預選值的下拉列表。
帶邊框的表單
本例演示如何在數據周圍繪制一個帶標題的框。
帶有輸入框和確認按鈕的表單
本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。
相關閱讀
input雜談