SitePoint.com

ArticleBot · Jul 14, 2003, 06:54

This is a dedicated thread for discussing the SitePoint article 'Style Web Forms Using CSS'

vgarcia · Jul 14, 2003, 07:15

Also, two elements with the same id, meaning that the label for Address line 1 won't work:

Code:

<tr>  
     <td colspan="2"><label for="address1">Address Line 1</label></td>
     <td colspan="2"> <input type="text" name="address1" id="address2" tabindex="2" /></td>
   </tr>
   <tr>  
     <td colspan="2"><label for="address2">Address Line 2</label></td>
     <td colspan="2"> <input type="text" name="address2" id="address2" tabindex="3" /></td>
   </tr>

Also, why tables? CSS can more than do the job at this point. If your article is about styling forms with CSS, then why not lay the whole thing out in CSS? Forms aren't a valid use for a table under XHTML in my opinion.

MrFunnyMan · Jul 14, 2003, 08:30

Quote:

Originally Posted by vgarcia

Also, why tables? CSS can more than do the job at this point. If your article is about styling forms with CSS, then why not lay the whole thing out in CSS? Forms aren't a valid use for a table under XHTML in my opinion.

I'm sure the 'address2' ID was a typo. Why tables? I can only imagine that was because of Netscape 4. You think so?

FunnyMan

vgarcia · Jul 14, 2003, 08:54

Quote:

Originally Posted by MrFunnyMan

I'm sure the 'address2' ID was a typo. Why tables? I can only imagine that was because of Netscape 4. You think so?

FunnyMan

