Autofocus invites users into an online form. Google and Bing use it, and so should you. David Karlins explains how to set up an autofocus form field with HTML5.
- [Narrator] A focused input is one that is alive,…so to speak, ready for input,…with the insertion point right inside the field,…and here at Bing, the search engine,…the search field is all ready to go.…Same thing if we go to Google,…notice that the insertion point is already blinking…in the search field.…Now you may be thinking doesn't that happen automatically?…No, it doesn't,…or maybe you're thinking well there's only one field there.…
Obviously the insertion point should be inside of it,…but that doesn't happen automatically either.…Let me show you a negative example.…Here there's only one field,…it's asking for an email address,…and that email address is not yet focused…until I click inside of it.…That's forcing users to do one extra and unnecessary click,…and, even if you have a form with multiple fields,…it's often good to have one that, by default, is focused.…
Let's see how our form is doing.…Well, right now, there is no auto-focused input.…Let's fix that, so we'll go back into Dreamweaver.…Let's make the email address focused.…
Author
David Karlins
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
-
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
-
Next steps2m 11s
-
Creating inline forms3m 9s
-
Adding labels and badges1m 12s
-
Adding sets of radio buttons3m 10s
-
Conclusion
-
Next steps2m 11s
-
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: Making entry intuitive with autofocus