Webmaster Forum

Go Back   Webmaster Forum > Web Development > Web Design Lobby > Web Usability

Web Usability Discuss and review websites for better usability.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 08-23-2009, 05:59 AM
Junior Member
 
Join Date: 08-23-09
Posts: 2
iTrader: 0 / 0%
How do *you* indicate required fields in a web form?

Hi all,

I'm sure that most web developers will at some point have created a form where some of the fields are required, or must validate to a regular expression (e.g. email or date field). These fields must be indicated to the user as being required. I wanted to begin a discussion on how this can be achieved.

I'll begin by explaining how I achieve this:

As an ASP.NET developer, I often use the validator controls that come as part of the framework.

They work by default like this: you specify the text that will be displayed next to each field. Often this is just a '*' symbol of red colour. When the page first loads, none of these '*'s are visible.

It's only once you click the submit button that the '*'s become visible next to fields that had problems. If you have javascript enabled, they change immediately without a reload, and will continue to change dynamically as the user edits the form. If javascript is disabled, the page reloads and displays the '*'s.

I can see some pros and cons with this approach. First, the con: Why would you wait until the user had clicked the submit button to tell them that some of the fields were required? Wouldn't it be better to let them know straight away? Especially if javascript is disabled - they would have to wait for a full page reload before they discovered they missed a required field.

Secondly, the pro: if the browser has javacript enabled, then the form becomes visually dynamic - the user gets instant feedback from the edits they make to the form as the '*'s appear and disappear.

Finally, another thought: how does this fit in with web accessibility? Someone using a screen reader would (as I understand it) probably have javascript turned off, to prevent the page from changing. Therefore, if they missed a required field, the page would reload with '*'s next to the fields. How would you indicate to the user that they now had to go and correct the fields they missed? I think if I were the user, I would be confused that I was back on the same page (I would have been expecting some kind of confirmation page). Maybe we need a message to alert the user to the fact that some fields were missed - but where? Probably near the top of the page. Then, would the user have to traverse the page until they found a '*'?

I'm very interested to hear your opinions on this. Required fields are such a common element of a website, I'm sure every developer has got an opinion on how they should be done.

Also, please post links to what you consider to be good, usable examples of forms with required fields.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Web Design Lobby > Web Usability

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
form fields on the fly code_junkie Coding Forum 1 08-07-2008 03:04 PM
How do i make my required fields required? drew68 Coding Forum 4 04-11-2008 12:37 PM
Form Fields question FinishHost.com Coding Forum 6 04-12-2006 03:14 PM
Form fields information FinishHost.com Web Design Lobby 6 04-06-2006 06:47 PM
Add form fields on the file ATLien Coding Forum 1 04-01-2006 01:51 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 09:19 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.