Forms

Details

We have designed our forms to lay out in one vertical column. It is not part of our design to line up fields in the same horizontal row and we cannot guarantee that they won't break on smaller screens.

Our forms don't need a lot of extra code. There are two options to keep the fields working well together.

  1. No need to wrap them in separate divs or place them in a table. Just make sure to place a <div class="clearfix"></div> between each field so that our floats work out properly. 
  2. Wrap each field set with a div and add the class "field". This clears the floats as well.

Features

Labels

Labels must be first and should not contain the data field(s). Radio buttons and checkboxes need to have the <label> follow the input. They must also be linked so that if you click a radio button's label it checks the associated radio button. If you need to label a set of radio buttons or checkboxes use <h5 class="label>Label</h5>

Descriptions

Field description go below the label but before the error message or the field itself. This allows the user to better associate the description with that particular field. Descriptions may be inside the label if short or below in a separate div if long.

Code Example

<label>Name <span class="description">First name only.</span></label>

Help Text

If you would like to supply even more help text than a description will allow, or if you would like to supply help text that is hidden until activated, you may use a hover effect. In order to make it work on touch devices add the class "help-text" to pop this effect up on click.

Code Example

<img title="Help text is displayed both on hover and on click. A javascript uses the help-text class and pulls the title information out into a pop-up." src="https://img.aafp.org/icons/questionmark.png" alt="?" class="help-text" height="15" width="15">

Required Fields

Required fields should be marked with an asterisk that is located inside the label.

Code Example

<label>Name <span class="required">*</span></label>

Error Messages

Error messages should appear outside of the <label> and before the field itself. This also helps the user associate that field with the error message. Please keep error messages informative but short.

Code Example

<label>Name <span class="required">*</span></label>
<div class="error" style="display:none">You forgot your name.</div>
<input...

Large TextAreas

The input required for textareas can get larger than our default style allows for. In this case you can add the class "large" to the <textarea>.

Code Example

<textarea class="large"></textarea>

Mobile Keyboard Improvements

To help users on mobile devices we are implmenting input types that pull up the right keyboard for the job(html5doctor.com).

Live Example

Description or additional information goes here.
Error message goes here
What gender?
Radio Header