NYCPHP Meetup

Sat May 3 22:57:48 EDT 2008

Michael B Allen wrote:

> Secondarily, would you expect a professional library of this type to use
> tableless forms? Personally I have never been able to create tableless
> forms and have things line up into columns. So for now I'm going to use
> tables but I would be very interested in hearing someone make a case
> for tableless forms.
>
> Mike
>
>   
Tableless forms are all about the fieldsets and labels.

<html>
    <head>
        <title>Form</title>
        <style type="text/css">
            .myapp fieldset {
                border: 0;
            }

            .myapp legend {
                color: #000080;
                border-bottom: 2px #808080 solid;
                margin-bottom: 0px;
            }

            .myapp label {
                float:left;
                width: 70px;
                clear: left;
                text-align: right;
                white-space: nowrap;
                margin: 5px;
            }

            .myapp input, select, textarea {
                float: left;
            }

            .myapp textarea {
                width: 300px;
                height: 100px;
            }

            .myapp fieldset.checkboxes legend {
                color: #000;
                border: 0;
                margin: 0;
            }

            .myapp fieldset.checkboxes label{
                text-align: left;
                margin-left: 75px;
            }
        </style>
    </head>
    <body>
        <form class="myapp">
            <fieldset>
                <legend>Account Information</legend>

                <label for="field_username">Username:</label>
                <input type="text" name="username" id="field_username" 
value="" />

                <label for="field_password">Password:</label>
                <input type="password" name="password" 
id="field_password" value="" />

                <label for="field_state">State:</label>
                <select name="state" id="field_state">
                    <option>Choose One</option>
                    <option>CT</option>
                    <option>NJ</option>
                    <option>NY</option>
                </select>

                <label for="field_comments">Comments:</label>
                <textarea name="comments" id="field_comments"></textarea>
            </fieldset>

            <fieldset class="checkboxes">
                <legend>Favorite Color:</legend>
                <label for="color_red"><input type="radio" name="color" 
id="color_red" value="red" /> Red</label>
                <label for="color_green"><input type="radio" 
name="color" id="color_green" value="green" /> Green</label>
                <label for="color_blue"><input type="radio" name="color" 
id="color_blue" value="blue" /> Blue</label>
            </fieldset>
        </form>
    </body>
</html>

One sidebar - make sure your id's and field names are different as IE 
tends to confuse the two and reacts strangely.

Google  for "css forms" (sans quotes) and you'll find quite a few 
helpful examples.

As for making a case for css forms, I think the above example speaks for 
itself.  Very easy to see what's going on here without even testing in a 
browser.  Even though I'd coded in tables for years (around 1997 - 
2001), trying to read around table tags these days makes me feel 
completely illiterate when it comes to figuring out what a page is 
supposed to look like.

Good Luck!

Mark

NYCPHP Meetup

NYPHP.org

[nycphp-talk] Abstracting CSS: Reusable HTML UI Components