How to Create a Drop-Down Selection Box in HTML
The Web is a highly interactive tool, with Web 2.0 features such as social networking and video sites dominating bandwidth. This means that many website features require more than simple HTML to be correctly implemented, with scripting languages like JavaScript, ActionScript and jQuery providing most of the interactivity. A simple drop-down selection box, however, requires nothing more than a few quick HTML tags to work in any browser and adds some user interaction to your site.
Other People Are Reading
Instructions
-
-
1
Locate the position within your HTML document where you want the drop-down box to appear. It is an inline element, so you can place it either within or at the end of a paragraph.
-
2
Type the opening tag for your drop-down box:
<select>
-
-
3
Press the "Return" or "Enter" key to move down to the next line. This will not affect the layout of your list, but will keep your HTML code neater and more manageable.
-
4
Type the opening tag for the first item in your drop-down list:
<option>
-
5
Type the value of the first item in your drop-down list on the same line.
-
6
Type the closing tag for the first item in your drop-down list once again on the same line:
</option>
-
7
Repeat this process for each item in your drop-down list.
-
8
Type the closing tag for your drop-down box on the next line down:
</select>
-
9
Check that your code matches the following structure:
<select>
<option>Item One</option>
<option>Item Two</option>
<option>Item Three</option>
<option>Item Four</option>
</select>
-
1
Tips & Warnings
Since an HTML drop-down box is an inline element, you have to take care when positioning it. If you want to make it appear separate from the rest of your text, your best option is to style it with CSS, adding padding around it to ensure that it appears the same in all browsers.
Be sure to close your paragraph tags after your drop-down if you include it within or at the end of a paragraph.
