最新！我的 44 頁電子書「44 分鐘學會 CSS」已經出版了！ 😃

現在取得 →

# 輸入

在網頁表單中定義互動式控制項。

範例： 複製 

<input type="text" name="first_name" placeholder="e.g. Alex">

類型

定義表單輸入的類型。

必要。

"文字"

接受任何字元的簡單單行文字輸入

"電子郵件"

類似文字輸入，但瀏覽器會嘗試只允許有效的電子郵件地址。

在行動裝置上，電子郵件鍵盤會顯示。

"數字"

類似文字輸入，但瀏覽器會嘗試只允許有效的數字。

在行動裝置上，數字鍵盤會顯示。

"核取方塊"

只能處於兩種狀態之一（已勾選或未勾選）的切換核取方塊。只有在核取方塊已勾選時，才會由表單提交其值。

您可以將核取方塊包在標籤中，以增加按一下區域。

<label>
  <input type="checkbox">
  I accept the terms and conditions
</label>

請注意按一下文字如何切換核取方塊。

"單選按鈕"

需要與其他單選按鈕結合使用，以便它們互斥。

您可以透過類似的 name 值連結單選按鈕

<label>
  <input type="radio" name="newsletter" value="yes">
  Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  No
</label>

請注意按一下一個按鈕會取消選取另一個按鈕。

"提交"

按一下或按下 Enter 時觸發的提交按鈕。

名稱

定義表單中該輸入的唯一識別碼。它允許伺服器在提交時存取每個輸入的值。

必要。

"first_name"

名稱值在 <form> 容器的內容中必須是唯一的。

它只能包含字母數字字元 a-z A-Z 0-9 和一些特殊字元，例如 - _… 但不能有空格。

提示文字

定義只有在輸入為空時才會顯示的不可選取提示文字。

建議的做法是使用標籤來描述輸入，並使用提示文字展示範例

<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. [email protected]">
</form>

請注意提示文字會在焦點上消失，因此需要保留一個獨立的標籤。

必要

告訴瀏覽器此輸入是必要的。將其留空會顯示警告。

不需要值。

您只需加上沒有值的 required 屬性

<form>
  <input type="text" required>
</form>

如果您嘗試提交包含空白文字輸入的表單，瀏覽器應會顯示警告。

disabled

停用輸入。

不需要值。