表單進階與驗證

datalist — 自動完成建議

<label for="browser">瀏覽器</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">          <!-- ← 和 input 的 list 對應 -->
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>
<!-- 使用者輸入時會顯示建議清單 -->

output — 顯示計算結果

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

自訂驗證訊息

<form id="myForm">
    <input type="text" id="phone" name="phone"
           pattern="09\d{8}"
           title="請輸入 09 開頭的 10 位手機號碼"
           required>
    <button type="submit">送出</button>
</form>

<script>
    // JavaScript 自訂驗證
    let phone = document.getElementById("phone");
    phone.addEventListener("input", () => {
        if (phone.validity.patternMismatch) {
            phone.setCustomValidity("手機號碼格式不正確，請輸入 09 開頭的 10 位數字");
        } else {
            phone.setCustomValidity("");   // 清除錯誤訊息
        }
    });
</script>

無障礙表單

<!-- ✅ 用 label + for 關聯 -->
<label for="email">Email</label>
<input type="email" id="email" name="email"
       aria-describedby="email-help">
<small id="email-help">我們不會分享你的 Email</small>

<!-- ✅ 用 fieldset + legend 分組 -->
<fieldset>
    <legend>聯絡方式</legend>
    <label for="phone">電話</label>
    <input type="tel" id="phone">
    <label for="addr">地址</label>
    <input type="text" id="addr">
</fieldset>

<!-- ✅ 錯誤提示 -->
<input type="email" id="email"
       aria-invalid="true"
       aria-errormessage="email-error">
<span id="email-error" role="alert">
    請輸入有效的 Email 地址
</span>

表單安全注意事項

<!-- 1. 用 POST 傳送敏感資料（不要用 GET） -->
<form method="POST">              <!-- ✅ 資料在 body 裡 -->
<form method="GET">               <!-- ❌ 資料在 URL 上，會被看到 -->

<!-- 2. CSRF 防護 -->
<form method="POST">
    <input type="hidden" name="__RequestVerificationToken" value="...">
</form>

<!-- 3. autocomplete 控制 -->
<input type="password" autocomplete="new-password">  <!-- 新密碼 -->
<input type="password" autocomplete="current-password"> <!-- 現有密碼 -->
<input type="text" autocomplete="off">  <!-- 關閉自動填入 -->