HTML and CSS Reference
In-Depth Information
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 distin-
guish 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”>
Because this form contains a file upload field, we have to use the
post
method and the
multipart/form-data enctype
in the
<form>
tag. The
action
attribute points to a CGI
script that lives on my server. Next, we start adding form inputs. Here's the
name
input:
<div>
<label class=”required field” for=”name”>
Name
</label>
<input name=”name” />
</div>
All the inputs will follow this basic pattern. The input and its label are nested within a
<div
>. In this case, the label has the classes
field
and
required
. The only attribute
included in the input tag is the field name because the default values for the rest of the
attributes are fine. Next is the gender field, which uses two radio buttons:
<div>
<label class=”required field”>
Gender
</label>
<label><input type=”radio” name=”gender” value=”male” />
male
</label>
<label><input type=”radio” name=”gender” value=”female” />
female
</label>
</div>
As you can see, the radio button group includes two controls (both with the same name,
establishing the group). Because we didn't include line breaks between the two fields,
they appear side by side in the form. Here's an instance where I used the
<label>
tag
two different ways. In the first case, I used it to label the field as a whole, and then I used
