表單（Form）基礎

表單結構

<form action="/api/register"    <!-- ← 送出的目標 URL -->
      method="POST"             <!-- ← HTTP 方法 -->
      id="registerForm">

    <!-- 文字輸入 -->
    <label for="username">使用者名稱</label>
    <input type="text" id="username" name="username"
           placeholder="請輸入使用者名稱"
           required                  <!-- ← 必填 -->
           minlength="3"            <!-- ← 最少 3 字 -->
           maxlength="20">          <!-- ← 最多 20 字 -->

    <!-- Email -->
    <label for="email">電子信箱</label>
    <input type="email" id="email" name="email"
           placeholder="example@mail.com"
           required>

    <!-- 密碼 -->
    <label for="password">密碼</label>
    <input type="password" id="password" name="password"
           minlength="8" required>

    <!-- 送出按鈕 -->
    <button type="submit">註冊</button>
</form>

常用 input type

<!-- 文字類 -->
<input type="text">          <!-- 一般文字 -->
<input type="email">         <!-- Email（會驗證格式） -->
<input type="password">      <!-- 密碼（隱藏輸入） -->
<input type="tel">           <!-- 電話（手機會彈數字鍵盤） -->
<input type="url">           <!-- 網址 -->
<input type="search">        <!-- 搜尋框 -->
<input type="number"         <!-- 數字 -->
       min="0" max="100" step="1">
<input type="range"          <!-- 滑桿 -->
       min="0" max="100" value="50">

<!-- 日期時間類 -->
<input type="date">          <!-- 日期選擇器 -->
<input type="time">          <!-- 時間選擇器 -->
<input type="datetime-local"> <!-- 日期+時間 -->
<input type="month">         <!-- 年月 -->
<input type="week">          <!-- 週 -->

<!-- 選擇類 -->
<input type="checkbox">      <!-- 勾選框（可多選） -->
<input type="radio">         <!-- 單選按鈕 -->
<input type="file">          <!-- 檔案上傳 -->
<input type="color">         <!-- 顏色選擇器 -->

<!-- 隱藏 / 按鈕 -->
<input type="hidden" name="token" value="abc123">  <!-- 隱藏欄位 -->
<input type="submit" value="送出">
<input type="reset" value="重設">

選擇控制項

<!-- 下拉選單 -->
<label for="city">城市</label>
<select id="city" name="city">
    <option value="">請選擇</option>
    <option value="taipei">台北</option>
    <option value="kaohsiung" selected>高雄</option>  <!-- 預選 -->
    <optgroup label="東部">
        <option value="hualien">花蓮</option>
        <option value="taitung">台東</option>
    </optgroup>
</select>

<!-- 勾選框 -->
<fieldset>
    <legend>興趣（可多選）</legend>
    <label><input type="checkbox" name="hobby" value="sports"> 運動</label>
    <label><input type="checkbox" name="hobby" value="music"> 音樂</label>
    <label><input type="checkbox" name="hobby" value="reading"> 閱讀</label>
</fieldset>

<!-- 單選按鈕 -->
<fieldset>
    <legend>性別</legend>
    <label><input type="radio" name="gender" value="male"> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>
    <label><input type="radio" name="gender" value="other"> 其他</label>
</fieldset>

<!-- 多行文字 -->
<label for="bio">自我介紹</label>
<textarea id="bio" name="bio"
          rows="4" cols="50"
          placeholder="請簡短介紹自己..."></textarea>

表單驗證屬性

<input required>                  <!-- 必填 -->
<input minlength="3" maxlength="20">  <!-- 字數限制 -->
<input min="1" max="100">        <!-- 數字範圍 -->
<input pattern="[0-9]{3}-[0-9]{4}"> <!-- 正則驗證 -->
<input type="email">              <!-- 自動驗證 Email 格式 -->

檔案上傳

<!-- 單一檔案 -->
<input type="file" name="avatar" accept="image/*">

<!-- 多檔案 -->
<input type="file" name="photos" multiple accept=".jpg,.png,.webp">

<!-- 搭配 form 的 enctype -->
<form method="POST" enctype="multipart/form-data">
    <input type="file" name="document">
    <button type="submit">上傳</button>
</form>