HTML 表單元素完整指南：從基礎到進階實作

前言

HTML 表單是網頁與用戶互動的核心橋樑。本文系統整理 9 大類表單元素，提供語法說明、屬性詳解、完整代碼範例與瀏覽器渲染效果，適合前端入門與查閱參考。

1. <form> 表單容器

所有輸入控件必須包裹在 <form> 中，資料才能提交至伺服器。

<form method="post" action="save.php">
  <label for="username">用戶名:</label>
  <input type="text" name="username" />
  <label for="pass">密碼:</label>
  <input type="password" name="pass" />
</form>

關鍵屬性：

• action：提交目標 URL
• method：get (查詢字串) 或 post (請求主體)

2. 文字輸入：<input type="text/password">

<input type="text" name="myName" placeholder="請輸入帳號" />
<input type="password" name="pass" placeholder="請輸入密碼" />

value 設定預設值；placeholder 提供輸入提示 (HTML5)。

3. 多行文字：<textarea>

<textarea cols="40" rows="10" placeholder="請輸入個人簡介..."></textarea>

cols/rows 設定可見寬高；內容置於標籤內作為預設值。

4. 選擇控件：單選 & 核取方塊

單選框

<input type="radio" name="radiolove" value="like" checked> 喜歡
<input type="radio" name="radiolove" value="dislike"> 不喜歡
<input type="radio" name="radiolove" value="unknown"> 無所謂

⚠️ 同組單選框 name 必須相同，才能互斥；value 區分提交值。

核取方塊

<input type="checkbox" name="sports" value="Run" checked> 跑步
<input type="checkbox" name="sports" value="Swim"> 游泳
<input type="checkbox" name="sports" value="Bike"> 騎車

同名 name 會以陣列/逗號分隔形式提交多值。

5. 下拉選單：<select> & <option>

單選

<select name="hobby">
  <option value="read">閱讀</option>
  <option value="travel" selected>旅遊</option>
  <option value="sport">運動</option>
</select>

多選

<select name="skills" multiple size="4">
  <option value="java">Java</option>
  <option value="python">Python</option>
  <option value="js">JavaScript</option>
</select>

Windows 按 Ctrl、Mac 按 Command 多選；size 顯示行數。

6. 按鈕類型

<input type="submit" value="提交" />   <!-- 提交表單 -->
<input type="reset" value="重置" />    <!-- 恢復初始值 -->
<input type="button" value="普通按鈕" /> <!-- 需配合 JS -->
<button type="submit">送出</button>  <!-- 支援 HTML 內容 -->

7. <label> 增強易用性

<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" placeholder="name@example.com" />

點擊 <label> 文字會自動聚焦對應 id 的控件，**無障礙設計必備**。

8. HTML5 新增輸入型別

9. 表單驗證屬性 (HTML5)

<input type="text" required placeholder="必填" />
<input type="email" required pattern="[^@]+@[^@]+\.[^@]+" />
<input type="number" min="0" max="100" step="5" />
<input type="text" maxlength="20" placeholder="最多20字" />

瀏覽器原生攔截提交並顯示錯誤提示，減少前端 JS 驗證代碼。

完整實戰範例

<form action="/api/register" method="post" novalidate>
  <div>
    <label for="username">用戶名</label>
    <input type="text" id="username" name="username" required minlength="3" maxlength="16">
  </div>
  <div>
    <label for="pwd">密碼</label>
    <input type="password" id="pwd" name="password" required pattern=".{8,}" title="至少8字元">
  </div>
  <div>
    <label>性別</label>
    <label><input type="radio" name="gender" value="M" required> 男</label>
    <label><input type="radio" name="gender" value="F"> 女</label>
  </div>
  <div>
    <label for="hobbies">興趣</label>
    <select id="hobbies" name="hobbies" multiple>
      <option value="coding">寫代碼</option>
      <option value="reading">閱讀</option>
      <option value="gaming">打電動</option>
    </select>
  </div>
  <button type="submit">註冊</button>
  <button type="reset">重填</button>
</form>

總結

善用語意化標籤 (<label>, <fieldset>, <legend>)、HTML5 原生驗證、適當的 type 與 name，能構建出**易用、無障礙、易維護**的現代表單。後端接收時，注意 get/post 差異、多值欄位解析、檔案上傳需 enctype="multipart/form-data"。