ใน HTML มีแท็ก (tag) อยู่หลายอย่าง ผมเองก็ไม่ได้รู้จักมันทุกแท็ก มีอยู่แท็กหนึ่งที่ผมเคยเห็นนานแล้ว แต่ไม่เคยสนใจ และไม่เคยคิดที่จะใช้ จนมาวันนึง ได้มีโอกาสลองทำความรู้จักกับมัน ก็เห็นถึงประโยชน์ของมันขึ้นมา เลยคิดว่า เอามาใส่ลงใน blog น่าจะดี เอาเป็นว่าวันนี้ผมขอแนะนำเพื่อนใหม่ (แต่ไม่ใหม่) ของผม นั่นคือ <LABEL> ครับ
ใน 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 กันเลยดีกว่าครับ
อ้างอิง
ใน attr ของ label เราสามารถใส่ for=”ชื่อ input ของตัวนั้นๆ” ไ้ด้ด้วยครับ ทำให้เวลาคลิกที่ label แล้วมันจะไป focus ที่ field ข้อความ
ใส่ name ก็ได้เหรอครับ ผมใส่แต่ id น่ะครับ ขอบคุณครับ
ผมลองด้วย name แล้วนะครับ ไม่ได้นะครับ
name ต้องเรียกผ่านฟอร์ม เช่น document.form.name.value
แต่ id ไม่ต้องผ่านฟอร์มเรียก document.getelementById(‘id’).value
ได้เลย
อ๊ะ ผมหมายถึงเรื่องการใช้ <label for=”…”> นะครับ
การใช้นั่นแหล่ะครับ ถ้าจะสั่งให้แสดงผลหรือเรียกใช้งานไม่ว่าจะ หรือ ถ้ากำหนดว่า
ผมเห็นมันจะอยู่ในฟอร์ม
เวลาเรียกใช้ในสคริป ก็เลยเรียกใช้
var lbl1_ = document.form1.lbl1.value
หรือ
document.form1.lbl1.innerHTML = “ข้อความ”
แต่ถ้าเป็น
ไม่ว่าจะอยู่ในฟอร์ม หรือไม่อยู่ในฟอร์ม จะเรียกใช้ผ่าน
var lbl1_ = document.getelementById(‘lbl1’).value
หรือ
document.getelementById(‘lbl1’).innerHTML = “ข้อความ”
ความจริงมันก็ใช้งานไม่ได้ต่างอะไรมากหรอกครับ อย่าคิดมากเลย
การใช้นั่นแหล่ะครับ ถ้าจะสั่งให้แสดงผลหรือเรียกใช้งานไม่ว่าจะเป็น
__ หรือ __ ถ้ากำหนดว่า
__
ผมเห็นมันจะอยู่ในฟอร์ม
__
เวลาเรียกใช้ในสคริป ก็เลยเรียกใช้
var lbl1_ = document.form1.lbl1.value
หรือ
document.form1.lbl1.innerHTML = “ข้อความ”
แต่ถ้าเป็น
__
ไม่ว่าจะอยู่ในฟอร์ม หรือไม่อยู่ในฟอร์ม จะเรียกใช้ผ่าน
var lbl1_ = document.getelementById(‘lbl1’).value
หรือ
document.getelementById(‘lbl1’).innerHTML = “ข้อความ”
ความจริงมันก็ใช้งานไม่ได้ต่างอะไรมากหรอกครับ อย่าคิดมากเลย
ปล. ถ้าผมเข้าใจผิดเกี่ยวกับจุดประสงค์ของบทความขอโทษด้วยครับ
เข้าใจผิดแล้วล่ะครับ ผมไม่ได้พูดถึง script เลยครับ ผมพูดถึง <label> กับการใช้งาน input ใน form ครับ
อยากดูการใช้งานลาเบลแบบอื่นมั้ย
http://202.29.52.59/~s47042380120/notice/chk/chk.html
ผมพอแล้วนะไม่ตอบต่ออีกละนะ บาย
แบบนั้นไม่ต้องใช้ label ก็ได้มั๊งครับ ยังไงก็ขอบคุณมากครับ
เหมือนจะออกทะเลไปแล้วนะครับ คนละเรื่องเลย -*-