The most obvious way to use JavaScript to ensure that the user enters something valid on your HTML5 page is to supply him with valid choices. The drop-down list is an obvious and easy way to do this.
The list-box approach has a lot of advantages over text field input:
The user can input with the mouse, which is faster and easier than typing.
You shouldn't have any spelling errors because the user didn't type the response.
The user knows all the answers available because they're listed.
You can be sure the user gives you a valid answer because you supplied the possible responses.
User responses can be mapped to more complex values — for example, you can show the user Red and have the list box return the hex value #FF0000.
How to build the form
When you're creating a predefined list of choices, create the HTML form first because it defines all the elements you'll need for the function. The code is a standard form:
<body>
<form action = ">
<h1>Please select a color</h1>
<fieldset>
<select id = "selColor">
<option value = "#FFFFFF">White</option>
<option value = "#FF0000">Red</option>
<option value = "#FFCC00">Orange</option>
<option value = "#FFFF00">Yellow</option>
<option value = "#00FF00">Green</option>
<option value = "#0000FF">Blue</option>
<option value = "#663366">Indigo</option>
<option value = "#FF00FF">Violet</option>
</select>
<input type = "button"
value = "change color"
onclick = "changeColor()" />
</fieldset>
</form>
</body>
</html>
The select object's default behavior is to provide a drop-down list. The first element on the list is displayed, but when the user clicks the list, the other options appear.
A select object that the code refers to should have an id field.
The other element in the form is a button. When the user clicks the button, the changeColor()function is triggered.
Because the only element in this form is the select object, you may want to change the background color immediately without requiring a button click. You can do so by adding an event handler directly onto the select object:
<select id = "selColor"
onchange = "changeColor()">
The event handler causes the changeColor() function to be triggered as soon as the user changes the select object's value. Typically, you'll forego the user clicking a button only when the select is the only element in the form. If the form includes several elements, processing doesn't usually happen until the user signals she's ready by clicking a button.
How to read the list box
Fortunately, standard drop-down lists are quite easy to read. Here's the JavaScript code:
<script type = "text/javascript">
// from dropdownList.html
function changeColor(){
var selColor = document.getElementById("selColor");
var color = selColor.value;
document.body.style.backgroundColor = color;
} // end function
</script>
As you can see, the process for reading the select object is much like working with a text-style field:
Create a variable to represent the select object. The document.getElementById() trick works here just like it does for text fields.
Extract the value property of the select object. The value property of the select object reflects the value of the currently selected option. So, if the user has chosen Yellow, the value of selColor is “#FFFF00”.
Set the document’s background color. Use the DOM mechanism to set the body’s background color to the chosen value.