Common Patterns

Contact/Form Builder

Notes: An example of a responsive contact form.

Associated Files: styles.css

Examples

Vertical Form

This is a Legend

First Name

Last Name

Validation This field is required.

Telephone (optional)

Password

Date

Time

Number (optional)

Select a state

Singleselect Listbox

Multiselect Listbox

Textarea (optional)

Radio Buttons & Checkboxes

This is a pseudo lable for a radio list. Yes
No

This is a pseudo lable for a checkbox list. Apples. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Oranges
Grapes
Pears

This is a pseudo lable for a radio list. Yes
No This field is required.

Upload & Submit

File Upload (optional) This is help text. It's not very helpful though.

This is a pseudo lable for a check box if necessary. Remember me

Horizontal Form