HTML & CSS: Creating Forms
Overview
Get a comprehensive guide to creating usable, accessible, and responsive forms with HTML and CSS.
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 demonstrates best practices for creating and styling web forms that are easy to complete and accessible to all users and devices. Learn proper use of form fields, including the new HTML5 input types, and discover how to add interactivity such as form validation, style forms with CSS, create responsive layouts, add interactivity such as form validation, and design forms for usability and accessibility.
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 demonstrates best practices for creating and styling web forms that are easy to complete and accessible to all users and devices. Learn proper use of form fields, including the new HTML5 input types, and discover how to add interactivity such as form validation, style forms with CSS, create responsive layouts, add interactivity such as form validation, and design forms for usability and accessibility.
Syllabus
Introduction
- Welcome
- What you should know
- Using the exercise files
- Ask the right questions
- Explain what you want
- Create a good flow
- Data privacy
- Basic form structure
- Text, email, and URL input types
- Number input type
- Date and time input types
- Radio buttons
- Select
- Textarea and additional input types
- Submit and other types of buttons
- Attributes used in forms
- Form submission and security
- Form validation
- Basic form styles: Text color and size
- Box sizing for forms
- Styling text inputs
- Styling radio buttons and check boxes with images
- Styling radio buttons and check boxes as buttons
- Styling select
- Styling buttons
- Styling pseudo-classes
- Small-screen layout for forms
- Wide-screen layout for forms
- Form labels
- Placeholder attribute
- Next steps
Taught by
Clarissa Peterson
Never Stop Learning!
