From the course: Building Responsive Forms with Flexbox
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Sectioning form content - CSS Flexbox Tutorial
From the course: Building Responsive Forms with Flexbox
Sectioning form content
- Our form needs a little bit more structure added to it before we can start writing our responsive styles. Our currently formed content is organized only through the use of these headings. So, I scroll down into my form, for example, you can see we have that h3 right here indicating one section. Inside those h3 headers we've got occasionally a few h4s which indicate organized content within a section. And then we have another h3. The one kind of exception to that rule is down here at the bottom where we have an h4 that says, All finished? And it has a paragraph and a submit button inside of it. That's going to be a section as well. So, we really have three sections, the submit button, the Sessions section right here, and then at the top this Personal Info section here. Now normally we use a fieldset tag for the purpose of sectioning form content, but Flexbox is not without its bugs. Now currently there are several browsers that don't allow fields element to serve as flex containers…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Longer form structure4m 13s
-
(Locked)
Sectioning form content5m 45s
-
(Locked)
Refining basic styling7m 11s
-
Creating responsive inputs and labels7m 41s
-
(Locked)
Creating responsive checkbox groups7m 47s
-
(Locked)
Making form sections responsive5m 31s
-
(Locked)
Controlling section spacing4m 34s
-
(Locked)
Adding media queries2m 39s
-
(Locked)
-