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

Basic form structure - CSS Flexbox Tutorial

From the course: Building Responsive Forms with Flexbox

Start my 1-month free trial

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…

Contents