Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/label below:

<label>: Das Label-Element - HTML

Baseline Widely available

Das <label> HTML-Element repräsentiert eine Beschriftung für ein Element in einer Benutzeroberfläche.

<div class="preference">
  <label for="cheese">I like cheese.</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">I like peas.</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

Dieses Element umfasst die globalen Attribute.

for

Der Wert ist die id des beschriftbaren Formularfelds im selben Dokument, die das <label> mit diesem Formularfeld verknüpft. Beachten Sie, dass die JavaScript-Reflexionseigenschaft htmlFor ist.

Das erste Element im Dokument mit einem id-Attribut, das mit dem Wert des for-Attributs übereinstimmt, ist das beschriftete Kontrollfeld für dieses label-Element — falls das Element mit dieser id tatsächlich ein beschriftbares Element ist. Falls es kein beschriftbares Element ist, hat das for-Attribut keine Wirkung. Falls es andere Elemente gibt, die ebenfalls dem id-Wert entsprechen, die später im Dokument vorhanden sind, werden sie nicht berücksichtigt.

Mehrere <label>-Elemente können mit demselben Formularfeld verknüpft werden, indem mehrere <label>-Elemente mit demselben for-Attributwert verwendet werden, was dem Formularfeld mehrere Beschriftungen gibt.

Die Verknüpfung eines <label> mit einem Formularfeld, wie z.B. <input> oder <textarea>, bietet einige wesentliche Vorteile:

• Der Beschriftungstext ist nicht nur visuell mit seinem entsprechenden Texteingabe verbunden; er ist auch programmatisch damit verknüpft. Das bedeutet zum Beispiel, dass ein Screenreader die Beschriftung vorliest, wenn der Benutzer auf das Formulareingabe fokussiert ist, was es einem Benutzer unterstützender Technologien erleichtert zu verstehen, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer auf eine Beschriftung klickt oder diese berührt/antippt, überträgt der Browser den Fokus auf die zugehörige Eingabe (das resultierende Ereignis wird auch für die Eingabe ausgelöst). Diese vergrößerte Trefferfläche zum Fokussieren der Eingabe bietet einen Vorteil für jeden, der versucht, diese zu aktivieren — einschließlich denen, die ein Touchscreen-Gerät verwenden.

Es gibt zwei Möglichkeiten, ein <label> mit einem Formularfeld zu verknüpfen, die üblicherweise als explizite und implizite Verknüpfung bezeichnet werden.

Um ein <label>-Element explizit mit einem <input>-Element zu verknüpfen, müssen Sie zuerst das id-Attribut zum <input>-Element hinzufügen. Danach fügen Sie das for-Attribut zum <label>-Element hinzu, wobei der Wert von for derselbe ist wie die id im <input>-Element.

<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />

Alternativ können Sie das <input> direkt innerhalb des <label> einfügen, in diesem Fall sind die for- und id-Attribute nicht erforderlich, da die Verknüpfung implizit erfolgt:

<label>
  I like peas.
  <input type="checkbox" name="peas" />
</label>

Hinweis: Ein <label>-Element kann sowohl ein for-Attribut als auch ein enthaltenes Kontrollelement haben, solange das for-Attribut auf das enthaltene Kontrollelement verweist.

Diese beiden Methoden sind gleichwertig, aber es gibt einige Überlegungen:

• Während gängige Browser- und Screenreader-Kombinationen implizite Verknüpfung unterstützen, tun dies nicht alle assistierenden Technologien.
• Je nach Ihrem Design kann der Verknüpfungstyp die Stilbarkeit beeinflussen. Indem die <label>- und Formularsteuerelement-Geschwisterelemente anstelle von Eltern-Kind-Elementen sind, bedeutet dies, dass sie separate, benachbarte Boxen sind, die ein anpassbareres Layout ermöglichen, wie das Ausrichten mit Grid- oder Flexlayout-Methoden.
• Die explizite Verknüpfung erfordert, dass das Formularfeld eine id hat, die im gesamten Dokument eindeutig sein muss. Dies ist besonders in einer komponentenbasierten Anwendung schwierig. Frameworks bieten oft ihre eigenen Lösungen an, wie Reacts useId(), aber es erfordert immer noch zusätzliche Koordination, um es richtig zu machen.

Im Allgemeinen empfehlen wir die Verwendung der expliziten Verknüpfung mit dem for-Attribut, um die Kompatibilität mit externen Werkzeugen und assistierenden Technologien sicherzustellen. Tatsächlich können Sie und gleichzeitig id/for bereitstellen, um maximale Kompatibilität zu erreichen.

Das Formularfeld, das ein Label beschriftet, wird das beschriftete Kontrollfeld des Label-Elements genannt. Mehrere Labels können mit demselben Formularfeld verknüpft werden:

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

Elemente, die mit einem <label>-Element verknüpft werden können, umfassen <button>, <input> (außer type="hidden"), <meter>, <output>, <progress>, <select> und <textarea>.

Außer dem implizit verknüpften Formularfeld sollten keine zusätzlichen interaktiven Elemente wie Anker oder Schaltflächen innerhalb eines <label> platziert werden. Andernfalls wird es für Menschen schwierig, das dem label zugeordnete Formulareingabefeld zu aktivieren.

Nicht so machen:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Bevorzugen Sie dies:

<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>

Hinweis: Es ist eine gute Praxis, alle erforderlichen Kontexte, wie den Link zu den Bedingungen und Konditionen, vor dem Formularelement zu platzieren, damit der Benutzer diese lesen kann, bevor er mit dem Kontrollfeld interagiert.

Das Platzieren von Überschriftselementen innerhalb eines <label> beeinträchtigt viele Arten von assistiver Technologie, da Überschriften üblicherweise als Navigationshilfe verwendet werden. Wenn der Text der Beschriftung visuell angepasst werden muss, sollten stattdessen CSS-Klassen auf das <label>-Element angewendet werden.

Wenn ein Formular oder ein Abschnitt eines Formulars einen Titel benötigt, verwenden Sie das <legend>-Element innerhalb eines <fieldset>.

Nicht so machen:

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Bevorzugen Sie dies:

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

Ein <input>-Element mit einer type="button"-Deklaration und einem gültigen value-Attribut benötigt keine damit verbundene Beschriftung. Andernfalls kann es tatsächlich die Art und Weise, wie assistive Technologie den Schaltflächeneingang analysiert, beeinträchtigen. Dasselbe gilt für das <button>-Element.

<label>Click me <input type="text" /></label>

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4