HTML表單

了解如何在HTML中使用表單和所有表單元素標籤

表單是使用Web技術構建的頁面或應用程序中與用戶交互的方式。

您可以通過一組控件與表單交互，當您提交表單時，無論是通過單擊“提交”按鈕還是以編程方式，瀏覽器都會將數據發送到服務器。

默認情況下，數據發送後會導致頁面重新加載，但使用JavaScript，您可以更改這種行為（本書不會介紹該如何更改）。

可以使用標籤來創建一個表單：

<form>
 ...
</form>

默認情況下，表單使用GET HTTP方法提交。這有其缺點，通常您希望使用POST。

您可以使用method屬性來設置表單在提交時使用POST：

<form method="POST">
 ...
</form>

無論是使用GET還是POST提交，表單都將被提交到與其所在的URL相同的URL。

因此，如果表單位於https://flaviocopes.com/contacts頁面上，按下“提交”按鈕將對該URL發起請求。

這可能會導致什麼也不發生。

您需要在服務器端處理該請求，通常在專用URL上“監聽”這些表單提交事件。

您可以通過action參數指定URL：

<form action="/new-contact" method="POST">
 ...
</form>

這將導致瀏覽器使用POST將表單數據提交到相同源的/new-contactURL。

如果源（協議+域名+端口）為“https://flaviocopes.com”（端口80是默認），這意味着表單數據將被發送到https://flaviocopes.com/new-contact。

我談到了數據。什麼數據？

數據通過Web平台上提供的一組控件由用戶提供：

• 輸入框（單行文本）
• 文本區（多行文本）
• 選擇框（從下拉菜單中選擇一個選項）
• 單選按鈕（從始終可見的列表中選擇一個選項）
• 复选框（選擇零個、一個或多個選項）
• 文件上傳
• 等等！

讓我們在以下表單字段概述中介紹每個表單字段。

input標籤

input字段是最常用的表單元素之一。它也是一個非常通用的元素，根據type屬性可以完全更改其行為。

默認行為是成為單行文本輸入控件：

<input />

等效於：

<input type="text" />

與後面的所有字段一樣，您需要給字段命名，以便在提交表單時將其內容發送到服務器：

<input type="text" name="username" />

使用placeholder屬性可以在字段為空時顯示顯示文本，顯示為淺灰色。這對於向用戶添加提示以指導其輸入的內容非常有用：

<input type="text" name="username" placeholder="Your username" />

電子郵件

使用type="email"將在提交之前在瀏覽器中對電子郵件進行語義正確性驗證（不保證電子郵件地址的存在）。

<input type="email" name="email" placeholder="Your email" />

密碼

使用type="password"使輸入的每個鍵顯示為星號(*)或點，對於包含密碼的字段非常有用。

<input type="password" name="password" placeholder="Your password" />

數字

可以使輸入元素僅接受數字：

<input type="number" name="age" placeholder="Your age" />

可以指定所接受的最小和最大值：

<input type="number" name="age" placeholder="Your age" min="18" max="110" />

step屬性有助於識別不同值之間的步驟。例如，這將接受10到50之間以5為步驟的值：

<input type="number" name="a-number" min="10" max="50" step="5" />

隱藏字段

字段可以對用戶隱藏。但是提交表單時它們仍將發送到服務器上：

<input type="hidden" name="some-hidden-field" value="some-value" />

這通常用於存儲像CSRF令牌這樣的值，用於安全和用戶識別，或者甚至用於識別表單及其操作。

設置默認值

所有這些字段都接受預定義值。如果用戶不更改它，則這將是提交到服務器的值：

<input type="number" name="age" value="18" />

如果您設置了佔位符，如果用戶清除了輸入字段的值，將顯示該值：

<input type="number" name="age" placeholder="Your age" value="18" />

表單提交

type="submit"字段是一個按鈕，在用戶按下後提交表單：

<input type="submit">

value屬性設置按鈕上的文本，如果缺少則顯示“Submit”文本：

<input type="submit" value="Click me">

表單驗證

瀏覽器提供了用於表單的客戶端驗證功能。

您可以將字段設置為必填，以確保它們被填寫，並強制執行每個字段的輸入格式。

讓我們看看這兩個選項。

設置字段為必填

required屬性可以幫助您進行驗證。如果未設置該字段，則客戶端驗證失敗，瀏覽器不會提交表單：

<input type="text" name="username" required />

強制執行特定格式

我上面描述了type="email"字段。它根據規範的設置自動驗證電子郵件地址。

在type="number"字段中，我提到了min和max屬性以將輸入的值限定為一個區間內。

您可以做得更多。

您可以對任何字段強制執行特定格式。

pattern屬性使您能夠設置正則表達式以進行驗證。

我建議閱讀我的正則表達式指南flaviocopes.com/javascript-regular-expressions/。

pattern="[https://.\*](https://.*)"

<input type="text" name="username" pattern="[a-zA-Z]{8}" />

其他字段

