Learn
HTML Forms
Dropdown list

Radio buttons are great if we want our users to pick one option out of a few visible options, but imagine if we have a whole list of options! This situation could quickly lead to a lot of radio buttons to keep track of.

An alternative solution is to use a dropdown list to allow our users to choose one option from an organized list. Here’s the code to create a dropdown menu:

<form> <label for="lunch">What's for lunch?</label> <select id="lunch" name="lunch"> <option value="pizza">Pizza</option> <option value="curry">Curry</option> <option value="salad">Salad</option> <option value="ramen">Ramen</option> <option value="tacos">Tacos</option> </select> </form>

Which renders: rendered dropdown list with the first option showing

And if we click on the field containing the first option, the list is revealed: rendered dropdown list with the all options showing

Notice in the code that we’re using the element <select> to create the dropdown list. To populate the dropdown list, we add multiple <option> elements, each with a value attribute. By default, only one of these options can be selected.

The text rendered is the text included between the opening and closing <option> tags. However, it is the value of the value attribute that is used in <form> submission (notice the difference in the text and value capitalization). When the <form> is submitted, the information from this input field will be sent using the name of the <select> and the value of the chosen <option>. For instance, if a user selected Pizza from the dropdown list, the information would be sent as "lunch=pizza".

Instructions

1.

Let’s now give our users a choice of buns using a dropdown list.

In <section> element with a class of "bun-type" there is a <label> that we can associate a <select> element with.

Add a <select> element with a name of "bun" and an id of "bun".

2.

Inside the <select> element, add 3 <option>s.

  • The first <option> should have a value of "sesame" and display the text Sesame on the webpage.
  • The second <option> should have a value of "potato" and display the text Potato on the webpage.
  • The third <option> can be a value that you choose and display text relevant to the value (make sure it’s not empty!)
Folder Icon

Take this course for free

Already have an account?