Building Great Forms

Learn how to create useful and user-friendly web forms with HTML, CSS, and JavaScript. Discover how to create login, booking, payment, search, and other custom forms.

Welcome

• Making your forms great
• What you should know
• Using the exercise files

1. General Form Setup

• How HTML forms work
• Basic setup for a form
• GET and POST methods

2. Form Elements

• Fieldsets and legends
• Working with labels
• New HTML5 form tags
• New input types
• New input attributes
• More input attributes
• Form validate options
• Input restrictions: Pattern
• Buttons
• Autocomplete

3. Form-Specific CSS

• Form layout tips
• Styling labels and inputs
• Focus styles
• Using pseudo-classes to be more specific
• Custom checkboxes
• Radio buttons
• Toggle switch
• Styling select, part 1
• Styling select, part 2
• Float labels

4. Login and Registration Form

• The registration process
• Login form flow chart and landing page
• Building the login page
• Password visibility
• Build and style a sign-up form
• Using tooltips for more information
• Password strength
• Login and registration form summary

5. A Booking Form: Flight, Hotel, Movie, and More

• What is a booking form?
• Creating custom radio buttons
• Making selections
• Dates and date pickers
• Using the stepper component
• Booking form fix for mobile
• Booking form summary

6. Payment Forms

• Organizing a payment form
• Flow and order
• Order summary overview
• Personal details summary
• Payment stepper
• Input mask
• Auto-populating city and state
• Shipping
• Handling payment, part 1
• Handling payment, part 2
• Handling payment, part 3
• Review and confirmation pages

7. Search Form and Filter Forms

• Search forms: What are they?
• Tips for adding search
• Add and style a search component
• Build a growing search bar
• Touchscreen fix
• Mobile fix
• Displaying search results

8. Accessibility

• Form accessibility
• Labeling and describing with ARIA
• Using ARIA

9. Submission

• Client-side form validation
• CSS validation
• JavaScript validation
• Good error messages
• Success page

Conclusion

• Next steps