SitePoint Sponsor |
|
User Tag List
Results 1 to 21 of 21
-
Apr 24, 2004, 17:05 #1
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
fieldset + legend vs normal method of forms
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
-
Apr 24, 2004, 17:18 #2
- Join Date
- Jan 2004
- Location
- Kentucky, USA
- Posts
- 1,099
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Apr 24, 2004, 18:06 #3
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Apr 25, 2004, 03:36 #4
- Join Date
- Feb 2004
- Location
- Switzerland
- Posts
- 2,253
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Apr 26, 2004, 02:30 #5
- Join Date
- Sep 2002
- Location
- Walsall, UK
- Posts
- 1,911
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
-
Apr 26, 2004, 06:12 #6
Originally Posted by bigsi
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.
-
Apr 26, 2004, 06:17 #7
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by 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.
-
Apr 26, 2004, 06:31 #8
Originally Posted by compuwhiz7
-
Apr 26, 2004, 06:38 #9
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
anyone have any good resources for fieldset/legends or a site that sports a very nice version of using this method.
Thanks
-
Apr 26, 2004, 23:05 #10
- Join Date
- Jan 2004
- Location
- Kentucky, USA
- Posts
- 1,099
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Apr 27, 2004, 06:14 #11
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Very nice. I like that picment.com example
-
Apr 27, 2004, 06:16 #12
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
* goes off and converts all forms to CSS *
-
Apr 30, 2004, 09:11 #13
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
well, here is my attempt
http://www.gamecubecheats.info/juiced/contact.htm
-
Apr 30, 2004, 09:58 #14
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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...
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Apr 30, 2004, 10:38 #15
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
so like
<fieldset>
<form ....>
</form>
</fieldset>
??
-
Apr 30, 2004, 13:05 #16
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nope:
HTML Code:<!--...--> <form> <fieldset> <legend></legend> <!--...--> </fieldset> </form> <!--...-->
-
Apr 30, 2004, 13:58 #17
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Apr 30, 2004, 14:02 #18
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nope:
HTML Code:<form> <fieldset> <legend>Contact</legend> <label for="whatever">Whatever</label> <input type="text" value="whatever" /> </fieldset> </form>
-
Apr 30, 2004, 14:56 #19
compuwhiz7's right, fieldset goes inside the form, legend goes inside the fieldset
.
-
Apr 30, 2004, 20:02 #20
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Code:<form name="form" action="contact.htm"> <fieldset> <legend> <span class="contactarrow">>>> </span>Contact </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>
-
Apr 30, 2004, 22:54 #21
- Join Date
- Sep 2003
- Location
- Texas
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by redux
HTH,
CK
Bookmarks