How to Create HTML Radio Button Group
In this video we will explore how to create html radio button group. This is basic video helping people who start out with HTML to learn how to create radio button groups.
A radio button group is a group of radio buttons that are connected. Only one option can be selected with a radio button. By grouping them it understands which radio button is part of the group.
Code of HTML Radio Button Group
Below you can find the code snippet of the HTML Radio Button Group.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Create HTML Radio Button Group</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1A1A1A;
color: rgba(255, 26, 104, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
height: 200px;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM | How to Create HTML Radio Button Checked</p>
</div>
<div class="chartCard">
<div class="chartBox">
<form>
<label>
<input type="radio" name="radio-group" value="1" checked> Choice 1
</label>
<br>
<label>
<input type="radio" name="radio-group" value="2"> Choice 2
</label>
<br>
<label>
<input type="radio" name="radio-group" value="3"> Choice 3
</label>
</form>
</div>
</div>
</body>
</html>
English (United States) 
Spanish