logo

Clever Web Forms

When Simon Willison writes an article called Simple Tricks for More Usable Forms you know it's going to be worth the read.

I have to pick fault with his first suggestion though - that you should place cursor focus on a certain field when the page loads. The idea is simple. You have an onload event in the page's body element:

<body onload="document.getElementById('myfield').focus()">

xdrive.com login screenWhen used properly, like Simon's example of Google, it's a nice little trick. However, it I find it gets used in the wrong places all too often. Mainly login screens. Take X Drive for example. When the page loads it places cursor focus on the username box. The problem is that the onload event doesn't trigger until the whole page has loaded, graphics and all. What I normally find happens is that the page displays and I start typing my username and password in to the fields, while the browser continues fetching the images. By the time you're about half way through the password the onload event triggers and you're transported to the username field. If you're like me, you're probably looking at the keyboard as this happens and so you continue typing your password into the username box, for the whole world to see. At the very least it's an annoyance. At its worst it's a security issue.

You can see in the screen-grab above that I've got as far as "pas" in my (fictional) password, "password", when the cursor moved and I carried on typing.

What I'm trying to say is use tricks like this carefully and think about the consequences. Too much JavaScript cleverness can be a very bad thing!

Comments

  1. I totally agree. It is a pain to look back up at a screen and see half your password in plain view.

    One trick I've used in the past is to use an if statement in the onload event.

    If(document.getElementById('myfield').value==""){document.getElementById('myfield').focus()}

    So if the field is blank then move the cursor there, if it's not blank then assume that the user has already started typing and don't do anything.

    • avatar
    • Jake
    • Fri 23 Jan 2004 08:17

    Nice solution Declan. I'd been trying to think of a workaround but this one's so pure and simple that I missed it ;o)

  2. Sometimes the simple ideas are the best...

    • avatar
    • Jake
    • Fri 23 Jan 2004 08:24

    ... and the hardest to find ...

    • avatar
    • Gareth Hay
    • Fri 23 Jan 2004 09:09

    Another workaround might be "<SCRIPT>document.getElementById('myfield').focus()</SCRIPT>" immediately after the field, then it focuses right after the field has loaded - so the field exists, and you can begin typing.

  3. Hi Jake,

    I have read you blog for years ( about 2-3 now). This is the first time I comment though. Thanks for the knowledge and entertainment!

    I have used a different technique that keeps everything hidden from the user until the page loads. I have only used it in a clients Intranet application.

    <script for=window event=onload language="javascript">

    init();

    </script>

    init() is a function that unhides any div or span tags.

    See you at Lotusphere!

    Cheers,

    Angel

    Ft. Lauderdale, FL, USA

  4. Username = swordjake

    SWORD!!!! Oh my God, so you feel like Highlander? :oP

    .::AleX::.

    Dominocode.Net

  5. Jake:

    I use the same trick as Gareth. As soon as I load the field, I place some JS coding to place the focus in that field.

    • avatar
    • Gareth Hay
    • Tue 27 Jan 2004 08:45

    I've also used a what Angel suggested to display splash screens.

    Create one large div with the content aligned in the centre horiz and vert.

    Then hide it onload.

    Also a good tip for IE, if you ever want to stop a user from doing anything, create a layer which dynamically sizes to the whole visible area, and set it's transparency to 0%, they can see everything but can't click it. We use it to trap clicks outside a popup menu area. It's only IE though - so know your audience

    • avatar
    • Indy
    • Wed 28 Jan 2004 14:06

    How about an alert when a user has his Caps Lock turned on? Saved me lots of calls of users who "forgot" their password :).

  6. Here is another example, its of what I use:

    <body onload=document.forms[0].FIELD_NAME_HERE.focus()>

  7. Indy, go to this page, its got example code for what you are looking for.

    {Link}

    • avatar
    • Scott
    • Tue 18 May 2004 08:06

    Sorry Jake - just testing to see if you validate/check postings before displaying them. I can't decide what to do on a site I'm designing.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 23 Jan 2004

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content