Focus Your Login Forms On Me!
Posted by Andy Stratton on Thursday, December 13. 2007
All the new blog-tastic, niche, social media, networking, web 2.0, buzz-word worthy abstract made-up name websites have one thing in common: Login Forms. Assuming I'm remotely similar to other productivity-minded developers, most of you are like me: you know your OS, your keyboard, and most keyboard shortcuts and use your mouse as a last resort.
Stop forcing me to use my mouse when I don't have to!
Most login forms require a minimum an email address (or username) and a password to login. What many of the fore mentioned sites, as well as many other web applications, like online banking, and even State Government/Organization websites lack, are a few simple lines of Javascript to enhance the user experience during a login failure and save neurotic people like me from being forced to use the mouse in lieu of the keyboard.
We'd like the input field for the email address/username to have the cursor's focus on page load, since we're ready to login. Ideally, if we've tried and failed to login, set the cursor the most logical field causing the failure:
- Empty email/username field → focus on email/username field
- No password entered → focus on password field
- Incorrect password entered → focus on password field
Let's say this is our markup for a login form:
<form id="login" method="post" action="/login">
<p><label for="email">Email: <input type="text" name="email" id="email" /></label></p>
<p><label for="passwd">Password: <input type="password" name="passwd" id="passwd" /></label></p>
<p><input type="submit" value="Login" /></p>
</form>
If we add a few lines of simple Javascript below it:
<script type="text/javascript">
if ( document.getElementById("email").value == '' ) {
document.getElementById("email").focus();
} else {
document.getElementById("passwd").focus();
}
</script>
You get a very convenient and usable, yet functional without Javascript, login form that sets your cursor at a logical position within +/- one tab keypress of where you need to be. Might sound picky, but sure does stop from slowing me down, which is a big point in getting keeping my attention.
Stop breaking the enter key for submitting!
We all love to add nifty client-side validation. It's fun to code some front-end applications in Javascript, and it helps as a initial scrub of data – just make sure that your hax0ring isn't destroying the expected behavior of your forms.
Here's more some guidelines to keep in mind:
- Never break the enter key as a method of submitting your forms.
If you're handling the event of a user pressing a key, and failing on invalid characters, be sure to throw a handler in there for character code 13 (the enter key). - Always have a submit button.
Feel free to tag it with an id and hide it with CSS/Javascript, but make it easy for people to use if they don't have CSS, Javascript, or images. Sometimes form images act funny in browsers. - Use labels on all form input elements!
It's extremely frustrating to try to select a radio button or a checkbox and having to hit the 10px by 10px circle or box. Make it easier for your users and more accessible for those who need it to be. As a best practice, use them on anything taking in data in your form. - Get on the Bus with Fieldsets and Legends
These will help you organize your data fields logically as well as increase your markup's semantic-ness. Plus, since they aren't used often, they can tend to look pretty cool.
Happy Programm0ring.
Creative Commons
Syndicate This Blog
