Learn about the pseudo-classes that can be used to add styles to forms.
- [Instructor] A pseudo-class is a keyword…that specifies a state of an element.…You can use it to apply styles…to an element with that state.…There are several pseudo-classes…you can use when styling forms.…The first are focus and active.…Focus is triggered when a user clicks on,…tabs, or taps into a field, and active,…when a user activates a field,…such as by clicking on a button.…I'm going to look at applying some…different pseudo-classes on this page.…So first we're going to try out focus and active.…
We'll go to our CSS, and after the default styles,…we're going to do input:focus,…so the style'll apply to any input that's in focus.…And give it a background color.…And then do an input:active,…which will apply to any field that is currently active.…And give that a background color, and I'm on line 13.…Save, go back to the browser,…and now when I tab through the fields,…you can see each time I tab to a new field,…it gets the green background when it's in focus.…
As I click in a field or as I click on a button,…
- 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
Skill Level Beginner
Building Web Applications with Ajaxwith Sasha Vodnik1h 31m Intermediate
1. Designing a Form Experience
2. Creating Forms with HTML
3. Making Forms Interactive
4. Styling Form Fields with CSS
5. Form Layout with CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press 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.