FormsLesson 125Free preview

Stacked Form

This lesson is part of How To · All levels

Summary

A stacked form is a form that places a label on top of each input and arranges all fields vertically. The layout is easy to scan, small screen friendly, and gives enough space for long labels. Each field is usually made of container area.

Key points

The label is displayed as a block above the input.
The input is made width: 100% with box-sizing: border-box.
The vertical distance between fields keeps the form easy to read.
Stacked forms are ideal for both narrow screens and long forms.
Use the fieldset to group different parts.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.