HTML Forms - Best Practice Print E-mail
Written by andrew n   
Sunday, 20 September 2009 15:08

decorativeRecently, It's re-occurred to me that the vast majority of websites that implement forms for whatever functionality - do NOT follow best practice rules.

Sure it's easy to forget an element here and there but doing so, can degrade the user experience some what.

Enter... net.tutsplus.com - they have an excellent tutorial that's probably worth going through, if your a beginner or simply need to brush up on your skills.

'Forms can be difficult and sometimes even annoying for users; often, a form interrupts a user's main focus and direction on a page: they're intent on purchasing that gift, or trying out your new web app, not giving you their shipping address or coming up with yet another password. These tips will make forms easier for you as a developer/designer, and them as a user.'

See

If you can't be bothered to head on over - just remember this:

  1. Semantics
  2. Accessibility
  3. Functionality
  4. Design

Snippets: labels

  1. <fieldset>  
  2.     <legend>Billing Affress</legend>  
  3.     <label for="billAddress">Address</label><input type="text" id="billAddress" name="billAddress" />  
  4.     <label for="billCity">City</label><input type="text" id="billCity" name="billCity" />  
  5.     <label for="billProvince">Province</label><input type="text" id="billProvince" name="billProvince" />  
  6.     <label for="billPC" >Postal Code</label><input type="text" id="billPC" name="billPC" />  
  7. </fieldset>

Snippets: categorize options

  1. <select>  
  2. <optgroup label="USA">  
  3.     <option>Alabama</option>  
  4.     <option>Alaska</option>  
  5.     <option>Arizona</option>  
  6. </optgroup>  
  7. <optgroup label="Canada">  
  8.     <option>Alberta</option>  
  9.     <option>British Columbia</option>  
  10.     <option>Manitoba</option>  
  11. </optgroup>  
  12. </select> 

Snippet: accessibility

  1. <input type="text" tabindex="2" />  
  2. <input type="text" tabindex="1" />  
  3. <input type="text" tabindex="3" /> 

Those snippets are just a few examples of best practice.

 

 

also of interest

'Awesome cool thing'

I just received this wonderful surprise of an email from a dear friend.

Knowing i'm a bit of a sucker for the arts - he sent me a link to this really cool site. They sell all kinds of art work, ranging from fine canvases to bathroom wallpaper.

Read more...
 
flickr - a source of wonderful images

Sometimes, there's a need to find some really spectacular pictures for a site design. Instead of paying an arm and a leg for images - you may want to try flickr.

There are literally lots of images available - that can be used, so long as the owner of an image gives you the nod.

Read more...