Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    364
    Thanks
    7
    Thanked 1 Time in 1 Post

    Question Using <fieldset><legend> with tables

    I'm designing a web form where I wanna use <fieldset><legend> around a few cells. But it only wraps the heading, not the full desired area. Please tell me how can I make it possible to wrap around various cells of a table. in easy words, I want to use <fieldset><legend> in form designed with tables.
    Here is my code...
    Code:
    <table>
    <tr>
                                <td colspan="4" valign="top" class="tdpad"><fieldset><legend><br>                              <strong>Features:</strong> (Select as many)</legend></td>
                                </tr>
        <tr>
                                <td width="194" valign="top" class="tdpad"><p class="tdpad"><span class="style26">Windows</span><br>
                                      <input name=Pwindows type=checkbox id="Pwindows4" value=Features>
      Power Windows<br>
      <input name=Rdefroster type=checkbox id="Rdefroster4" value=Features>
      Rear Defroster<br>
      <input name=Rwiper 
    type=checkbox id="Rwiper4" value=Features>
      Rear Window Wiper<br>
      <input name=Twindows type=checkbox id="Twindows4" 
    value=Features>
      Tinted Windows<br>
      <span class="style26">Comfort</span><br>
      <input name=AC type=checkbox id="AC2" value=Features>
      Air Conditioning<br>
      <input 
    name=Psteering type=checkbox id="Psteering2" value=Features>
      Power Steering<br>
      <br>
                                </p>                              </td>
                                <td colspan="2" valign="top" class="tdpad">                              <span class="style26">Security</span><br>
                                  <input name=Alarm type=checkbox id="Alarm" value=Features>
    Alarm<br>
    <input name=Keyless 
    type=checkbox id="Keyless" value=Features>
    Keyless Entry<br>
    <input name=Plock 
    type=checkbox id="Plock" value=Features> 
    Power Lock<br>
    <span class="style26">Safety</span><br>
    <input name="Dairbag" type="checkbox" id="Dairbag2" value="Features">
    Driver Airbag<br>
    <input name="Pairbag" type="checkbox" id="Pairbag2" value="Features">
    Passenger Airbag<br>
    <input name="Fog" type="checkbox" id="Fog2" value="Features">
    Fog Lights<br>
    <br></td>
                                <td width="195" valign="top" class="tdpad"><span class="style26">Sound</span><br>
                                  <input name=Radio 
    type=checkbox id="Radio2" value=Features>
    AM/FM Radio<br>
    <input 
    name=Cassete type=checkbox id="Cassete2" value=Features>
    Cassette Player<br>
    <input name=CDplayer type=checkbox id="CDplayer2" value=Features>
    CD Player<br>
    
    <span class="style26">Other Features</span><br>
    <input name=Roof 
    type=checkbox id="Roof2" value=Features>
    Sunroof<br>
    <input name=Arims type=checkbox id="Arims2" value=Features>
    Alloy Rims <br>
    <input name=Nsystem 
    type=checkbox id="Nsystem2" value=Features>
    Navigation System<br>
    <br></fieldset></td>
                                </tr>
    </table>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Structure

    You are intermixing form and table markup (where are the form tags, anyway?). Since only td's can hold other elements, you should restrict layout table use to within to form--and even within the fieldset--or not use layout tables at all.

    A idea of how you want your form to appear would certainly help.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    364
    Thanks
    7
    Thanked 1 Time in 1 Post
    please tell me how can I wrap the Fieldset around the cells ???

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Breakdown

    This is basically what you end up with after removing all the table markup:
    Code:
    <form>
    <fieldset>
    	<legend><br><strong>Features:</strong> (Select as many)</legend>
    		<p class="tdpad">
    			<span class="style26">Windows</span><br>
    			<input name=Pwindows type=checkbox id="Pwindows4" value=Features>Power Windows<br>
    			<input name=Rdefroster type=checkbox id="Rdefroster4" value=Features>Rear Defroster<br>
    			<input name=Rwiper type=checkbox id="Rwiper4" value=Features>Rear Window Wiper<br>
    			<input name=Twindows type=checkbox id="Twindows4" value=Features>Tinted Windows<br>
    			<span class="style26">Comfort</span><br>
    			<input name=AC type=checkbox id="AC2" value=Features> Air Conditioning<br>
    			<input name=Psteering type=checkbox id="Psteering2" value=Features> Power Steering<br>
    			<br>
    		</p>
    		<input name=Alarm type=checkbox id="Alarm" value=Features>Alarm<br>
    		<input name=Keyless type=checkbox id="Keyless" value=Features>Keyless Entry<br>
    		<input name=Plock type=checkbox id="Plock" value=Features>Power Lock<br>
    		<span class="style26">Safety</span><br>
    		<input name="Dairbag" type="checkbox" id="Dairbag2" value="Features">Driver Airbag<br>
    		<input name="Pairbag" type="checkbox" id="Pairbag2" value="Features">Passenger Airbag<br>
    		<input name="Fog" type="checkbox" id="Fog2" value="Features">Fog Lights<br>
    		<br>
    		<span class="style26">Sound</span><br>
    		<input name=Radio type=checkbox id="Radio2" value=Features>AM/FM Radio<br>
    		<input name=Cassete type=checkbox id="Cassete2" value=Features>Cassette Player<br>
    		<input name=CDplayer type=checkbox id="CDplayer2" value=Features>CD Player<br>
    		<span class="style26">Other Features</span><br>
    		<input name=Roof type=checkbox id="Roof2" value=Features>Sunroof<br>
    		<input name=Arims type=checkbox id="Arims2" value=Features>Alloy Rims <br>
    		<input name=Nsystem type=checkbox id="Nsystem2" value=Features>Navigation System<br>
    		<br>
    </fieldset>
    </form>
    What you could do, instead of using semantically meaningless spans, is wrap each of these feature sections in their own fieldset:
    Code:
    <form>
    <fieldset id="main">
    	<legend>Features: (Select as many)</legend>
    	<fieldset>
    		<legend>Windows</legend>
    		<input name=Pwindows type=checkbox id="Pwindows4" value=Features>Power Windows<br>
    		<input name=Rdefroster type=checkbox id="Rdefroster4" value=Features>Rear Defroster<br>
    		<input name=Rwiper type=checkbox id="Rwiper4" value=Features>Rear Window Wiper<br>
    		<input name=Twindows type=checkbox id="Twindows4" value=Features>Tinted Windows<br>
    	</fieldset>
    	<fieldset>
    		<legend>Comfort</legend>
    		<input name=AC type=checkbox id="AC2" value=Features> Air Conditioning<br>
    		<input name=Psteering type=checkbox id="Psteering2" value=Features> Power Steering<br>
    		<input name=Alarm type=checkbox id="Alarm" value=Features>Alarm<br>
    		<input name=Keyless type=checkbox id="Keyless" value=Features>Keyless Entry<br>
    		<input name=Plock type=checkbox id="Plock" value=Features>Power Lock<br>
    	</fieldset>
    	<fieldset>
    		<legend>Safety</legend>
    		<input name="Dairbag" type="checkbox" id="Dairbag2" value="Features">Driver Airbag<br>
    		<input name="Pairbag" type="checkbox" id="Pairbag2" value="Features">Passenger Airbag<br>
    		<input name="Fog" type="checkbox" id="Fog2" value="Features">Fog Lights<br>
    	</fieldset>
    	<fieldset>
    		<legend>Sound</legend>
    		<input name=Radio type=checkbox id="Radio2" value=Features>AM/FM Radio<br>
    		<input name=Cassete type=checkbox id="Cassete2" value=Features>Cassette Player<br>
    		<input name=CDplayer type=checkbox id="CDplayer2" value=Features>CD Player<br>
    	</fieldset>
    	<fieldset>
    		<legend>Other Features</legend>
    		<input name=Roof type=checkbox id="Roof2" value=Features>Sunroof<br>
    		<input name=Arims type=checkbox id="Arims2" value=Features>Alloy Rims<br>
    		<input name=Nsystem type=checkbox id="Nsystem2" value=Features>Navigation System<br>
    	</fieldset>
    	<p class="clearer">&nbsp;</p>
    </fieldset>
    </form>
    (I added some tidbits for styling purposes). You could then proceed with adding styles to make it look nice, without the need for tables.

    Edit:
    If you must use tables, the layout table should begin inside the outermost fieldset, and each group of inputs should be inside a td:
    Code:
    <form>
    <fieldset id="main">
    	<legend>Features: (Select as many)</legend>
    	<table>
    		<tr>
    			<td>
    				<fieldset>
    					<legend>Windows</legend>
    					<input ...>
    					<input ...>
    				</fieldset>
    			</td>
    		</tr>
    	<table>
    </fieldset>
    </form>
    Last edited by ronaldb66; 09-20-2006 at 12:37 PM. Reason: Added tables
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    364
    Thanks
    7
    Thanked 1 Time in 1 Post
    Sir,
    I've mentioned b4 that I want such form designing in Tables & Cells.
    I want to wrap all cells & table within a Fieldset. Thats the actual problem.
    Without Tables/Cells, Fieldset is pretty much easy, but I want to use FIELDSET with Table Cells.


  •  

    Posting Permissions

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