To layout a form i usually do:
<form method="POST" action="<?php $_SERVER['DOCUMENT_ROOT']?>">
<fieldset>
<legend>Login To Members Area</legend>
<div><label for="username">Username</label><input type="text" id="username"
name="username"></div>
<div><label for="password">Username</label><input type="password"
id="password" name="password"></div>
<button type="submit" value="Log-In">Log-In</button>
</fieldset>
</form>
Most times that works for me, this is just a "general" more common type of
form. You can use a <p> element to make each related label and input block
level, but i think the <div> element works perfectly.
Its very easy to style aswell.
Usually if i get a request for a form thats on the complicated side, i will
sit down with a pen and paper and draw out the form, then plan it from
there.
Forms are not hard, but they are not consistant across browsers and
operating systems, so its easy to get lost or confused quickly. Planning
should sort this out though. I would rather plan a form and take 30 mins to
do so, then to do it from the top of my head and spend hours trying to fix
it.
I like forms, there a mild challange, i dont like setting up the validation
and regex's in PHP, that takes a while, even for the smallest forms, thats
another tin of worms (literally looking at a box of mealworms, which are for
my Geko).
Thats my 2 cents.
On 9/26/07, Tee G. Peng <[EMAIL PROTECTED]> wrote:
>
> I, on the other hand, love form styling :)
>
> this is what I came out, a bit heavy on markup but it works
> consistently accross browsers, including IE 5 (except extra line-
> height).
>
> <div class="form">
> <span class="col_left"><label for="title">Subject: </label></span>
> <span class="col_right"><input name="title" id="title" type="text"
> size="40" value="insert value" /> </span>
> </div>
>
> I used to use "label" and "input" for floated left and right.
>
> label {float: left}
> input {float:right}
>
> <div class="form">
> <label for="title">Subject: </label>
> <input name="title" id="title" type="text" size="40" value="insert
> value" />
> </div>
>
> but with checkbox, which the label tag is on the right and I found
> that the floated left 'label' was conflicting with it, so I decided
> that adding extra span classes works better and less headache with
> IEs; If I remember correctly, IE didnt' behave quite well without
> extra span classes.
>
> <div class="form">
> <span class="col_left">What fruit do you like?:</span>
> <span class="col_right">
> <input id="chk2_0" name="fruit" type="checkbox" value="apple" />
> <label for="chk2_0"> Apple</label><br />
>
> <input id="chk2_1" name="fruit" type="checkbox" value="orange" />
> <label for="chk2_1"> Orange</label><br />
>
> <input id="chk2_2" name="fruit" type="checkbox" value="durian" />
> <label for="chk2_2"> Durian</label>
> </span>
>
>
> This is my latest creation that includes :active and :focus, and is
> WCAG AAA compliant. You are welcome to use my code.
> http://tinyurl.com/2b8ban
>
> tee
>
> On Sep 26, 2007, at 10:15 AM, Tom Livingston wrote:
>
> > Hello list,
> >
> > OK, I hate form styling. It's my least favorite thing. I have started
> > using Eric Meyer's "Reset" style sheet. Does anyone have a favorite
> > resource for dealing with forms. I am tired of resorting to... [cough]
> > tables. I do manage on occasion to pull it off w/o tables, but it's
> > always a struggle. Especially where labels are to the left of text
> > inputs.
> >
> > Thanks a bunch in advance.
> >
> > --
>
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> *******************************************************************
>
>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
