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.

Instructions

Difficulty: Moderate

1. 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.
2. 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" >.
3. 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.
4. 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.
5. 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.