homepage Welcome to WebmasterWorld Guest from 54.226.0.225
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Is Fieldset and Legend without Form legal
Google search conflicts
Clark




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




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




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




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




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

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

swa66




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




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




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




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

Thanks birdbrain I'll have to try that out.

birdbrain




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

No problem, you're very welcome. ;)

swa66




msg:3917015
 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).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved