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

Applied Assignment


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.