HTML <input type=”radio”>
HTML <input type="radio"> is used to define a radio button, where only one option in a group can be selected at a time. Buttons in the same group have the same name attribute, so selecting one automatically deselects the others. Multiple radio button groups can exist with different names.
Note: The value attribute gives each radio button a unique identifier, helping identify the selected option upon form submission.
Syntax
<input type="radio">Example 1: The HTML <input type="radio"> creates a set of radio buttons for selecting a technology brand. Only one option can be selected at a time, with "Microsoft" pre-selected using the checked attribute.
<!DOCTYPE html>
<html lang="en">
<body>
<p>Select a Technology Brand:</p>
<div>
<input type="radio"
id="Netflix"
name="brand"
value="Netflix">
<label for="Netflix">Netflix</label>
</div>
<div>
<input type="radio"
id="Audi"
name="brand"
value="Audi">
<label for="Audi">Audi</label>
</div>
<div>
<input type="radio"
id="Microsoft"
name="brand"
value="Microsoft" checked>
<label for="Microsoft">Microsoft</label>
</div>
</body>
</html>
Output
Example 2: The HTML <input type="radio"> is used to create multiple radio buttons, allowing users to choose one option. All options share the same name attribute, ensuring that only one can be selected at a time.
<!DOCTYPE html>
<html lang="en">
<body>
<h2><input type="radio"></h2>
<h3>Choose an Option:</h3>
<label>
<input type="radio" name="option"
value="option1"> Option 1
</label>
<label>
<input type="radio" name="option"
value="option2"> Option 2
</label>
<label>
<input type="radio" name="option"
value="option3"> Option 3
</label>
</body>
</html>
Output
Use cases
- Adding Radio Buttons in a Form: Use the <input type="radio"> element within <form> tags, ensuring each radio button has the same name attribute to group them together.
- Getting the Selected Radio Button Value: Access the value property of the selected radio button to retrieve the chosen option.
- Checking if a Radio Button is Selected: Use the checked property of the radio button to check whether it is selected or not.
- Styling Labels for Selected Radio Buttons: Use the :checked pseudo-class in CSS to style the label associated with the selected radio button.
- Creating Custom Radio Buttons: Hide the default radio button input and use CSS to create a custom appearance, styling it to reflect the checked state when selected.
