path: root/files/de/web/html/element/fieldset/index.html

---
title: <fieldset>
slug: Web/HTML/Element/fieldset
translation_of: Web/HTML/Element/fieldset
---
<div>HTMLRef</div>

<p><span id="result_box" lang="de"><span>Das <strong>HTML &lt;fieldset&gt; -Element</strong> wird verwendet, um mehrere Steuerelemente sowie Bezeichnungen (HTMLElement ("label")) in einem Webformular zu gruppieren. </span> </span></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Inhaltsverzeichnis</th>
   <td>fließender-Inhalt, sektion Wurzel, gelistete, formordnender Element, eindeutiger Inhalt.</td>
  </tr>
  <tr>
   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubter Inhalt</span></span></th>
   <td><span id="result_box" lang="de"><span>Ein optionales HTMLElement &lt;legend&gt;, gefolgt von einem fließendem Inhalt.</span></span></td>
  </tr>
  <tr>
   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Tag-Auslassung</span></span></th>
   <td>Keine</td>
  </tr>
  <tr>
   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubte Eltern</span></span></th>
   <td><span class="short_text" id="result_box" lang="de"><span>Jedes Element, das den flow content akzeptiert.</span></span></td>
  </tr>
  <tr>
   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th>
   <td>ARIARole("group"), ARIARole("presentation")</td>
  </tr>
  <tr>
   <th scope="row">DOM Schnittstelle</th>
   <td>{{domxref("HTMLFieldSetElement")}}</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Anmerkung:</strong> <span id="result_box" lang="de"><span>Im Gegensatz zu fast jedem anderen Element schlägt die WHATWG-HTML-Rendering-Spezifikation cssxref ("min-width") vor: min-content als Teil des Standardstils für HTMLElement ("fieldset") und viele Browser implementieren</span> <span>solches Styling (oder etwas, das es annähert).</span></span></p>
</div>

<div class="note">
<p><strong>Anmerkung:</strong> <span id="result_box" lang="de"><span>Mit dem Element HTMLElement ("fieldset") wird erwartet, dass es einen neuen Kontext für die Blockformatierung herstellt (siehe HTML5-Spezifikation).</span></span></p>
</div>

<h2 id="Attribute">Attribute</h2>

<p><span class="short_text" id="result_box" lang="de"><span>Dieses Element enthält die globalen Attribute.</span></span></p>

<dl>
 <dt>htmlattrdef("disabled") HTMLVersionInline(5)</dt>
 <dd><span id="result_box" lang="de"><span>Wenn dieses boolesche Attribut gesetzt ist, sind die Formularsteuerelemente, die seine Nachfolger sind, mit Ausnahme der Nachfolger des ersten optionalen Elements HTMLElement ("legend"), deaktiviert, d.h. nicht editierbar.</span> <span>Sie erhalten keine Browserereignisse wie Mausklicks oder Fokus-bezogene Ereignisse.</span> <span>Oft zeigen Browser solche Steuerelemente als grau an.</span></span></dd>
 <dt>htmlattrdef("form") HTMLVersionInline(5)</dt>
 <dd><span id="result_box" lang="de"><span>Dieses Attribut hat den Wert des id-Attributs des HTMLElement ("form") , mit dem es verknüpft ist.</span> <span>Ihr Standardwert ist die ID des nächsten HTMLElement ("Formular") , von dem sie abstammt.</span></span></dd>
 <dt>htmlattrdef("name") HTMLVersionInline(5)</dt>
 <dd><span class="short_text" id="result_box" lang="de"><span>Der Name, der der Gruppe zugeordnet ist</span></span><br>

 <div class="note"><span id="result_box" lang="de"><span>Die Bezeichnung für das Feldset wird durch das erste HTMLElement ("legend") angegeben, das ein untergeordnetes Element(Kind Element) dieses Feldsatzes ist.</span></span></div>
 </dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Example_1_Form_with_fieldset_legend_and_label">Example #1: Form with fieldset, legend, and label</h3>

<pre class="brush: html">&lt;form action="test.php" method="post"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Title&lt;/legend&gt;
    &lt;input type="radio" id="radio"&gt;
    &lt;label for="radio"&gt;Click me&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<h3 id="Example_2_Simulieren_eines_editierbaren_HTMLElement_(select)_durch_ein_Feldset_von_Radioboxen_und_Textboxen_*">Example #2: <span id="result_box" lang="de"><span>Simulieren eines editierbaren HTMLElement ("select") durch ein Feldset von Radioboxen und Textboxen *</span></span></h3>

<p><span id="result_box" lang="de"><span>Das folgende Beispiel besteht aus reinem HTML und CSS.</span> <span>Es gibt keinen JavaScript-Code.</span></span></p>

<p><span id="result_box" lang="de"><span>Seien Sie gewarnt, dass Bildschirmleser und Hilfsgeräte das folgende Formular nicht korrekt interpretieren.</span> <span>Dieses Beispiel wäre ungültiger HTML-Code, wenn die richtigen Elemente verwendet würden.</span></span></p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;Editable [pseudo]select&lt;/title&gt;
&lt;style type="text/css"&gt;

/* Generic form fields */

fieldset.elist, input[type="text"], textarea, select,
option, fieldset.elist ul, fieldset.elist &gt; legend,
fieldset.elist input[type="text"],
fieldset.elist &gt; 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 &gt; legend {
  border: 2px #cccccc solid;
  border-radius: 10px;
}

