How to Create HTML Radio Button Group

How to Create HTML Radio Button Group

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.

How to Create HTML Radio Button 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>

Leave a comment

Your email address will not be published.