Dropdown list: select tag, option tag and value attribute of option tag

 HTML FORMS

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


Hint:

Add the <select> element inside the <form> and below the <label>. The <select> element has an opening and closing tag. Add the attributes to the opening tag of <select>.


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!)
  • Hint:
  • To display text on the webpage for an <option>, add the text in between the opening and closing tags of <option>. The value attribute is set in the opening <option> tag.

Comments

Post a Comment

Popular posts from this blog

Password Input: type password attribute and relationship between name and id attribute of input tag

Image
  HTML FORMS Password Input Think about all those times we have to put sensitive information, like a password or PIN, into a  <form> . We wouldn’t want our information to be seen by anyone peeking over our shoulder! Luckily, we have the  type="password"  attribute for  <input> ! An  <input type ="password">  element will replace input text with another character like an asterisk (*) or a dot (•). The code below provides an example of how to create a password field: <form>    <label for = "user-password" > Password: </label>    <input type = "password" id = "user-password" name = "user-password" > </form> After a user types into the field, it would look like: Even though the password field obscures the text of the password, when the form is submitted, the value of the text is sent. In other words, if “hunter2” is typed into the password field, “user-password=hunter2” is sent a...
Read more

Adding a Label: label tag, for attribute and id attribute for input tag.

Image
  HTML FORMS Adding a Label In the previous exercise we created an  <input>  element but we didn’t include anything to explain what the  <input>  is used for. For a user to properly identify an  <input>  we use the appropriately named  <label>  element. The  <label>  element has an opening and closing tag and displays text that is written between the opening and closing tags. To associate a  <label>  and an  <input> , the  <input>  needs an  id  attribute. We then assign the  for  attribute of the  <label>  element with the value of the  id  attribute of  <input> , like so: <form action = "/example.html" method = "POST" >    <label for = "meal" > What do you want to eat? </label>    <br>    <input type = "text" name = "food" id = "meal" > ...
Read more