required、min、max、maxlength、pattern 等屬性required 可以避免送出空白資料。min 與 max 適用於 number、date 等欄位。maxlength 可以限制輸入字數。pattern 讓表單能檢查格式，例如電話號碼或郵遞區號。<body>
<h1>註冊帳號</h1>
<form action="/signup" method="post">
<label for="username">使用者名稱：</label>
<input type="text" id="username" name="username" required maxlength="12" placeholder="最多 12 字"><br><br>
<label for="age">年齡：</label>
<input type="number" id="age" name="age" min="18" max="99" required><br><br>
<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" require
placeholder 當提示 → ✅ 使用 label + 驗證屬性required → ✅ 必填欄位應加上 required
min/max 控制輸入合理值pattern 或 title 提示規則maxlength 限制min=18、max=99
pattern 至少 6 字元今天我練習了 HTML5 的表單驗證，發現很多以前需要 JavaScript 才能做的功能，其實 HTML 就能先處理。像 required、pattern 這些屬性，可以在送出前直接阻止錯誤資料，大大提升了使用者體驗。
我特別喜歡 pattern 搭配 title 的組合，不只限制輸入格式，還能提示使用者正確的規則，這樣就不用再額外寫提醒文字了。以前常常覺得表單很麻煩，但現在發現只要規劃得好，很多細節都能用屬性解決。
雖然這些驗證屬性能幫助前端過濾，但我也知道後端仍然要再做一次檢查，才能確保資料安全。這就像健身時不只是要有動作標準，還要有保護機制。
今天的學習讓我覺得表單不只是「輸入框的集合」，而是與使用者溝通的橋樑。
iThome鐵人賽
看影片追技術