HTML แบบตัวย่อ <label>

  • หน้าก่อน <kbd>
  • หน้าต่อไป <legend>

การใช้งานและความหมาย

<label> แท็กกำหนดแท็ก (ทางหมาย) สำหรับองค์ประกอบ input

แท็ก label จะไม่แสดงผลพิเศษให้ผู้ใช้คนเด็ดขาด แต่มันช่วยในการปรับปรุงความงามในการใช้งานสำหรับผู้ใช้เมาส์。หากคุณคลิกข้อความด้วยแท็ก label จะกระตุ้นการควบคุมนี้ นั่นก็คือ ขณะที่ผู้ใช้เลือกแท็กนี้ บราวเซอร์จะโอนความสนใจอัตโนมัติไปยังองค์ประกอบฟอร์มที่เกี่ยวข้อง

<label> แท็กของ คุณสมบัติ for ควรตรงกับคุณสมบัติ id ขององค์ประกอบที่เกี่ยวข้อง

<label> แท็กสามารถกำหนดแท็ก (ทางหมาย) สำหรับองค์ประกอบหลายองค์ประกอบได้

การใช้องค์ประกอบดังกล่าวกับแท็กในทางที่ถูกต้องจะเป็นประโยชน์ต่อผู้ใช้ต่อไปนี้：

  • ผู้ใช้เครื่องอ่านหน้าจอ (เมื่อผู้ใช้เลือกองค์ประกอบ จะอ่านแท็ก)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label>

การกดบนพื้นที่ที่เล็กมากเกินไป (เช่น ตัวบล็อคชีค์) จะยากที่จะกดเพราะเมื่อผู้ใช้กด

ดูเพิ่มเติมที่คู่มืออ้างอิง HTML DOM

แอ็คต์วอร์

ตัวอย่าง

สามองค์ประกอบเลือกเดียวที่มี 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="ส่ง">

ทดลองด้วยตัวเอง

</form>

คำเตือนและหมายเหตุ<label> คำเตือน： <label> องค์ประกอบจะผูกแท็กไปยังองค์ประกอบ ซึ่งจะผูกกับองค์ประกอบที่มีค่า for ที่เท่ากับค่า id ขององค์ประกอบที่เกี่ยวข้อง ยังสามารถผูกด้วยการจัดวางองค์ประกอบใน

รูปแบบ

รูปแบบ ค่า การอธิบาย
for id องค์ประกอบ กำหนด label ที่จะถูกผูกกับองค์ประกอบฟอร์มไหน
form id ฟอร์ม กำหนดสำหรับตารางฟอร์มที่องค์ประกอบ label อยู่

รูปแบบทางเหตุการณ์ทั่วไป

<label> แท็กตะกร้ายังสนับสนุน รูปแบบทางเหตุการณ์ทั่วไปใน HTML。

รูปแบบทางเหตุการณ์

<label> แท็กตะกร้ายังสนับสนุน รูปแบบทางเหตุการณ์ใน HTML。

การตั้งค่า CSS โดยเริ่มต้น

โปรแกรมบราวเซอร์ส่วนใหญ่จะแสดงค่าเริ่มต้นตามตารางด้านล่าง <label> องค์ประกอบ：

label {
  cursor: default;
}

ทดลองด้วยตัวเอง

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อน <kbd>
  • หน้าต่อไป <legend>