HTML Project - Creating a Simple HTML Form with Radio Buttons and Checkboxes

Create a simple HTML form with radio buttons and checkboxes. This tutorial explains how to build forms where users can select one or multiple options.

Step 1: Create an HTML File

Create a new file and name it form-options.html.


Step 2: Add the Basic HTML Structure

Set up the basic HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with Radio Buttons and Checkboxes</title>
</head>
<body>
    <!-- Content will go here -->
</body>
</html>


Step 3: Create a Form with Radio Buttons

Inside the <body> tag, create a form that includes radio buttons for selecting a single option.

<body>
    <h1>Choose Your Favorite Color</h1>
    <form action="#" method="post">
        <label><input type="radio" name="color" value="red"> Red</label><br>
        <label><input type="radio" name="color" value="green"> Green</label><br>
        <label><input type="radio" name="color" value="blue"> Blue</label><br>
        <input type="submit" value="Submit">
    </form>
</body>
  • <input type="radio">: Defines a radio button.
  • name: Groups radio buttons together so only one can be selected at a time.
  • value: The value that gets sent when the form is submitted.


Step 4: Add Checkboxes to the Form

Next, add checkboxes for selecting multiple options.

<body>
    <h1>Select Your Hobbies</h1>
    <form action="#" method="post">
        <label><input type="checkbox" name="hobby" value="reading"> Reading</label><br>
        <label><input type="checkbox" name="hobby" value="traveling"> Traveling</label><br>
        <label><input type="checkbox" name="hobby" value="cooking"> Cooking</label><br>
        <input type="submit" value="Submit">
    </form>
</body>
  • <input type="checkbox">: Defines a checkbox.
  • Unlike radio buttons, multiple checkboxes can be selected at once.


Final Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with Radio Buttons and Checkboxes</title>
</head>
<body>
    <h1>Choose Your Favorite Color</h1>
    <form action="#" method="post">
        <label><input type="radio" name="color" value="red"> Red</label><br>
        <label><input type="radio" name="color" value="green"> Green</label><br>
        <label><input type="radio" name="color" value="blue"> Blue</label><br>
        <input type="submit" value="Submit">
    </form>

    <h1>Select Your Hobbies</h1>
    <form action="#" method="post">
        <label><input type="checkbox" name="hobby" value="reading"> Reading</label><br>
        <label><input type="checkbox" name="hobby" value="traveling"> Traveling</label><br>
        <label><input type="checkbox" name="hobby" value="cooking"> Cooking</label><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>