The drop-down list is a favorite selection tool of HTML5 and CSS3 web developers. The drop-down list has some very useful elements that make it a huge web developing crowd pleaser:
It saves screen space. Only the current selection is showing. When the user clicks the list, a series of choices drop down and then disappear again after the selection is made.
It limits input. The only things the user can choose are things you've put in the list. This makes it much easier to handle the potential inputs because you don't have to worry about typing errors.
The value can be different from what the user sees. This seems like an odd advantage, but it does turn out to be very useful sometimes.
The code for this simple drop-down list follows:
<!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>basicSelect.html</title> </head> <body> <form action = "> <p> <label>What is your favorite color?</label> <select id = "selColor"> <option value = "#ff0000">Red</option> <option value = "#00ff00">Green</option> <option value = "#0000ff">Blue</option> <option value = "#00ffff">Cyan</option> <option value = "#ff00ff">Magenta</option> <option value = "#ffff00">Yellow</option> <option value = "#000000">Black</option> <option value = "#ffffff">White</option> </select> </p> </form> </body> </html>
The object is a bit different from some of the other input elements you're used to, such as
It's surrounded by apair. These tags indicate the entire list.
Theobject has anattribute. Although the object has many other tags inside, typically only the object itself has an attribute.
It contains a series ofpairs. Each individual selection is housed in an set.
Eachtag has a value associated with it. The value is used by code. The value isn't necessarily what the user sees.
The content betweenis visible to the user. The content is what the user actually sees.
Select boxes don't require the drop-down behavior. If you want, you can specify the number of rows to display with the attribute. In this case, the number of rows you specify will always be visible on the screen.
