Rules

Secret ingredients to quality software

Edit
Info

Do you know how to arrange forms?

Created on 08 Sep 2014 | Last updated by Tiago Araujo on 19 Mar 2017 11:22 PM (about 4 years ago)

There are two ways of arranging labels and inputs on an html form, but each should be used in a specific scenario.

When arranging labels and inputs on your html form, align labels next to the inputs on medium and large displays.

forms desktop
Figure: Labels besides their respective inputs on regular displays

When arranging labels and inputs on your html form, align labels above inputs on small and extra-small displays.

forms mobile
Figure: Labels above their respective input on smaller displays

Bootstrap makes this easy. Read Do you use the css class "form horizontal" to arrange your fields and labels? to know more.

Drew RobsonDrew Robson
Tiago AraujoTiago Araujo

We open source. This page is on GitHub