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.
Commodore 64 Nostalgia
Posted by Double Compile on Wednesday, December 12. 2007 in Hardware
The Commodore 64 turned 25 this week!
I was 10 when my brother Ryan gave me his (this would be winter '91-'92). His C64 had a Warp Speed cartridge and a 1200 baud modem! It was hooked up to my black-and-white GoldStar 13" TV (the same one I used to play his Atari 2600).
At 10, I was using the C64 to (among other things)
- visit my first BBS
- program stupid choose-your-own-adventure games in BASIC
- play great games like California Games and Operation: Wolf
- do reports for school using Paperclip III.
You should have seen my face the first time I wrote a BASIC script that wrote to the dot-matrix printer.
I found out that a Sega Genesis controller worked great as a joystick for the C64.
The next computer I got was an IBM-compatible 486 DX2/66 that ran Windows 3.1. Quite an upgrade, but I still look back with a smile on my Commodore 64 days.
LOAD "nostalgia",8,1
RUN
Dependency Injection in Xyster
Posted by Double Compile on Monday, December 10. 2007 in Xyster
Inversion of Control is one of those design patterns that once you "get it", you'll start seeing that it can be applied basically all over the place. It's the lesson of "tell; don't ask".
I've spent a good deal of time this weekend with the Xyster incubator; creating a Dependency Injection package called Xyster_Container based almost entirely on PicoContainer. The good: PHP method signatures are much more simple than Java's; only one constructor per class. The bad: PHP scalar method parameters are not typed, so you cannot use ReflectionParameter::getClass() on them. This first release won't support the LifeCycle capabilities or annotations, but at least annotations support is planned (remember, it's still in the incubator).
This Dependency Injection package will be used to replace/redo the Xyster_Application package. You'll read in Fowler's article (linked above) about the Service Locater concept, which was what Xyster_Application was intended to be. While the Locater might still be done, I think it's more important that application services can be injected into the classes that use them.
For now, read up on Dependency Injection. You'll wonder where it's been all your life.
Page 1 of 1, totaling 3 entries
Creative Commons
Syndicate This Blog
