CSS best practices and techniques for styling and structuring HTML and HTML5 forms.
- [Voiceover] Hello, I'm Ray Villalobos and welcome to CSS Styling Forms. In this course, I'm going to show you how to use CSS to style forms and form elements. I'll start by showing you basic form inputs and how to code forms to improve usability. Then I'll show you how to create special styles for individual form elements like custom check box and radio buttons. We'll see how to layout forms by grouping them and positioning them with pixel level precision. Finally, I'll show you how to combine j query with CSS to validate and style feedback to users on required fields.
So let's get started with CSS Styling Forms.
Author
Ray Villalobos
Released
1/20/2012- Creating forms with the <form> element
- Adding labels and basic usability features
- Navigating elements between browsers
- Styling the background
- Creating input and button fields
- Working with select fields
- Floating and positioning grouped elements
- Using HTML5 input types
- Resizing elements and adjusting the view for mobile devices
- Adding jQuery navigation
- Designing validation feedback
Skill Level Beginner
Duration
Views
-
Introduction
-
Welcome42s
-
-
1. Understanding Form Structure
-
2. Styling Basic Elements
-
Using custom fonts9m 32s
-
Working with text fields12m 21s
-
Designing labels9m 53s
-
Working with select fields5m 50s
-
3. Laying out Forms
-
Floating fields7m 19s
-
Organizing forms with lists10m 3s
-
Grouping elements12m 26s
-
Floating groups5m 36s
-
Positioning groups13m 19s
-
-
4. Using HTML5 Additions
-
Exploring new input types4m 32s
-
-
5. Styling for Handhelds
-
Creating a responsive form13m 16s
-
Adjusting the viewport4m 36s
-
Using media queries7m 13s
-
Resizing elements4m 30s
-
-
6. Advanced Design Patterns
-
Styling for progressions10m 20s
-
Visualizing navigation11m 3s
-
Adding jQuery navigation13m 20s
-
-
Additional Resources
-
Next steps1m 12s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Welcome