HTML Dropdown List

Introduction

HTML Select element is used to create a drop-down list that allows users to choose one or more options from the given list. In this lab, you will learn how to use the HTML Select tag to create a list of items for a user to select from.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/FormsandInputGroup -.-> html/forms("`Form Elements`") subgraph Lab Skills html/forms -.-> lab-70833{{"`HTML Dropdown List`"}} end

Creating a Select Element

To create a select element, we use the HTML Select tag with the opening and closing tags. Here’s an example of how to create a simple select element.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

The code above creates a simple select element with four options: Volvo, Saab, Opel, and Audi.

Adding Attributes to Select Element

We can add attributes to the Select element to make it more interactive for users. Here are some of the important attributes of HTML Select Element.

A: Size Attribute

size attribute specifies how many options must be visible at a time. Here's an example:

<select size="3">
  <!-- three options visible by default -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

B: Name Attribute

Name attribute assigns a name to the select element. Here's an example:

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

C: Multiple Attribute

multiple attribute allows users to select more than one option at the same time. Here's an example:

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Defining Options

You can add any number of options to a select element by using the option tag. Here's an example:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

As you can see, we have defined four options and each option has a value attribute. The value attribute can be used to associate each option with a unique value.

Using Grouped Options

You can group options under an <optgroup> tag. This makes your select element more organized and readable. Here's how you can use grouped options:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Creating Default Values

You can specify a default value that will be shown when the page is loaded. Here's how you set a default value:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

In this example, the "Opel" option will be selected by default.

Summary

In this lab, you learned how to create a drop-down list using the HTML Select tag, different attributes that can be used with Select tag, how to define the options, use grouped options, and create default values. With these skills, you should be able to create more advanced select elements that can help users to interact with your websites easily.