diff options
Diffstat (limited to 'files/de/web/html/element/input/checkbox/index.html')
| -rw-r--r-- | files/de/web/html/element/input/checkbox/index.html | 352 |
1 files changed, 352 insertions, 0 deletions
diff --git a/files/de/web/html/element/input/checkbox/index.html b/files/de/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..5d2af0d966 --- /dev/null +++ b/files/de/web/html/element/input/checkbox/index.html @@ -0,0 +1,352 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +tags: + - Element + - HTML + - HTML forms + - Input + - Input Types + - Reference + - checkbox + - form +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement("input")}}-Elemente vom Typ <strong><code>checkbox</code></strong> werden standardmäßig als Kästchen gerendert, die mit einem Häkchen versehen (angeklickt) sind, wenn sie aktiviert sind, ähnlich wie man es von offiziellen Formularen kennt. Das exakte Erscheinungsbild hängt vom System ab, auf dem der Browser läuft. Normalerweise ist es ein Quadrat aber es kann auch abgerundete Ecken haben. Eine Checkbox erlaubt die Auswahl eines einzelnen Wertes zur Übertragung in einer Form (oder nicht).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<div class="note"> +<p><strong>Anmerkung</strong>: <a href="/en-US/docs/Web/HTML/Element/input/radio">Radio buttons</a> sind Checkboxen ähnlich, jedoch mit einer wichtigen Ausnahme - Radiobuttons sind in einem Satz gruppiert, in dem nur ein Radiobutton aktiviert sein kann, während Checkboxen es erlauben, einen einzelnen Wert an- und auszuschalten. Dort wo mehrere Steuerelemente exisiteren, erlauben es Radiobuttons, eines davon zu selektieren, während Checkboxen mehrere Werte setzen können.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Ein {{domxref("DOMString")}} der den Wert der Checkbox repräsentiert.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} und {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td><code>checked</code></td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>{{anch("checked")}}</code> und <code>{{anch("value")}}</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>Ein {{domxref("DOMString")}} der den Wert der checkbox repräsentiert. Dies findet man nicht clientseitig, aber auf Servern ist dies der Wert (<strong><code>value</code></strong>), der beim Übermitteln der Daten mit dem Checkbox-<strong><code>name </code></strong>übergeben wird. Sehen wir uns folgendes Beispiel an:</p> + +<pre class="brush: html"><form> + <div> + <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> + <label for="subscribeNews">Subscribe to newsletter?</label> + </div> + <div> + <button type="submit">Subscribe</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>In diesem Beispiel haben wir einen Namen <code>subscribe</code> und einen Wert <code>newsletter</code>. Wenn die Form übertragen wird, wird das name/value pair <code>subscribe=newsletter</code> sein.</p> + +<p>Wird das <code>value</code>-Attribut weggelassen, ist der default value für die Checkbox <code>on</code>, in diesem Fall würden also die übertragenen Daten <code>subscribe=on</code> sein.</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Wenn beim Übertragen der Form eine Checkbox nicht angeklickt (unchecked) ist, so wird kein Wert vorgesehen, der den unchecked-Status repräsentiert (z.B. <code>value=unchecked</code>); der Wert wird überhaupt nicht zum Server übertragen. Wenn Sie einen default-Wert für die Checkbox übertrgen wollen, können Sie - eventuell durch JavaScript generiert - ein {{HTMLElement("input/hidden", '<input type="hidden">')}} in die Form einbauen, das den selben <code>name</code> and <code>value</code> wie die Checkbox hat.</p> +</div> + +<h2 id="Zusätzliche_Attribute">Zusätzliche Attribute</h2> + +<p>Zusätzlich zu den allgemeinen Attributen, die von allen {{HTMLElement("input")}}-Elementen geteilt werden, unterstützen "<code>checkbox</code>"-Inputs die folgenden Attribute:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>Boolean; wenn vorhanden, wird die Checkbox standardmäßig auf <code>on</code> gestellt.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Boolean; wenn vorhanden, wird das Erscheinungsbild abgeändert, so dass angezeigt wird, dass der Wert nicht geändert werden kann.</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>Der String, der beim Übertragen der Form benutzt wird, wenn die Checkbox den Wert <code>on </code>hat.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>Ein Boolean-Attribut, das angibt, ob die Checkbox standardmäßig <code>checked</code> ist oder nicht (wenn die Seite gelaoden wird). Es gibt nicht an, ob diese Checkbox aktuell den Status checked hat: Wenn der Status der Checkbox sich ändert, gibt dieses Content Attribut die Änderung nicht wieder. (Nur das {{domxref("HTMLInputElement")}}’s <code>checked</code> IDL Attribut wird aktualisiert)</p> + +<div class="note"> +<p><strong>Anmerkung:</strong> Anders als andere Eingabe-Steuerelemente ist eine Checkbox nur dann in den übermittelten Daten vorhanden, wenn die Checkbox angeklickt (<code>checked</code>) ist. Wenn das der Fall ist, wird der Wert der Checkbox (<code>value</code>) als die Eingabe übermittelt.</p> +</div> + +<p>Anders als andere Browser, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">speichert </a>Firefox standardmäßig den dynamischen Status von <code><input></code> zwischen mehreren Seitenaufrufen. Benutzen Sie das {{htmlattrxref("autocomplete","input")}}-Attribut, um dieses Feature zu steuern.</p> + +<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> + +<p>Ein Boolean-Attribut, das angibt, ob der Wert dieser Checkbox durch den Benutzer geändert werden kann oder nicht. Bedenken Sie, dass dieses Attribut nur die Erscheinungsform der Checkbox ändert, typischweise, indem eine graue Farbe für Linien und Hintergrund verwendet werden. Dieses Attribut hat jedoch keinen Einfluss auf den Status der Checkbox, der auch immer noch vom Benutzer geändert werden kann. Wenn Sie darüber hinaus verhindern wollen, dass der Benutzer den Status der Checkbox ändert, müssen Sie das <code>disabled</code>-Attribut verwenden. Wenn Sie jedoch das <code>disabled</code>-Attribut verwenden, bedenken Sie, dass der Wert des Steuerelements nicht übertragen wird, wenn die Form übermittelt wird.</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p>Das <code>value</code>-Attribut ist eines der Attribute, das alle {{HTMLElement("input")}}s teilen. Es bietet jedoch einen speziellen Nutzen für Inputs vom Typ <code>checkbox</code>: Wenn eine Form übermittelt wird, werden Checkboxen nur dann übermittelt, wenn sie aktuell angeklickt sind, und der übermittelte Wert ist der Wert aus dem <code>value</code>-Attribut. Wenn der Wert nicht anderweitig spezifiziert ist, ist es standarsmäßig der String <code>on</code>. Dies wird im Abschnitt {{anch("Value")}} demonstriert.</p> + +<h2 id="checkbox_inputs_benutzen">checkbox inputs benutzen</h2> + +<p>Wir haben oben schon die gängisten Nutzungsmöglichkeiten von Checkoxen gesehen. Lassen Sie uns nun die weiteren Features betrachten, die Sie vielleicht brauchen werden.</p> + +<h3 id="Mit_multiple_checkboxes_umgehen">Mit multiple checkboxes umgehen</h3> + +<p>Das Besipiel oben enthielt nur eine Checkbox; in Wirklichkeit werden Sie wahrscheinlich mehrere Checkboxen entdecken. Wenn sie keinen Bezug haben, dann können sie alle separat betrachtet werden, so wie oben gezeigt. Wenn sie jedoch in Beziehung zueinander stehen, sind die Dinge nicht mehr so einfach.</p> + +<p>Im folgenden Demo bauen wir mehrere Checkboxen ein, um dem Benutzer zu erlauben, seine Interessen auszuwählen. (Ganze Version im {{anch("Beispiele")}}-Abschnitt).</p> + +<pre class="brush: html"><fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}}</p> + +<p>In diesem Beispiel werden Sie sehen, dass wir jeder Checkbox den selben <code>name</code> gegeben haben. Wenn beide Checkboxen checked sind und dann die Form übermittelt wird, werden Sie einen String mit name/value pairs wie folgt erhalten: <code>interest=coding&interest=music</code>. Wenn der String den Server erreicht, müssen Sie ihn anders parsen als ein assoziatives Array, so dass alle Werte und nicht nur der letzte von <code>interest</code> ermittelt werden. Für eine Technik, die mit PHP eingesetzt wird, sehen Sie sich dieses Beispiel an: <a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Handle Multiple Checkboxes with a Single Serverside Variable</a>.</p> + +<h3 id="Checkboxen_auf_checked_setzen">Checkboxen auf 'checked' setzen</h3> + +<p>Um eine Checkbox auf den Wert 'checked' zu setzen, geben Sie ihm einfach das <code>checked</code>-Attribute. Sehen Sie sich das Beispiel unten an:</p> + +<pre class="brush: html"><fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding" checked> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}}</p> + +<h3 id="Einen_größeren_Click-Bereich_für_die_Checkbox_vorsehen">Einen größeren Click-Bereich für die Checkbox vorsehen</h3> + +<p>In den Beispielen oben werden Sie gesehen haben, dass man den Wert der Checkbox ebenso umschalten kann, indem man auf das {{htmlelement("label")}}-Element klickt, das mit der Checkbox verbunden ist, wie wenn man auf die Checkbox selbst klickt. Das ist ein wirklich hilfreiches Feature von HTML Form Labels, das es einfacher macht, die Option anzuklicken, die man möchte, speziell auf kleinen Bildschirmen wie z.B. bei Smartphones.</p> + +<p>Neben der Benutzbarkeit ist dies ein guter Grund, die <code><label></code>-Elemente in der Form sauber aufzusetzen.</p> + +<h3 id="Checkboxen_mit_unbestimmbarem_Wert">Checkboxen mit unbestimmbarem Wert</h3> + +<p>Zusätzlich zu den Status-Werten <code>checked </code>und <code>unchecked </code>gibt es einen dritten Status, den eine Checkbox annehmen kann: <strong>indeterminate</strong>. Dies ist ein Status, bei dem man nich sagen kann, ob das Element <code>on</code> oder <code>off</code> ist. Dies wird gesetzt durch die {{domxref("HTMLInputElement")}} object's <code>indeterminate</code> Eigenschaft via JavaScript (es kann nicht durch HTML gesetzt werden):</p> + +<pre class="brush: js">inputInstance.indeterminate = true;</pre> + +<p>Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box (es sieht ein bisschen wie ien Bindestrich oder ein Minus-Zeichen aus) anstatt eines Häkchens.</p> + +<p>Es gibt nicht viele Fälle, in denen diese Eigenschaft sinnvoll eingesetzt werden kann. Am häufigsten ist der Gebrauch, wenn eine Checkbox eine Gruppe von Unteroptionen (die ebenfalls Checkboxen sind) beherbergt.Wenn alle Unteroptionen angeklickt (<code>checked</code>) sind, dann ist die übergeordnete Checkbox auch <code>checked</code>, sind alle Unteroptionen <code>unchecked</code>, so ist die übergeordnete Checkbox ebenfalls <code>unchecked</code>. In allen anderen Fällen hätte die übergeordnete Checkbox den Status <code>indeterminate</code> .</p> + +<p>Im Besipiel unten kann man dies sehen (Dank an <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> für die Inspiration). In diesem Beispiel halten wir Zutaten vor, die für ein Rezept gesammelt werden. Wenn Sie eine Zutaten-Checkbox an- oder ausklicken, prüft eine JavaScript-Funktion die Gesamtzahl der ausgewählten Zutaten.</p> + +<ul> + <li>Wenn keine Checkboxen den Status <code>checked</code> haben, hat die Rezept-Checkbox den Status <code>unchecked</code></li> + <li>Wenn eine oder zwei den Status <code>checked</code> haben, wird der Status der Rezept-Checkbox auf <code>indeterminate</code> gesetzt.</li> + <li>Sind alle drei Checkboxen angeklickt, wird der Status der Rezeot.Checkbox auf <code>checked</code> gesetzt.</li> +</ul> + +<p>In diesem Fall wird also der <code>indeterminate</code>-Status benutzt, um anzuzeigen, dass das Sammeln der Zutaten begonnen hat, das Rezept aber noch nicht komplett ist.</p> + +<pre class="brush: js" id="line1"> var overall = document.querySelector('input[id="EnchTbl"]'); + var ingredients = document.querySelectorAll('ul input'); + + overall.addEventListener('click', function(e) { + e.preventDefault(); + }); + + for(var i = 0; i < ingredients.length; i++) { + ingredients[i].addEventListener('click', updateDisplay); + } + + function updateDisplay() { + var checkedCount = 0; + for(var i = 0; i < ingredients.length; i++) { + if(ingredients[i].checked) { + checkedCount++; + } + } + + if(checkedCount === 0) { + overall.checked = false; + <strong>overall.indeterminate = false;</strong> + } else if(checkedCount === ingredients.length) { + overall.checked = true; + <strong>overall.indeterminate = false;</strong> + } else { + overall.checked = false; + <strong>overall.indeterminate = true;</strong> + } + }</pre> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Wenn Sie eine From mit einer indeterminate Checkbox übermitteln, passiert dasselbe, wie wenn die Checkbox den Status unchecked hat - es werden keine Daten übermittelt, die die Checkbox repräsentieren.</p> +</div> + +<h2 id="Gültigkeitsprüfung">Gültigkeitsprüfung</h2> + +<p>Checkboxen unterstützen <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation</a> (Gültigkeitsprüfung) (allen {{HTMLElement("input")}}s verfügbar). Jedoch werden die meisten {{domxref("ValidityState")}}s immer <code>false</code> sein. Wenn die Checkbox das {{htmlattrxref("required", "input")}}-Attribut hat, aber nicht angeklickt ist, then {{domxref("ValidityState.valueMissing")}}, dann wird der Wert <code>true</code> sein.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Beispiel ist eine erweiterte Version des "multiple checkboxes"-Beispiels, das wir oben gesehen haben. — es hat mehr Standard-Optionen, plus eine "andere" Checkbox, die, wenn sie angeklickt wird, verursacht, dass eine Textbox erscheint, in die man einen Wert für die "andere" Option eingeben kann. Dies wird durch einen einfachen javaScript-Block erreicht. Das Beispiel enthält ebenso etwas CSS, um das Styling zu verbessern.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> + <div> + <input type="checkbox" id="art" name="interest" value="art"> + <label for="art">Art</label> + </div> + <div> + <input type="checkbox" id="sports" name="interest" value="sports"> + <label for="sports">Sports</label> + </div> + <div> + <input type="checkbox" id="cooking" name="interest" value="cooking"> + <label for="cooking">Cooking</label> + </div> + <div> + <input type="checkbox" id="other" name="interest" value="other"> + <label for="other">Other</label> + <input type="text" id="otherValue" name="other"> + </div> + <div> + <button type="submit">Submit form</button> + </div> + </fieldset> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 600px; + margin: 0 auto; +} + +div { + margin-bottom: 10px; +} + +fieldset { + background: cyan; + border: 5px solid blue; +} + +legend { + padding: 10px; + background: blue; + color: cyan; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]'); +var otherText = document.querySelector('input[id="otherValue"]'); +otherText.style.visibility = 'hidden'; + +otherCheckbox.addEventListener('change', () => { + if(otherCheckbox.checked) { + otherText.style.visibility = 'visible'; + otherText.value = ''; + } else { + otherText.style.visibility = 'hidden'; + } +});</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 300)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.elements.input.input-checkbox")}}</p> + +<h2 id="Weiterführende_Informationen">Weiterführende Informationen</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The {{cssxref(":checked")}} and {{cssxref(":indeterminate")}} CSS selectors let you style checkboxes based on their current state</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> |