mozilla
Your Search Results

    <fieldset> Redirect 1

    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.

    <!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 Living Standard  
    HTML5 Candidate Recommendation  
    HTML 4.01 Specification Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,