Getting forms to work in the desired way is something I have found quite difficult to achieve in table-less layout. But using the three stage design process described above helps.
It is also necessary to understand a few points about forms in HTML to perfect your CSS forms.
In order that a form verifies in XHTML model you will need to include a fieldset element. Create the form using two elements for each field <label> and <input> or <label> and <textarea>. In a two column form layout the label element and the input element can be floated left. It is useful to use a class for your <input> tags as redefining the tag can lead to boxes appearing around hidden fields!
Below is a simple form used for logging onto the AHS intranet:
<form action="login.php" method="post" id="form1">
<div id="formlayer">
<fieldset><br />
<p><label for="User" class="label">LSBU Username</label><input name="User" class="text" type="text" id="User" /></p><br />
<p><label class="label" for="Password">LSBU Unix password</label>
<input name="Password" class="text" type="password" id="Password" /></p>
<p><br />
<input name="btnLogin" type="submit" class="dbutton" id="btnLogin" value="Login" />
<br />
</p>
</fieldset></div>
</form>
The complete CSS for the forms in the AHS website is below:
#formlayer{
width:560px;
}
#formlayer textarea{
height:100px;
}
#formlayer label{
display:block;
float:left;
width:200px;
height: 20px;
}
.text{
display:block;
float:left;
border:1px solid #94979E;
height: 18px;
width: 150px;
margin-left:10px;
}
.label{
display:block;
float:left;
width:150px;
height: 20px;
}
#formlayer br{
float:none;
text-align:left;
}
#formlayer p {
display:block;
width:560px;
list-style:none;
float:left;
}
#formlayer input.dbutton{
font-size: 12px;
padding:3px;
width: 50px;
height: 24px;
margin:0px;
border-color: #FFFFFF #666666 #666666 #FFFFFF;
background-color: #CCCC99; border-style: solid;
border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px;
}
#hiddenfields{
display:none;
}
I have created a layer called #hiddenfields, so that any style I apply to <input> does not lead to hiddenfields becoming visible.
One thing I have found about forms is that inheritance can be a bit odd – particularly in Internet Explorer. If you redefine <input> in IE, in one div you will find that the default <input> also changes, even for layers that are not nested within the current div.
|
