HTML and CSS Reference
In-Depth Information
Gathering input
The form element is just a container for data-gathering elements, called form controls ,
which are the input , select , and textarea elements. The specifics of how each
of these work will be addressed in due course, but first it is important to make note of
an attribute they all use: the name attribute. Unlike the name attribute that appears on
the form element, this attribute has more of a critical role in this context. All form con-
trols that are passing data to the form handler must have a name attribute; otherwise,
they will not pass their values on when the form is submitted. Except for cases where
form controls are being grouped together, such as is the case for radio buttons, the name
attribute value should be unique so that a particular form input value can be picked out
from the rest. For example, the following form snippet shows two input fields:
<input name="firstname" type="text" value="Anselm" />
<input name="lastname" type="text" value="Bradford" />
The name/value pair here is firstname/Anselm and lastname/Bradford (these values
are the default set using the value attribute but could be changed via data input by the
user). As discussed earlier, if the form were submitted using the GET method (and the
web page filename was handle_form.php ), then the URL of the page would look
like this:
This shows the name attributes and their associated values in the URL.
Generally, the real heart of a form will be found in the shape-shifting input element.
I call it shape-shifting because the input element is rather unique among the HTML
elements in that it can take on many different appearances and behaviors, depending on
the value in its type attribute. The type attribute takes one of a set of keywords as
its value. For example, the preceding example sets the input type to be a text input for
both form controls with type="text" . The list of available types has been substan-
tially increased in HTML5, as shown in Table 4-1 . The appearance of each input type
will be determined by the web browser (and will likely vary between browsers) but can
be styled with CSS.
Note If no type attribute is specified on the input element or if a type is used
that is not yet supported in your preferred web browser, the input type will become a
one-line text input field.
Search WWH ::

Custom Search