HTML & CSS: Creating Forms

Get a comprehensive guide to creating usable, accessible, and responsive forms with HTML and CSS.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. Designing a Form Experience

• Ask the right questions
• Explain what you want
• Create a good flow
• Data privacy

2. 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

3. Making Forms Interactive

• Form submission and security
• Form validation

4. 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

5. Form Layout with CSS

• Small-screen layout for forms
• Wide-screen layout for forms
• Form labels
• Placeholder attribute

Conclusion

• Next steps