Forms

From CSS Standards FAQ

Jump to: navigation, search

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

  1. 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

Personal tools