Skip to main content

How to tame forms in web design

 

Forms are often considered one of the most painful HTML elements to program. But form design and development has progressed by leaps and bounds; it is not nearly as hard as it once was.

That being said, while the industry has made tremendous progress, some hurdles are still in place. In the end, taming forms is possible; it just takes some work.

In this post, we’ll take a look at some of the most used form controls and at different tools and plugins that should help you with the deployment of forms in your websites.

If you have any other tips or links to other useful resources, feel free to post them in the comments.

Breaking down the controls

Let’s start by dividing them into two buckets, because some form controls have never been much trouble to work with.

Friendly controls

The controls that are easiest to work with are the basic input box, text area and button. They work well with standard CSS and, fortunately, are the most common form elements. If you don’t need to use the more difficult ones, then you’re lucky.

With the progress of CSS3 rounded corners, drop shadows and gradients, many of the most common styles are now even easier. You have nothing to fear with these controls.

Troublesome controls

Certain other form controls can be a massive pain in the neck. For example, if you design a drop-down control that is extremely stylized, the developer will likely want to have a chat with you. Your options for styling will be quite constrained: border color, padding, background color, that sort of thing. If you need more styling than this, I suggest you consult with the developer to ensure you’re not creating a major problem for them.

Troublesome form controls include:

  • select multiple,
  • select drop-down,
  • checkboxes,
  • radio buttons,
  • file upload.

Modern tools for forms

As mentioned, a number of incredible tools are available to help you whip form controls into shape.

Formalize is your secret weapon for getting basic form controls and styles to behave consistently across browsers. And its default styles are clean and beautiful. This awesome library also works perfectly with a wide range of JavaScript libraries, such as jQuery, Dojo and MooTools.

Form control replacement

If you want to do some radical things to a form, helpful tools are available. A brilliant tactic for taming web forms is to hide the actual control and replace it entirely with a manufactured one. This gives you far greater control over how the form renders.

One great example of this is Uniform, a jQuery plug-in for creating slick forms. It comes in three different themes. And if you want to create a custom theme, just use the service’s CSS generator to easily skin the plug-in.

Another jQuery plug-in Niceforms. While it doesn’t have the handy re-skinning functionality of Uniform, it does offer a basic style that could very well fit your needs as is.

Finally, there is the commercial jQuery extension Wijmo. The module we’re interested in here is the form decorator, which is actually free to use. It tackles a few of the more problematic controls: checkboxes, radio buttons and drop-downs. Being part of a larger commercial library, this tool brings some benefits, the foremost of which are strong documentation and paid support. Finally, I love the way it handles skinning; it uses the jQuery UI ThemeRoller, making easy work of custom designs.

Invented form controls

Finally, if there isn’t a form control that does what you need, you could invent one! Some very smart people have already done a lot of this, and perhaps one of their tools already fits your needs.

Sliders

One thing that is missing from standard HTML (but is a part of HTML5) is a basic slider control. There are many answers to this, including one from Wijmo, which is based on the jQuery UI slider.

Uploaders

While you could use the file input control to enable users to select a file for uploading, you might want something a bit snazzier, especially if file uploads are critical to your website. One of the best solutions is Uploadify. It allows users to select multiple files and to view progress. It comes with a variety of layout and functionality options.

Slider-style checkboxes and radio buttons

One popular UI element (thanks to the iPhone) is the on/off switch that slides from side to side. With this handy jQuery plug-in, you can transform a basic checkbox or radio button into one. Whether you call this an invented form control or a form replacement tool, it is a great way to enable users to turn options on and off.

Creative buttons

jQuery UI is another interesting take on basic controls. What it labels as buttons could also be used to make option sets based on buttons, radio buttons and checkboxes. In doing so, you transform these controls into a different visual form. In the image below is a set of radio buttons styled as a row of buttons.

HTML5 Forms

HTML5 has brought a lot exciting possibilities to web forms. While it is beyond the scope of this article, it’s still relevant. Here are some key resources to help you dig in:

In conclusion, form controls are one of the most critical hurdles in developing a basic website.

A designer who understands the limitations, knows the tools and recognizes opportunities for easy tweaks will be able to make informed decisions that ultimately improve the bottom line.

Written by Patrick McNeil,  a freelance writer, developer and designer. In particular he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Source


How to tame forms in web design
Walter
Wed, 10 Aug 2011 09:10:51 GMT

Popular posts from this blog

Apple Launches Web Tool to Deregister Phone Numbers from iMessage

Apple today released a new web tool for users to deregister their phone number from iMessage in the event they switched to a non-Apple device. To deregister a phone number from iMessage, users simply enter their phone number in Apple's web tool, receive a free text message containing a code, and submit the code to complete the process. Users who still have their original iPhone can also transfer their SIM card back to the device and go to Settings -> Messages to turn iMessage off. 


Users switching from an iPhone to another device were often unable to receive SMS messages from another iPhone due to their phone number still being linked to iMessage. These specific errors with iMessage have been a well-known issue since 2011, which is when the messaging service debuted with iOS 5. They were also made even more apparent this past May, where a server glitch caused widespread message delivery problems. Apple was even sued over the matter in a California court, although the company cla…

Microsoft acquires iPhone email app Acompli

After accidentally announcing it a little early, Microsoft is officially confirming it has acquired email startup Acompli. The surprise acquisition means Microsoft is picking up a powerful email client for iPhone and Android in another move that further cements CEO Satya Nadella’s focus on cross-platform technologies. The Verge’s Casey Newton called Acompl "the Outlook for iPhone that Microsoft hasn’t yet built," and it seems Microsoft was equally impressed with the powerhouse email app. "We’re excited about what’s possible as we build on the app’s success and bring it together with work currently in progress by the Outlook team," the company said in a statement. "Our goal is to deliver fantastic cross-platform apps that support the variety of email services people use today and help them accomplish more." Recode first reportedthat Microsoft would make its latest acquisition official today; the company is said to be paying over $200 million for Acompli. A…

Apple will disconnect ‘obsolete’ first-gen Apple TV from iTunes in May

Apple has announced today it will drop iTunes support for some older devices from May 25. This includes the first generation Apple TV, and also any PC running Windows XP or Vista. The company is introducing new security changes which will prevent those devices from using the latest version of iTunes.
Apple says that the original Apple TV is an "obsolete Apple product" and will not be updated to support security changes. Only those with the second generation of Apple TV or later will be able to access the iTunes store.
Windows XP or Vista users won't be able to use the latest version of iTunes, but older Windows computers can still use previous versions without support from Apple. Those who do so, however, won't be able to make new purchases or re-download previous purchases on that computer. If you're on on XP or Vista, you'll need to upgrade to Windows 7 or later to continue using iTunes normally.
The writing was already on the wall for these devices: Wi…