Intro to HTML: Selects
Selects are another way to get user input.
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>Activities<title>
</head>
<body>
<!-- Form-->
<form>
<!-- Label-->
<label> Which do you like best?</label><br>
<select>
<!-- User's makes selection-->
<option value="1"> Programming<br>
<option value="2"> Gaming<br>
<option value="3"> Swimming<br>
</select>
<!-- Submit Button-->
<input type='Submit' value='Submit'>
</form>
</body>
</html>
➼ <form></form> - This is the form.
➼ <select></select> - Select Tags - Inside the select element will be the user's selection options.
➼ option - Selection options, the user will choose one of these options.
➼ 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 for each selection option.
➼ Submit Button - User's input is submitted.
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 that uses selects to allow the customer to choose a type of cake filling.
Run the code in the code editor box below. Then, play around and make changes to see how the form changes.