• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / HTML / What is the Correct HTML for Making a Drop-Down List?

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

March 13, 2022 Leave a Comment

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.

Other Articles You'll Also Like:

  • 1.  How to Make a Div Scrollable in HTML
  • 2.  Clicking on an Image to Enlarge it in HTML
  • 3.  How to Call a JavaScript Function From HTML
  • 4.  What Type of HTML List will Automatically Place a Number in Front of the Items?
  • 5.  Sort List of Divs with Data Attribute with Radio Buttons Using Javascript
  • 6.  HTML span width – Set the Width of a Span in HTML
  • 7.  How to Make an HTML List Without Bullets
  • 8.  innerHTML vs outerHTML
  • 9.  How Do You Select All p Elements Inside a Div Element?
  • 10.  outerHTML – How to Get and Change the outerHTML Property of an Element

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy