GENERIC HTML5
Responsive Design Template

Responsive Forms

There are multiple options for displaying form elements in a responsive layout:

  1. Standard block
  2. Standard block wrapped in columns
  3. Inline

Additionally, entire forms can also be wrapped with a column or a display div like box, grey, or info.

Standard Block

The Standard Block form has a label above the input/output field. The input/output fields will span 100% of the space given.

Standard Block Wrapped in Columns

Using the same code as the Standard Block, form elements are wrapped in Explore All Column Layouts. This allows some, or all, form elements to take up less than 100% of the space given.

Inline

Inline form elements can be used when you want the label to "float" to the left of the input box, select, etc.

Functionally, there is no advantage to this; it's for visual appeal.

NOTE: Once the screen size shrinks to 25em, inline elements become block elements and the input box wrap beneath the labels, just as they do in a Standard Block style form.

Forms Wrapped in Column/Display

The Standard Block form below is wrapped in a column-half, then the inner class, then box/pad/grey.

The Inline form below is wrapped in a column-half, then the inner class, then box/pad/info.

checkmarkI understand this topic! Go Home