Form elements, fieldsets, inputs and legends

All forms need to have a <fieldset> and <legend> to meet accessibility requirements. class="no-border" can be applied to <fieldset> for a simplier style.

Fieldset Legend

Form element

This is an example form. It doesn't do anything but it looks nice and shows how to use the different elements.

Radio buttons:

Checkboxes:

Vertical labels

The placeholder attribute can be used on forms to place example text inside the field. This works in IE10+, Firefox, Safari, Chrome. It should only be used to provide example text and not to replace the label because it isn't fully supported.

Your details

Horizontal labels

Labels can be placed beside fields by adding the classes .right and .inline to the labels. Use column classes to set width of label and field columns.

Postal address
Forms
Demo form

Demo form

TO DO: By default you cannot add classes to individual fields. Should trial https://drupal.org/project/webform-classes to see if this will sole this problem. Also Webform doesn't apply the same classes we use so it will need its own stylesheet.

This is a demo of the webform module. It allows you to easily create forms within Drupal without needing to know how to code.

Example form
This can auto-populate if the user is logged in.
:
Strongly disagreeDisagreeNeutralAgreeStrongly agree
Forms are the best thing ever
Drupal has changed my life
This is a useful form example
Please select the option that most closely reflects how you feel.

This is some content that can be insert into a form between fields. It isn't an actual field and shouldn't validate. I've wrapped it in a boxed style so you can see where it starts and ends.