From the course: Building Great Forms with HTML and CSS
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Styling labels and inputs
From the course: Building Great Forms with HTML and CSS
Styling labels and inputs
- [Instructor] You don't need labels for your form to work, but it can be considered an accessibility crime not to use them. Labels are what signify what the input box is for and it associates them together. The use of the label tag is not only semantically correct, but it gives you the opportunity to style them uniquely with CSS. Labels are not help texts. Use succinct, short, descriptive labels, just a word or two so that users can quickly scan your form. Here's what we're going to be building right now. This is an unstyled form. Everything that you see here is being controlled by the browser. If I expand the browser, you can see that the form fields are going to change the position, and that's because the items currently are inline items. We'll go ahead and create some custom CSS so we can transform this plain form into something that's going to be visually much more appealing and more user-friendly. Let me…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
Form layout tips7m 51s
-
(Locked)
Styling labels and inputs8m 19s
-
(Locked)
Focus styles4m 23s
-
(Locked)
Using pseudo-classes to be more specific7m 46s
-
(Locked)
Custom checkboxes6m 51s
-
(Locked)
Radio buttons6m 16s
-
(Locked)
Toggle switch8m 20s
-
(Locked)
Styling select, part 17m 29s
-
(Locked)
Styling select, part 29m 9s
-
(Locked)
Float labels6m 57s
-
(Locked)
-
-
-
-
-
-
-