HTML and CSS Reference
In-Depth Information
Figure 8-14
. The file control as it appears in Firefox for OS X.
Some browsers display a file control like you see in Figure 8-14, as a text field with a button to its right.
However, Safari and Chrome—both based on the WebKit rendering engine—display file controls in a very
different way. As you can see in Figure 8-15, these browsers don't show a writable text field, instead
offering only the browse option with the button on the left side of the control. To the right of the button,
Safari and Chrome display only the name of the selected file (once the file has been selected) instead of
the full path. Along with the file name, Safari will also display a small icon to indicate the type of file, if the
type is known. As is usually the case, the function of the control is the same across browsers, even if its
presentation isn't.
Figure 8-15.
A file control as rendered by Chrome on top and Safari below, both on Mac OS X. They're practically
identical because both browsers are built on the same rendering engine. The buttons will look different on other
operating systems, including older versions of OS X.
input type="submit"
An
input type="submit"
control creates a button that will submit the entire form data set—all the data
entered in the various controls—when clicked. The control's
value
attribute sets the text label for the
rendered button, which defaults to “Submit” (or “Submit Query” in some browsers) if a
value
attribute is
omitted. The button's value isn't submitted with the rest of the form; it's strictly a label. When the button is
activated and the form is submitted, the form handler takes over to process the data.
You can see the markup for a simple login form with a submit button in Listing 8-13. In this example the
label “Log In” will appear on the rendered button rather than the default text.
Listing 8-13
. A simple login form with a submit button
<ul>
<li>
<label for="username">Your username:</label>
<input type="text" id="username" name="username" required>
</li>
<li>
<label for="password">Your password:</label>
<input type="password" id="password" name="password" required>
</li>
<li>
