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.
Basic form structure - CSS Flexbox Tutorial
From the course: Building Responsive Forms with Flexbox
Basic form structure
- Before we start styling our form, let's take a moment to examine its basic structure and understand the semantics of our search form. So to do that, I've opened up the search.htm file, which could be found in the 01-03 folder in your exercise files, of course in chapter one. Now there's really not a lot to this form. If I scroll down through the code, you can see at the bottom we have our form right down here, about line 19, and there's not a lot going on here. It's just a form. It's got a class of search form applied to it. I don't have any methods or actions applied to the form, but for the class, that allows me to identify the form type and gives me a little bit of a styling hook. Inside the form itself, we have two elements. We have the input element. Its type is a search element. We've got some placeholder text inside of it. A class applied to it as well, and then we have a button. This is submit button, which has a class applied to it, and it just has some default text that…
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.