ptg16476052318 LESSON 12: Designing Forms
}
label {
display: block;
float: left;
width: 150px;
text-align: right;
font-weight: bold;
margin-right: 10px;
}
input.submit {
margin-left: 160px;
}
</style>
</head>
<body>
<h1>Please Log In</h1>
<form action="/form-processing-script" method="post">
<div>
<label for="username">Username</label>
<input type="text" name="username">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password">
</div>
<div>
<input type="submit" class="submit" value="Log In">
</div>
</form>
</body>
</html>At one time, it was rare to see forms that were laid out without the use of tables, but
tables are no longer necessary thanks to CSS. Let’s look at the style sheet for the form.
First, I added 5 pixels of margin to the bottom of the <div> elements to separate the
form elements a bit. Then, I used CSS on the labels to align the form fields vertically
and right-align the labels. You can only apply widths to block-level elements, so I set the
display property on the labels to block. Then I used float: left and a width of 150
pixels to get the form fields to move to the right of the labels. Setting the text-align
property to right for the labels moves them to the right side of the 150-pixel box I put
them in. Then I just added 10 pixel margin to create some space between the labels and
the form fields, and I 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 left 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 12.2 looks good.▼▼