HTML 表單詳解：構建用戶交互的完整指南

在上一篇文章中，我們學習了HTML的基礎標簽和頁面結構。今天我們將深入探討HTML中最重要的交互元素——表單。表單是網頁與用戶交互的核心組件，從簡單的登錄頁面到復雜的數據收集系統，都離不開表單的支持。

表單基礎概念

表單（Form）是HTML中用于收集用戶輸入的容器。它包含各種輸入控件，如文本框、選擇框、按鈕等，用戶填寫完成后可以提交給服務器處理。

表單的基本結構

<form action="處理表單的URL" method="提交方法" enctype="編碼類型"><!-- 表單控件 --><input type="text" name="username" placeholder="請輸入用戶名"><button type="submit">提交</button>
</form>

核心屬性詳解

action屬性：指定表單數據提交的目標地址

可以是相對路徑：action="submit.php"
可以是絕對路徑：action="https://example.com/api/submit"
留空則提交到當前頁面

method屬性：指定數據傳輸方式

GET：數據附加在URL后面，適合搜索等操作
POST：數據在請求體中傳輸，適合敏感信息和大量數據

enctype屬性：指定數據編碼方式

application/x-www-form-urlencoded（默認）
multipart/form-data（文件上傳時必須）
text/plain（純文本，較少使用）

GET vs POST：深入理解提交方式

GET方式特點

<form action="search.php" method="get"><input type="text" name="keyword" placeholder="搜索關鍵詞"><button type="submit">搜索</button>
</form>

特點：

數據顯示在URL中：search.php?keyword=HTML
數據長度限制（通常2048字符）
可以被書簽保存
適合搜索、分頁等操作
不適合敏感信息

POST方式特點

<form action="login.php" method="post"><input type="text" name="username" placeholder="用戶名"><input type="password" name="password" placeholder="密碼"><button type="submit">登錄</button>
</form>

特點：

數據在請求體中，URL不可見
數據長度無限制
不能被書簽保存
適合登錄、注冊、文件上傳
相對安全

輸入控件詳解

文本輸入控件

<!-- 基本文本框 -->
<input type="text" name="username" value="默認值" placeholder="請輸入用戶名"maxlength="20" size="30"required>
?
<!-- 密碼框 -->
<input type="password" name="password" placeholder="請輸入密碼"minlength="6" maxlength="20">
?
<!-- 多行文本域 -->
<textarea name="description" rows="5" cols="50" placeholder="請輸入詳細描述"maxlength="500">默認內容</textarea>

屬性說明：

placeholder：提示文本（HTML5）
maxlength：最大字符數
minlength：最小字符數（HTML5）
size：顯示寬度
required：必填驗證（HTML5）

選擇控件

單選按鈕（Radio Button）

<fieldset><legend>請選擇性別：</legend><label><input type="radio" name="gender" value="male" checked>男性</label><label><input type="radio" name="gender" value="female">女性</label><label><input type="radio" name="gender" value="other">其他</label>
</fieldset>

關鍵點：

同一組單選按鈕必須有相同的name屬性
value屬性指定選中時的值
checked屬性設置默認選中

復選框（Checkbox）

<fieldset><legend>請選擇興趣愛好：</legend><label><input type="checkbox" name="hobbies[]" value="reading">閱讀</label><label><input type="checkbox" name="hobbies[]" value="sports" checked>運動</label><label><input type="checkbox" name="hobbies[]" value="music">音樂</label>
</fieldset>

下拉選擇框

<!-- 單選下拉框 -->
<label for="country">選擇國家：</label>
<select name="country" id="country" required><option value="">請選擇</option><option value="cn">中國</option><option value="us">美國</option><option value="jp" selected>日本</option>
</select>
?
<!-- 多選下拉框 -->
<label for="skills">選擇技能：</label>
<select name="skills[]" id="skills" multiple size="4"><option value="html">HTML</option><option value="css" selected>CSS</option><option value="js" selected>JavaScript</option><option value="php">PHP</option>
</select>

按鈕控件

<!-- 不同類型的按鈕 -->
<button type="submit">提交表單</button>
<button type="reset">重置表單</button>
<button type="button" onclick="customFunction()">自定義按鈕</button>
?
<!-- input方式的按鈕 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按鈕">
<input type="image" src="submit-btn.png" alt="圖像按鈕">

