HTML and CSS Reference
In-Depth Information
of the options has been selected, filling the circle with a solid dot. Choosing a different option will
automatically uncheck the previous choice.
Figure 8-13
. The set of radio buttons as it might be rendered in a browser, now with one option selected.
input type="file"
A file input renders a file upload control—usually consisting of a text field alongside a “choose file” or
“browse” button—allowing the user to locate a file on her computer's hard drive or local network and
upload that file when she submits the form. Clicking the button invokes a computer's built-in file browser,
and once a file is located, the local file path appears in the text field (or some browsers show only the file
name without the full path). As with other text fields, an optional
size
attribute can specify the width of the
file field as a number of characters. Browsers that don't display a text field with a file input simply ignore
the
size
attribute.
An
input type="file"
control can include an optional
accept
attribute, where the value is a comma-
separated list of the accepted file types (specified by their MIME types). If you're asking your users to
upload an image, for example, the
accept
attribute can restrict the field to accept only standard image
formats; any other file type would be rejected.
Previous versions of HTML also allowed the
accept
attribute on the
form
element itself,
but that's no longer valid in HTML5, partly because file inputs are no longer required to
reside in a
form
element. HTML5 allows form controls to appear anywhere in the
document and be directly associated with a form elsewhere in the document by way of
the new
form
attribute.
Listing 8-12 presents the markup for a file control, including an
accept
attribute that limits uploaded files to
GIF, JPEG, or PNG images.
Listing 8-12
. A file control with an
accept
attribute
<p>
<label for="photo">Send us your action shots and show off your new gear!</label>
<input name="photo" id="photo" type="file" accept="image/gif, image/jpeg, image/png">
</p>
Figure 8-14 shows how this looks in Firefox for Mac OS X. We've already selected a file by browsing the
local hard drive, and its path appears in the text field. Only the first portion is visible because the full path is
longer than what the text field can display. The button's text is left up to the browser; you can't supply your
own label. File controls are also largely immune to CSS, unfortunately, so you can only alter a few aspects
of their styling.
