HTML/Tutorials/Formulare/Beschriftungen
Inhaltsverzeichnis
Beschriftungen mit label
Mit dem label-Element (engl. für Etikett) wird Eingabefeldern, Radio-Buttons und Checkboxen bzw. einigen anderen Elementen eine Beschriftung hinzugefügt. Sie wird dem Eingabeelement zugeordnet, indem sie es entweder als Elternelement umschließt oder durch die Verknüpfung des for-Attributs mit der id des Eingabeelements.
Es kann neben den Universalattributen folgende Attribute besitzen:
-
for: der Wert ist dieiddes Eingabe-Feldes, das beschriftet wird -
form: liefert eine Beschriftung für das form-Element, zu dem das Label gehört
label-Element, damit
- Nichtsehende wissen, was in das Eingabefeld eingegeben werden soll
- die anklickbare Fläche (vor allem bei bei Checkboxen und Radio-Buttons) vergrößert wird, da auch auf das Label geklickt werden kann.
label-Elemente mit form-Attribut
Mithilfe des form-Attributs können Sie eine Beschriftung für das Formular erzeugen.
person) auf genau dieses Formular. Damit ist eine Beschriftung für das Formular gegeben.Position
Untersuchungen zeigen, dass für eine sehr gute Zugänglichkeit die Beschriftung des Eingabefeldes in unmittelbarer Nähe desselben zu finden sein muss. Der optimale Platz ist – in Abhängigkeit von der Schreibrichtung – links- bzw. rechtsbündig oberhalb des Eingabefeldes, weil in diesem Fall selbst bei sehr schmalen Bildschirmen und großen Zoomfaktoren das Eingabefeld und seine Beschriftung gemeinsam zu sehen sind. Für Nichtsehende erfolgt die Zuordnung der Beschriftung zu ihrem Eingabefeld über eine ID des input-Elements, welche mit einem entsprechenden for-Attribut des labels referenziert wird.
Um valide Daten zu erhalten, ist es empfehlenswert nicht nur bereits eingegebene Daten auf ihre Gültigkeit zu überprüfen, sondern dem Benutzer schon vor der Eingabe Hinweise und Hilfen zur richtigen Eingabe zu geben.
Platzhalter
Mit HTML5 wurde ein placeholder-Attribut für input-Elemente eingeführt, welches allerdings für Beispielangaben gedacht ist und nicht für Beschriftungen. Hier etwa könnte es klarmachen, dass keine getrennten Eingabefelder für Name und Vorname verwendet werden.
Sie sollten placeholder-Attribute nur dann verwenden, wenn sie wirklich notwendig sind. Jeder Nutzer wird wissen, dass er in ein mit „E-Mail-Adresse“ beschriftetes Eingabefeld seine E-Mail-Adresse eintragen soll. Außerdem sollten sich placeholder-Attribute deutlich von den Eingaben unterscheiden, was häufig dazu führt, dass die placeholder-Attribute mit einem zu geringen Kontrast formatiert werden. Abhilfe könnte die Verwendung von „z. B.“ schaffen.
::placeholder {
color: currentColor;
opacity: 1;
text-align: right;
}
<form>
<label for="name">Name</label>
<input id="name" placeholder="z. B. Max Mustermann">
<label for="passwd">Passwort</label>
<input id="passwd" type="password" placeholder="z. B. 7%csdz?T{G4x]">
</form>
- deutlich vom eingegebenen Wert unterscheidbar sind,
- dennoch über einen ausreichenden Kontrast verfügen.
Anwendungsbeispiel
Beschriftung direkt im Eingabefeld
Es könnte gewünscht sein, dass die Beschriftung des Eingabefeldes noch näher an das Eingabefeld heranrückt, das ist nur noch möglich, indem es sich im Eingabefeld selbst befindet.
Damit das label-Element beliebig positioniert werden kann, gruppieren wir die label-input-Paare mithilfe eines div- oder span-Elements.
.fancy-input {
margin: 1em 0 1em 0;
position: relative;
}
.fancy-input label {
position: absolute;
top: .5em;
left: .5em;
color: #666;
}
.fancy-input input {
padding: .5em;
}
<div class="fancy-input">
<label for="name">Name</label>
<input id="name">
</div>
<div class="fancy-input">
<label for="ort">Wohnort</label>
<input id="ort">
</div>
Es ist zu sehen, dass diese Variante nicht zielführend ist, denn man kann nicht lesen, was in das Eingabefeld eingegeben wurde. Es ist wünschenswert, dass die Beschriftung „aus dem Weg geht“ sobald mit der Eingabe begonnen wird. Um zu erkennen, ob schon etwas in das Feld eingegeben wurde, wird JavaScript benötigt. Das Formular ist also bei deaktiviertem JavaScript nicht bedienbar. Deshalb setzen wir mit CSS die Beschriftung an die Stelle, wo sie bei der Eingabe nicht stört.
.fancy-input label {
position: absolute;
color: #666;
background: #fff;
padding: 0 .5em;
font-size: .8em;
top: -.6em;
left: .5em;
}
Mithilfe von JavaScript setzen oder entfernen wir jetzt nach Bedarf am label-Element eine Klasse like-placeholder. Zunächst wird für jedes der entsprechenden Elemente die Klasse gesetzt, aber nur, falls kein Text im Eingabefeld steht. Damit rutschen die Beschriftungen in die Mitte der input-Elemente. Falls JavaScript nicht aktiviert ist, passiert dies nicht und das Formular bleibt bedienbar. Außerdem werden für jedes Element zwei Eventhandler registriert: Einer lauscht, ob das Element den Fokus bekommen hat, der andere ob dem Element der Fokus wieder entzogen wurde. Bekommt das Element den Fokus, wird die Beschriftung „aus dem Weg geräumt“, wird ihm der Fokus entzogen und enthält es keine Eingabe, rutscht die Beschriftung wieder in die Mitte des Eingabefeldes. Eine Transition sorgt für einen weichen Übergang.
.fancy-input label {
position: absolute;
background: #fff;
padding: 0 .5em;
font-size: .8em;
top: -.6em;
left: .5em;
transition: all .3s ease;
}
.fancy-input label.like-placeholder {
color: #666;
font-size: 1em;
top: .5em;
left: .5em;
}
var fancyInputElements = document.querySelectorAll('.fancy-input input');
for (var i = 0; i < fancyInputElements.length; i++) {
scaleLabel(fancyInputElements[i], true);
fancyInputElements[i].addEventListener('focus', function () { scaleLabel(this, false) });
fancyInputElements[i].addEventListener('blur', function () { scaleLabel(this, true) });
}
function scaleLabel(element, isLikePlaceholder) {
if (isLikePlaceholder) {
if (element.value === '') {
element.parentNode.querySelector('label').classList.add('like-placeholder');
}
}
else {
element.parentNode.querySelector('label').classList.remove('like-placeholder');
}
}
details in label
Um einer Formularbeschriftung weitere, optionale Informationen mitzugeben, können Sie es mit einem details-Element erweitern. Dies ist erlaubt, da das label-Element keinen labellable content erlaubt, andere Kindelemenente wie details jedoch schon.[1]
<label class="input-container">
<span>Vorname</span>
<details>
<summary>Wie Sie Ihren Vornamen finden</summary>
<h1>Fragen Sie Ihre Mama</h1>
<p>Wenn Sie nicht mehr wisen, wie Sie heißen, fragen Sie am besten Ihre Mutter. Die weiß alles!</p>
<h2>Fragen Sie <strong>nicht</strong> Ihren Partner.</h2>
<p>Die Wahrscheinlichkeit ist sehr gering, dass Ihr amtlicher Vorname Schätzchen, wilde Maus oder Papabär lautet.</p>
<h1>Räumen Sie endlich mal wieder auf und finden Sie Ihren Personalausweis</h1>
<p>Auf Ihrem Personalausweis schauen Sie nun nach dem recht klein geschriebenen Wort "Vorname". Das Wort darüber ist Ihr Vorname.</p>
<h2>Pro-Tipp für die Vornamen-Suche auf dem Ausweis</h2>
<p>Wenn Sie Ihren Nachnamen noch kennen, dann schauen Sie in der Nähe des Nachnamens nach Ihrem Vornamen. Auf Ausweisen sind die beiden nie weit voneinander entfernt!</p>
</details>
<input id="first-name">
</label>
Quellen
- SELFHTML-Forum: Ausrichtung von Formularelementen
- CodePen: label like placeholder A Pen By Gunnar Bittersmann
- smashingmagazine: Don’t Use The Placeholder Attribute (20.06.2018)
- ↑ The label Element (WHATWG)
Siehe auch
Referenz:
labellogisch einem Eingabe-Element (hierinput) zuzuordnen:input-Element als Kindelement deslabeldefiniert, so ist eine ausdrückliche Zuordnung zwischeninputundlabelmittelsfor-Attribut nicht mehr zusätzlich nötig. Die Zuordnung erfolgt dabei implizit über die Struktur des Quelltextes. Dies führt jedoch bei Screenreadern zu Schwierigkeiten.forist speziell dann von Bedeutung, wenn die Beschreibung nicht Elternelement desinputist.labelnicht direkt neben deminput-Element vorkommen soll.