mozilla
Your Search Results

    <fieldset>

    Summary

    The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.

    Attributes

    This element includes the global attributes.

    disabled HTML5
    If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional <legend> element, are disabled, i.e., not editable. They won't receive any browsing events, like mouse clicks or focus-related ones. Often browsers display such controls as gray.
    form HTML5
    This attribute has the value of the id attribute of the <form> element its related to. Its default value is the id of the nearest <form> element it is a descendant of.
    name HTML5
    The name associated with the group, which is submitted with the form data.
    The label for the field set is given by the first <legend> element that is a child of this field set.

    Examples

    Example #1: Form with fieldset, legend, and label

    <form action="test.php" method="post">
      <fieldset>
        <legend>Title</legend>
        <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
      </fieldset>
    </form>

    Example #2: Simulating an editable <select> through a fieldset of radioboxes and textboxes*

    The following example is made of pure HTML and CSS. There is no JavaScript code.

    Be warned that screen readers and assistive devices will not interpret the following form correctly; this example would be invalid html if the correct elements were used.

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Editable [pseudo]select</title>
    <style type="text/css">
    
    /* Generic form fields */
    
    fieldset.elist, input[type="text"], textarea, select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    input[type="text"] {
      padding: 0 20px;
    }
    
    textarea {
      width: 500px;
      height: 200px;
      padding: 20px;
    }
    
    textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend {
      border: 2px #cccccc solid;
      border-radius: 10px;
    }
    
    input[type="text"], fieldset.elist, select, fieldset.elist > legend {
      height: 32px;
      font-family: Tahoma;
      font-size: 14px;
    }
    
    input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend {
      background-color: #ddddff;
    }
    
    select {
      padding: 4px 20px;
    }
    
    option {
      height: 30px;
      padding: 5px 4px;
    }
    
    option:not(:checked), textarea:focus {
      background-color: #ffcccc;
    }
    
    fieldset.elist > legend:after, fieldset.elist label {
      height: 28px;
    }
    
    input[type="text"], fieldset.elist {
      width: 316px;
    }
    
    input[type="text"]:focus {
      background: #ffcccc url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7") no-repeat 2px center !important;
    }
    
    input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend {
      border: 2px #ccaaaa solid;
    }
    
    fieldset {
      border: 2px #af3333 solid;
      border-radius: 10px;
    }
    
    /* Editable [pseudo]select (i.e. fieldsets with [class=elist]) */
    
    fieldset.elist {
      display: inline-block;
      position: relative;
      vertical-align: middle;
      overflow: visible;
      padding: 0;
      margin: 0;
      border: none;
    }
    
    fieldset.elist ul {
      position: absolute;
      width: 100%;
      max-height: 320px;
      padding: 0;
      margin: 0;
      overflow: hidden;
      background-color: transparent;
    }
    
    fieldset.elist:hover ul {
      background-color: #ffffff;
      border: 2px #af3333 solid;
      left: 2px;
      overflow: auto;
    }
    
    fieldset.elist ul > li {
      list-style-type: none;
      background-color: transparent;
    }
    
    fieldset.elist label {
      display: none;
      width: 100%;
    }
    
    fieldset.elist input[type="text"] {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border: none;
      background-color: transparent;
      border-radius: 0;
    }
    
    fieldset.elist > legend {
      display: block;
      margin: 0;
      padding: 0 0 0 5px;
      position: absolute;
      width: 100%;
      cursor: default;
      background-color: #ccffcc;
      line-height: 30px;
      font-style: italic;
    }
    
    fieldset.elist:hover > legend {
      position: relative;
      overflow: hidden;
    }
    
    fieldset.elist > legend:after {
      width: 20px;
      content: "\2335";
      float: right;
      text-align: center;
      border-left: 2px #cccccc solid;
      font-style: normal;
      cursor: default;
    }
    
    fieldset.elist:hover > legend:after {
      background-color: #99ff99;
    }
    
    fieldset.elist ul input[type="radio"] {
      display: none;
    }
    
    fieldset.elist input[type="radio"]:checked ~ label {
      display: block;
      width: 292px;
      background-color: #ffffff;
    }
    
    fieldset.elist:hover input[type="radio"]:checked ~ label {
      width: 100%;
    }
    
    fieldset.elist:hover label {
      display: block;
      height: 100%;
    }
    
    fieldset.elist label:hover {
      background-color: #3333ff !important;
    }
    
    fieldset.elist:hover input[type="radio"]:checked ~ label {
      background-color: #aaaaaa;
    }
    
    </style>
    
    </head>
    <body>
    
    <form name="tshirt" method="get" action="test.php">
    
    <fieldset>
        <legend>Order a T-Shirt</legend>
        <p>Write your name (simple textbox): <input type="text" name="myname" /></p>
        <p>Choose your size (simple select):
        <select name="size">
            <option value="s">Small</option>
            <option value="m">Medium</option>
            <option value="l">Large</option>
            <option value="xl">Extra Large</option>
        </select></p>
        <div>What address do you want to use? (editable pseudoselect)
        <fieldset class="elist">
            <legend>Address&hellip;</legend>
            <ul>
                <li><input type="radio" name="address-chosen" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" name="address-item_1" value="19 Quaker Ridge Rd. Bethel CT 06801" /></label></li>
                <li><input type="radio" name="address-chosen" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" name="address-item_2" value="1000 Coney Island Ave. Brooklyn NY 11230" /></label></li>
                <li><input type="radio" name="address-chosen" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" name="address-item_3" value="2962 Dunedin Cv. Germantown TN 38138" /></label></li>
                <li><input type="radio" name="address-chosen" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" name="address-item_4" value="915 E 7th St. Apt 6L. Brooklyn NY 11230" /></label></li>
            </ul>
        </fieldset>
        </div>
        <p>Write a comment:<br />
        <textarea name="comment"></textarea></p>
        <p><input type="reset" value="Reset" /> <input type="submit" value="Send!" /></p>
    </fieldset>
    
    </form>
    
    </body>
    </html>
    

    View this example in action

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    The definition of '<fieldset>' in that specification.
    Living Standard Definition of the fieldset element
    WHATWG HTML Living Standard Living Standard Suggested default rendering of the fieldset and legend elements
    HTML5
    The definition of '<fieldset>' in that specification.
    Recommendation  
    HTML 4.01 Specification
    The definition of '<fieldset>' in that specification.
    Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
    disabled attribute (Yes) (Yes) ? [1] 12 6
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
    disabled attribute 4.4 ? ? ? 6.0

    Notably, unlike almost any other element, the WHATWG HTML Rendering spec suggests min-width: min-content as part of the default style for <fieldset>, and many browsers implement such styling (or something that approximates it).

    [1]: Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type="file"] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type="text"] within fieldset[disabled].

    Bugs

    See also