Intro to HTML: Check Boxes

Quick Copy Boxes

Check Boxes are an input type. They are one option for allowing the user to make a choice. By default, check boxes allow the user to check multiple selections.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Example Check Boxes

Which activities do you enjoy?

I love to code!
I love the beach!
I love gaming!

Check Box Syntax

  <!DOCTYPE html>
      <!-- Page Title-->
      <title>Page Title<title>
      <!-- Form-->
      <form method = "post" action = "main.php">
          <!-- Label-->
          <label for ='activities'>Question or Heading</label><br>
          <!-- User's makes selection-->
          <input type="checkbox" name="activities" value="1">  I love to code!<br>
          <input type="checkbox" name="activities" value="2">  I love the beach!<br>
          <input type="checkbox" name="activities" value="3">  I love gaming!<br>
          <!-- Submit Button-->
          <input type='Submit' value='Submit'>

<form></form> - This is the form.
<label> - This is the label for the check-box group.
Check Boxes - These are the check boxes.
<input> - Check-boxes are a type of input element.
type - The type attribute is equal to "checkbox"
name - This is what you name your check-box group.
value - The value you assign to each option. These values are used when you write the code that makes the form work. You can have your script execute different code, depending on the value of the user's selection.
Text - This is the text the user will see beside each check-box option.
Submit - This is the submit button. On mouse click, the PHP code on
main.php will run.

Applied Assignment

You are a front-end web developer. You are employeed by a bakery and creating forms for customers to place orders online.
Create a form with radio buttons that allows the user to select a cake flavor.

Run the code in the code editor box below. Then, play around and make changes to see how the form changes.