Learn how to create a simple wide-screen layout for a responsive form.
- [Narrator] We already created a layout for this form…that works well for the narrowest screen widths.…Now we're going to use media queries…to change the layout for wider screens.…Here's what our layout looks like at 400 pixels wide.…If I make the browser window wider,…I can see that the input fields get very long.…They don't need to be that long…so at some point I can add a media query…and change the layout so that the labels are to the left…of the input fields instead of above them.…To determine where I should make that media query go,…I figure out where there's a good point…at which it looks like there's enough space to do that.…
So I'm going to make the browser window wider…until I feel like maybe at about this point…there's enough space to add the…input fields next to the labels instead of below them.…To figure out what width I need…to put my media query at, the best way…to do that is to have a tool like…MQtest.io open in a separate tab of the same window.…This will tell me exactly how wide…the window is at this point in time.…
- 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.