Radiobuttons

Radio button เราจะใช้เมื่อเราต้องการให้ผู้ใช้เลือกตั้งแต่ 2 ตัวเลือกขึ้นไป หน้าตาจะเหมือน checkbox แต่จะไม่เหมือนตรงที่ สามารถเลือกได้ตัวเดียวและไม่สามารถเลือกได้พร้อมๆกันหลายตัว เราจะใส่ข้อมูล radio button ได้โดย type กำหนด property (คุณลักษณะ) ได้ด้วย radio ดังนี้

<input type="radio">

ถ้าไม่มีชื่อให้ input element เมื่อเราส่งค่ากลับมาจาก server เราจะไม่สามารถบ่งบอกได้ว่าเราใช้ element ไหนทำงานอยู่ นอกจากจะกำหนดชื่อแล้ว เราต้องกำหนดค่าให้มันด้วย ค่านี้จะส่งไปยัง server เมื่อ radio button ถูกเลือก ดังตัวอย่าง

<input type="radio" name="nameOfChoice" value="1">

ตอนนี้เรามี radio button ที่สามารถใช้งานร่วมกับ server ได้แล้ว อย่างไรก็ตามในตัวอย่างมีแค่ radio button อันเดียว ในการใช้ radio button ควรใช้มากกว่า 2 ขึ้นไป ถ้าเรามีตัวเลือกอันเดียว เราควรใช้ checkbox

ตัวอย่างต่อไปนี้ เป็นตัวอย่างของ radio button ที่มีตัวเลือกเป็นสัตว์เลี้ยงที่ชอบ

<form method="post" action="/Tests/Post">
    <fieldset>
        <legend>What is Your Favorite Pet?</legend>
        <input type="radio" name="favorite_pet" value="Cats">Cats<br>
        <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
        <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
        <input type="submit" value="Submit now">
    </fieldset>
</form>

จะสังเกตเห็นได้ว่า radio button ทั้ง 3 มี property (คุณลักษณะ) ชื่อเดียวกัน name จุดนี้สำคัญมาก เพราะเวลาใช้ชื่อเดียวกัน radio button จะรวมเป็นกลุ่มเดียวกัน เมื่อเลือกตัวนึง ค่าของตัวอื่นๆจะถูก uncheck (เช็คออก) ส่วน property (คุณลักษณะ) value ก็เป็นแบบใช้เดี เพราะ value ในที่นี้ ใช้เป็นตัวเลือก

Checked or not checked? (เลือกหรือไม่เลือก?)

ถ้าสังเกตจากตัวอย่างที่แล้ว จะไม่มี radio button ที่กำหนด default (ค่าเริ่มต้น) ถ้าเป็น checkbox ก็ไม่จำเป็นต้องกำหนด เราจะใช้ checked ในการกำหนดค่าเริ่มต้น

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
<input type="radio" name="favorite_pet" value="Birds">Birds<br>

ตอนนี้เราได้เพิ่ม “checked” ไปที่ตัวแรก ของ radio button มันจะเลือกให้เลยตั้งแต่ต้น ทำให้ยังไงก็แล้วแต่ radio button จะต้องมีค่าส่งให้ server เพื่อดำเนินงาน ใน XHTML สมัยก่อน ตัวแปรทุกตัวจะต้องมีค่าเริ่มต้น เช่น

<input type="radio" name="favorite_pet" value="Cats" checked="checked">Cats<br>

ทั้ง 2 แบบสามารถใช้ได้ทุก browser สมัยใหม่ แต่แบบแรกสั้นและหน้าตาจะเหมือน HTML5 มากกว่า

Labels for radio buttons (ตั้งชื่อให้ radio button ใช้ร่วมกัน)

ถ้าเราดูจากตัวอย่างที่แล้ว เราจะสังเกตได้ว่าเราสามารถใส่ข้อมูลเข้าได้ที่ด้านข้างของ radio button แต่เราไม่สามารถ click บนตัวข้อความเพื่อที่จะเลือก radio button ไปได้พร้อมๆกัน ถ้าเราใช้ element label นี้เราจะสามารถเลือกไปพร้อมๆกันได้

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label>

ในตัวอย่างจะมี radio button 2 ชนิด แบบมี label และแบบไม่มี label ซึ่งหน้าตาจะคล้ายๆกัน อันที่มี label จะ click บนตัวข้อความได้เลย ถ้าใช้ radio button บน smartphone ที่มีขนาดจอเล็กๆ จะทำให้เลือกสะดวกขึ้น

วิธีใช้ label นี้ง่ายมาก เราจะใช้ตัวแปร for เพื่อที่จะเชื่อมติดกับ form element และตัวแปร id

Working dynamically with radio buttons (การใช้งาน Radio button ตลอดเวลาในขณะที่ทำการรันโปรแกรม)

ซึ่งเหมือนกับ DOM element (Document Object Model ก็คือการมองส่วนต่างๆของหน้าเว็บให้เป็น object เพื่อให้เราสามารถเรียกใช้ object เหล่านั้นได้) ที่เราสามารถจัดการกับ radio button ด้วย JavaScript (โปรแกรมบนระบบอินเทอร์เน็ต ซึ่งในการสร้างและพัฒนาเว็บไซต์) ด้านล่างเป็นตัวอย่างที่ใช้ JavaScript ในการเลือก radio button และให้ผู้ใช้ยืนยันก่อนกดส่งข้อมูล

<form method="post" action="/Tests/Post" onsubmit="return ValidateForm();">
    <fieldset>
    <legend>What is Your Favorite Pet?</legend>
    <input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
    <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
    <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
    <input type="submit" value="Submit now">
    </fieldset>
</form>

<script type="text/javascript">
function ValidateForm()
{
    var radioButtons = document.getElementsByName("favorite_pet");
    for(var i = 0; i < radioButtons.length; i++)
    {
        if(radioButtons[i].checked == true)
        {
            if(confirm("You have selected " + radioButtons[i].value + " as your favorite pet. Is that correct?"))
                return true;
            else
                return false;
        }
    }
}
</script>

หน้าตาของ form ก็จะเหมือนกับตัวอย่างอันก่อน แต่เราเพิ่ม onsubmit event (เหตุการณ์ต่างๆที่เกิดขึ้น เช่น ผู้ใช้คลิกเมาส์) ของ form เข้าไปเพื่อที่จะอ้างอิงได้กับ JavaScript function ที่จะเห็นได้จากตัวอย่างส่วนด้านล่าง โปรแกรมจะวนไปทุกๆ radio button เมื่อวนไปถึง button ที่ถูกเลือก checked หรือ checked = true มันจะถามขึ้นมาว่า จะยืนยันการส่งข้อมูลไหม

นี่คือตัวอย่างแบบง่ายของ radio button ที่ใช้ร่วมกับ JavaScript ถ้าเราใช้ร่วมกับ jQuery (JavaScript Library) เราจะเขียนโปรแกรมได้ง่ายขึ้น

สรุป

Radio button ทำให้เราสร้างรายการของข้อมูลให้เป็นแบบตัวเลือกที่ผู้ใช้สามารถเลือกได้ แต่เลือกได้แค่ 1 รายการ เราควรใช้ label ควบคู่ไปกับ radio button เพื่อให้ผู้ใช้สามารถมีพื้นที่ในการเลือก click เพิ่มขึ้น ซึ่งทำให้ Screen Reader (เทคโนโลยีที่สามารอ่านหน้าจอได้ เช่น การอ่านข้อความและแปลงออกมาเป็นเสียง) ใช้งานได้อย่างมีประสิทธิภาพ