mozilla
Your Search Results

    fieldset 要素

    概要

    fieldset 要素<fieldset>)は label 要素(<label>)の様な役割に加え、フォーム内部品のグループ化の働きをします。

    属性

    他の全ての要素と同様に、この要素はグローバル属性をサポートしています。

    disabled HTML5
    この論理型属性が指定されている場合、その子孫要素として配置したフォーム・コントロールは <legend> を除いて全て無効となり、編集不能となります。これらはマウスクリックやフォーカス等で発生する様なブラウザの全てのイベントを受け付けなくなります。多くのデフォルトスタイルは、これをグレー背景など、操作不能である事を伝える意匠で描画します。
    form HTML5
    関連する <form> 要素の id 属性を指定し、これと自身を結び付けます。(関連する form 要素の子孫要素として配置されている場合、)初期値は祖先要素の内で直近の <form> 要素の id となります。 【訳注: HTML5 で導入されたこの属性により、form 要素のフォーム・コントロールを その form 要素外に配置可能になりました。】
    name HTML5
    fieldset 要素が示すフォーム・コントロールのグループの名前
    fieldset 要素自身のラベルの役割は、その最初の子要素として配置した <legend> 要素が担います。

    例 1: fieldset、legend、label を持つ fieldset

    <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>

    例 2: ラジオボタンテキストボックスfieldset により、編集可能な <select> をシミュレート

    以下の例は、HTML と CSS だけで作成しました。JavaScript コードはありません。

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Editable [pseudo]select</title>
    <style type="text/css">
    
    /* 一般的なフォームフィールド */
    
    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;
    }
    
    /* 編集可能な [擬似]select (すなわち [class=elist] である fieldsets) */
    
    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>
    

    動作例を見る

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard Living Standard  
    HTML5 勧告候補  
    HTML 4.01 Specification 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート (有) 1.0 (1.7 or earlier) (有) (有) (有)
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート (有) 1.0 (1.0) (有) (有) (有)

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: yyss, ethertank
    最終更新者: yyss,