www.webdeveloper.com
Results 1 to 6 of 6

Thread: Multiple fieldsets

  1. #1
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134

    Multiple fieldsets

    How would one have multiple fieldset with multiple columns, while having the colums all the same width?

    I know that the following is not valid...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    <title>Untitled</title>
    </head>
    
    <body>
    <table>
    	<fieldset>
    		<legend>First</legend>
    		<tr>
    			<td>a</td>
    			<td>b</td>
    		</tr>
    	</fieldset>
    	<fieldset>
    		<legend>Second</legend>
    		<tr>
    			<td>c</td>
    			<td>d</td>
    		</tr>
    	</fieldset>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    1) What's with the transitional DTD? For that matter what's with the XHTML? Consider using HTML 4.01 Strict.

    2) Your FIELDSET elements need to be contained by a FORM element.

    3) Do not use TABLEs for layout. Use instead CSS. Something like

    <style type="text/css">
    fieldset {display:block; margin:0; width:%50}
    </style>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Jun 2004
    Location
    Southern California
    Posts
    189

    Re: Multiple fieldsets

    Nothing wrong w/ tables if it's for tabular data. Pages validate without having fieldsets inside form tags. It is, though, going against the intended purpose of <fieldset> if one does not use it to group form elements.

    How about this?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Additional generic page title</title>
    </head>
    <body>
    <fieldset><legend>First</legend><table><tr>
    <th>Column description 1</th>
    <th>Column description 2</th>
    <th>Column description 3</th>
    </tr><tr>
    <td>Tabular data</td>
    <td>Tabular data</td>
    <td>Tabular data</td>
    </tr><tr>
    <td>Tabular data</td>
    <td>Tabular data</td>
    <td>Tabular data</td>
    </tr></table></fieldset>
    <fieldset><legend>Second</legend><table><tr>
    <th>Column description 1</th>
    <th>Column description 2</th>
    <th>Column description 3</th>
    </tr><tr>
    <td>Tabular data</td>
    <td>Tabular data</td>
    <td>Tabular data</td>
    </tr><tr>
    <td>Tabular data</td>
    <td>Tabular data</td>
    <td>Tabular data</td>
    </tr></table></fieldset>
    </body>
    </html>

  4. #4
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134
    I'm actually grouping form elements. In each TD, I have a checkbox with a label...

  5. #5
    Join Date
    Jun 2004
    Location
    Southern California
    Posts
    189
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Additional generic page title</title>
    <style type="text/css">
    fieldset{display:inline;}
    </style>
    </head>
    <body>
    <form action="#" method="post">
    <fieldset><legend>Fieldset one</legend><table><tr>
    <td><label for="a"><input type="checkbox" id="a">&nbsp;Checkbox A</td>
    <td><label for="b"><input type="checkbox" id="b">&nbsp;Checkbox B</td>
    </tr><tr>
    <td><label for="c"><input type="checkbox" id="c">&nbsp;Checkbox C</td>
    <td><label for="d"><input type="checkbox" id="d">&nbsp;Checkbox D</td>
    </tr></table></fieldset>
    <fieldset><legend>Fieldset two</legend><table><tr>
    <td><label for="e"><input type="checkbox" id="e">&nbsp;Checkbox E</td>
    <td><label for="f"><input type="checkbox" id="f">&nbsp;Checkbox F</td>
    </tr><tr>
    <td><label for="g"><input type="checkbox" id="g">&nbsp;Checkbox G</td>
    <td><label for="h"><input type="checkbox" id="h">&nbsp;Checkbox H</td>
    </tr></table></fieldset>
    <p><input type="submit" value="Submit form"></p>
    </form>
    </body>
    </html>
    Last edited by heavenly_blue; 01-06-2005 at 03:10 PM.

  6. #6
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134
    This looks exactly like I have now... glad to see I wasn't off by too much

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles