1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: <optgroup>
slug: Web/HTML/Element/optgroup
tags:
- Element
- HTML
- HTML Formulare
- Referenz
- Web
translation_of: Web/HTML/Element/optgroup
---
<h2 id="Übersicht">Übersicht</h2>
<p>In einem Webformular erstellt das <code><optgroup></code> HTML Element eine Gruppe von Optionen innerhalb eines {{HTMLElement("select")}} Elements.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien" title="HTML/Content_categories">Inhaltskategorien</a></th>
<td>Keine</td>
</tr>
<tr>
<th scope="row">Erlaubter Inhalt</th>
<td>Keine oder mehrere {{HTMLElement("option")}} Elemente.</td>
</tr>
<tr>
<th scope="row">Tag Auslassung</th>
<td>Der Starttag ist zwingend. Der Endtag ist optional, falls dem Element direkt ein weiteres <span style="font-family: courier new;"><optgroup></span> Element folgt oder falls das Elternelement keine weiteren Inhalte hat.</td>
</tr>
<tr>
<th scope="row">Erlaubte Elternelemente</th>
<td>Ein {{HTMLElement("select")}} Element.</td>
</tr>
<tr>
<th scope="row">DOM Schnittstelle</th>
<td>{{domxref("HTMLOptGroupElement")}}</td>
</tr>
</tbody>
</table>
<p>{{Note("<code><optgroup></code> Elemente können nicht verschachtelt werden.")}}</p>
<h2 id="Attribute">Attribute</h2>
<p>Dieses Element beinhaltet die <a href="/de/docs/Web/HTML/Globale_Attribute" title="HTML/Global attributes">globalen Attribute</a>.</p>
<dl>
<dt>{{htmlattrdef("disabled")}}</dt>
<dd>Falls dieses boolsche Attribut gesetzt ist, ist keines der Optionsgruppenelemente auswählbar. Oft grauen Browser diese Optionen aus und sie erhalten keine Ereignisse wie Mausklicks oder Fokus bezogene Ereignisse.</dd>
<dt>{{htmlattrdef("label")}}</dt>
<dd>Der Name der Optionsgruppe, welchen der Browser verwenden kann, um die Optionen in der Benutzerschnittstelle zu beschreiben. Dieses Attribut ist zwingend, falls dieses Element benutzt wird.</dd>
</dl>
<h2 id="Beispiel">Beispiel</h2>
<pre class="brush: html"><select>
<optgroup label="Gruppe 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Gruppe 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Gruppe 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
</pre>
<h3 id="Ergebnis">Ergebnis</h3>
<p>{{EmbedLiveSample("Beispiel")}}</p>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '<optgroup>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>1.0</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>Merkmal</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Andere Formular bezogene Elemente: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
</ul>
<p>{{HTMLRef}}</p>
|
