SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Hybrid View

  1. #1
    SitePoint Wizard jag5311's Avatar
    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

  2. #2
    SitePoint Wizard megamanXplosion's Avatar
    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.

  3. #3
    SitePoint Wizard bronze trophy
    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.


  4. #4
    gimme the uuuuuuuuuuu duuudie's Avatar
    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


  5. #5
    Also available in Large Si's Avatar
    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!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bigsi
    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 .

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    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.


  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by compuwhiz7
    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.

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    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 *

  10. #10
    SitePoint Wizard jag5311's Avatar
    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

  11. #11
    SitePoint Wizard megamanXplosion's Avatar
    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

  12. #12
    SitePoint Wizard jag5311's Avatar
    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

  13. #13
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  14. #14
    gingham dress, army boots... silver trophy redux's Avatar
    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

  15. #15
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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...
    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

  16. #16
    SitePoint Wizard jag5311's Avatar
    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>
    ??

  17. #17
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope:

    HTML Code:
    <!--...-->
    <form>
         <fieldset>
              <legend></legend>
              <!--...-->
         </fieldset>
    </form>
    <!--...-->

  18. #18
    SitePoint Wizard jag5311's Avatar
    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?

  19. #19
    SitePoint Wizard bronze trophy
    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>

  20. #20
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    compuwhiz7's right, fieldset goes inside the form, legend goes inside the fieldset .

  21. #21
    SitePoint Wizard jag5311's Avatar
    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>&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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •