Menu
I personally like the <fieldset> tag because of how it draws a box and puts the <legend> at the top of it, over the border. Like this.
However, the fieldset element was made to organize forms, and using it for general design is no better than using tables for general design. So, my question is... how can I achieve the same result using another tag? The border has to be erased under the <legend> (or whatever other tag will be used), and since there could be a "complex" body background image, I can't afford to just set the background-color of the legend to match the one of the element under.
I'd like it to work without JavaScript, but CSS3 and XML-based formats (such as SVG or XHTML) are fine.
932
WAI-ARIA provides a grouping role that functions similarly to fieldset and legend . In this example, the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group.
You can use any form elements outside of an actual form, since most of them can be used with JavaScript utilities outside the form. The form is only needed if you plan on allowing the user to submit the data with it.
You should not use the <fieldset> and <legend> when: You have a single form field that asks for a single piece of information.
The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
Demo jsBin link
.fieldset { border: 1px solid #ddd; margin-top: 1em; width: 500px; } .fieldset h1 { font-size: 12px; text-align: center; } .fieldset h1 span { display: inline; border: 1px solid #ddd; background: #fff; padding: 5px 10px; position: relative; top: -1.3em; }<div class="fieldset"> <h1><span>Title</span></h1> <p>Content</p> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