input[type="text"], fieldset.elist, select,
fieldset.elist &gt; legend {
  height: 32px;
  font-family: Tahoma;
  font-size: 14px;
}

input[type="text"]:hover, textarea:hover,
select:hover, fieldset.elist:hover &gt; legend {
  background-color: #ddddff;
}

select {
  padding: 4px 20px;
}

option {
  height: 30px;
  padding: 5px 4px;
}

option:not(:checked), textarea:focus {
  background-color: #ffcccc;
}

fieldset.elist &gt; 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///
  wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQ
  ABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53
  NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11Dw
  kzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17O
  AsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYU
  oTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7")
  no-repeat 2px center !important;
}

input[type="text"]:focus, textarea:focus,
select:focus, fieldset.elist &gt; 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 &gt; 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 &gt; 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 &gt; legend {
  position: relative;
  overflow: hidden;
}

fieldset.elist &gt; legend:after {
  width: 20px;
  content: "\2335";
  float: right;
  text-align: center;
  border-left: 2px #cccccc solid;
  font-style: normal;
  cursor: default;
}

fieldset.elist:hover &gt; 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;
}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;form method="get" action="test.php"&gt;

&lt;fieldset&gt;
    &lt;legend&gt;Order a T-Shirt&lt;/legend&gt;
    &lt;p&gt;Write your name (simple textbox):
    &lt;input type="text" /&gt;&lt;/p&gt;
    &lt;p&gt;Choose your size (simple select):
    &lt;select&gt;
        &lt;option value="s"&gt;Small&lt;/option&gt;
        &lt;option value="m"&gt;Medium&lt;/option&gt;
        &lt;option value="l"&gt;Large&lt;/option&gt;
        &lt;option value="xl"&gt;Extra Large&lt;/option&gt;
    &lt;/select&gt;&lt;/p&gt;
    &lt;div&gt;What address do you want to use?
    (editable pseudoselect)
    &lt;fieldset class="elist"&gt;
        &lt;legend&gt;Address&amp;hellip;&lt;/legend&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;input type="radio" value="1"
            id="address-switch_1" checked
            /&gt;&lt;label for="address-switch_1"
            &gt;&lt;input type="text"
            value="19 Quaker Ridge Rd. Bethel CT 06801"
            /&gt;&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;input type="radio" value="2"
            id="address-switch_2"
            /&gt;&lt;label for="address-switch_2"
            &gt;&lt;input type="text"
            value="1000 Coney Island Ave.
            Brooklyn NY 11230"
            /&gt;&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;input type="radio" value="3"
            id="address-switch_3"
            /&gt;&lt;label for="address-switch_3"
            &gt;&lt;input type="text"
            value="2962 Dunedin Cv. Germantown TN 38138"
            /&gt;&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;input type="radio" value="4"
            id="address-switch_4"
            /&gt;&lt;label for="address-switch_4"
            &gt;&lt;input type="text"
            value="915 E 7th St. Apt 6L. Brooklyn NY 11230"
            /&gt;&lt;/label&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/fieldset&gt;
    &lt;/div&gt;
    &lt;p&gt;Write a comment:&lt;br /&gt;
    &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type="reset" value="Reset" /&gt;
    &lt;input type="submit" value="Send!" /&gt;&lt;/p&gt;
&lt;/fieldset&gt;

&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Betrachten Sie dieses Beispiel in Aktion.</p>

<h2 id="Spezifikation">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')</td>
   <td>Spec2('HTML WHATWG')</td>
   <td>Definition of the <code>fieldset</code> element</td>
  </tr>
  <tr>
   <td>SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')</td>
   <td>Spec2('HTML WHATWG')</td>
   <td>Suggested default rendering of the <code>fieldset</code> and <code>legend</code> elements</td>
  </tr>
  <tr>
   <td>SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')</td>
   <td>Spec2('HTML5 W3C')</td>
   <td> </td>
  </tr>
  <tr>
   <td>SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')</td>
   <td>Spec2('HTML4.01')</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>disabled</code> attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>12</td>
   <td>6</td>
  </tr>
  <tr>
   <td>Establish a new block formatting</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>disabled</code> attribute</td>
   <td>4.4</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>6.0</td>
  </tr>
  <tr>
   <td>Establish a new block formatting</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] <span id="result_box" lang="de"><span>Nicht alle Formularsteuerungsnachkommen eines deaktivierten Fieldsets sind in IE11 ordnungsgemäß deaktiviert.</span> <span>siehe IE Bug 817488: Eingabe [Typ = "Datei"] nicht deaktiviert in deaktiviertem Feldset und IE Bug 962368: Kann Eingabe [Typ = "Text"] innerhalb von Feldset [deaktiviert] bearbeiten.</span></span></p>

<h2 id="Bugs">Bugs</h2>

<ul>
 <li><a href="https://bugs.webkit.org/show_bug.cgi?id=123507">WebKit bug 123507</a> - <code>min-width: {{cssxref("-webkit-min-content")}}</code> on fieldset</li>
 <li><span id="result_box" lang="de"><span>StackOverflow-Diskussion mit Workarounds für die oben genannten Fehler</span></span></li>
</ul>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Andere form-bezogene Elemente: HTMLElement("form"), HTMLElement("legend"), HTMLElement("label"), HTMLElement("button"), HTMLElement("select"), HTMLElement("datalist"), HTMLElement("optgroup"), HTMLElement("option"), HTMLElement("textarea"), HTMLElement("keygen"), HTMLElement("input"), HTMLElement("output"), HTMLElement("progress") and HTMLElement("meter").</li>
</ul>