How to Make an HTML Drop Box

When designing a web page or an entire site in HTML, you might need an HTML drop box. If you are not already familiar with these boxes, they are those nifty little fields (often found in HTML forms) that allow you to select an item from a list by clicking on an arrow, then scrolling down to find the option you want in the list that drops down beneath that arrow. Whether you are using an HTML editor or coding by hand, creating an HTML drop box is simple.

Difficulty: Easy

Instructions

1. Create an HTML form to house your HTML drop box. Within an HTML form, you can use an HTML drop box for everything from allowing a user to indicate preferences in a form email submission to creating an automatic redirect based on the option in the list that the user clicks.

2. Choose a "Select" tag if you are using an HTML editor, or if you are hand-coding your HTML. Type the following:
   
   <select>
   <option></option>
   </select>

3. Using the "Option" tag within your "Select" tag. Add in all of the items that you need to appear in the list for your drop box. Add a value for each item in the list, so your form script will be able to interpret the user's selection. You can add as many "Option" tags as you need. After you complete this step, your HTML tag should look something like this:
   
   <select>
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   </select>
   
   Whatever you type between the opening and closing "Option" tags will be what appears in the drop box. The value attribute is for use by your form script.

4. Give your "Select" tag a name attribute, especially if you will be using multiple drop boxes within one form. Your form script may require the "Select" tag to have a name attribute. Your opening "Select" tag should look something like this:
   
   <select name="My Select Box">

5. Set a size attribute in your "Select" tag if you want more than one item to be visible in the list when the user loads the page. For example, to show three items on the page, change your "Select" tag like this:
   
   <select name="My Select Box" size="3">

6. Complete any programming tweaks to the script you intend to use with the form, and add the appropriate references in your HTML file. The exact requirements will vary based on what you intend to do with your form. But if you are using JavaScript to cause a page redirect with your drop box, you may need to add an onchange attribute to your "Select" tag that points to the location of your script. Also, your script will need to contain instructions telling which page to redirect to for each option in your drop box.

Tips & Warnings

• If you want one of the items in your list to be preselected when the user loads the page, add this into the "Option" tag for that item: selected="selected" To allow the user to select more than one item in the list, such as in a form submission, add the following into the "Select" tag: multiple="multiple"
• It is always a good idea to test web pages in multiple browsers to make sure they are compatible with different platforms.