CHApTer 6 ■ WorkIng WITH ForMS
Listing 6-3. Using the First option Element As a Prompt
An important point to observe about Listing 6-3 is that it uses the value attribute. If the user were to select the
option “I love eggs!”, the value submitted to the server would be “eggs.” The option used as the prompt has an empty
string as its value. This is simply a way to signify the fact that this option isn’t really an actual choice; it’s merely
serving as an instruction to the user.
There is certainly more to the select element, and indeed forms in general, but I hope this section has given you
a brief introduction (or perhaps rehydrated some knowledge that was perilously close to drying up and disappearing
for good!).
The label Element
The label element defines a label for an input element. This element provides a usability improvement, because
it creates a connection to the input to which it refers. So, for example, screen readers can better distinguish that the
text you provide as a label is related to the input field. An additional benefit is that the label will also help users target
the input with which it is associated, so check boxes and radio buttons are much easier to click, as they can now be
activated by clicking the label itself.
In the example that follows, you can see that this connection is made by specifying a value on the for attribute
that matches the value of the input’s id attribute. In this case, first-name is used in both cases.
Here is another example, this time using a check box.Simply by clicking the text “I agree to the terms and conditions” can activate this check box. Had we not used a
label and instead opted to use some other element, such as a p or a div, users would have to click the check box itself.
Model Binding
When we speak about binding, we are really just talking about connecting things in such a way that they remain
in sync with each other. What things are we talking about here? For example, we can bind a model property called
firstName to a text input. This binding would create a special relationship between each, causing the text input to
display the value of the model property, and the model property to store the value of the text input.
It’s even more than that, however, because it works in both directions and in near real time. Should you change
the value in the text input, the model property will immediately update itself to reflect this new value. Should you
change the value of the model property, the value in the text input will immediately update itself to display this new
value. As this all happens in near real time, changes are visible in the user interface right away.