Web Design Blog

Thoughts and commentary about web design plus links to helpful resources including fonts, plugins, templates, stock photos, software, scripts, tutorials, and other useful tools for webmasters!

Saturday, September 22, 2007

Input Forms Without Tables

Input Forms Without Tables

Tutorial by Nick Rigby, A List Apart

“It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data, so it’s a semantic faux pas.

I’ve tried to create a form-styling solution that is both accessible and portable (in the sense that I can move the code from one project to the next). Floats have often provided a solution to my problem, but given the complexity of some layouts and the numerous float bugs associated with Internet Explorer, it’s not always easy to reuse a float solution. I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.”

Read the Tutorial

Related Sites & Friends:

Photoshop SupportBlue VertigoThe Free SiteYotoPhotoMorgueFileOpenPhotoStockVaultImageAfterStock.XCHNGTexture WarehouseTutorialVaultTemplatesFeedTexturePacksGrunge TexturesPixel Perfect DigitalImage AbstractionFreeSeamlessTexturesBest Design LinksPhotomorphixWallpaperStockPiotr.PixDesigns By DarrenDesignPacksFreePhotoClipsPhoto Sharing ForumPhotostorePoweredMonochromousPixel Perfect StockRSS Workbench

All content © 2008 freewebpageheaders.com and it's contributors, All rights reserved.

Unique Visitors: