Radio button

Radio button เป็นองค์ประกอบ ฟอร์ม HTML ในรูปแบบปุ่มกลมที่สามารถถูกทำเครื่องหมายหรือไม่ก็ได้

Radio button ถูกสร้างขึ้นโดยใช้แท็ก input พร้อมแอตทริบิวต์ type ที่มีค่า radio รูปลักษณ์:

Radio button เดี่ยวแทบไม่เคยถูกใช้ ควรใช้เป็นกลุ่ม โดยในกลุ่มสามารถเลือกได้เพียงปุ่มเดียวเท่านั้น ปุ่มต่างๆ จะรวมกันเป็นกลุ่มก็ต่อเมื่อมีค่าของแอตทริบิวต์ name เหมือนกัน (ดูตัวอย่างด้านล่าง)

ตัวอย่าง

มาสร้าง radio button สองปุ่ม: ปุ่มแรกให้ทำเครื่องหมาย (กำหนดแอตทริบิวต์ checked), ส่วนปุ่มที่สองไม่ต้อง ทำเช่นนี้ปุ่มทั้งสองจะ เป็นกลุ่มเดียวกัน ซึ่งสามารถเลือกได้เพียงปุ่มเดียว (เนื่องจาก มีค่าของแอตทริบิวต์ name เหมือนกัน)

โปรดสังเกตว่า radio button เหล่านี้มีค่าของแอตทริบิวต์ value ต่างกัน ซึ่งจำเป็นเพื่อให้หลังจากส่งข้อมูล ไปยังเซิร์ฟเวอร์แล้ว PHP สามารถระบุได้ว่าปุ่มใด ถูกเลือก:

html<input type="radio" name="test" checked value="1">
<input type="radio" name="test" value="2">

Результат:

ตัวอย่าง

คราวนี้มาสร้าง radio button สองกลุ่ม: กลุ่มแรกจะมีค่าของแอตทริบิวต์ name เดียวกัน, ส่วนกลุ่มที่สองจะมีอีกค่าหนึ่ง ลองกดดู แล้วจะเห็นว่ากลุ่มต่างๆ สามารถสลับได้ โดยไม่ขึ้นต่อกัน:

html<input type="radio" name="radio1" checked>
<input type="radio" name="radio1">
<input type="radio" name="radio1">

<br>

<input type="radio" name="radio2" checked>
<input type="radio" name="radio2">
<input type="radio" name="radio2">

Результат:

ดูเพิ่มเติม

  • checkbox,
    ซึ่งใช้สร้างช่องทำเครื่องหมายได้
  • แอตทริบิวต์ checked,
    ที่ทำให้ radio button ถูกเลือก
  • pseudo-class checked,
    ที่กำหนดสไตล์สำหรับ radio ที่ถูกเลือก
  • แอตทริบิวต์ disabled,
    ที่บล็อกองค์ประกอบฟอร์ม
  • แท็ก label,
    ที่กำหนดคำอธิบายสำหรับ radio