placeholder、required、readonly、disabled、autocomplete
min、max、step 控制數字輸入範圍multiple、accept 在檔案上傳中的應用<label>。min、max、step 讓數字欄位更精準。<body>
<h1>表單進階屬性示範</h1>
<form>
<label for="username">使用者名稱：</label>
<input type="text" id="username" name="username" placeholder="輸入名稱" required><br><br>
<label for="age">年齡：</label>
<input type="number" id="age" name="age" min="18" max="99" step="1"><br><br>
<label for="email">Email：</label>
<input type="email" id="email" name="email" autocomplete="on"><br><br>
<label for="note">備註：</label>
<input type="text" id="note" name="note" value="唯讀內容" readonly><br><br>
<label for="upload">上傳檔案：</label>
<input type="file" id="upload" name="upload" accept=".jpg,.png" multiple><br><br>
<button type="submit">送出</button>
</form>
</body>
placeholder 當成唯一提示 → ✅ 加上 <label>，提升無障礙體驗required → ✅ 關鍵欄位應強制填寫readonly 與 disabled → ✅ 分清送出行為差異accept 避免上傳錯誤檔案required 的登入表單min、max、step
autocomplete 的效果今天深入學習表單進階屬性，發現很多小細節能大幅提升使用者體驗。像 required 這種基本設定，就能避免漏填資料；而 readonly 與 disabled 的差異，也讓我更清楚在不同情境下該怎麼用。
我覺得 autocomplete 是一個被低估的功能，它能自動帶入使用者先前輸入的資料，對表單填寫效率幫助很大。而在檔案上傳中，透過 accept 與 multiple，就能有效控制格式與數量，避免使用者上傳錯誤的東西。
這些小小的屬性就像「潤滑劑」，雖然不會改變大方向，但卻能讓表單的體驗變得更加順暢。未來如果搭配 JavaScript 驗證，應該能打造更完整的互動效果。
iThome鐵人賽
看影片追技術