Is Fieldset and Legend without Form legal

Forum Moderators: open

Message Too Old, No Replies

Is Fieldset and Legend without Form legal

Google search conflicts

Clark

4:09 am on May 18, 2009 (gmt 0)

Are fieldset and legend tags REQUIRED to be inside of Form tags? I looked it up on W3C's site, and while they do say that it's meant to group form controls, they don't specifically state that a form tag is required around it.

Googling this question, some people seem to think it's legal.

Does anyone here know for sure? Can we get an official/definitive answer?

bill

4:40 am on May 18, 2009 (gmt 0)

I've only used them within <form> tags. How would you use a <fieldset> outside a form? A fieldset is supposed to group elements within a form.

Clark

6:29 pm on May 18, 2009 (gmt 0)

I'd use them like a div because the formatting is pretty cool and requires much less code than grouping them w/ a div and having the label appear over and in middle of the top line using css.

swa66

8:50 pm on May 18, 2009 (gmt 0)

As far as I remember form past discussions: it's legal according to the letter of the standard and the DTD also makes it valid where a block element is valid.

Now as to intend, that's harder to determine, it feels to me to be intended to be used in forms only. I don't know why it got the far wider scope.

Also note that -despite the CSS standard not stating it should- a fieldset creates a new stacking context (logical if you think about it and the default way it's rendered, but not mentioned in the standard AFAIK).

IMHO extensive use of it outside forms and/or reliance on the new stacking context are dangerous if you want future proof code.

Clark

10:05 pm on May 18, 2009 (gmt 0)

Thanks swa66. Hmm...stacking context? New phrase on me.

swa66

12:48 am on May 19, 2009 (gmt 0)

Stacking context is best described here:
[developer.mozilla.org...]

Note this is one of those cases where legacy IE versions completely miss the ball (and probably a reason so few know how it should work).

Block formatting context is how the standard describes it:
[w3.org...]
[w3.org...]
[w3.org...]

If you ever wondered why a normal border goes under a float while a fieldset's border doesn't, this is why.

Clark

3:48 am on May 19, 2009 (gmt 0)

That was very interesting. This turned out to be a very fruitful thread. Indeed I've had z-index issues in the past that I couldn't figure out and now I know why.

birdbrain

8:45 am on May 19, 2009 (gmt 0)

I'd use them like a div because the formatting is pretty cool and requires much
less code than grouping them w/ a div and having the label appear over and in
middle of the top line using css.

The coding for a div is pretty minimal...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#fieldset {
 width:400px;
 border:3px double #999;
 padding:20px;
 margin:50px auto;
 font-size:1em;
 }
#fieldset span{
 position:relative;
 padding:4px 8px;;
 border:1px solid #999;
 top:-30px;
 left:20px;
 background-color:#fff;
 font-size:0.9em;
 color:#300;
 }
#fieldset p {
 margin:-10px 0 0;
 }
</style>
</head>
<body>
<div id="fieldset">
<span >Lorem ipsum</span>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
</div>
</body>
</html>

birdbrain

Clark

2:38 pm on May 19, 2009 (gmt 0)

Thanks birdbrain I'll have to try that out.

birdbrain

5:18 pm on May 19, 2009 (gmt 0)

No problem, you're very welcome. ;)

swa66

8:37 am on May 20, 2009 (gmt 0)

To give you a slight alternative to birdbrain's code above: you could set the #fieldset to have position:relative . This gives the div "position" and -legacy IE aside- should not have any effect on how it's rendered. But all absolutely positioned children will now reference their position from this parent (they chose the closest parent that has position or lack therefo they use the viewport)

And then obviously use absolute positioning on the span inside.

Added bonuses would be to not have the space originally reserved for the span to be empty and the ability to have the span anywhere in the parent, no need to have it at the top).