Re: [WSG] Form styling
Mike, This is exactly the reason why I include the br at the end of the labels so that the form still displays nicely without the styles applied. I suppose a better case could be made for removing the display: block; from the labels in this situation but would be needed if for example you wanted a couple of labels side by side and needed to apply a width to the label. John, of course you're right though and the display: block on the label is doing the same thing as the br in the example above. On 27/09/2007, Mike at Green-Beast.com [EMAIL PROTECTED] wrote: Hi John, With your labels set to display: block, you don't realy need the extra br at the end of each one. ;) You're right, of course, but I think it's a good idea to keep the breaks. Not everyone supports styles so the breaks keep the form neat without them. My 2 cents. Cheers. Mike Cherim Just relaunched as v5: http://greenmethods.com/ - Original Message - From: John Faulds [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, September 26, 2007 6:16 PM Subject: Re: [WSG] Form styling http://www.dave-woods.co.uk/wp-content/uploads/2007/09/accessible-forms1.html With your labels set to display: block, you don't realy need the extra br at the end of each one. ;) -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** 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] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Form styling
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. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | www.mlinc.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Form styling
Tom, I put this together a while ago which you'll probably find useful http://www.dave-woods.co.uk/?p=91 with it in action here http://www.dave-woods.co.uk/wp-content/uploads/2007/09/accessible-forms1.html If you group the label with the form field then it's usually much easier to style the form and position it as you require. Hope that helps Cheers Dave On 26/09/2007, Tom Livingston [EMAIL PROTECTED] 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. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | www.mlinc.com *** 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] ***
Re: [WSG] Form styling
On 26 Sep 2007, at 18:15, Tom Livingston wrote: Does anyone have a favorite resource for dealing with forms. how about: http://www.accessify.com/tools-and-wizards/accessibility-tools/form- builder/default.php?type=css http://www.stuffandnonsense.co.uk/archives/stylish_accessible_forms.html and the one I usually base mine on: http://www.aplus.co.yu/lab/forms/?css=1 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Form styling
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_leftlabel for=titleSubject: /label/span
span class=col_rightinput 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=titleSubject: /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_leftWhat fruit do you like?:/span
span class=col_right
input id=chk2_0 name=fruit type=checkbox value=apple /
label for=chk2_0 Apple/labelbr /
input id=chk2_1 name=fruit type=checkbox value=orange /
label for=chk2_1 Orange/labelbr /
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]
***
Re: [WSG] Form styling
Dave, Thanks a lot for this. It's really simple and I don't mind the extra span element. So simple in fact, I threw up in my mouth a little from my own embarrassment. :-P THANKS! And thanks to the others for the replies. I will hang on to these in case a situation arises where one method is needed over another. http://www.dave-woods.co.uk/wp-content/uploads/2007/09/accessible-forms1.html -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Form styling
To layout a form i usually do:
form method=POST action=?php $_SERVER['DOCUMENT_ROOT']?
fieldset
legendLogin To Members Area/legend
divlabel for=usernameUsername/labelinput type=text id=username
name=username/div
divlabel for=passwordUsername/labelinput type=password
id=password name=password/div
button type=submit value=Log-InLog-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_leftlabel for=titleSubject: /label/span
span class=col_rightinput 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=titleSubject: /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_leftWhat fruit do you like?:/span
span class=col_right
input id=chk2_0 name=fruit type=checkbox value=apple /
label for=chk2_0 Apple/labelbr /
input id=chk2_1 name=fruit type=checkbox value=orange /
label for=chk2_1 Orange/labelbr /
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]
***
Re: [WSG] Form styling
Glad it helped :o) The idea for the span around the legend and div around the fieldset initially came from http://www.tyssendesign.com.au/articles/css/legends-of-style/ This then gave me the idea of including a span around the actual label text as it then provides extra flexibility for styling the form. It won't always be necessary but is certainly useful if the label and input can't be styled as you require without the extra markup. Cheers Dave On 26/09/2007, Tom Livingston [EMAIL PROTECTED] wrote: Dave, Thanks a lot for this. It's really simple and I don't mind the extra span element. So simple in fact, I threw up in my mouth a little from my own embarrassment. :-P THANKS! And thanks to the others for the replies. I will hang on to these in case a situation arises where one method is needed over another. http://www.dave-woods.co.uk/wp-content/uploads/2007/09/accessible-forms1.html -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** 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] ***
Re: [WSG] Form styling
http://www.dave-woods.co.uk/wp-content/uploads/2007/09/accessible-forms1.html With your labels set to display: block, you don't realy need the extra br at the end of each one. ;) -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Form styling
Hi John, With your labels set to display: block, you don't realy need the extra br at the end of each one. ;) You're right, of course, but I think it's a good idea to keep the breaks. Not everyone supports styles so the breaks keep the form neat without them. My 2 cents. Cheers. Mike Cherim Just relaunched as v5: http://greenmethods.com/ - Original Message - From: John Faulds [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, September 26, 2007 6:16 PM Subject: Re: [WSG] Form styling http://www.dave-woods.co.uk/wp-content/uploads/2007/09/accessible-forms1.html With your labels set to display: block, you don't realy need the extra br at the end of each one. ;) -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** 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] ***
Re: [WSG] Form styling
Hi Try using a definition list with the dt holding the labels and the dd holding the input - you can float the dt and dd to get two left-right columns and if you want to present the form differently then just use a dt/dd with no floats: form method=post action= fieldset legendLogin Foo/legend dl dtlabel for=usernameUsername/label/dt ddinput type=text id=login_username name=login[username]/dd dtlabel for=passwordUsername/label/dt ddinput type=password id=login_password name=login[password]/dd /dl !-- clear floats above with this -- div input type=submit value=Log-In name=login[start] /div /fieldset /form cheers James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
