Dynamically Filtering Dropdown Lists in JavaScript

This article describes a technique that takes input from a form text field and uses it to bring matching options to the top in a dropdown list.

Whitford, Justin. evolt (2005). Articles>Web Design>Personalization>Forms

Dysfunctional Forms Syndrome

Prevent major user annoyance by checking all your web forms: feedback, comment posting, product orders, newsletter sign-up, newsletter opt-in, unsubscribe option, site registration, etc. When a form won't submit, or otherwise fails, after user inputs lots of data, it causes extreme ill will toward your web site, and may be legal violation (UCE laws).

Streight, Steven. Blogger.com (2004). Articles>Web Design>Forms>Usability

E-mailing and Submitting PDF Forms

What’s the easiest way to e-mail a PDF form and have people fill it out?

Sprague, Rich. PDFzone (2004). Design>Information Design>Forms>Adobe Acrobat

Editing Forms in Acrobat 6  

The Form tool as we know has been abandoned. There is now a Field tool which is subdivided into tools for the individual field types.

Wyss, Max. PDFzone (2004). Articles>Information Design>Forms>Adobe Acrobat

Effective Use of Forms on Websites

People don't like filling out forms in the real world, and especially not while using the web. Forms are complicated, distracting, and take control away from the user. That is, unless they're designed effectively.

Baker, Adam. Merges.net (2001). Design>Web Design>Forms

Evaluating Forms

To demonstrate an example of some accessibility issues in HTML Forms, the following content intentionally has accessibility errors.

Abou-Zahra, Shadi. W3C (2004). Articles>Web Design>Accessibility>Forms

Five Ways To Make Sure That Users Abandon Your Forms

Completing a form is rarely (if ever) the goal in and of itself. The goal is to entice the user into a deeper relationship (of some sort) with your web site. Notice that I didn't say that the goal was to complete a transaction or make a sale.

Improving Customer Experience (2006). Design>Web Design>Forms>Usability

Form Validation

Any sort of interactive site is going to have form inputs — a place where your users input who they are, what they want to buy, where they live, and so forth. This data is passed to whatever handles your back end — a Perl CGI script, a PHP engine, a database like Oracle, or some other technology you’ve invested in. Whatever system is back there, you can bet that it doesn’t appreciate having its time wasted with bogus information, and chances are the user doesn’t appreciate it either. If the data the user submits to the CGI contains an error, there will be a noticeable lag — typically several seconds — before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an irritating error message. If you run a little preliminary validation of the user’s form input before the form is submitted, there will be no wait time. Client-side validation is instantaneous because it doesn’t have to transmit any data. JavaScript catches any erroneous data the user enters before it goes anywhere.

Apple Inc. (2006). Design>Web Design>Forms>DHTML

Forms vs. Applications

Once an online form goes beyond two screenfulls, it's often a sign that the underlying functionality is better supported by an application, which offers a more interactive user experience.

Nielsen, Jakob. Alertbox (2005). Articles>Web Design>Forms>Usability

Garbage In, Garbage Out: Using Affordances

The trick is to make data-entry forms clear enough that workers understand what you require of them without having to ask. This understanding alone can drastically reduce the frequency of errors, but to turn that understanding into a payback, you'll have to design a label for each field that is truly obvious to the workers. Information designers call these clues "affordances", and if you're lucky enough to have technical writers or editors in your organization, you can probably enlist their aid in designing these clues.

Hart, Geoffrey J.S. Geoff-Hart.com (1999). Articles>Human Computer Interaction>Usability>Forms

Good Forms

So you've decided it's time to interact with your users. You're tired of this one-way street — you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you'll need to provide a way for people to enter information. Therefore, you're going to need an HTML form.

Greenspan, Jay. Webmonkey (1999). Design>Web Design>Interactive>Forms

Greasemonkey Form Help

Two relatively common usability problems with web forms are textareas that are too small, and dropdown lists being clumsy to use for some people. This Greasemonkey user script automatically assigns links above each textarea so that it can be resized, and automatically expands dropdown lists. The script is easily configurable, so you can choose not to expand dropdown lists, or determine the maximum number of items you want displayed in a dropdown list, or have graphic or text links for resizing textarea form controls.

Lemon, Gez. Juicy Studio (2006). Design>Web Design>Forms>Help

