Forms are often broken up into various sets of fields. The fieldset tag allows you to logically group sets of fields in order that your forms be more descriptive. You’ll also note that you can use the fieldset to style your forms and display those logical associations between fields. Just like forms you find in … Read more
Legends are special. In particular, their default rendering can’t be described in CSS, so browsers use non-CSS means of rendering them. What that means is that a statically positioned legend will be treated like a legend and be separate from the actual content of the fieldset. The weird doesn’t end there; if you reverse the … Read more
I found that simple float:left for LEGEND will do the job. Codepen sample: http://codepen.io/vkjgr/pen/oFdBa
I think this snippet does exactly what you want. It gives you a Form subclass that allows you to declaratively subdivide your form into fieldsets and iterate through them in your template. Update: that snippet has since become part of django-form-utils
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”>
I believe you are looking for the fieldset HTML tag, which you can then style with CSS. E.g., <fieldset style=”border: 1px black solid”> <legend style=”border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em “>title</legend> Text within the box <br /> Etc </fieldset>
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>
Use display: inline-block, though you need to wrap it inside a DIV to keep it from actually displaying inline. Tested in Safari. <style type=”text/css”> .fieldset-auto-width { display: inline-block; } </style> <div> <fieldset class=”fieldset-auto-width”> <legend>Blah</legend> … </fieldset> </div>
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> This allows each radio button to be labeled while also providing a label for the group as a whole. This is especially important where assistive … Read more
Update (25 Sept 2017) The Firefox bug described below is fixed as of Firefox 53 and the link to this answer has finally been removed from Bootstrap’s documentation. Also, my sincere apologies to the Mozilla contributors who had to block removing support for -moz-document partly due to this answer. The fix In WebKit and Firefox … Read more