Radio input type in HTML
Hello Developers,
The radio input type is an important term in HTML. The radio button is an interactive page element for selecting multiple options. The radio buttons used in a collection of related data groups means radio buttons presented in a radio group.
<div class="form-check">
<input type="radio" id="Argentina" name="fav_team" value="Argentina" class="form-check-input">
<label for="Argentina" class="form-check-label">Argentina</label><br>
<input type="radio" id="Brazil" name="fav_team" value="Brazil" class="form-check-input">
<label for="Brazil" class="form-check-label">Brazil</label><br>
<input type="radio" id="Germany" name="fav_team" value="Germany" class="form-check-input">
<label for="Germany" class="form-check-label">Germany</label><br><br>
</div>
The radio button must share the same name as the name attribute. The same name is treated as a group. Only one radio button in a group is selected at once. Selecting any of the group values, detected the other options in the group. The value attribute defines unique values associated with each radio button. The value is not shown to the user. We should use the <label></label> tag for following the best practice.
Let's see an example. Paste the above code on an HTML page. I have used bootstrap for a better view experience. You can skip the bootstrap sample part either.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Example of HTML <em>optgroup</em> Tag</title>
</head>
<body>
<div class="container">
<h2>The HTML Radio Buttons</h2>
<p>Choose your favorite footbal team:</p>
<form action="#">
<div class="form-check">
<input type="radio" id="Argentina" name="fav_team" value="Argentina" class="form-check-input">
<label for="Argentina" class="form-check-label">Argentina</label><br>
<input type="radio" id="Brazil" name="fav_team" value="Brazil" class="form-check-input">
<label for="Brazil" class="form-check-label">Brazil</label><br>
<input type="radio" id="Germany" name="fav_team" value="Germany" class="form-check-input">
<label for="Germany" class="form-check-label">Germany</label><br><br>
</div>
<input type="submit" value="Submit" class="btn btn-success">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
If we run the code in the local host, it will be looked like this:
That's it for today. Hope this might help you in the journey of development.
Read More: Different input types in HTML
K. M. Shawkat Zamil
Senior Software Engineer
I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.