HTML and CSS Reference
In-Depth Information
margin-bottom: 5px;
}
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 space out the
form elements a bit. Then, I used CSS 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
prop-
erty 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
