Guidance portal

World of Guidance and Education

Checkboxes and Radio Buttons

In this chapter we will learn to design radio buttons and checkboxes on the webpages. We will also learn the function, usage and differnce between checkboxes and radio buttons. This chapter consists of two topics

  • Radio buttons
  • Checkboxes

Lets start with our first topic "Radio Button".

Radio Buttons:

Radio buttons are used where user is required to select from options. Actually when there are multiple options on the webpage and only one option is required to be selected by the user, radio buttons are used since the radio buttons has the special feature of allowing the selection of only single option.

Note

If it is required to allow the selection of only single option from a list of options then use "Radio Buttons".

For inserting the radio buttons the syntax is given below, read the syntax carefully.

    <input type="radio" name="radio" id="radio buttons" value="radio buttons">

Lets insert the Radio buttons on the web page and then see how it looks like on the browser.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <form name="form1" method="post" action="">
    <p><strong>Your gender </strong></p>
    <p>
    <input type="radio" name="radio" id="radio buttons" value="radio buttons">
    <label for="radio buttons"></label>
    MALE<br>
    <input type="radio" name="radio" id="radio button" value="radio button">
    <label for="radio button"></label>
    FEMALE<br>
    <input type="radio" name="radio" id="radio button2" value="radio button">
    <label for="radio button2"></label>
    OTHER<br>

    </p>
    </form>
    </body>
    </html>

    Browser view


Note

If it is required to allow the selection of multiple options (instead of single option) from a list of options then use "Checkboxes".

Checkboxes :

Checkboxes are used where user is required to select multiple options. Actually when there are multiple options on the webpage and more than one option is required to be selected by the user, checkboxes are used since the checkboxes have the special feature of allowing the selection of multiple options.

Lets read carefully the syntax of checkboxe.

    <input name="check box" type="checkbox" value="check box">

Lets insert different checkboxes on the web page and then see how it looks like on the browser.

    <!DOCTYPE HTML>
    <html>
    <head">

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <form name="form1" method="post" action="">
    <input name="check box" type="checkbox" value="check box">
    Playing Games<br>
    <input name="check box" type="checkbox" value="check box">
    Completing studies
    <br>
    <input name="check box" type="checkbox" value="check box">
    Swiming <br>
    <input name="check box" type="checkbox" value="check box">
    So on any thing you want to write
    </form>
    </body>
    </html>

    Browser view

 

comments powered by Disqus