How to Make a DropDownList in HTML

Drop-down menus are most commonly used with forms to give users a couple different options to select from. However, you can include a drop-down menu anywhere on your page using HTML without using a form. Your drop-down menu can be as long as you want, and can be styled using CSS to better fit in with your website's layout and color scheme.

Instructions

1. Start your drop-down menu with "<select name="menuname">." If you're using the drop-down menu as part of a form, make sure that the name is descriptive and relevant to your form.

2. Enter your first option as "<option value="option1">Option 1</option>". The text entered between the opening and closing tag is what your visitor will see in their drop-down menu; it does not have to be the same as your set value. Repeat this for each option in your menu.

3. Designate a default selected option by adding "selected="selected"" to the option tag, e.g. <option value="option1" selected="selected">Option 1</option>." If this is not set, the first item on the list will be displayed by default.

4. Close your drop-down menu with "</select>". A drop-down menu with three options, with the second option selected by default, would look like this:

   <select name="menuname">

   <option value="option1">Option 1</option>

   <option value="option2" selected="selected">Option 2</option>

   <option value="option3">Option 3</option>

   </select>

5. Use CSS to style your drop-down menu, if you wanted to change the menu's appearance on your Web page. For instance, if you want to use your website's stylesheet to make the menu 100 pixels wide with a black background and gray text, you would add:

   select {

   width:100px;

   background: #000000;

   color:#A8A8A8;}

   You could also add this CSS directly to the opening "select" tag by entering:

   <select name="menuname" style="width:100px;background:#000000;color:#A8A8A8;">

Tips & Warnings

• To include a blank space as the first option, start your first option with "<option value="null"></option>".

• If you want to use a drop-down menu as part of your navigation scheme, you'll need to use some Javascript to make options clickable. HTML Code Tutorial offers a basic tutorial and code for doing this: Htmlcodetutorial.com/linking/linking_famsupp_114.html

• Styles can also be applied to individual option tags.

References

• W3Schools: HTML Forms and Input