FormsLesson 126Free preview

Responsive Form

This lesson is part of How To · All levels

Summary

Responsive forms are forms that remain convenient to use on large or small screens. The way is to use flexible width, box-sizing, media query, and adequate font size. Forms also need to be tested at several screen widths to ensure no field is cut.

Key points

A meta viewport is required to scale the page correctly on a mobile device.
Width: 100% with max-width making the form flexible but not too wide.
Media queries can change the layout of a column into a single column.
A font size of at least 16px on the input helps prevent automatic zoom on iOS.
Test the forms on different screen widths and make sure the touch area is large enough.

Full lesson

Code examples and quizzes

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