...

View Full Version : Using <fieldset><legend> with tables



Uzair
09-20-2006, 07:28 AM
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...

<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>

ronaldb66
09-20-2006, 08:33 AM
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.

Uzair
09-20-2006, 09:04 AM
please tell me how can I wrap the Fieldset around the cells ???

ronaldb66
09-20-2006, 12:23 PM
This is basically what you end up with after removing all the table markup:

<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:

<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.


If you must use tables, the layout table should begin inside the outermost fieldset, and each group of inputs should be inside a td:

<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>

Uzair
09-20-2006, 12:30 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum