ใน HTML เราจะเรียกคำที่อยู่ในเครื่องหมาย <> ว่าแท็ก (เฉพาะคำแรกเท่านั้น) เช่น <A> ก็คือ A แท็ก (หรือแท็ก A แบบไทย ๆ) ส่วน ค่าที่เรากำหนดต่าง ๆ ภายในแท็ก จะเรียกว่า คุณสมบัติ หรือ Attribute เช่น <A href=”http://blog.chonla.com>ไปอ่านบล็อก</A> จะมี href เป็น attribute ของแท็ก A และมี http://blog.chonla.com เป็นค่าของ attribute href นั่นเอง ส่วนคำว่า “ไปอ่านบล็อก” จะเรียกว่า inner-text ของแท็ก A ส่วน <A href=”…”>…</A> เราจะเรียกรวม ๆ ว่า Element ครับ

แอบนอกเรื่องไปนิดนึง วกกลับมาที่ <LABEL> ดีกว่าครับ (จากนี้ ผมจะเขียนเป็นตัวเล็ก เพื่อความสะดวกนะครับ <label>) ตัว <label> เอง ความจริงแล้ว ไม่ได้ทำให้การแสดงผลมีอะไรพิเศษเลยครับ มันช่วยให้สำหรับผู้ใช้ที่ใช้ mouse สะดวกสบายมากขึ้นเท่านั้นเองครับ หน้าทีของ <label> เนี่ย จะทำหน้าที่กำหนดความสัมพันธ์ของข้อความใด ๆ ที่เป็น inner-text ของ <label> กับ input element ใน form ครับ วิธีการกำหนด ก็เพียงกำหนด id ให้กับ input element และ เพิ่ม attribute “for” ให้กับ <label> โดยมีค่าของ attribute “for” เป็น id ของ input สัมพันธ์กับ <label> นั้นครับ

หลังจากที่เรากำหนดความสัมพันธ์แล้ว อย่างที่ผมเกริ่นไว้หน่อยแล้วว่ามันเพิ่มความสะดวกให้กับผู้ใช้ที่ใช้ mouse นั่นคือ เมื่อเราคลิกข้อความที่เป็น inner-text ในหน้าเว็บ มันจะเหมือนกับการที่เราคลิกตัว input element ที่มันสัมพันธ์กันนั่นเองครับ

เอาเป็นว่า เพื่อความชัดเจนมากขึ้น เราลองไปดูตัวอย่างใน LIVE DEMO กันเลยดีกว่าครับ

อ้างอิง

• http://www.w3schools.com/tags/tag_label.asp