Legend tag

Incorporating legend in html?

[max4]

Hi,

I'll admit, I know very little when it comes to CSS. I recently stumbled upon the <fieldset> <legend> tags and thought, "This is exactly what I need to clean up these forms." The problem is, I have no idea how to incorporate them into my existing forms. Here is an example of what we're looking at:

<tr>
<td width="100%" align="left" bgcolor="#FFF8E8" valign="middle" colspan="2" style="padding-left:14px;"><b>Specify result preferences:</b></td>
</tr>
<tr>
<td width="50%" align="left" bgcolor="#FFF8E8" valign="middle" style="padding-left:14px;">&nbsp;Type of post:</td>
<td width="50%" align="left" bgcolor="#FFF8E8" valign="middle"><select name="component-select" class="selecta"><OPTION selected value="Component_1_a">View All</OPTION><OPTION>Other</OPTION></select></td>
</tr>
<tr>
<td width="50%" align="left" bgcolor="#FFF8E8" valign="middle" style="padding-left:14px;">&nbsp;Sort results:</td>
<td width="50%" align="left" bgcolor="#FFF8E8" valign="middle"><select name="component-select" class="selecta"><OPTION selected value="Component_1_a">Any Order</OPTION><option>Newest First</OPTION><OPTION>Oldest First</OPTION><OPTION>Most Popular</OPTION></select></td>
</tr>

How can I modify the above code to set 'specify result preferences' as the legend and the two select boxes inside the 'legend;' and then being able to insert the code into it's respective table without breaking the html? I don't mind if most of the html above must be bypassed or replaced.

Much thanks in advance,
Max

[Setek]

Starting from scratch is a good idea :) This is how I would write the HTML:

<fieldset>
--<legend>Specify result preferences:</legend>

--<dl>
----<dt><label for="post-type">Type of post:</label></dt>
----<dd><select id="post-type" name="component-select">
--------<option value="Rar">Rar</option>
------</select></dd>
----<dt><label for="sort-results">Sort results:</label></dt>
----<dd><select id="sort-results" name="sort">
--------<option value="any">Any order</option>
------</select></dd>
--</dl>
</fieldset>

(removing the hyphens, they're just for tabbed code.)

Do you think you can match that code with CSS to do the same as was there originally?

[max4]

Thanks for the reply Setek,

I was able to combine the code with my table and have it display properly. The only problem I ran into was my borders being removed, but I could fix this with yet another table (so a table, within a table, within a table).

With my current knowledge base of CSS I would not be able to match the code to have it function as originally intended (i.e. label to the left and field to the right). The more I learn about CSS however, the more I feel the need to learn it.

Max