How to Create a Drop-Down Box

by Kaylee Finn

Drop-down boxes on websites allow the user to select from a list of options. The boxes can be used in forms submitted by the user or for faster site navigation. Advantages to the drop-down box are its economical screen usage and easy interface. The boxes also help to prevent users from entering invalid data. Learn how to create a simple drop-down box in HTML.

1

Create an HTML document using any simple text editor, such as notepad, or any HTML editing software. Do this by inserting the <html> and <body> tag at the top of your document. These tags define what is inside them as HTML. Be sure to close these tags by inserting </html> and </body> at the end of your document. Save it with a .html extension.

2

Add the <select> tag to create a drop down menu; remember to close it with the end tag: </select>. You may also give this menu a name, which is used internally, by using the "name" attribute within the opening select tag. For example, this form would be referred to internally as "cheese." <html> <body> <select name="cheese"> </select> </body> </html>

3

Add an option within the menu using the <option> tag inside the "select" tags. Be sure to close this tag using </option>. Add as many options to the menu as you desire. All the options will become visible once the user expands the drop-down menu. Use the "value" attribute to give each an internal name and "selected" to set it to be selected by default. Finishing the example: <html> <body> <select name="cheese"> <option selected value="cheddar">Cheddar</option> <option value="swiss">Swiss</option> <option value="provolone">Provolone</option> <option value="gouda">Gouda</option> </select> </body> </html>

Tips

  • check Use for site navigation or as part of a form.
  • check Use Javascript to allow the user to choose from the drop-down box and then cause it to do something, such as navigate to a chosen page.

Items you will need

References

About the Author

Kaylee Finn began writing professionally for various websites in 2009, primarily contributing articles covering topics in business personal finance. She brings expertise in the areas of taxes, student loans and debt management to her writing. She received her Bachelor of Science in system dynamics from Worcester Polytechnic Institute.