HTML and CSS Reference
In-Depth Information
right
for the labels moves them to the right side of the 150-pixel box I put them in.
Then I just added a 10-pixel margin to create some space between the labels and the
form fields and bolded the label text. To get the Submit button, which has no label, to
line up with the other form fields, I added a 160-pixel right margin. That's 150 pixels for
the label and 10 pixels for the margin I added to the labels. That took a little work, but I
think the final page shown in Figure 11.2 looks good.
FIGURE 11.2
A simple form.
To complete the exercise, let's test the form to see whether the form produces the data
we expect. Here's what the data that's sent to the server looks like:
11
username=someone&password=somepassword
It's pretty measly, but you can see that the names assigned to each field are tied to the
values entered in those fields. You can then use a program to use this data to process the
user's request.
▲
To accept input from a user, you must wrap all your input fields inside a
<form>
tag.
The purpose of the
<form>
tag is to indicate where and how the user's input should be
sent. First, let's look at how the
<form>
tag affects page layout. Forms are block-level
elements. That means when you start a form, a new line is inserted (unless you apply the
display: inline
CSS property to the
form
tag).
NOTE
Form controls must appear inside another block level element
inside the
<form>
element to be considered valid. A
<div>
,
<p>
,
or
<table>
will all do the trick, as will other block level elements,
such as the
<fieldset>
tag, which I talk about a bit further on.
