Join James Williamson for an in-depth discussion in this video Basic form structure, part of Building Responsive Forms with Flexbox.
- View Offline
- 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 says Search.…Now one of the reasons why I wanted to…
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.