參考手冊

HTML <input> 標籤

實例

一個簡單的 HTML 表單，包含兩個文字輸入框和一個提交按鈕：

<form action="form_action.php" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

（您可以在頁面底部找到更多實例）

瀏覽器支援

IE Firefox Chrome Safari Opera

所有瀏覽器都支援 <input> 標籤。

定義和用法

<input> 標籤用於蒐集會員資訊。

根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、覈取方塊、掩碼后的文字控制元件、單選按鈕、按鈕等等。

HTML 與 XHTML 之間的差異

在 HTML 中，<input> 標籤沒有結束標籤。

在 XHTML 中，<input> 標籤必須被正確地關閉。

提示和註釋：

提示：請使用 label 元素為某個表單控制元件定義標籤。

屬性

new : HTML5 中的新屬性。

屬性 值 描述
accept mime_type 規定通過檔案上傳來提交的檔案的型別。
align
  • left
  • right
  • top
  • middle
  • bottom
 不贊成使用。規定影像輸入的對齊方式。
alt text 定義影像輸入的替代文字。
autocomplete
  • on
  • off
 規定是否使用輸入欄位的自動完成功能。
autofocus autofocus

規定輸入欄位在頁面載入時是否獲得焦點。

（不適用于 type="hidden"）
checked checked 規定此 input 元素首次載入時應當被選中。
disabled disabled 當 input 元素載入時禁用此元素。
form formname 規定輸入欄位所屬的一個或多個表單。
formaction URL

覆蓋表單的 action 屬性。

（適用於 type="submit" 和 type="image"）
formenctype 見註釋

覆蓋表單的 enctype 屬性。

（適用於 type="submit" 和 type="image"）
formmethod
  • get
  • post

覆蓋表單的 method 屬性。

（適用於 type="submit" 和 type="image"）
formnovalidate formnovalidate

覆蓋表單的 novalidate 屬性。

如果使用該屬性，則提交表單時不進行驗證。
formtarget
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆蓋表單的 target 屬性。

（適用於 type="submit" 和 type="image"）
height
  • pixels
  • %
 定義 input 欄位的高度。（適用於 type="image"）
list datalist-id 引用包含輸入欄位的預定義選項的 datalist 。
max
  • number
  • date

規定輸入欄位的最大值。

請與 "min" 屬性配合使用，來建立合法值的範圍。
maxlength number 規定輸入欄位中的字元的最大長度。
min
  • number
  • date

規定輸入欄位的最小值。

請與 "max" 屬性配合使用，來建立合法值的範圍。
multiple multiple 如果使用該屬性，則允許一個以上的值。
name field_name 定義 input 元素的名稱。
pattern regexp_pattern

規定輸入欄位的值的模式或格式。

例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。
placeholder text 規定幫助會員填寫輸入欄位的提示。
readonly readonly 規定輸入欄位為只讀。
required required 指示輸入欄位的值是必需的。
size number_of_char 定義輸入欄位的寬度。
src URL 定義以提交按鈕形式顯示的影像的 URL。
step number 規定輸入字的的合法數字間隔。
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
 規定 input 元素的型別。
value value 規定 input 元素的值。
width
  • pixels
  • %
 定義 input 欄位的寬度。（適用於 type="image"）

全域性屬性

<input> 標籤支援 HTML 中的全域性屬性。

事件屬性

<input> 標籤支援 HTML 中的事件屬性。

TIY 實例

文字域(Text fields)
本例演示如何在 HTML 頁面建立文字域。會員可以在文字域寫入文字。
密碼域
本例演示如何建立 HTML 的密碼域。
覈取方塊
本例演示如何在 HTML 頁中建立文字框。會員可以選中或取消選取覈取方塊。
單選按鈕
本例演示如何在 HTML 中建立單選按鈕。
簡單的下拉選單
本例演示如何在 HTML 頁面中建立簡單的下拉選單框。下拉選單框是一個可選列表。
另一個下拉選單
本例演示如何建立一個簡單的帶有預選值的下拉選單。（譯者註：預選值指預先指定的首選項。）
文字域(Textarea)
本例演示如何建立一個文字域（多行文字輸入控制）。會員可以在文字域中寫入文字。在文字域中，可寫入的字元字數不受限制。
建立按鈕
本例演示如何建立按鈕。你可以對按鈕上的文字進行自定義。
圍繞資料的Fieldset
本例演示如何在資料周圍繪製一個帶標題的框。
帶有輸入框和確認按鈕的表單
本例演示如何向頁面新增表單。此表單包含兩個輸入框和一個確認按鈕。
帶有覈取方塊的表單
此表單包含兩個覈取方塊和一個確認按鈕。
帶有單選按鈕的表單
此表單包含兩個單選框和一個確認按鈕。
從表單發送電子郵件
此例演示如何從表單發送電子郵件。

相關頁面

HTML DOM 參考手冊：