The <input type="radio"> element in HTML is used to create radio buttons for selecting one option from multiple choices. Only one radio button in the same group can be selected at a time.
- Used to select a single option from a group of choices.
- Radio buttons are grouped using the same name attribute.
- Commonly used in forms, surveys, and selection menus.
Syntax:
<input type="radio" name="groupName" value="option">Note: The value attribute gives each radio button a unique identifier, helping identify the selected option upon form submission.
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Use cases
Some use cases are given below: