Author
Released
8/17/2017- 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
Duration
Views
- [Instructor] Hiya, I'm Clarissa Peterson and welcome to HTML and CSS Creating Forms. In this course we'll learn how to build and style basic forms. We'll also be talking about how to give your forms better usability and accessibility. We'll start out learning how to design a form experience that users won't hate, then we'll go into the HTML that is used to create forms, including various types of inputs, as well as attributes commonly used on forms. Then we'll look at how to make forms interactive, starting with form submission, as well as how to validate forms to make sure you're collecting the right data.
After that, we'll go into using CSS to add styles and layout to forms. Now let's get started with HTML and CSS Creating Forms.
-
Introduction
-
Welcome41s
-
What you should know1m 51s
-
-
1. Designing a Form Experience
-
Ask the right questions6m 10s
-
Explain what you want2m 56s
-
Create a good flow5m 28s
-
Data privacy2m 37s
-
-
2. Creating Forms with HTML
-
Basic form structure7m 44s
-
Number input type6m 3s
-
Date and time input types6m 40s
-
Radio buttons3m 47s
-
Select5m 29s
-
Attributes used in forms6m 51s
-
-
3. Making Forms Interactive
-
Form submission and security4m 27s
-
Form validation7m 4s
-
-
4. Styling Form Fields with CSS
-
Box sizing for forms2m 29s
-
Styling text inputs4m 39s
-
Styling select5m 25s
-
Styling buttons10m 10s
-
Styling pseudo-classes6m 37s
-
5. Form Layout with CSS
-
Wide-screen layout for forms3m 59s
-
Form labels3m 39s
-
Placeholder attribute3m 11s
-
Conclusion
-
Next steps18s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Welcome