Do you know how to arrange forms?

Updated by Toby Churches [SSW] 7 months ago. See history

123

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.

Image

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.

Image

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.

acknowledgements
related rules