How to Create a Drop-Down Boxby Kaylee Finn
Drop-down boxes on websites allow the user to select from a list of options. The boxes can be used in forms submitted by the user or for faster site navigation. Advantages to the drop-down box are its economical screen usage and easy interface. The boxes also help to prevent users from entering invalid data. Learn how to create a simple drop-down box in HTML.
Create an HTML document using any simple text editor, such as notepad, or any HTML editing software. Do this by inserting the <html> and <body> tag at the top of your document. These tags define what is inside them as HTML. Be sure to close these tags by inserting </html> and </body> at the end of your document. Save it with a .html extension.
Add the <select> tag to create a drop down menu; remember to close it with the end tag: </select>. You may also give this menu a name, which is used internally, by using the "name" attribute within the opening select tag. For example, this form would be referred to internally as "cheese." <html> <body> <select name="cheese"> </select> </body> </html>
Add an option within the menu using the <option> tag inside the "select" tags. Be sure to close this tag using </option>. Add as many options to the menu as you desire. All the options will become visible once the user expands the drop-down menu. Use the "value" attribute to give each an internal name and "selected" to set it to be selected by default. Finishing the example: <html> <body> <select name="cheese"> <option selected value="cheddar">Cheddar</option> <option value="swiss">Swiss</option> <option value="provolone">Provolone</option> <option value="gouda">Gouda</option> </select> </body> </html>
- check Use for site navigation or as part of a form.
Items you will need
- link HTML forms and input