HTML Select List Option

Introduction

The HTML <option> tag is used to define the options in a drop-down list in an HTML form. It is attached to the <select> tag and its variants such as <datalist> and <optgroup>. This tag helps users make a selection from a list of choices. This lab will guide you through the steps to implement an HTML drop-down list using the <option> tag.

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

Create a <form> element

Create an HTML file named index.html in your preferred text editor.

Start by creating a basic HTML form:

<form></form>

Create a <select> element and add options

Inside the <form> element, add a <select> element, which will create a drop-down list.

<form>
  <select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</form>

Here, we have added three <option> tags inside the <select> tags with the value attribute set to "option1", "option2", and "option3".

Add a prompt

Let's add a prompt text. Inside the <select> tag, add the following code:

<select>
  <option value="" disabled selected>Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Here, we have added a new <option> tag with the following attributes:

• value="" which sets the value to an empty string.
• disabled which disables the option from being selected.
• selected which is used to indicate the default choice for the drop-down list.
• The text inside the <option> tag which acts as a prompt.

Add a submit button

We need a submit button to submit the form. Add the following code after the <select> tag:

<form>
  <select>
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <br /><br />

  <input type="submit" value="Submit" />
</form>

Save the file and run it in a web browser to see the drop-down list in action.

Summary

In this lab, we learned how to use the HTML <option> tag to create a drop-down list. We started by creating an HTML form, then added a <select> element, added options inside it with the value attribute, and added a prompt text. Finally, we added a submit button to submit the form. The <option> tag plays a crucial role in creating dynamic HTML forms.