HTML & CSS: Creating Forms
2h 30mBeginner2017-08-17
Authors
Clarissa Peterson
Developer, Author, and Speaker, specializing in UX and design strategy
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 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.
Learning objectives
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
Learning objectives
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
Skills covered
HTMLWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
Introduction
- Welcome
- What you should know
- Using the exercise files
Designing a Form Experience
- Ask the right questions
- Explain what you want
- Create a good flow
- Data privacy
Creating Forms with HTML
- 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
Making Forms Interactive
- Form submission and security
- Form validation
Styling Form Fields with CSS
- 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
Form Layout with CSS
- Small-screen layout for forms
- Wide-screen layout for forms
- Form labels
- Placeholder attribute
Conclusion
- Next steps