Hide/Show Layer

This script uses dynamic HTML (DHTML) to pop open a box with info in it when you click on a link. In my demo I’ve used this to pop up contextual help about filling in a form. It could also be used, for example, to give pop-up definitions for terms in an article. In both cases, it makes sense to give the information in context, modelessly. Likewise, this solution avoids the problems of statelessness and latency.

Apple Inc. (2006). Design>Web Design>Forms>DHTML

Hooray, I'm Doing the Forms!  

Everyone hates forms--users hate filling them out, and writers hate creating them. But forms offer writers a unique opportunity for rewarding work. Jarrett suggests ways to improve forms--and, possibly, users' lives.

Jarrett, Caroline. Intercom (2004). Design>Document Design>Forms

How to Create a Userform

This example will step you through the process of creating a template that contains an autonew macro which, when you create a new document from the template, will cause a Userform to be displayed, into which you can enter some information that you want to appear in the document.

Robbins, Doug. Word MVP Site, The (2005). Articles>Word Processing>Forms>Microsoft Word

Importing and Exporting Form Data in Acrobat

When using PDF forms, it's possible to export, store and import the data in Form Data Format (FDF). Since an FDF file only includes the form data and not the form itself, it is much smaller and more lightweight that the complete PDF form, making it more efficient to manipulate. This tip explains how to export and import FDF data using Acrobat.

Shea, Dan. PlanetPDF (2007). Articles>Document Design>Forms>Adobe Acrobat

In-form-ation

The ultimate determinant of a good form is whether it enables you to get the information you want. To achieve this purpose, you must look at the form from the point of view of the person completing it.

Right Words. Design>Publishing>Forms

Interactive Forms with Javascript / HTML Tutorial

One of the most important aspects of web design is getting information from the viewer to the webmaster. This is where HTML forms are used. If you have been on the internet, you have seen forms before. Google uses them for search queries, Amazon uses them for shipping and credit card information, your bank uses them for you to login. Almost every site on the web has a type of form somewhere. We can't live without forms. How about changing the forms based on input by the viewer? This is where interactive forms using Javascript and HTML can help.

Zimmer, Brian. Zimmertech.com (2001). Design>Web Design>Forms>DHTML

International Address Fields in Web Forms

As enablers of online conversations between businesses and customers, Web forms are often responsible for gathering critical information—email addresses for continued communications, mailing addresses for product shipments, and billing information for payment processing to name just a few. So it shouldn’t come as much of a surprise that one of the most common questions I get asked about Web form design is: “How do I deal with international addresses?”

Wroblewski, Luke. UXmatters (2008). Design>Web Design>Forms>Usability

Label Placement in Forms

Placing a label above an input field works better in most cases, because users aren't forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.

Penzo, Matteo. UXmatters (2006). Design>Web Design>Forms>Usability

Load List Values for Improved Efficiency

Reduce the number of database hits and improve your Web application's efficiency when you load common shared list values only once. In this code-filled article, learn to load the values for drop-down lists when your Web application starts and then to share these loaded list values among all the users of your application.

Karanam, Srinivasa Rao. IBM (2005). Design>Web Design>Forms>User Centered Design

The Long Road to Simple: Creating, Debating, and Iterating "Add an Event"

Sometimes there's a lot more to simple than meets the eye. To the customer, this is just a few obvious words in a small box. But really, that's the point.

Signal vs. Noise (2007). Design>Web Design>Forms>User Centered Design

Making Compact Forms More Accessible

Space constraints can put the squeeze on accessibility and usability. Mike Brittain shares his method for making itty-bitty forms more accessible and easier to use.

Brittain, Mike. List Apart, A (2006). Design>Web Design>CSS>Forms

Name and Address Forms on the Web: Research into Usability  

Internet forms can be found on all kinds of sites that enable visitors to interact with companies, such as order forms in online shops or application forms on job boards. These forms ask visitors to fill out their name and address, which in many cases results in user errors as a consequence of design failures. In this article we report on a research project using event logs to analyze user errors and optimize the design of name and address forms. Two factors are identified as crucial for usability: the sequence of elements in the name field and the spatial orientation in the address field.

Lentz, Leo and Menno D.T. de Jong. STC Proceedings (2005). Design>Web Design>Forms>Usability