แท็ก label
แท็ก label กำหนดป้ายกำกับสำหรับช่องป้อนข้อมูล
ประเภท input,
textarea,
select
และอื่นๆ
ป้ายกำกับจะถูกเชื่อมโยงกับช่องป้อนข้อมูลที่กำหนด
โดยใช้แอตทริบิวต์ for ในนั้น
ควรระบุค่าของแอตทริบิวต์ id
ของช่องป้อนข้อมูลที่ป้ายกำกับถูกเชื่อมโยง นอกจากนี้
ป้ายกำกับจะถูกเชื่อมโยงกับองค์ประกอบ หาก
องค์ประกอบนั้นถูกวางไว้ภายในแท็ก label ใน
กรณีนี้ไม่จำเป็นต้องระบุแอตทริบิวต์ for ดู
ตัวอย่างเพื่อความเข้าใจที่ดีขึ้น
เมื่อคลิกที่ป้ายกำกับ องค์ประกอบที่เชื่อมโยงกับมันเช่น checkbox หรือ radio button จะเปลี่ยนสถานะ จากถูกเลือกเป็นไม่ถูกเลือกและในทางกลับกัน ป้ายกำกับในกรณีนี้มีไว้เพื่อความสะดวก: การคลิกที่องค์ประกอบฟอร์มขนาดเล็กด้วยเคอร์เซอร์ทำได้ยาก แต่ในป้ายกำกับยาวที่มีข้อความ - ทำได้ง่ายกว่ามาก
ช่องป้อนข้อมูลข้อความที่เชื่อมโยงกับป้ายกำกับ
ประเภท input
และ textarea
จะได้รับโฟกัสการป้อนข้อมูล โฟกัส
- คือเมื่อเคอร์เซอร์กระพริบอยู่ในช่องป้อนข้อมูล
ในกรณีนี้ หากคุณพิมพ์อะไรบางอย่าง
บนแป้นพิมพ์ - ข้อความจะเข้าสู่ช่องนี้
(ดู pseudoclass focus
เพื่อความเข้าใจขั้นสูงเกี่ยวกับโฟกัส)
ป้ายกำกับ label สามารถใช้สำหรับ
จำลอง checkbox
หรือ radio
button สิ่งนี้จำเป็นเพื่อสร้าง
checkbox หรือ radio ที่มีการออกแบบของตัวเอง (ซึ่ง
ไม่อนุญาตใน CSS แต่ด้วยเทคนิคที่ฉลาด
ก็เป็นไปได้)
แอตทริบิวต์
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
for |
ในแอตทริบิวต์นี้ควรระบุค่า แอตทริบิวต์ id
ของช่องป้อนข้อมูลที่ป้ายกำกับ label ถูกเชื่อมโยง
|
accesskey |
กำหนดปุ่มลัด ซึ่งสามารถใช้เพื่อไปยังองค์ประกอบฟอร์มที่เชื่อมโยงกับป้ายกำกับ
(ผ่านแอตทริบิวต์ for)
ดูเพิ่มเติมที่แอตทริบิวต์ accesskey
|
ตัวอย่าง . กล่องกาเครื่องหมาย
ลองเชื่อมโยงป้ายกำกับกับ checkbox
โดยใช้แอตทริบิวต์ for
ลองคลิกที่ป้ายกำกับ และคุณจะเห็นการเปลี่ยนแปลงสถานะ
ของกล่องกาเครื่องหมายจากถูกเลือกเป็นไม่ถูกเลือกและในทางกลับกัน:
<input type="checkbox" id="checkbox">
<label for="checkbox">ฉันถูกเชื่อมโยงกับ checkbox ที่มี id checkbox</label>
:
ตัวอย่าง . ภายใน label
และตอนนี้ลองไม่เชื่อมโยงป้ายกำกับ
ผ่านแอตทริบิวต์ for แต่ใส่องค์ประกอบลงไป
ในแท็ก label โดยตรง ในกรณีนี้การคลิกที่ข้อความ
label จะทำให้องค์ประกอบถูกกระทำเช่นกัน:
<label><input type="checkbox"> ป้ายกำกับ</label>
:
ตัวอย่าง . ช่องป้อนข้อมูลข้อความ
ลองเชื่อมโยงป้ายกำกับกับแท็ก input
โดยใช้แอตทริบิวต์ for
การคลิกที่ป้ายกำกับจะทำให้ช่องป้อนข้อมูล
ได้รับโฟกัส ในขณะเดียวกันข้อความที่อยู่
ในช่อง (เพิ่มด้วยแอตทริบิวต์
value)
จะถูกเลือก หากเริ่มพิมพ์อะไรบางอย่าง
บนแป้นพิมพ์ - ข้อความนี้จะถูกลบออก การกำจัด
การเลือก โดยไม่ลบข้อความ สามารถทำได้
โดยคลิกเมาส์ที่ช่องป้อนข้อมูล: โฟกัส
จะไม่หายไป แต่การเลือกจะหายไป:
<input type="text" id="input1" value="ข้อความบางอย่าง">
<label for="input1">ฉันถูกเชื่อมโยงกับ input ที่มี id input1</label>
:
ดูเพิ่มเติม
-
แท็ก
legend,
ซึ่งกำหนดคำอธิบายเหนือกลุ่มของช่องข้อมูล
