Learn

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!)

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?