Join James Williamson for an in-depth discussion in this video Creating responsive checkbox groups, part of Building Responsive Forms with Flexbox.
- View Offline
- One of the trickier aspects of creating responsive forms…is dealing with groups of checkboxes and radio buttons.…In this exercise, we're going to use Flexbox…to create responsive columns of checkboxes…and then control their alignment.…To do that I'll be working with the forms.htm file…found in the 02-05 directory.…And before we can write our selectors,…let's go down and take a look at the structure…of these checkbox groups that we want to control.…So if I scroll down a little bit in this section…for sessions, about line 192 or so,…we have a section of skills.…
So we have an unordered list with a class of form-skills.…Inside that we have individual list items…that have a checkbox along with a label…for that checkbox.…So you can see each one of these has a different skill,…but it's a repeating structure.…So we have a list item that contains both the input…of checkbox and the label.…Notice the input is first, label is second.…So our first one is form-skills.…We have quite a few of these.…If I look at this in a browser,…
In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.