文件上傳

您可以從您的本地計算機上載入文件並使用type="file"的輸入元素將它們發送到服務器：

<input type="file" name="secret-documents">

您可以附加多個文件：

<input type="file" name="secret-documents" multiple>

您可以使用accept屬性指定一個或多個允許使用的文件類型。它接受圖像：

<input type="file" name="secret-documents" accept="image/\*">

您可以使用特定的MIME類型，比如application/json，或設置一個文件擴展名，比如.pdf。或者設置多個文件擴展名，像這樣：

<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">

按鈕

type="button"輸入字段可用於向表單添加其他按鈕，這些按鈕不是提交按鈕：

<input type="button" value="Click me">

它們用於使用JavaScript以編程方式執行操作。

有一個特殊的字段呈現為按鈕，其特殊操作是清除整個表單並將字段的狀態帶回初始狀態：

<input type="reset">

單選按鈕

單選按鈕用於創建一組選項，其中一個選項被選中，其他選項被禁用。

名稱來自於舊的汽車收音機具有此類界面。

您可以定義一組type="radio"的輸入，其中所有輸入具有相同的name屬性和不同的value屬性：

<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">>

提交表單後，color數據屬性將具有單個值。

總是有一個元素被選中。默認情況下，選中第一個項目。

您可以使用checked屬性設置預選的值。您每組radio輸入只能使用一次。

复選框

與单选框類似，但它們允許選擇多個值，或者不選擇。

您定義一組帶有相同name屬性和不同value屬性的type="checkbox"輸入：

<input type="checkbox" name="color" value="yellow">
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">

所有这些勾选框都将默认未选中。使用checked属性在页面加载时启用它们。

由於該输入字段允许多個值，因此在提交表單時，將以数组形式將值发送到服務器。

日期和時間

我們有幾個輸入類型來接受日期值。

type="date"輸入字段允許用戶輸入日期，如果需要，會顯示日期選擇器：

<input type="date" name="birthday">

type="time"輸入字段允許用戶輸入時間，如果需要，會顯示時間選擇器：

<input type="time" name="time-to-pickup">

type="month"輸入字段允許用戶輸入月和年：

<input type="month" name="choose-release-month">

type="week"輸入字段允許用戶輸入一周和一年：

<input type="week" name="choose-week">

所有這些字段都允許在每個值之間限制范圍和步驟。我建議在MDN上查看有關它們的使用的詳細信息。

type="datetime-local"字段讓您選擇日期和時間。

<input type="datetime-local" name="date-and-time">

這是一個測試所有字段的頁面：https://codepen.io/flaviocopes/pen/ZdWQPm

顏色選擇器

你可以使用type="color"元素讓用戶選擇一個顏色：

<input type="color" name="car-color">

您可以使用value屬性設置默認值：

<input type="color" name="car-color" value="#000000">

瀏覽器將負責顯示顏色選擇器給用戶。

范圍

此輸入元素顯示一個滑塊元素。人們可以使用它從開始值移動到結束值：

<input type="range" name="age" min="0" max="100" value="30">

您可以提供可選的步驟：

<input type="range" name="age" min="0" max="100" value="30" step="10">

電話

type="tel"輸入字段用於輸入電話號碼：

<input type="tel" name="telephone-number">

對於使用tel而不是text的主要優點在於在移動設備上，設備可以選擇顯示數字鍵盤。

為附加驗證指定pattern屬性：

<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">

URL

type="url"字段用於輸入URL。

<input type="url" name="website">

您可以使用pattern屬性對其進行驗證：

<input type="url" name="website" pattern="https://.\*">

textarea標籤

textarea元素允許用戶輸入多行文本。與input相比，它需要一個結束標記：

<textarea></textarea>

您可以使用CSS設置尺寸，也可以使用rows和cols屬性：

<textarea rows="20" cols="10"></textarea>

與其他表單標籤一樣，name屬性確定數據傳送到服務器的名稱：

<textarea name="article"></textarea>

select標籤

此標籤用於創建下拉菜單。

用戶可以選擇其中一個可用的選項。

每個選項都使用option標籤創建。您向選擇添加一個名稱，並為每個選項添加一個值：

<select name="color">
 <option value="red">Red</option>
 <option value="yellow">Yellow</option>
</select>

您可以設置一個選項禁用：

<select name="color">
 <option value="red" disabled>Red</option>
 <option value="yellow">Yellow</option>
</select>

您可以有一個空選項：

<select name="color">
 <option value="">None</option>
 <option value="red">Red</option>
 <option value="yellow">Yellow</option>
</select>

可以使用optgroup標籤對選項進行分組。每個選項組都有一個label屬性：

<select name="color">
 <optgroup label="Primary">
 <option value="red">Red</option>
 <option value="yellow">Yellow</option>
 <option value="blue">Blue</option>
 </optgroup>
 <optgroup label="Others">
 <option value="green">Green</option>
 <option value="pink">Pink</option>
 </optgroup>
</select>