HTML 程式札記 : <form> 表單與表單驗證

HTML 表單扮演著收集用戶資訊的重要角色。無論是登入頁面、註冊表、問卷調查，或是任何需要用戶輸入的場景，都離不開 HTML 表單。本文將帶你快速了解 HTML 表單的基礎知識，包括表單的結構、元素及其驗證方式。

HTML 表單基礎

HTML表單（Form）是一種包含表單元素的容器，用於向伺服器傳送數據。它通常包括輸入欄位（input）、選項按鈕（radio buttons）、複選框（checkboxes）、下拉菜單（select boxes）等元素。

表單標籤

一個基本的HTML表單是由<form>標籤定義的。這個標籤可以設定不同的屬性，如action（表單數據要發送到的地方）和method（數據發送方式，通常是GET或POST）。

<form action="submit_form.php" method="post">
  <!-- 表單元素將在此處添加 -->
</form>

輸入欄位

輸入欄位是表單中最常用的元素之一，用於收集用戶輸入的數據。<input>標籤有多種類型，如text、password、submit等。

<input type="text" name="username" placeholder="請輸入用戶名">
<input type="password" name="password" placeholder="請輸入密碼">
<input type="submit" value="提交">

選擇框和複選框

選擇框和複選框提供了選擇選項的功能。它們通常用於提交選擇性問題的答案。

<!-- 選擇框 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<!-- 複選框 -->
<input type="checkbox" name="hobby" value="reading"> 閱讀
<input type="checkbox" name="hobby" value="sports"> 運動

下拉選單

下拉選單（Select Box）允許用戶從多個選項中選擇一個。它由<select>標籤和嵌套的<option>標籤組成。

<select name="country">
  <option value="china">中國</option>
  <option value="usa">美國</option>
  <option value="japan">日本</option>
</select>

表單驗證

HTML 提供了多種表單元素的驗證屬性，讓開發者可以快速實現基本的驗證。

必填（required）

required 屬性用於指定某個表單元素為必填項。例如，要求用戶填寫他們的名字，當表單提交時，如果該欄位為空，瀏覽器會自動提示用戶填寫。

<label for="name">名字：</label>
<input type="text" id="name" name="name" required>

類型驗證（type）

HTML 讓<input>元素支援多種類型，如email、number等，這些類型自帶格式驗證。例如，電子郵件地址的驗證，如果用戶輸入的不是有效的電子郵件格式，瀏覽器會提示錯誤。

<label for="email">電子郵件：</label>
<input type="email" id="email" name="email">

長度限制（minlength 和 maxlength）

這兩個屬性用於限制文字輸入的最小和最大長度。例如，設定密碼長度限制。

<label for="password">密碼（6-12位）：</label>
<input type="password" id="password" name="password" minlength="6" maxlength="12">

正則表達式（pattern）

pattern 屬性允許我們使用正則表達式來定義輸入格式。例如，驗證用戶名只能包含字母和數字。

<label for="username">用戶名：</label>
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]+">

自定義驗證消息（title）

結合title屬性，我們可以為輸入欄位提供自定義的驗證錯誤消息。例如，當輸入不符合正則表達式時，title中的文字將作為錯誤提示顯示給用戶。

<input type="text" pattern="\d+" title="請輸入數字">

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