HTML 的 <label>
標簽用于定義表單元素的標簽或標題,它可以與以下幾種元素一起使用:
1. 文本輸入框:<input type="text">
、<input type="password">
、<input type="number">
等。
html
<label for="username">Username:</label>
<input type="text" id="username" name="username">
2. 單選按鈕和復選框:<input type="radio">
、<input type="checkbox">
。
html
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
<label for="agree">I agree to the terms and conditions</label>
<input type="checkbox" id="agree" name="agree">
3. 下拉菜單:<select>
元素。
html
<label for="country">Select Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
4. 文件上傳:<input type="file">
。
html
<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar">
for
屬性用于指定關聯的表單元素,通過將 for
屬性的值設置為表單元素的 id
屬性,可以實現點擊標簽時聚焦到相應
的表單元素。這樣做可以提升用戶體驗,使得點擊標簽就能選中對應的表單元素。
需要注意的是,在標簽內部使用文本或其他 HTML 元素,以及設置樣式等操作都是有效的,而且可以通過 CSS 進行定制化。