Building Great Forms with HTML and CSS

Course details

While creating forms with HTML and CSS is a core web development skill, making great forms requires a lot more than the basics. Emily Kay brings her years of experience working with customers and developers to explain how to create forms people will find useful and even enjoyable. Learn how to set up a basic form and add buttons, toggle switches, date pickers, and more. Become well-versed in form-specific CSS techniques and tricks, and add JavaScript to catapult your forms to the next level. Emily takes you through four start-to-finish projects featuring the most popular types of web forms: login, booking, payment, and search forms. Plus, learn how to incorporate accessibility and form validation and build a post-submission success page to let users know their entries have been accepted.
Note: Usability and layout considerations differ based on device and platform. All of the forms built in this course work equally well on mobile devices and desktops as well as all of the modern browsers.

Topics include:
Setting up a basic HTML form
GET and POST methods
Working with labels
Using the new input types and attributes
Creating buttons
Styling labels and inputs with CSS
Floating labels
Creating a login or registration form
Creating a booking form
Creating a payment form
Creating search forms
Creating cross-device and platform-friendly forms
Making sure forms are accessible
Validating form data
Creating a success page for form submission

Concepts

Welcome

01 - Making your forms great
02 - What you should know
03 - Using the exercise files

1. General Form Setup

04 - How HTML forms work
05 - Basic setup for a form
06 - GET and POST methods

2. Form Elements

07 - Fieldsets and legends
08 - Working with labels
09 - New HTML5 form tags
10 - New input types
11 - New input attributes
12 - More input attributes
13 - Form validate options
14 - Input restrictions - Pattern
15 - Buttons
16 - Autocomplete

3. Form-Specific CSS

17 - Form layout tips
18 - Styling labels and inputs
19 - Focus styles
20 - Using pseudo-classes to be more specific
21 - Custom checkboxes
22 - Radio buttons
23 - Toggle switch
24 - Styling select, part 1
25 - Styling select, part 2
26 - Float labels

4. Login and Registration Form

27 - The registration process
28 - Login form flow chart and landing page
29 - Building the login page
30 - Password visibility
31 - Build and style a sign-up form
32 - Using tooltips for more information
33 - Password strength
34 - Login and registration form summary

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

35 - What is a booking form
36 - Creating custom radio buttons
37 - Making selections
38 - Dates and date pickers
39 - Using the stepper component
40 - Booking form fix for mobile
41 - Booking form summary

6. Payment Forms

42 - Organizing a payment form
43 - Flow and order
44 - Order summary overview
45 - Personal details summary
46 - Payment stepper
47 - Input mask
48 - Auto-populating city and state
49 - Shipping
50 - Handling payment, part 1
51 - Handling payment, part 2
52 - Handling payment, part 3
53 - Review and confirmation pages

7. Search Form and Filter Forms

54 - Search forms - What are they
55 - Tips for adding search
56 - Add and style a search component
57 - Build a growing search bar
58 - Touchscreen fix
59 - Mobile fix
60 - Displaying search results

8. Accessibility

61 - Form accessibility
62 - Labeling and describing with ARIA
63 - Using ARIA

9. Submission

64 - Client-side form validation
65 - CSS validation
66 - JavaScript validation
67 - Good error messages
68 - Success page

Conclusion

69 - Next steps