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="請輸入數字">
😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊
