HTML/Tutorials/Formulare/Beschriftungen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Aus Gründen der 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]

Labels (engl. Etikett) sind Beschriftungen für input-Elemente.

Beispiel: Labels beschriften Eingabefelder ansehen …
<form> <label for="vorname">Vorname</label> <input id="vorname"> <label for="zuname">Zuname</label> <input id="zuname"> <button type="reset">Eingaben zurücksetzen</button> <button type="submit">Eingaben absenden</button> </form>

Dabei sollten die label-Elemente den entsprechenden input-Elementen zugeordnet werden. Das geschieht, indem jedes label-Element ein for-Attribut erhält, das denselben Wert bekommt, wie das id-Attribut des entsprechenden input-Elements. Jetzt kann man auch auf die Beschriftung des Feldes klicken und der Textcursor landet im passenden Eingabefeld.

Das input-Element kann dabei wie im Beispiel außerhalb des label-Elementes stehen, die Zuordnung erfolgt dabei durch das for-Attribut, oder auch Kind des labels sein. In diesem Fall könnte man auf die Vergabe eines for-Attributs verzichten, die Zuordnung erfolgt dabei implizit über die Struktur des Quelltextes. Dies führt jedoch bei Screenreadern zu Schwierigkeiten.

Empfehlung: Nutzen Sie auch bei einer impliziten Zuordnung der Labels zu den Eingabefeldern for-Attribute.

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


Beispiel: 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.

Beispiel: placeholder zeigen Beispiele ansehen …
::-webkit-input-placeholder {
  color: currentColor;
  opacity: 1;
  text-align: right;
}
::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');
  }
}

Quellen[Bearbeiten]