#32473
Spruce Up Your Search Box with CSS and a Background Image
Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. The compromise typically involves applying a simple colored border and background to the fields. I think this is the right approach for Web sites and applications that are form field intensive, but the search box plays a special role in the design, and it deserves a little more attention.
Reindel, Brian. d'bug (2008). Articles>Web Design>Forms>CSS
#32498
Explains some of the technical reasons for form controls being so hard to style consistently across platforms with CSS. Also asks a lot of good questions related to how various CSS properties should affect form controls if browsers would let them.
Meyer, Eric. MeyerWeb (2007). Articles>Web Design>Forms>CSS
#32551
Improve Your Forms Using HTML 5!
HTML hasn't really been updated since HTML version 4 was released back in 1998. However, the WHATWG community has been working on HTML since 2004 and this will hopefully result in some much needed improvements. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2.
Van Kesteren, Anne. Opera (2008). Articles>Web Design>Forms>HTML5
#32660
Forms. Is there any other word that strikes as much fear into the hearts of grown web designers? There's also an improperly held belief that the only way you can guarantee that a form displays properly is by using tables. All of the code reproduced here for forms is standards-based, semantic markup, so you've got no excuse for relying on tables now!
Adams, Cameron. SitePoint (2008). Articles>Web Design>CSS>Forms
#32751
You may not realize it, but there are times when each variant of form layout can have a positive or negative impact on how the form (and your site) is used or perceived. And applying the right variant at the right time is one of the simplest things you can do to improve your user’s experiences.
Hoekman, Robert, Jr. RobertHoekman.com (2008). Articles>Web Design>Forms
#33123
Five Ways To Make Sure That Users Abandon Your Forms
What do you really need to know in your form process? Be brutal. Don't include stuff that your sales team would like. 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. That is evidence of the deeper relationship, not the vehicle by which you persuade your users.
Meyer, Eric. Improving Customer Experience (2006). Articles>Web Design>Usability>Forms
#33124
Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.
Website Optimization (2008). Articles>Web Design>CSS>Forms
#33131
This document is concerned with what the user of a Website form "sees" and interacts with. It outlines how you can create forms for the Web that are more accessible and describes the appropriate use of.
Hudson, William. Webusability (2004). Articles>Web Design>Usability>Forms
#33132
Ask anyone who has had to fix a Website that's littered with accessibility howlers, and top-most in their list of problems encountered will be forms, closely followed by tables. These two topics always seem to present the most difficulties, but they needn't be a problem. For the most part, forms are a problem because the extra accessibility tags are simply not known to the Web designer -- after all, it looks right, it seems to work... what's the problem? Only by switching off the monitor and using a screen-reader can our oblivious Web developer understand the issues.
Lloyd, Ian. SitePoint (2003). Articles>Web Design>Accessibility>Forms
#33133
You are writing captions or labels for fields in forms, for example 'Name' or 'Date of birth'. Should they be finished with a colon, or not?
Light, Ann. Usability News (2006). Articles>Web Design>Usability>Forms
#33134
Creating Bulletproof and Easy to Complete Web Forms
Effective form design is a great way to boost conversion rates. Jason Fried and Matthew Linderman share with us the secret of how to create attractive and functional forms.
Fried, Jason and Matthew Linderman. Peachpit Press (2004). Articles>Web Design>Standards>Forms
#33135
Forms: The Importance of Getting it Right
Urgh – it’s what we all think when presented with a form to complete, whether printed or online. What is it about forms that make us feel this way? Maybe, the history of being officious and complicated, a drain on our time, and they often make us feel stressed. As forms represent a business or an organisation, all these feelings are subsequently associated with that organisation – not good for customer relations or reputation!
Lift (2007). Articles>Web Design>Usability>Forms
#33381
Over at Smiley Cat Web Design they’ve put together a showcase of many different login and registration forms. While you’re there, take a look at some of the other showcases listed in the sidebar. They have sets for calendars and date pickers, footers, search boxes, and many more.
CyberText Consulting (2008). Articles>Web Design>Forms>Usability
#34001
Forms are often the most tricky aspect of web development for beginners to get their head around, largely because it means stepping out of the comfort zone of one-way information - no longer are you simply presenting information at the person viewing your site, now you are asking for input, for feedback that you have to process in some way. And just as it may be difficult for HTML beginners to understand just how they handle form data, so is it difficult to understand some of the issues relating to accessibility.
Lloyd, Ian. Web Standards Project (2004). Articles>Web Design>Accessibility>Forms
#34259
Styling Form Controls with CSS, Revisited
Attempting to use CSS to make form controls look similar across browsers and operating systems in an exercise in futility. It simply cannot be done. Because of all this I spent way too much time creating a total of 224 screenshots showing the effects of various CSS rules applied to form controls.
Johansson, Roger. 456 Berea Street (2007). Design>Web Design>Forms>CSS
#34457
Tips for Creating Online Forms
Usability is central to the successful completion of online forms. Whether applying for insurance, completing tax returns or simply making an online purchase, a poorly designed or confusing form can lead to users abandoning the process. The following are some tips when designing online forms.
Frontend Infocentre (2009). Design>Web Design>Forms>Usability
#35168
Inline Validation in Web Forms
Inline validation gives people several types of real-time feedback: It can confirm an appropriate answer, suggest valid answers, and provide regular updates to help people stay within necessary limits. These bits of feedback can be presented before, during and / or after users provide answers.
Wroblewski, Luke. List Apart, A (2009). Articles>Web Design>Forms>JavaScript
#35397
(Almost) Never Add a Reset Button to a Form
Next time you consider adding a reset button to a form, think it through very carefully first. Does the user really benefit from being able to reset the form? Is being able to reset the form to its initial state so valuable that it is worth the risk of the user losing the data they have entered? Probably not.
456 Berea Street (2009). Articles>Web Design>Forms>Usability
#35705
Strategies on How To Motivate Users to Sign Up Through Design
Be it web-based applications or online services, they are taking the Internet by storm. Many websites introducing these services are created and launched to get users to sign up and use the software (hopefully for a long-term). The question is: How do we get users from the unfamiliar zone into the interested zone and subsequently becoming a first time use?
Onextrapixel (2009). Articles>Web Design>User Centered Design>Forms
