Highlighting the user's position in the form using qForms...

Posted by Dan on Jul 2, 2005 @ 6:27 PM

I was doing some surfing today and came across a cool effect on the w3compliler Contact Us form. When you're focused on a form field, the field's label style will change to give you a better visual representation of where you're at on the form. I thought to myself, that's pretty cool--I bet I can do that with just a coupe of lines of code in qForms v2.

In the w3compiler Contact Form, they're using tables to layout the form, but I wanted to do something using strictly CSS and HTML. So I decided to use the actual <label> tag as the field label—this allows you to click on the label to set the focus to the form field. Check out my version:

qForms v2 Demo - Field Focus DHTML

Categories: JavaScript, qForms, HTML/ColdFusion

4 Comments

  • Kola Oyedeji's Gravatar
    Kola Oyedeji
    Thats really cool, a small thing but a welcome usability bonus all the same
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    In my opinion, that's kind of the point of an API--to help automate and ease implementation of all those little things that can be time consuming to code.
  • Donald's Gravatar
    Donald
    Sees to make the system lag before it highlights why not use just plain old javascript to change the className of an given getElementById() works for me in plenty of forms and doesnt make the system lag.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    Donald,

    I'm not seeing any system lag. What type of PC do you have? (NOTE: I have seen lags in Firefox when loading the qForms library from the local drive--but never via HTTP.)

    Also, essentially all the that example does is what you suggest--it just changes the className for the label. The rest of the stuff is just tying it in to the qForms API to automate your code implementation.

    -Dan

Comments for this entry have been disabled.