HTML <label>แท็ก
ตัวอย่าง
ปุ่มตัวเลือกสามปุ่มพร้อมป้ายกำกับ:
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio"
id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
ความหมายและการใช้งาน
แท็ ก<label>กำหนดป้ายกำกับสำหรับองค์ประกอบหลายอย่าง:
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="เดือน">
- <input type="number">
- <input type="รหัสผ่าน">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <เมตร>
- <ความคืบหน้า>
- <select>
- <textarea>
การใช้ฉลากที่มีองค์ประกอบข้างต้นอย่างเหมาะสมจะเป็นประโยชน์:
- ผู้ใช้โปรแกรมอ่านหน้าจอ (จะอ่านออกเสียงฉลากเมื่อผู้ใช้จดจ่อกับองค์ประกอบ)
- ผู้ใช้ที่มีปัญหาในการคลิกในพื้นที่เล็กๆ น้อยๆ (เช่น ช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายใน
<label>องค์ประกอบ ระบบจะสลับอินพุต (จะเพิ่มพื้นที่ Hit)
เคล็ดลับและหมายเหตุ
เคล็ดลับ:แอตทริบิวต์ for ของ<label>
ต้องเท่ากับแอตทริบิวต์ id ขององค์ประกอบที่เกี่ยวข้องเพื่อผูกเข้าด้วยกัน ป้ายกำกับยังสามารถผูกกับองค์ประกอบโดยการวางองค์ประกอบภายใน<label>องค์ประกอบ
รองรับเบราว์เซอร์
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
คุณลักษณะ
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
คุณสมบัติสากล
แท็ ก<label>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<label>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
หน้าที่เกี่ยวข้อง
การอ้างอิง HTML DOM: Label Object
การตั้งค่า CSS เริ่มต้น
เบราว์เซอร์ส่วนใหญ่จะแสดง<label>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
label {
cursor: default;
}