 |
| HTML and CSS tutorial for beginners in Hindi |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 19.
In our previous lesson we have learned creating HTML forms.
Today we will study using other input elements in a form.
HTML forms, HTML radio button, HTML check boxes, HTML drop down lists
We will continue our study of HTML forms. We will study how to use radio buttons, check boxes, and drop down list in a form. These input elements are used to capture input data in different ways.
Let us use these input element in our program and understand them one by one. Open a new Notepad file and copy all text from Lesson-18. Let us begin with radio buttons.
HTML radio buttons
Code for radio buttons is as follows:<! radio button example>
<h3>Gender:</h3>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<h3>Marital Status:</h3>
<input type="radio" name="mstatus" value="married"> Married<br>
<input type="radio" name="mstatus" value="unmarried">Unmarried<br>
Let us understand this code. In the first line we have written a comment. Then there is h3 for giving heading ("Gender"). Then we have written coding for radio buttons. We have used <input> for input element. We have already seen and understood attributes of <input> in previous lesson. We will simply see those attributes. We give type "radio" for creating radio button. We are capturing data male or female, therefore, this data is captured in a field named "gender". There are two radio buttons - one for male and one for female. User can click any one option. On clicking a radio button its "value" (either male or female) is captured in the field.
These two radio buttons together form first radio group for "gender". We have defined another radio group for marital status.
Note <input> element. Syntax of this is very similar to that for text boxes.
So when do we use radio buttons? We use radio buttons when user is used to select only ONE option from several options.
Remember: In fact, <input> has number of attributes. We have seen type, name and value. Similarly type attribute has many values. We have seen text and radio and we will see checkbox. As you go on writing more HTML scripts you will come across these attributes and values.
Let us create radio buttons in our form. Go in our Notepad file. Delete <br /> given after first two text boxes. This will display all text boxes in one line. Now copy the code written above. This should come just above </form>. See the figure below.
<! Examples of checkbox>
<h3>Which mobiles do you like? Select any two</h3>
<input type="checkbox" name="mobile1" value="Nokia"> Nokia<br>
<input type="checkbox" name="mobile2" value="Samsung"> Samsung<br>
<input type="checkbox" name="mobile3" value="Oppo"> Oppo<br>
<input type="checkbox" name="mobile4" value="Apple"> Apple<br>
<input type="checkbox" name="mobile5" value="Xiaomi"> Xiaomi<br>
<! Examples of checkbox>
<h3>Which televisions do you like? Select any two</h3>
<input type="checkbox" name="television1" value="Sony"> Sony<br>
<input type="checkbox" name="television2" value="Samsung"> Samsung<br>
<input type="checkbox" name="television3" value="LG"> LG<br>
<input type="checkbox" name="television4" value="Sharp"> Sharp<br>
<input type="checkbox" name="television5" value="TCL"> TCL<br>
We have given "checkbox" in input type. Remaining all coding is very similar to radio button. We have created two checkbox groups, one for mobiles and other for televisions.
Remember we can select one or more options in a checkbox group.
Copy the code written above in our script.
 |
| Figure 19-2. HTML form, HTML check box |
HTML drop down list
Now let us study drop down lists. <select> tag is used for this. Let us write code for drop down list. This is as follows:<! Drop down lists>
<h3>Select country</h3>
<select>
<option value="usa">USA</option>
<option value="india">India</option>
<option value="UK">UK</option>
<option value="china">China</option>
<option value="france">France</option>
</select>
Here first line is a comment. Then we have given <select> This is used to create a drop down list. There are <option> elements in <select>. Every element displays an option. There are five options in our list. Therefore there are five <option> elements. We can select any one option.
<select> tag has some attributes. For instance, if we use required attribute for <select> then use will have to select one of the options. Without selecting the option user will not be able to submit.
Copy above text in our script.
 |
| Figure 19-3. HTML form, HTML drop down list |
Save this file as "Lesson-19" and "Lesson-19.html". Click on the above figure for PDF file of source code. Double click on HTML file and see the output.
 |
| Figure 19-4 Radio button, checkbox, drop down list |
Our form is displayed. We have radio buttons, check boxes, and drop down list displayed in our output. Click on figure 19-4 to see form in a web page.
Important Points:
01. Radio buttons are defined by giving value "radio" to type attribute of <input>. We can select only one option from a radio group.
02. Check boxes are displayed by giving value "checkbox" to type attribute of <input>. We can select one or more options from a checkbox group.
03. <select> element is used to define a drop down list. Options in a list are defined by <option> elements inside <select>. We can select one option in a list.
Lesson-18 Lesson-20
