Intro to HTML: Selects

Quick Copy Boxes

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.

Example Selects

Select HTM Syntax

  <!DOCTYPE html>
      <!-- Page Title-->
      <!-- Form-->
          <!-- Label-->
          <label>  Which do you like best?</label><br>
          <!-- User's makes selection-->
            <option value="1"> Programming<br>
            <option value="2"> Gaming<br>
            <option value="3"> Swimming<br>
          <!-- Submit Button-->
          <input type='Submit' value='Submit'>

<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.

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 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.