Learn the various ways that labels can be laid out on a form.
- [Instructor] Labels on each of your form fields…are key to making sure the user fills out the form properly.…The way you lay out the labels…on the page can make a big difference.…For example, the label placement…will often depend on the width of the screen.…At the narrow screen width you see here,…on a responsive website, it makes sense…to have the labels above each form field,…so that the input elements can be as wide as possible.…On a wider screen you have more options.…Many forms have the labels on the left, like this,…including the check-box labels at the bottom.…
For long-form, this is usually the best option,…because users can easily skim the labels…on the left side of the screen.…If there is a lot of different inputs to fill out,…the user likes to skim through them ahead of time…to make sure that they have all the information they need.…The layout starts to have problems…when the labels vary in length.…Here, we have some very long labels,…like Best Number to Reach you,…and short labels, like yes and no.…
- 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.