Intro to HTML: Radio Buttons
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.
<!DOCTYPE html>
<html>
<head>
<!-- Page Title-->
<title>Music<title>
</head>
<body>
<!-- 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>
</body>
</html>
➼ <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.
Background:
You are a front-end web developer. You are employeed by a bakery and creating forms for customers
to place orders online.
Assignment:
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.