Page 141 - TP_iPlus_V2.1_Class7
P. 141

Adding a Radio Button

                 Radio buttons are used when a user has to make a selection among multiple choices or options.
                 It is generally used for selection of gender, quiz questions, etc. For example, to accept the gender,
                 the programmer needs to create two radio buttons. "Male" and "Female,"  which belong to the
                 same group called "Gender," so that while inputting data, a user will be able to select either
                 "Male" or "Female,"  but not both. To add the radio button to the form, follow the syntax as given
                 below:

                 <INPUT TYPE="RADIO"  NAME="Name  of the radio button" VALUE="value  of radio
                 button" CHECKED>

                 For example:
                 <INPUT TYPE="RADIO" NAME="Gender" VALUE="Male" CHECKED> Male

                 <INPUT TYPE="RADIO" NAME="Gender" VALUE="Female"> Female

                 TYPE="RADIO" indicates that the form element is a radio button.
                 NAME="Gender" is the name of the radio button group.

                 VALUE="Male" and VALUE="Female" signifies that one radio button has a value "Male" and the
                 other has the value="Female".
                 The CHECKED attribute selects the specific radio button by default. Here, "Male" radio button is
                 checked by default.

                 Let us create a web page to display the radio button.

                 <!DOCTYPE html>

                 <HTML>

                 <BODY>
                 <FORM>

                 Gender:

                 <INPUT TYPE="RADIO" NAME="Gender" VALUE="Male" CHECKED> Male

                 <INPUT TYPE="RADIO" NAME="Gender" VALUE="Female"> Female

                 </FORM>

                 </BODY>
                 </HTML>


                 Adding Check Box

                 A checkbox is like a toggle switch where users can select a desired choice by clicking on the
                 check box.







                                                                                                                 139
                                                                                                More on HTML
   136   137   138   139   140   141   142   143   144   145   146