- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we use radio buttons in HTML forms?
Using HTML forms, we can easily take user input. The <form> tag is used to get user input by adding the form elements. Different types of form elements include text input, radio button input, submit button, text field area etc.
In this article, let us learn how to use radio buttons in HTML forms to get user input. Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag and the type attribute is set to radio.
S. No. | Attribute & Description |
---|---|
1 | type Indicates the type of input control and for checkbox input control it will be set to a radio. |
2 | name Used to give a name to the control which is sent to the server to be recognized and get the value. |
3 | value The value that will be used if the checkbox is selected |
4 | checked Set to checked if you want to select it by default |
Syntax
Following is the syntax to create a radio button in HTML.
<form> <input type="radio" name="name… " value=" ">Male </form>
Example 1
In the following example, let us learn how to use radio buttons in HTML forms −
<!DOCTYPE html> <html> <body> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <p>Branch</p> <form> <input type="radio" name="Branch" value="CSE">CSE <input type="radio" name="Branch" value="IT">IT <input type="radio" name="Branch" value="ECE">ECE <input type="radio" name="Branch" value="EEE">EEE <input type="radio" name="Branch" value="ivil">Civil <input type="radio" name="Branch" value="Mech">Mech </form> </body> </html>
Example 2
You can try to run the following code to learn how to work with radio buttons in HTML −
<!DOCTYPE html> <html> <body> <head> <title>HTML Radio Button</title> </head> <p>Gender</p> <form> <input type="radio" name="gender" value="male">Male <br> <input type="radio" name="gender" value="female">Female </form> </body> </html>
Example 3
We also use <label> tag along with the input tag. The <label> tag defines a label for several elements in the HTML.
We mainly use label for defining the value for the radio button.
<!DOCTYPE html> <html> <body> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <p>Branch</p> <form> <input type="radio" id="CSE" name="Branch" value="CSE"> <label for="CSE">CSE</label> <input type="radio" name="Branch" value="IT"> <label for="CSE">IT</label> <input type="radio" name="Branch" value="ECE"> <label for="CSE">ECE</label> <input type="radio" name="Branch" value="EEE">EEE <input type="radio" name="Branch" value="ivil">Civil <input type="radio" name="Branch" value="Mech">Mech </form> </body> </html>
Example 4
Set to checked if you want to select it by default of any of the option. We use checked attribute value to true to select a option by default. Look at the example below −
<!DOCTYPE html> <html> <body> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <p>Branch</p> <form> <input type="radio" id="CSE" name="Branch" value="CSE" > <label for="CSE">CSE</label> <input type="radio" name="Branch" value="IT" checked="true"> <label for="CSE">IT</label> <input type="radio" name="Branch" value="ECE"> <label for="CSE">ECE</label> <input type="radio" name="Branch" value="EEE">EEE <input type="radio" name="Branch" value="ivil">Civil <input type="radio" name="Branch" value="Mech">Mech </form> </body> </html>
- Related Articles
- How do we use checkbox buttons in HTML forms?
- Why do we use reset button in HTML forms?
- How do we use a simple drop-down list of items in HTML forms?
- How do we take password input in HTML forms?
- How to prevent buttons from submitting forms in HTML?
- How do we send an email using HTML forms?
- How do we reset all the input fields in HTML forms?
- How do we use different CSS classes in HTML?
- How to Disable Radio Buttons using JavaScript?
- How do we upload external file on a website using HTML forms?
- Why do we Use JavaScript in HTML?
- How we can group data in HTML forms?
- Why do we use DOCTYPES in HTML document?
- How to use the submit button in HTML forms?
- How to use tables to structurize forms in HTML?
