<form>
<input>、<textarea>、<button>
type、name、value、placeholder、required
<label> 與可用性的關係type="email"、type="password"、type="number" 都有不同檢查與介面。<body>
<h1>聯絡我們</h1>
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="請輸入姓名" required>
<br><br>
<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" placeholder="example@mail.com" required>
<br><br>
<label for="message">留言：</label><br>
<textarea id="message" name="message" rows="5" cols="30" placeholder="請輸入訊息"></textarea>
<br><br>
<button type="submit">送出</button>
</form>
</body>
label → ✅ 提升可用性與無障礙體驗type="text" → ✅ 依需求使用 email、password、number
name → ✅ 後端需要 name 來接收資料placeholder 當標籤 → ✅ 使用 <label>，placeholder 僅作輔助<textarea>
<label>
required 驗證必填password 欄位並測試今天進入到表單的部分，感覺像是前端世界的一個轉折點，因為它不再只是靜態顯示，而是開始與使用者互動。透過 <form> 和各種輸入欄位，我能收集資訊並傳送到後端，這讓網頁變得真正「活起來」。
練習的時候我特別注意 label 的用法，以前常常忽略，結果使用體驗很差，現在才知道它對無障礙設計的重要性。type 的選擇也讓我體會到，瀏覽器其實能幫忙做很多檢查，例如 email 格式或數字輸入。
雖然目前還沒接觸後端，但我能感覺到這一步是必要的基礎。就像打地基一樣，先把表單結構設計好，未來才能接 API 或資料庫。一步一步，網站真的開始有了靈魂。
iThome鐵人賽
看影片追技術
看更多