文件上傳

<form enctype="multipart/form-data" method="post" action="upload.php"><!-- 單文件上傳 --><label for="avatar">上傳頭像：</label><input type="file" id="avatar" name="avatar" accept="image/*"required><!-- 多文件上傳 --><label for="documents">上傳文檔：</label><input type="file" id="documents" name="documents[]" accept=".pdf,.doc,.docx"multiple><button type="submit">上傳文件</button>
</form>

重要屬性：

accept：限制文件類型
multiple：允許多文件選擇
表單必須設置enctype="multipart/form-data"

HTML5新增輸入類型

HTML5為表單增加了許多新的輸入類型，提供了更好的用戶體驗和內置驗證：

<!-- 郵箱驗證 -->
<input type="email" name="email" placeholder="請輸入郵箱地址"required>
?
<!-- URL驗證 -->
<input type="url" name="website" placeholder="https://example.com">
?
<!-- 數字輸入 -->
<input type="number" name="age" min="18" max="120" step="1"placeholder="請輸入年齡">
?
<!-- 范圍滑塊 -->
<label for="volume">音量控制：</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50"oninput="updateVolume(this.value)">
<span id="volumeValue">50</span>
?
<!-- 日期選擇 -->
<input type="date" name="birthday" min="1900-01-01" max="2023-12-31">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
?
<!-- 搜索框 -->
<input type="search" name="query" placeholder="搜索..."autocomplete="off">
?
<!-- 電話號碼 -->
<input type="tel" name="phone" placeholder="請輸入手機號"pattern="[0-9]{11}">
?
<!-- 顏色選擇器 -->
<input type="color" name="themeColor" value="#ff0000">

表單驗證

內置驗證屬性

<form><!-- 必填驗證 --><input type="text" name="username" required><!-- 長度驗證 --><input type="password" name="password" minlength="8" maxlength="20" required><!-- 數值范圍驗證 --><input type="number" name="score" min="0" max="100" step="0.1"><!-- 正則表達式驗證 --><input type="text" name="phone" pattern="^1[3-9]\d{9}$" title="請輸入正確的手機號碼格式"><!-- 自定義驗證消息 --><input type="email" name="email" required oninvalid="this.setCustomValidity('請輸入有效的郵箱地址')"oninput="this.setCustomValidity('')">
</form>

常用正則表達式

<!-- 手機號驗證 -->
<input type="tel" pattern="^1[3-9]\d{9}$" title="請輸入11位手機號">
?
<!-- 身份證號驗證 -->
<input type="text" pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$" title="請輸入正確的身份證號">
?
<!-- 密碼強度驗證（至少包含數字和字母） -->
<input type="password" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$" title="密碼至少8位，包含字母和數字">

表單狀態控制

只讀和禁用

<!-- 只讀：用戶不能修改，但會提交 -->
<input type="text" name="username" value="admin" readonly>
?
<!-- 禁用：用戶不能修改，也不會提交 -->
<input type="text" name="backup" value="系統保留" disabled>
?
<!-- 動態控制狀態 -->
<script>
function toggleInput() {const input = document.getElementById('conditionalInput');input.disabled = !input.disabled;
}
</script>
?
<input type="checkbox" onchange="toggleInput()"> 啟用輸入框
<input type="text" id="conditionalInput" disabled>

隱藏域

<!-- 隱藏域：不顯示給用戶，但會提交 -->
<input type="hidden" name="userId" value="12345">
<input type="hidden" name="token" value="abc123xyz">
<input type="hidden" name="version" value="2.1">

<form><fieldset><legend>基本信息</legend><label for="name">姓名：</label><input type="text" id="name" name="name"><label for="email">郵箱：</label><input type="email" id="email" name="email"></fieldset><fieldset><legend>聯系方式</legend><label for="phone">電話：</label><input type="tel" id="phone" name="phone"><label for="address">地址：</label><textarea id="address" name="address"></textarea></fieldset><fieldset><legend>偏好設置</legend><label><input type="checkbox" name="newsletter" value="1">訂閱郵件通知</label></fieldset>
</form>