What is the Correct HTML for Making a Drop-Down List?

The correct HTML for making a drop-down list is just to use the HTML select tag.

<select name="colors" id="colors">
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="pink">Pink</option>
  <option value="yellow">Yellow</option>
  <option value="red">Red</option>
</select>

A select element is used best on a form to gather user information. We’ll want to add a label along with it to give the user some context for the drop-down list.

Let’s take a look at the select element in the form below.

Example of the Correct HTML for making a Drop-Down List in a Form

In this simple example, we will just have a standard HTML form. As is common in a lot of email forms, there will usually be a select form to get some kind of user feedback on how they heard about the company. In this example, we will add a select drop-down list with some options for the user to choose, to mimic these online forms.

The form will not have any backend connected to it, so when you submit the form, it should just refresh the page and put the variables you entered in the url.

<form>
  <label for="fname">Full Name:</label>
  <input type="text" id="fname" name="fname">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <label for="survey">How did you hear about us?</label>
  <select name="survey" id="survey">
    <option value="internet">Internet</option>
    <option value="friend">Friends or Family</option>
    <option value="television">TV Ad</option>
    <option value="radio">Radio</option>
    <option value="newspaper">Newspaper</option>
  </select>
  <button type="submit" value="Submit">Submit</button>
</form>

And finally, here is the above code in action for you to try out.

Hopefully this article has been useful for you to understand what the correct html is for making a drop-down list.