How to Create a Drop Down Menu


When designing your website, you may want to include special features like forms for customers to fill out. Forms are used for ordering from a website or for providing other types of information. You can either link forms to databases or have customers print them out to mail in. Using a WYSIWYG makes it easy; however, if you're familiar with HTML, code it yourself to create a drop down menu.

  • Open your HTML editor and add the basic tags for a web page. Type in the title for your drop down menu (e.g., Toppings I Would Like on My Pizza:). Remember to enclose it in paragraph tags. Note that a closing paragraph tag is not always needed; however, it's not a bad idea to include it.

  • Figure out what your available options will be when you create a drop down menu. Include a long list if you want but just remember to include an < option > tag before each item. Begin with a paragraph tag, < p >, and type: < select name = "a name" > to start your drop down menu. Think of the pizza example--< select name = "toppings" >.

  • Add your options and < option > tags next to create a drop down menu. Start with the default option. See that this is the default visible text in the drop down menu. Make it something generic unless it's a common option people will typically choose. Use the tag, < option selected > choose, for a generic or no option default, for instance. Type in a more specific option name for popular choices, such as < option selected > pepperoni.

  • Put in the rest of your options and < option > tags. Build your list of choices (e.g., < option > extra cheese, < option > black olives, < option > pepperoni, < option> pineapple. Include as many options and tags as you need to create a drop down menu.

  • Close your < select > tag and finish your drop down menu list with < /select >. Name your drop down list (e.g., Toppings). Know that this text doesn't go with or inside a tag because it's the label your viewers will see. Keep in mind that you don't have to include a label since you have a title before the drop down menu. Note also that you can put the label before your drop down menu instead. Be sure and leave it out of the < select > and < option > list area though.

Tips & Warnings

  • Eliminate extra spaces used for display purposes only in tags listed here if you plan to copy and paste any of the tags.

Related Searches

Promoted By Zergnet


You May Also Like

Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!