Forms
From CSS Standards FAQ
Forms serves a very important part of websites, and it's important that they work like they should for everybody.
Contents |
fieldset tag
All forms most commonly contains at least one <fieldset> tag. <fieldset> tags may be used to group input fields like multiple related radio or checkboxes and you may nest <fieldset> tags.
legend tag
It is required to have a <legend> inside a <fieldset> tag. The <legend> works like a header for the grouped fields.
label tag
All input fields should have an associated <label> tag. To link a <label> to a input field, set the for attribute of the <label> tag to the same value as the id attribute of its associated input field.
Grouping a field and its associated label
It is normal to somehow group the input field and its label together to make the html more flexible for css styling. Most people agree that you should either use a list(<ul>, <ol> or <dl>) or a <div> to do this. By doing this you add the capability to display each matching label and field on their own lines or having alternating background color for each row and much much more.
Some argue one could also use <br> to place each matching label and field on their own line, but since <br> is regarded as a content line break, just like <img> is for content images, we recommend you use one of the above mentioned methods.
Tips
- If you use
<button type="submit">instead of<input type="submit">it will be easier to style your submit buttons without adding any extra classes or ids.
Further Reading
- Forms Example Styling
- Example of method 1 by SJR (Uses radio buttons too)
- Applying CSS to forms by Web Credible
- Accessible, stylish form layout by Cameron Adams
- InForm is an example of versitile forms by Cameron Adams
- Styling form controls by Roger Johansson
- Nice forms with JavaScript and images
- Form layout with a definition list by trovster
