Web Design Blog
Thoughts and commentary about graphic design resources, articles, and creative resources. Also fresh links to Photoshop resources, fonts, plugins, templates, graphics, software, scripts, tutorials, and other useful tools for webmasters!
Saturday, September 22, 2007
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
Browse By Date
| October 2007 | ||||||
|---|---|---|---|---|---|---|
| S | M | T | W | T | F | S |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
Browse by Topic
Archives
Related Sites & Friends
- PhotoshopSupport
- Blue Vertigo
- The Free Site
- Yotophoto
- ImageAbstraction
- FreePhotoClips
- BestDesignLinks
- MorgueFile
- ImageAfter
- Open Photo
- StockVault
- Texture Warehouse
- Stock.Xchng
- Grunge Textures
- Texture King
- Piotr.Pix
- FeaturePics
- Designs By Darren
- N.Design Studio
- WallpaperStock
- Pixel Perfect Digital
- UrbanDirty
Buy/Sell Stock Photos
- iStockPhoto
- Dreamstime
- Fotolia
- 123RF
- Shutterstock
- StockXpert
- Big Stock Photo
