How to Achieve a <Fieldset>-Like Effect Without Using The <Fieldset> Tag

Is it possible to achieve a fieldset-like effect without using the fieldset tag?

No, it isn't really possible. Even browser makers themselves are struggling with that.

Of course, I couldn't resist having a go at it anyway. And I spent so much time on that, that Anonymous came up with a "solution" rather similar to mine in the mean time (his test1). But mine doesn't need the fixed width "legend".

This code is evidently a bit of a hack, though, and I don't know how well it'll fare in complex sites. I also agree with Anonymous that using a fieldset for grouping isn't nearly as bad as using tables for layout. Fieldsets were designed for grouping elements, though in HTML they're really only supposed to be used for grouping form controls.

.fieldset {  border: 2px groove threedface;  border-top: none;  padding: 0.5em;  margin: 1em 2px;}
.fieldset>h1 { font: 1em normal; margin: -1em -0.5em 0;}
.fieldset>h1>span { float: left;}
.fieldset>h1:before { border-top: 2px groove threedface; content: ' '; float: left; margin: 0.5em 2px 0 -1px; width: 0.75em;}
.fieldset>h1:after { border-top: 2px groove threedface; content: ' '; display: block; height: 1.5em; left: 2px; margin: 0 1px 0 0; overflow: hidden; position: relative; top: 0.5em;}
<fieldset>  <legend>Legend</legend> Fieldset</fieldset>
<div class="fieldset"> <h1><span>Legend</span></h1> Fieldset</div>

Is it wrong to use the fieldset tag without form tag?

It's valid HTML5. Paste the following HTML at the validator: http://validator.w3.org/check:

<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<fieldset> <legend>Test</legend> </fieldset>
</body>
</html>

It's also valid HTML4. Replace <!DOCTYPE html> with the following, and it still passes the validation:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Does the use of the fieldset HTML tag have meaning beyond grouping forms?

I can see semantic advantages to blocking content into fieldsets with legends.

Although the W3C associated the use of fieldsets and legends with forms, allowing the use outside the form tag opens up new boundaries to experimentation. Potentially similar to definition list in use.

I personally do not think that the "field" in fieldset is specific to form field. It just inherited relationship from it's use within the form tag.
field is in reference to the grouping.

Imagine going to your local parks and recreation to play softball with your friends. There are 3 available fields. All of them are have signs on the fence "BASEBALL ONLY"

Do you pack up your gear and go home?

labeling the use of fieldsets and legends outside the form tag abuse is narrow sighted.

No where in the definition does it mention forms:

The FIELDSET element allows authors to
group thematically related controls
and labels. Grouping controls makes it
easier for users to understand their
purpose while simultaneously
facilitating tabbing navigation for
visual user agents and speech
navigation for speech-oriented user
agents. The proper use of this element
makes documents more accessible.

I consider xhtml tags formatting control. div p blockquote etc.

<h1>The Big Book about Everything</h1>
<fieldset>
<legend>Jokes</legend>
<h2>30 pages of humorous Jokes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Poems</legend>
<h2>20 pages of well written poems</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Horror</legend>
<h2>3 Short and scary stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Mystery</legend>
<h2>3 Short and mysterious stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>

Does fieldset have to be in a form?

I think the question and chosen answer in this question are misleading. Whether or not a form has to have a fieldset, and whether or not a fieldset has to be in a form are two different questions with two different answers.

According to the HTML4.01 spec, a fieldset is a valid element inside of a form, but as it is a standard block-level element, it is also acceptable elsewhere:
http://www.w3.org/TR/html401/interact/forms.html#h-17.10
http://www.w3.org/TR/html401/sgml/dtd.html#block

I can not, however, imagine a use case where this would be done, unless you are using the fieldset for decorating, which would be incorrect usage.

A form however, does not require a fieldset:
http://www.w3.org/TR/html401/interact/forms.html#h-17.3

Why do we need a fieldset tag?

The most obvious, practical example is:

<fieldset>
<legend>Colour</legend>

<input type="radio" name="colour" value="red" id="colour_red">
<label for="colour_red">Red</label>

<input type="radio" name="colour" value="green" id="colour_green">
<label for="colour_green">Green</label>

<input type="radio" name="colour" value="blue" id="colour_blue">
<label for="colour_blue">Blue</label>

</fieldset>

How to show the fieldset border through a section of the label?

background can approximate this without an extra div. You simply need to find the correct color:

fieldset {
border: 1px solid black;
}

legend {
display: flex;
justify-content: space-between;
width: 100%;
background: linear-gradient(black 0 0)center/100% 1px no-repeat;
}

legend div {
background-color: white;
padding:0 0.5em;
}
<form>
<fieldset>
<legend>
<div>Form Item</div>
<div>(extra 1)</div>
</legend>
<label>Input:</label><input>
</fieldset>
</form>


Related Topics



Leave a reply



Submit