Intro to HTML: Radio Buttons

Quick Copy Boxes

Radio buttons are an input type. They are one option for allowing the user to make a choice.

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

Example Radios

Less than 10
Less than 100
Over 100

How to be a Great Programmer:

Commander Candy Vlog

Radio Syntax

  <!DOCTYPE html>
      <!-- Page Title-->
      <!-- Form-->
      <form class = "radioDisplay" method = "post" action = "lesson.php">
          <!-- Label-->
          <label  for = "genre"> Which do you like best?></label><br>
          <!-- User's makes selection-->
          <input type="radio" name="genre" value="1"> Classic Rock<br>
          <input type="radio" name="genre" value="2"> Heavy Metal<br>
          <input type="radio" name="genre" value="3"> New Metal<br>
          <!-- Submit Button-->
          <input type='Submit' value='Submit'>

<form></form> - This is the form.
<input>s - Radio Input Elements
class - This is the CSS class that formats the form's appearence
php stuff - On submit the code in lesson.php will be executed. The method of passing the user input to PHP is post. Don't worry about this until you learn PHP.
type - The type of input is radio.
name - The name attribute is set to 'genre'. The name should be the same for every radio option for that group. Notice the for attribute on the label is also given the same name. That groups all this together.
value - You will use these values when writing the code that makes your form work. The code that is executed will probably depend on the input value.
text - This is the text the user will see beside each radio.
Submit Button When the user clicks the button, the input will be passed to lesson.php via method post and the php code in that file will be executed.

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.