Hello everyone..
In this article we going to discuss about some important tags that are used in html forms. In previous article we are discussing about form tag introduction and also some tags. (Click here to see the form tags). and also follow for more interesting articles. For previous classes visit our blog front end section. In this article we are discuss about the remaining
In previous article we are discussing about various tags that used in forms. (click here to see). In this article we are discuss about remaining tags
Radio Buttons:-
These are used to select one option from multiple options. For example Gender of a person is either male or female or others. We are select the any one of the following then we use radio buttons. If we select one option in the radio button the remaining will be unchecked only one will be checked.
Example:
<input type="radio" name="Gender" /> <label> Male </label>
<input type="radio" name="Gender" /> <label> Female </label>
<input type="radio" name="Gender" /> <label> Others </label>
The syntax of the both checkbox and radio buttons are similar. But a small difference of these are type. If the name of a radio button is changed then it checks the multiple options like checkbox. as shown in the picture below.
 |
| The picture shows the what happens when we use different names for radio button |
 |
| This picture shows the radio buttons with same name |
This will be very important while creating form with radio buttons.
Drop down List:-
This is also similar to radio buttons but small difference. In radio buttons we have multiple options and we have to select one of them. But we have a problem with the Radio buttons. If we have a lot of options to display then it will be difficult to check the correct one. And also it takes more space for creating a radio button. To solve this problem we are using this Dropdown lists. By this our webpage will be simple and with a small textbox we are select our option from the multiple.
The syntax of dropdown list is different from other form tags. For all form tags we are using a common tag that is input tag. But here we are using another tag called select tag and also we use different tags to complete this.
Syntax:
<select name="country" >
<option name="USA" >USA</option>
<option name="India" selected >India</option>
<option name="Russia" >Russia</option>
</select>
Output:
 |
| Example of Dropdown list |
In the above example we are using selected keyword used in option tag. This will display the one option as default. If we use selected keyword for any one option that will be the default when we open a website. in the above example selected keyword is used to the country India. And it is the default option for the dropdown list..
In the above syntax we are using select tag. And name attribute is used to define the category of the dropdown list. We have another tag called option which is used to define the different items available in the dropdown list. It helps to display all the items in the dropdown list. The syntax is just look like ordered and unordered list.
Range:-
When ever we want select a range of particular numbers then we have to use this range in form tag.. For example when ever we are opening a YouTube video or any video from any source. The volume and play control will be developed by using range.
syntax:-
<input type="range" name="volume" min="0" max="100" value="90" step="10" />
It is also input tag. type is selected as range, name is for defining the type of type of data range. And we are also using min, max, step attribute is used to define the minimum, maximum of the range and step is used to set the value of increment. value is used as default of the range. when we are using step 10 or anything it will be increased or decreased by that number. Range value is shown in the below figure.
 |
| Example for range in form tag in html |
In the above example range is firstly default as 90 and now it will be modified as 40. the range is modified by 10% every time.
Button:-
Buttons are used to submit the data to server or directly connected to server. When ever we click on the button Console will automatically moves to server. The data in the entire form tag will directly moved to server and based on the operations done in the server it will be moved to database or may be other operations done by the server.
There are three types of buttons used in HTML.
They are:-
1. submit
2. reset
3. clickable button
here we have two ways to create a button.
1. By using input tag we are using the buttons like submit and reset.
syntax:-
<input type="submit" />
<input type="reset" />
2. By using button tag we are create a button (clickable)
syntax:-
<button> click me</button>
There is no difference in button look by default. as shown below.
 |
| Different types of buttons |
I hope this article will helpful you for creating a form tag. If you like our content please share to your friends. Please comment your opinion on this article.
