ptg16476052346 LESSON 12: Designing Forms
Let’s look at the components used to build the form. The styles for the form are included
in the page header. Here’s the style sheet:
<style>
form div {
margin-bottom: 1em;
}div.submit input {
margin-left: 165px;
}label.field {
display: block;
float: left;
margin-right: 15px;
width: 150px;
text-align: right;
}label.required {
font-weight: bold;
}
</style>Looking at the style sheet, you should get some idea of how the form will be laid out.
Each field will be in its own <div>, and I’ve added a margin to the bottom of each of
them. Just as I did in the login form example earlier, I’ve added a left margin for the
Submit button so that it lines up with the other fields. Most of the styling has to do with
the labels.
In this form, I am using labels in two ways—first to create a left column of labels for
the form, and second to add clickable labels to the radio buttons and check boxes. To
distinguish between them, I’m using a class called field, which I apply to the field-level
labels. I’ve also got a class called required that will be used with labels on required
fields.
Now that you’ve seen the styles, let’s look at the body of the page. After some introduc-
tory text, we open the form like this:
<form action="/register" method="post"
enctype="multipart/form-data">▼▼