fieldset + legend vs normal method of forms

[jag5311]

I have come across a few posts / articles on the internet that deal with <legend> and <fieldset> for the user of forms. I guess this is the method of making those cool "word in between lines" type of headers for each section of a form.

Is using fieldset and legend the "appropriate" and best accessibility method of doing forms? Just curious.

Thanks
Bryan

[megamanXplosion]

fieldsets (<legend> falls under that category) and labels should definately be used, I love it when I can use them. It's a shame that labels and fieldsets are not used more often because they make forms dramatically easier to fill out. Fieldsets should be used to seperate series of options. For example: You have a section for gender, the gender options (male, female) should be set inside of a fieldset using <legend> to put the word 'Gender' at the top of the box. This makes it easier for people to fill out large forms, especially users which are using an aural browsers because it helps orient them.

Labels should be used for checkboxes and radio buttons. This allows a much wider margin of error when checking to select an option (try clicking several of those boxes using a jittery wireless mouse *points at his parents*). A good explanation of this, is the way software installers work. They have the checkbox with a label titled 'I agree to these terms and conditions', you can click on the label text to select/unselect the checkbox.

Hope this helps

Off Topic:

Sorry it's been taking so long for my web site update and forming the affiliation. I was REALLLLLLY close to updating the live site when BAM, lightning struck and I had to format my HD to get my comp working again, I had no method of backing up the whole last MONTH'S work *sighs*. I'm probably going to throw an affiliates section on the current website without any other updates just so I can get you off of the 'waiting list' (although, no list exists) lol. Sorry about my unreliability on this issue.

[cfm]

I always use <fieldset/>, <legend/>, and <label/> tags. They're accessible, usable, and easy.

Beyond that, I couldn't really explain why I do it, apart from the fact that I learned that way, and still do it from force of habit.

[duuudie]

Hi

I had pretty much the same questions a few weeks ago. I think that these two threads might be useful:
http://www.sitepoint.com/forums/showthread.php?t=156725
http://www.sitepoint.com/forums/showthread.php?t=158027
The second one is the relevent one. It discusses an olb bug that you might want to know about

[Si]

I'm starting to use the <fieldset />, <legend /> and <label /> tags in my forms as I have only just discovered them in a book I got from a bargain bin a few months back. After reading about them and doing a bit of research on the net, I realised it is much more user friendly to use them.

CSS can also work wonders on the tags. Try moving away from tabular forms as well if you're considering using the tags. Again, CSS can tidy it all up for you!

[vgarcia]

CSS can also work wonders on the tags. Try moving away from tabular forms as well if you're considering using the tags. Again, CSS can tidy it all up for you!

Most people would still think a table is a good way to lay a form out. It's really all up to the developer though.

Bryan, definitely use <label>s. Those are very important since they are extra user-friendly (click on the label, focus gets passed to its bound form field just like in a regular application). Fieldsets and legends are more for organization (grouping fields that should go together) but are still very handy for any form longer than a login screen .

[cfm]

Most people would still think a table is a good way to lay a form out. It's really all up to the developer though.

I still use tables for forms, formatted by CSS. I tried making a CSS form, but everything was all overlappy. Still, though, some working pure CSS form code might convince me to switch.

[vgarcia]

I still use tables for forms, formatted by CSS. I tried making a CSS form, but everything was all overlappy. Still, though, some working pure CSS form code might convince me to switch.

Look at the form example at http://alistapart.com/articles/practicalcss/ . I've used it in the past and it works well.

[jag5311]

anyone have any good resources for fieldset/legends or a site that sports a very nice version of using this method.

Thanks

[megamanXplosion]

http://www.utexas.http://www.utexas....lldown_gp.html

The example on that page is mediocre because it doesn't have any styling applied, but I felt that this resource was pretty good in the way it provides an MP3 so you can actually listen to what the JAWS screen reader will sound like when it accounters the fieldset.


http://www.picment.com/articles/css/funwithforms/

This page is a little tutorial on how to style forms. It takes a plain fieldset and turns it into a graphical form.



Enjoy

[jag5311]

Very nice. I like that picment.com example

[cfm]

Look at the form example at http://alistapart.com/articles/practicalcss/ . I've used it in the past and it works well.

That convinced me...

* goes off and converts all forms to CSS *

[jag5311]

well, here is my attempt http://www.gamecubecheats.info/juiced/contact.htm

[redux]

as everybody has already said that fieldsets are the proper way to go, i'd also add that, if you're planning on going for xhtml 1.1, you *must* have at least one big fieldset to encompass the contents of the form, as otherwise you get a validation error. best get used to them now...

[jag5311]

so like

<fieldset>

<form ....>
</form>
</fieldset>
??

[cfm]

Nope:

<!--...-->
<form>
     <fieldset>
          <legend></legend>
          <!--...-->
     </fieldset>
</form>
<!--...-->

[jag5311]

sorry,

I am assuming that means

<fieldset>
<legend></legend>
<form>
<fieldset>
<legend>Contact</legend>
<label for="whatever">Whatever</label>
<input type="text" value="whatever" />
</fieldset>
</form>
</fieldset>

that it?

[cfm]

Nope:

<form>
<fieldset>
<legend>Contact</legend>
<label for="whatever">Whatever</label>
<input type="text" value="whatever" />
</fieldset>
</form>

[vgarcia]

compuwhiz7's right, fieldset goes inside the form, legend goes inside the fieldset .

[jag5311]

sorry, I was really getting myself backwards. When I said earlier that I had used it on my site, I thought redux was saying I did something wrong regarding strict xhtml (which I am not shooting for in my current site, but if I did was strict..)

Here is my current code

 <form name="form" action="contact.htm">
 			<fieldset>
 		    	<legend>&nbsp;<span class="contactarrow">>>> </span>Contact&nbsp;</legend>
 		    		<label for="name">Name</label><br />
 		    			<input type="text" name="name" id="name" />
 					<br />
 		    		<label for="email">Email</label><br />
 		    			<input type="text" name="email" id="email" />
 					<br />
 		    		<strong>What does this concern?</strong><br />
 		    			<select name="why">
 		    		    	<option value="website">Website</option>
 		    		    	<option value="question">Question</option>
 		    		    	<option value="compliment">Compliment</option>
 		    		    	<option value="complaint">Complaint</option>
 		    		    	<option value="other">Other</option>
 		    			</select>
 					<br />
 		    		<label for="comments">Comments</label><br />
 		    		<textarea name="comments" id="comments" cols="35" rows="10">Type your comment here...</textarea>
 					<br />
 		    		<input type="submit" value="Send" name="submit" id="submitbutton" />
 			</fieldset>
 			
 			
 			</form>

[zaptd]

as everybody has already said that fieldsets are the proper way to go, i'd also add that, if you're planning on going for xhtml 1.1, you *must* have at least one big fieldset to encompass the contents of the form, as otherwise you get a validation error. best get used to them now...

Nah. Fieldsets are definitely the most semantically correct and elegant containers for form elements, but you can wrap form contents in a variety of block level elements (div, p, etc.) and still validate as XHTML 1.1.

HTH,
CK