CSS Forms
CSS Forms – I found this article about creating css forms on generally a very informative website. It is pretty straight forward.
You have your LABEL tag and your INPUT tag. You give them both a width, display them as blocks and float them left. Add a bottom margin and clear the breaks you out between the lines and bobs you uncle.
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right
width: 75px;
padding-right:
20px;
}
br {
clear: left;
}
This is the same as what is on the quirksmode site. The problem with this is if you need to get your forms working in Netscape 6.2/7.0. This browser does not like the label tag at all. The way to fix this is put spans inside the label tags and replace the label css reference with a span.
You will probably find that your forms are never this tidy and you might have two input boxes next to each other on one line. To get around this I would set a special DIV that accounts for this and adjust widths etc accordingly. This goes for radio buttons and checkboxes too.
One last thing if you need to style forms differently within your site but a div around the whole form – this way you can set up a number of styles for your forms and switch them by changing the container div. This also avoids messing up any further span tags you might want use on the rest of the site.
Leave a Reply