HTML and CSS Reference
In-Depth Information
<div>
<label for=”password”>
Password
</label>
<input type=”password” name=”password” />
</div>
<div>
<input type=”submit” class=”submit” value=”Log In” />
</div>
</form>
The Submit button is another type of
input
field. The
value
attribute is used as the label
for the Submit button. If you leave it out, the default label will be displayed by the
browser.
TIP
When you're naming form controls and labeling buttons, strive for
clarity and meaning. If a form is frustrating or hard to figure out,
visitors will leave your site for greener pastures!
Figure 11.1 contains a screenshot of the form with all the form elements in place.
11
.
Output
FIGURE 11.1
The form with all
the input elements
in place.
At this point, you've created the form and it's ready to rumble. However, if you load it
into your web browser, you'll see that it doesn't look all that appealing. I can vastly
improve the appearance using
Cascading Style Sheets (CSS)
. Here's the code for the full
page, including the style sheet:
<!DOCTYPE html>
<html>
<head>
<title>
Login Form
</title>
<style type=”text/css”>
div {
