Chapter 5: Make Forms Great with CSS Grid

by Craig Buckler

Form design is a fundamental yet frustrating part of web design and development. Ask anyone who's ever tried to style a <select> box or align a label consistently in all browsers.

In 2016, I wrote Make Forms Fun with Flexbox which identified how several form difficulties could be solved with Flexbox. A key benefit was HTML source order consistency with the <label> always following its associated field tag in a container:

<div> <input id="name" name="name" type="text" /> <label for="name">name</label> </div> <div> <select id="experience" name="experience"><!-- options --></select> <label for="experience">experience</label> </div> <div> <input id="html" name="html" type="checkbox" /> <label ...

Get CSS Grid Layout: 5 Practical Projects now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.