HTML/Tutorials/Formulare/Beschriftungen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Kenntnisse in
HTML
CSS

Aus Gründen der Benutzerfreundlichkeit und Zugänglichkeit ist es notwendig, dass für jeden Nutzer eines Formulars erkennbar ist, welche Information in ein Texteingabefeld eingegeben werden soll.

Beschriftungen mit label[Bearbeiten]

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 die id des Eingabe-Feldes, das beschriftet wird
  • form: liefert eine Beschriftung für das form-Element, zu dem das Label gehört
Labels beschriften Eingabefelder ansehen …
<ul> <li> <label> <input type="checkbox" name="zutat" value="salami" id="check1"> Salami </label> </li>
<li> <label for="check2"> <input type="checkbox" name="zutat" value="schinken" id="check2"> Schinken </label> </li>
<li> <input type="checkbox" name="zutat" value="sardellen" id="check3"> <label for="check3"> Sardellen </label> </li> </ul>
Drei Arten, label logisch einem Eingabe-Element (hier input) zuzuordnen:
  1. Wird das betreffende input-Element als Kindelement des label definiert, so ist eine ausdrückliche Zuordnung zwischen input und label mittels for-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.
  2. Sie kann aber erfolgen (zweiter Beispielabschnitt), was das Fehlerpotenzial durch zukünftige Umstrukturierungen verringert. for ist speziell dann von Bedeutung, wenn die Beschreibung nicht Elternelement des input ist.
  3. (dritter Beispielabschnitt), was speziell dann geschehen kann, wenn das label nicht direkt neben dem input-Element vorkommen soll.
Empfehlung: Nutzen Sie auch bei einer impliziten Zuordnung der Labels zu den Eingabefeldern for-Attribute.
Beachten Sie: Beschriften Sie sämtliche Formular-Elemente mit einem 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[Bearbeiten]

Mithilfe des form-Attributs können Sie eine Beschriftung für das Formular erzeugen.

Labels beschriften Formulare ansehen …
<form id="person"> <label class="h2" form="person">Namenseingabe</label> <label for="vorname">Vorname</label> <input name="vorname" id="vorname" maxlength="30"> <label for="zuname">Zuname</label> <input name="zuname" id="zuname" maxlength="40"> <button>Eingaben absenden</button> </form>
Dieses Formular hat eine ID. Das folgende label-Element verweist mit seinem form-Attribut (person) auf genau dieses Formular. Damit ist eine Beschriftung für das Formular gegeben.

Position[Bearbeiten]

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.

zugängliches label-input-Paar in zwei Sprachen


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[Bearbeiten]

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.

zugängliches label-input-Paar mit Platzhalter in zwei Sprachen


placeholder zeigen Beispiele ansehen …
<form> <label for="name">Name</label> <input id="name" placeholder="Max Mustermann"> <label for="passwd">Passwort</label> <input id="passwd" type="password" placeholder="Ihr Passwort"> </form>

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 zeigen Beispiele ansehen …
::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>
Hier werden die Platzhaltertexte nach rechts gerückt und in derselben Farbe wie die Eingaben dargestellt.
Beachten Sie, dass Sie placeholder-Attribute so formatieren, dass sie
  • deutlich vom eingebenen Wert unterscheidbar sind,
  • dennoch über einen ausreichenden Kontrast verfügen.
Empfehlung: Ziehen Sie in Betracht, auf placeholder-Attribute zu verzichten.

Anwendungsbeispiel[Bearbeiten]

Beschriftung direkt im Eingabefeld[Bearbeiten]

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.

Beispiel ansehen …
Beachten Sie: Verwenden Sie für einen solchen Anwendungsfall nicht das placeholder-Attribut, denn zum einen fehlt Nichtsehenden dann die Beschriftung und zum anderen verschwindet der Platzhalter sobald Sie mit der Eingabe beginnen.


Damit das label-Element beliebig positioniert werden kann, gruppieren wir die label-input-Paare mithilfe eines div- oder span-Elements.

Beispiel ansehen …
.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.

Beispiel ansehen …
.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.

Beispiel ansehen …
.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[Bearbeiten]

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]

Beispiel ansehen …
<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[Bearbeiten]

  1. The label Element (WHATWG)

Siehe auch[Bearbeiten]

Referenz: