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:
handle_form.php?firstname=Anselm&lastname=Bradford
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