Probably, but most of the other items discussed in the article (changing a form's border, styling <input> and <label> tags, etc.) don't work in NS4 either, so I don't see the compromise.

fatnewt · Jul 14, 2003, 08:33

I was hoping the article would outline more about doing form layouts in CSS. Without tables.

Oh well.

vgarcia · Jul 14, 2003, 08:53

Quote:

Originally Posted by fatnewt

I was hoping the article would outline more about doing form layouts in CSS. Without tables.

Oh well.

http://www.alistapart.com/stories/practicalcss/ is the most common way to go regarding form layout with CSS.

redux · Jul 14, 2003, 16:42

moved to CSS forum

Karl · Jul 15, 2003, 14:48

Personally I think the article should have addressed some of the accesability elements that are mandatory in newer XHTML standards. Such as <fieldset>

redux · Jul 15, 2003, 17:03

Quote:

Originally Posted by Karl

Personally I think the article should have addressed some of the accesability elements that are mandatory in newer XHTML standards. Such as <fieldset>

fieldset has been around since html 4 (or even earlier, i forget). it's not mandatory in XHTML, but it is recommended under the W3C WAI WCAG http://www.w3.org/TR/WCAG10/

but yes, the article could have gone a bit more in depth on those issues. omitting fieldset is a grave sin (but i guess the aim of the article was to show styling of most existing forms, rather than teaching better ways of structuring them).

redux · Jul 15, 2003, 17:05

p.s.: wasn't there an article by ian lloyd on sitepoint about accessible forms ? it seems to have disappeared...but you can find the resource at www.accessify.com

Karl · Jul 15, 2003, 17:12

XHTML 1.1 requires fieldset.

Karl · Jul 25, 2003, 03:52

Fieldset is going to become a more important element the more accesability is pushed - especially if you want to work with large clients who can't afford to discriminate against anyone viewing their sites.

Cam · Jul 25, 2003, 04:09

Fieldsets are awesome

Are they required for all forms? I wasn't aware of that and I have validated pages as XHTML 1.1 before, I just don't recall whether there were forms involved or not? Could someone clear this up a little please?

Karl · Jul 25, 2003, 04:22

Well when I validated against XHTML 1.1 the forms required a fieldset else it wouldn't pass the tests.

Cam · Jul 25, 2003, 04:24

Okie dokie, I'll have to remember that

dtra · Oct 7, 2003, 19:27

does anyone know where i can find a tutorial that
shows how to make a form fully accessible, validates xhtml 1.1, css2?
all that, especially using labels, id (using name cos id never seems to work for me), fieldsets, etc, etc.

thanks

ucahg · Oct 7, 2003, 19:41

Just so you know, name is still a valid attribute on form elements. It's not valid on other tags however in XHTML1.1. Form elements still require name. However, giving an id and a name to form elements is a good idea, for the label tag's for attribute points to an id, not a name.

Troylegra · Oct 13, 2003, 21:20

would anyone have examples of code like this that I can look at? thanx!

I think it would have helped if were real forms rather then images of the forms...

megamanXplosion · Jul 14, 2004, 00:01

I do not know what you are talking about viT, care to explain? I've never noticed any problems with Opera's CSS support concerning forms and css...

Karl · Feb 20, 2007, 00:29

You've got Google auto-fill or some other auto-fill toolbar running, the yellow is basically telling you that it can auto-fill that field for you.

Paul O'B · Oct 9, 2008, 09:25

Quote:

How about styling checkboxes and radio buttons?

Are they more limited in being able to style them?

Yes - just leave the poor things alone

Apart from positioning and moving them around I'd advise against any styling on checkboxes and radio buttons.

Jul 14, 2003, 06:54	#1
ArticleBot SitePoint Articles Join Date: Apr 2001 Posts: 0	Discussion thread for Style Web Forms Using CSS This is a dedicated thread for discussing the SitePoint article 'Style Web Forms Using CSS'

Jul 14, 2003, 07:15	#2
vgarcia ☆★☆★ Join Date: Jan 2002 Location: in transition Posts: 21,477	Also, two elements with the same id, meaning that the label for Address line 1 won't work: Code: <tr> <td colspan="2"><label for="address1">Address Line 1</label></td> <td colspan="2"> <input type="text" name="address1" id="address2" tabindex="2" /></td> </tr> <tr> <td colspan="2"><label for="address2">Address Line 2</label></td> <td colspan="2"> <input type="text" name="address2" id="address2" tabindex="3" /></td> </tr> Also, why tables? CSS can more than do the job at this point. If your article is about styling forms with CSS, then why not lay the whole thing out in CSS? Forms aren't a valid use for a table under XHTML in my opinion.

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Jul 14, 2003, 08:33	#5
fatnewt I am obstructing justice. Join Date: Jul 2002 Location: Ottawa, Canada Posts: 1,769	I was hoping the article would outline more about doing form layouts in CSS. Without tables. Oh well.

Jul 14, 2003, 16:42	#7
redux gingham dress, army boots... Join Date: Apr 2002 Location: Salford / Manchester / UK Posts: 4,856	moved to CSS forum

Jul 15, 2003, 14:48	#8
Karl Community Advisor Join Date: Jul 1999 Location: Derbyshire, UK Posts: 4,154	Personally I think the article should have addressed some of the accesability elements that are mandatory in newer XHTML standards. Such as <fieldset>

Jul 15, 2003, 17:05	#10
redux gingham dress, army boots... Join Date: Apr 2002 Location: Salford / Manchester / UK Posts: 4,856	p.s.: wasn't there an article by ian lloyd on sitepoint about accessible forms ? it seems to have disappeared...but you can find the resource at www.accessify.com

Jul 15, 2003, 17:12	#11
Karl Community Advisor Join Date: Jul 1999 Location: Derbyshire, UK Posts: 4,154	XHTML 1.1 requires fieldset.

Jul 25, 2003, 03:52	#12
Karl Community Advisor Join Date: Jul 1999 Location: Derbyshire, UK Posts: 4,154	Fieldset is going to become a more important element the more accesability is pushed - especially if you want to work with large clients who can't afford to discriminate against anyone viewing their sites.

Jul 25, 2003, 04:09	#13
Cam ********* Wizard Join Date: Aug 2002 Location: Burpengary, Australia Posts: 4,601	Fieldsets are awesome Are they required for all forms? I wasn't aware of that and I have validated pages as XHTML 1.1 before, I just don't recall whether there were forms involved or not? Could someone clear this up a little please?

Jul 25, 2003, 04:22	#14
Karl Community Advisor Join Date: Jul 1999 Location: Derbyshire, UK Posts: 4,154	Well when I validated against XHTML 1.1 the forms required a fieldset else it wouldn't pass the tests.

Jul 25, 2003, 04:24	#15
Cam ********* Wizard Join Date: Aug 2002 Location: Burpengary, Australia Posts: 4,601	Okie dokie, I'll have to remember that

Oct 7, 2003, 19:27	#16
dtra SitePoint Evangelist Join Date: Mar 2003 Location: Melbourne, Australia Posts: 464	does anyone know where i can find a tutorial that shows how to make a form fully accessible, validates xhtml 1.1, css2? all that, especially using labels, id (using name cos id never seems to work for me), fieldsets, etc, etc. thanks

Oct 7, 2003, 19:41	#17
ucahg SitePoint Evangelist Join Date: Apr 2001 Location: Sarnia, Ontario, Canada Posts: 434	Just so you know, name is still a valid attribute on form elements. It's not valid on other tags however in XHTML1.1. Form elements still require name. However, giving an id and a name to form elements is a good idea, for the label tag's for attribute points to an id, not a name.

Oct 13, 2003, 21:20	#18
Troylegra SitePoint Zealot Join Date: Nov 2002 Location: NYC Posts: 157	would anyone have examples of code like this that I can look at? thanx! I think it would have helped if were real forms rather then images of the forms...

Jul 14, 2004, 00:01	#19
megamanXplosion SitePoint Wizard Join Date: Jan 2004 Location: Kentucky, USA Posts: 1,091	I do not know what you are talking about viT, care to explain? I've never noticed any problems with Opera's CSS support concerning forms and css...

Feb 20, 2007, 00:29	#20
Karl Community Advisor Join Date: Jul 1999 Location: Derbyshire, UK Posts: 4,154	You've got Google auto-fill or some other auto-fill toolbar running, the yellow is basically telling you that it can auto-fill that field for you.