http://snipplr.com/language/css/tags/forms Recent snippets posted on Snipplr.com en-us Sun, 07 Sep 2008 14:19:19 GMT http://snipplr.com/view/5047/dont-show-the-blue-effect-of-forms-in-safari/

]]> Wed, 13 Feb 2008 13:41:21 GMT http://snipplr.com/view/5047/dont-show-the-blue-effect-of-forms-in-safari/ http://snipplr.com/view/3719/css-tableless-forms-using-labels-and-spans/ For creating forms without using tables, just CSS.

]]> Tue, 18 Sep 2007 04:56:57 GMT http://snipplr.com/view/3719/css-tableless-forms-using-labels-and-spans/ http://snipplr.com/view/3362/styling-input-based-on-their-type-with-css/ Style form fields

]]> Tue, 24 Jul 2007 07:58:52 GMT http://snipplr.com/view/3362/styling-input-based-on-their-type-with-css/ http://snipplr.com/view/2699/basic-form-css/ Basic form CSS (for use with the HTML form snippets I also posted). *updated on 2/2/08: removed some unnecessary floats and separated layout styles from presentation styles for easier management.

]]> Tue, 22 May 2007 12:53:55 GMT http://snipplr.com/view/2699/basic-form-css/ http://snipplr.com/view/990/accessible-css-forms-using-css-to-create-a-twocolumn-layout/ In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible. A survey of CSS-based forms revealed many variations on a theme (see Vandersluis 2004). Most use block-level floats and margins to position form elements on the page. However, in my testing I found IE5.x Mac to have rendering problems with many of these forms. After numerous iterations, I arrived at a solution that worked for IE5.x Mac as well as Safari 1.07 Mac, Firefox 1.07 Win/Mac, IE 6 Win, Camino, and Opera. Our goal here is to create a simple accessible contact form without the use of tables (see Figure 1).

]]> Thu, 31 Aug 2006 13:20:42 GMT http://snipplr.com/view/990/accessible-css-forms-using-css-to-create-a-twocolumn-layout/