diff options
Diffstat (limited to 'files/de/web/html/element/fieldset/index.html')
| -rw-r--r-- | files/de/web/html/element/fieldset/index.html | 489 |
1 files changed, 489 insertions, 0 deletions
diff --git a/files/de/web/html/element/fieldset/index.html b/files/de/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..c901ee0dc3 --- /dev/null +++ b/files/de/web/html/element/fieldset/index.html @@ -0,0 +1,489 @@ +--- +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 <fieldset> -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 <legend>, 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"><form action="test.php" method="post"> + <fieldset> + <legend>Title</legend> + <input type="radio" id="radio"> + <label for="radio">Click me</label> + </fieldset> +</form></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"><!doctype html> +<html> +<head> +<meta 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/// + wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQ + ABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53 + NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11Dw + kzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17O + AsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYU + oTQBBAQHxgE0wZcfMtDRMi/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 method="get" action="test.php"> + +<fieldset> + <legend>Order a T-Shirt</legend> + <p>Write your name (simple textbox): + <input type="text" /></p> + <p>Choose your size (simple select): + <select> + <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" value="1" + id="address-switch_1" checked + /><label for="address-switch_1" + ><input type="text" + value="19 Quaker Ridge Rd. Bethel CT 06801" + /></label></li> + <li><input type="radio" value="2" + id="address-switch_2" + /><label for="address-switch_2" + ><input type="text" + value="1000 Coney Island Ave. + Brooklyn NY 11230" + /></label></li> + <li><input type="radio" value="3" + id="address-switch_3" + /><label for="address-switch_3" + ><input type="text" + value="2962 Dunedin Cv. Germantown TN 38138" + /></label></li> + <li><input type="radio" value="4" + id="address-switch_4" + /><label for="address-switch_4" + ><input type="text" + value="915 E 7th St. Apt 6L. Brooklyn NY 11230" + /></label></li> + </ul> + </fieldset> + </div> + <p>Write a comment:<br /> + <textarea></textarea></p> + <p><input type="reset" value="Reset" /> + <input type="submit" value="Send!" /></p> +</fieldset> + +</form> + +</body> +</html> +</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', '<fieldset>')</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', '<fieldset>')</td> + <td>Spec2('HTML5 W3C')</td> + <td> </td> + </tr> + <tr> + <td>SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')</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> |