Learn how to create a simple small-screen layout for a responsive form.
- [Presenter] Now we're going to look…at how to lay out a simple form,…in this case, an appointment request form.…Here is what it looks like without any styles added.…We just have fields at the top and below that the address…is in a field set to kind of bring everything together,…and then preferred time within a field set.…When you're deciding what order to put the fields in…on a form remember that you can rearrange everything…on the page using CSS, but people who are using…screen readers will get the order…that everything was coded in HTML.…
So, think of how the form makes sense,…the best order for all the fields, do that in the HTML,…and then if you want to move things visually…on the page, do that using CSS.…The code we have for this exercise,…it starts out on line 13 with our heading,…below that we have several fields.…Each field is within a div,…which will make it easier to style them.…Scrolling down, we have the address in a field set…and the check boxes within another field set at the bottom.…
So when we're thinking about layout,…
- How users interact with forms
- Designing forms that are easy to use
- Following data privacy laws when collecting information
- Choosing which HTML input types to use
- Adding buttons
- Adding interactive validation
- Styling form fields with CSS
- Using positioning and flexbox to create responsive form layouts
Skill Level Beginner
1. Designing a Form Experience
2. Creating Forms with HTML
3. Making Forms Interactive
4. Styling Form Fields with CSS
5. Form Layout with CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.