Applying CSS to Forms
By Trenton Moss2004-06-24
Formatting the whole form
|
|
We may want to give this form its own title and border. To do this we add the <fieldset> and <legend> commands to the HTML code:
<fieldset>
<legend>This is my form</legend>
<form action="destination.htm">
<label for="name">Name</label> <input type="text" id="name" class="input-box" /><br />
<label for="e-mail">E-mail</label> <input type="text" id="e-mail" class="input-box" /><br />
<input type="submit" value="submit" class="submit-button" />
</form>
</fieldset>
We'll apply some CSS commands to the fieldset and legend to give the form a blue border and a title with an orange background:
fieldset
{
border: #26a solid 1px;
width: 20em
}
legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px
}
Tutorial Pages:
» The Original Form
» Positioning the form with CSS
» Applying colours to the form
» Formatting the whole form
» The final form
» Take this further
|
