How to Make an HTML Drop Boxby Kay Daniels
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.
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.
Choose a "Select" tag if you are using an HTML editor, or if you are hand-coding your HTML. Type the following:
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:
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.
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:
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:
- check 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"
- check 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"
- close It is always a good idea to test web pages in multiple browsers to make sure they are compatible with different platforms.
- photo_camera drop image by Zbigniew Nowak from Fotolia.com