How does a form go from bad to okay to good? David Karlins walks you through what makes a form bad for a user, okay for a user, and great and helpful for a user.
- [Instructor] Let's take a look at a bad, an okay,…and a good example of a form input…to highlight the kind of problems…that we are going to learn to solve in this course.…Here's our bad form; and if I go to enter my date of birth,…even on a laptop, I have to find the number keypad…and tab from one field to the next.…And then if I make some typos along the way, then…that's a hassle.…
Let's look at a form that makes it easier to enter a date.…Now this is an okay form; it's an improvement.…This form does have drop downs, so it's easier…to choose a date; and that's a little less hassle, nice.…But the technique that we will cover here in this course…is one that displays a calendar…so that when a user goes to enter a date,…they can just scroll through a calendar,…one-click shopping; and you've selected a date.…
Now this form isn't styled; I just set this up quickly…to show you the date input technique…that we are going to be learning.…And next time you're asked to enter a date…in an online form, think about how accessible…
Author
Released
11/8/2017- Modern form inputs
- Dreamweaver form design features
- Styling forms with CSS
- Form input types
- Setting required inputs and constraints
- Styling inputs with CSS
- Integrating Bootstrap tools
Skill Level Advanced
Duration
Views
Related Courses
-
Considering a CMS for Web Design
with Brian Wood54m 59s Beginner -
Design Aesthetics for the Web
with Sue Jenkins2h 45m Beginner -
Dreamweaver CC Essential Training
with David Powers8h 11m Beginner
-
Introduction
-
Welcome48s
-
Using the exercise files1m 52s
-
-
1. Examples of Modern Inputs
-
2. Building Forms with Dreamweaver
-
Styling forms with CSS2m 9s
-
3. Form Input Types
-
The color input2m 33s
-
The date input2m 27s
-
The email input1m 41s
-
The number input1m 42s
-
The range input3m 19s
-
The search input1m 56s
-
The telephone input1m 6s
-
The time input2m 3s
-
The URL input3m 56s
-
4. Using HTML5 Inputs for Validation
-
Setting a required input3m 13s
-
Setting a constrained input2m 56s
-
-
5. Inviting and Accessible Inputs
-
Effective use of labels1m 43s
-
6. Styling Input
-
Styling inputs with CSS1m 18s
-
CSS for forms1m 33s
-
CSS for styling inputs1m 14s
-
CSS for styling text areas1m 34s
-
Styling with fieldsets2m 39s
-
-
7. Bootstrap Form Tools
-
Creating inline forms3m 9s
-
Adding labels and badges1m 12s
-
Adding sets of radio buttons3m 10s
-
Conclusion
-
Next steps2m 11s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Form input: Bad, good, and okay