หลังจากไม่ได้เขียน Blog ซะนาน เนื่องจากงานที่บริษัทเยอะมาก วันนี้มาเสนอ
สิ่งง่ายๆ
Checkbox
HTML เขียนง่ายๆได้แบบนี้
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
แต่แค่นี้ ผู้ใช้ก็ยังใช้ยากอยู่ เพราะจะต้องเล็งให้เป๊ะ คลิกให้ตรงช่อง เราต้องการให้คลิกที่ข้อความแล้วให้ checkbox ทำงานด้วยทำได้ดังนี้
1. เพิ่ม Id ให้ input ก่อน
<input type="checkbox" name="vehicle" id="vehicle1" value="Bike">I have a bike
<input type="checkbox" name="vehicle" id="vehicle2" value="Car">I have a car
2.ให้ข้อความเก็บในแท็ก Label
<input type="checkbox" name="vehicle" id="vehicle1" value="Bike"><label>I have a bike</label>
<input type="checkbox" name="vehicle" id="vehicle2" value="Car"><label>I have a car</label>
3. ใช้ property ที่ชื่อว่า for อ้างอิงว่าถ้ากดแล้วให้ทำงาน checkbox ที่กำหนดตาม id
<input type="checkbox" name="vehicle" id="vehicle1" value="Bike"><label for='vehicle1'>I have a bike</label>
<input type="checkbox" name="vehicle" id="vehicle2" value="Car"><label for='vehicle2'>I have a car</label>
ที่นี้เมื่อคลิกที่ข้อความ Checkbox ก็จะทำงานด้วย
สำหรับ Radio
ไม่ต้องใช้ property for ให้เอาแท๊ก label ครอบแท็ก Radio ไปได้เลยเช่น
<label>I have a Bike<input type='radio' id='radio1' value='Bike'/></label>
เห็นแล้วแบบนี้ Radio นี่ค่อนข้างจัดการได้ง่ายมาก
ขอบคุณข้อมูลจาก http://www.w3schools.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น