HTML 標籤的 type 屬性

HTML <input> 標籤的 type 屬性

HTML <input> 標籤

實例

下面的表單擁有兩個輸入字段以及一個提交按鈕：

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

親自試一試

定義和用法

type 屬性規定 input 元素的類型。

語法

<input type="value">

屬性值

值	描述
button	定義可點擊按鈕（多數狀況下，用於經過 JavaScript 啓動腳本）。
checkbox	定義複選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段。
image	定義圖像形式的提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的全部數據。
submit	定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。

Text

<input type="text" /> 定義用戶可輸入文本的單行輸入字段。

Email: <input type="text" name="email" />
Pin: <input type="text" name="pin" />

TIY

Button

<input type="button" /> 定義可點擊的按鈕，但沒有任何行爲。button 類型經常使用於在用戶點擊按鈕時啓動 JavaScript 程序。

<input type="button" value="Click me" onclick="msg()" />

TIY

Checkbox

<input type="checkbox" /> 定義複選框。複選框容許用戶在必定數目的選擇中選取一個或多個選項。

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="checkbox" name="vehicle" value="Car" /> I have a car

TIY

File

<input type="file" /> 用於文件上傳。

<input type="file" />

TIY

Hidden

<input type="hidden" /> 定義隱藏字段。隱藏字段對於用戶是不可見的。隱藏字段一般會存儲一個默認值，它們的值也能夠由 JavaScript 進行修改。

<input type="hidden" name="country" value="Norway" />

TIY

Image

<input type="image" /> 定義圖像形式的提交按鈕。

必須把 src 屬性 和 alt 屬性 與 <input type="image"> 結合使用。

<input type="image" src="submit.gif" alt="Submit" />

TIY

Password

<input type="password" /> 定義密碼字段。密碼字段中的字符會被掩碼（顯示爲星號或原點）。

<input type="password" name="pwd" />

TIY

Radio

<input type="radio" /> 定義單選按鈕。單選按鈕容許用戶選取給定數目的選擇中的一個選項。

<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female

TIY

Reset Button

<input type="reset" /> 定義重置按鈕。重置按鈕會清除表單中的全部數據。

<input type="reset" />

TIY

Submit

<input type="submit" /> 定義提交按鈕。提交按鈕用於向服務器發送表單數據。數據會發送到表單的 action 屬性中指定的頁面。

<form action="form_action.asp" method="get">
Email: <input type="text" name="email" />
<input type="submit" />
</form>

TIY

HTML <input> 標籤