HTML and CSS Reference
In-Depth Information
One use case where the
button
element's submission type does not overlap with the
input
element is if you want to use an image as a submit button, in which case an
in-
put
with a
type
attribute of
image
and an additional
src
attribute need to be used.
While an image can be used inside a button (like in
Figure 4-17
), using an image input
control makes the entire image the button, without any additional UI elements added by
the browser. The
src
attribute points to where the image file resides on the server, just
like an
img
. Also like an
img
, remember to include an
alt
attribute that describes the
purpose of the image, for accessibility reasons.
Using an image for a submit button will also send x and y coordinates along as values
(the x and y coordinates of the location in the image you clicked); this is for when image
submits are being used in conjunction with a server-side image map. And if your image
has a
name
attribute, that will also get sent along with those coordinates. For instance,
if your form uses the
GET
method, an image submit button like this:
<input type="image" name="imagesubmit"/>
will pass values like this:
handle_form.php?imagesubmit.x=10&imagesubmit.y=20
If you aren't doing anything with these values, don't worry about them. They don't do
any harm when they're submitted along with the rest of the form data. If you really want
to prevent them from showing up in the URL, then you can change the
method
attrib-
ute of the form from
GET
to
POST
, which will hide all values from the user.
Other common input element attributes
While not central to the functionality of the form controls, several attributes are worth
noting. To begin with, there are a number of attributes that can be used to override a
form's behavior on specific elements.
Table 4-3
lists these attributes, which you can see
by their names will override specific values set in the attributes for the parent form ele-
ment (refer to the discussion of the attributes on the form element if need be).
Search WWH ::
Custom Search