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 ...