HTML and CSS: Creating Forms

Course details

Forms are a major component of modern websites, used to collect user data, conduct polls, and more. While you can use a form builder, they're relatively simple to build from scratch with basic web technologies: HTML and CSS. In this course, Clarissa Peterson looks at the fundamentals of creating forms with HTML and styling them with CSS. Learn best practices for creating and styling web forms that are easy to complete and accessible to all users and devices. The course covers the proper use of form fields, how to make forms interactive, and how to style the visual appearance and layout of a form. Additionally, Clarissa addresses data privacy and how to keep users' data secure.

Learning objectives
Explain how to make a form usable and accessible using basic design concepts.
Build a HTML form that accepts various types of data input.
Style the visual appearance and layout of a form using CSS.
Recognize the importance of data privacy and how to keep users' data safe.

Concepts

0. Introduction

01 - Designing user-friendly forms
02 - What you should know
03 - Accessibility

1. Designing a Form Experience

04 - Don't ask for too much
05 - Explain what you want
06 - Make it make sense
07 - Data privacy

2. Creating Forms with HTML

08 - Basic form structure
09 - Name, id, and label
10 - Email and URL input types
11 - Number and tel input types
12 - Date and time input types
13 - Radio buttons and checkboxes
14 - Select element
15 - Textarea element
16 - Other input types
17 - Buttons
18 - Placeholder attribute
19 - Other form attributes

3. Making Forms Interactive

20 - Form submission and security
21 - Validation
22 - Pattern attribute

4. Styling Form Fields with CSS

23 - Basic form styles - Color and size
24 - Box sizing for forms
25 - Styling text inputs
26 - Styling radio buttons and checkboxes with images
27 - Styling radio buttons and checkboxes as buttons
28 - Styling pseudo-classes

5. Form Layout with CSS

29 - Small-screen layout for forms
30 - Wider screen layout for forms
31 - Form labels

Conclusion

32 - Next steps