HTML Radio button is typically used to select a particular option from a group of related options. To define a radio button, we use the element of HTML. When a particular option is selected using a radio button, the other options are deselected i.e., one can only select a single option at a time. It lets the user select from a set of limited options.
Syntax of HTML Radio Button:
Radio buttons belonging to a particular category must have the same name. The value of each radio button is not shown to the user but is sent to the server after its selection by the user. It is a good practice to use a
Defining Radio Group in HTML
We can define a group for radio buttons by giving each radio button the same name. As and when the user selects a particular option from this group, other options are deselected.
Following is an example of radio buttons with different names within a form.
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<form>
<p>Please select your preferred contact method</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="Choice1">Email</label>
<input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="Choice2">Phone</label>
<input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="Choice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
Output-
Attributes of HTML Radio Group
NameDescriptiontypeSpecifies the type of input, in this case set as ‘radio’.nameSpecifies the name of the control that is delivered to the server.valueSpecifies the value that will be sent to the server, if the radio button is checked.checkedDefines a by default checked radio button.
We should specify the value attribute so that the information is delivered to the server, on form submission. If the value attribute is not specified, the form data assigns a value ‘on’ to the entire radio group (this isn’t a good practice).
Selecting Radio Button by default
If no radio button is selected by the user, no information of the radio buttons is delivered to the server. Hence, it is recommended to use the ‘checked’ state of the radio button and eliminate inefficiency.
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<form>
<p>Please select your preferred contact method</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email" checked>
<label for="Choice1">Email</label>
<input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="Choice2">Phone</label>
<input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="Choice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
Output-
If ‘checked’ is put along with every button, the one put later overrides the ones put before it.
CSS and Radio Buttons
We can style radio buttons using CSS3.
<html>
<head>
<title>Radio Buttons</title>
<style>
label {
margin-right: 15px;
line-height: 32px;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
</style>
</head>
<body>
<form>
<p>Please select your preferred contact method:</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<pre id="log">
</pre>
</body>
</html>
#html tutorials #html radio button #javascript and radio buttons