เมือก่อนใช้ Code HTML Check Box กับ Radio Box แต่มันธรรมดาเกินไป
จาก Code มันจะคลิกที่ตัวหนังสือไม่ได้
<input type=radio name=normal_radio value=1> Radio Button 1
<input type=radio name=normal_radio value=2> Radio Button 2
และ
<input type=checkbox name=normal_check value=1>Check Box 1
<input type=checkbox name=normal_check value=2>Check Box 2
ลองแบบนี้ดู
<input type=radio name=normal_radio value=1 id=rad1><label for=rad1>Radio Button 1</label>
<input type=radio name=normal_radio value=2 id=rad2><label for=rad2>Radio Button 2</label>
และ
<input type=checkbox name=normal_check value=1 id=chk1><label for=chk1>Check Box 1</label>
<input type=checkbox name=normal_check value=2 id=chk2><label for=chk2>Check Box 2</label>
ทีนี้ก็ได้ Check Box กับ Radio Box ดีกว่าเดิมแล้ว
Ref : http://www.bloggang.com/viewdiary.php?id=over&month=12-2005&date=26&group=1&blog=1
฿฿฿฿฿฿฿฿฿฿฿฿฿฿฿฿฿
Radio Button และ Check Box ใน HTML แบบ Advance
สวัสดีครับ ช่วงหลังๆ ผมไม่ค่อยได้เขียนเรื่องทางเทคนิคสักเท่าไหร่ ไม่ใช่อะไรหรอกครับ เพราะว่าเทคนิคต่างๆ ในเรื่องของทั้ง HTML และ Programming ต่างๆ นั้น ผมคิดว่าคนที่ทำด้านนี้คงรู้กันดีอยู่แล้ว
แล้ววันหนึ่งไม่นานมานี้ ผมก็มีความคิดจะเขียน Blog เรื่อง technic อีกครั้ง เนื่องจากมีน้องคนหนึ่งมาถามว่า "พี่เวอร์ พี่ทำ Radio Button ยังไงอ่ะ ให้มันคลิกที่ตัวหนังสือแล้วมันก็เลือกให้เราเลยอ่ะ" ผมก็บอกน้องว่า "เอ็งก็ดู Code สิฟระ ดูก็เห็นแล้ว" ... "เออจริงด้วยพี่" น้องมันตอบแบบเขินๆ
เรื่องที่ผมจะเขียน ก็เป็นเรื่องที่น้องถามมานั่นล่ะครับ กล่าวคือเป็นเรื่องของ Radio Button กับ Check Box ในไฟล์ HTML (หรือ asp, jsp, php ฯลฯ ที่ gen ออกมาเป็น HTML ให้ทำงานบน Internet Browser) ซึ่งปกติแล้ว เวลาเราจะติ๊กมัน เราต้องไปติ๊กที่ตัวมันเองเลย จะมาคลิกที่ label ที่เราเขียนไว้ไม่ได้ ซึ่งบางทีก็ไม่สะดวกเท่าไหร่ เป้ามันเล็ก เป้าไม่ใหญ่
ดังตัวอย่างนี้ครับ
ซึ่ง code มันก็คือ
<input type=radio name=normal_radio value=1> Radio Button 1
<input type=radio name=normal_radio value=2> Radio Button 2
และ
<input type=checkbox name=normal_check value=1>Check Box 1
<input type=checkbox name=normal_check value=2>Check Box 2
คราวนี้ตัวที่ผมพูดถึง มันจะเป็นอย่างนี้ครับ .. ลองคลิกๆ กันดูนะครับ จะเห็นความแตกต่างเองครับ
<input type=radio name=normal_radio value=1 id=rad1><label for=rad1>Radio Button 1</label>
<input type=radio name=normal_radio value=2 id=rad2><label for=rad2>Radio Button 2</label>
และ
<input type=checkbox name=normal_check value=1 id=chk1><label for=chk1>Check Box 1</label>
<input type=checkbox name=normal_check value=2 id=chk2><label for=chk2>Check Box 2</label>
จะเห็นว่าเราจะใช้ id เพิ่มเข้ามาเพื่อบอกชื่อของ Form Element แต่ละตัว และสร้าง HTML tag ที่ชื่อ <Label ..> ขึ้นมาเพื่อรองรับกับ id ของ form นั้นๆ ครับ
ง่ายๆ เท่านี้แหละ ก็ได้ Radio Button กับ Check Box แบบหรูๆ (ขึ้นมานิดนึง) แล้วครับ
