HTML/Formulare/Gestaltung

Aus SELFHTML-Wiki
< HTML‎ | Formulare(Weitergeleitet von Placeholder)
Wechseln zu: Navigation, Suche

label[Bearbeiten]

Mit dem label-Element 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 input-Feldes, auf das sich das Label bezieht.
  • form: liefert eine Beschriftung für das form-Element, zu dem das Label gehört


label-Elemente mit for-Attribut[Bearbeiten]

Beispiel ansehen …
<form action="#"> <h3>Kreuzen Sie die gewünschten Zutaten an:</h3> <fieldset> <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> </fieldset> </form>
Drei Arten, label logisch einem input-Element zuzuordnen: 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 (erster Beispielabschnitt); 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 (dritter Beispielabschnitt), was speziell dann geschehen kann, wenn das label nicht direkt neben dem input-Element vorkommen soll.
Empfehlung: Umschließen Sie input-Elemente mit label oder ordnen Sie diese mit dem for-Attribut zu, damit
  • Screenreader die in label vorhandenen Informationen weitergeben können.
  • bei Checkboxen und Radio-Buttons die anklickbare Fläche vergrößert wird, da auch auf das Label geklickt werden kann.

placeholder[Bearbeiten]

Mit dem placeholder-Attribut können sie einen sichtbaren Hinweis auf das auszufüllende Feld setzen. Er verschwindet, sobald ein Zeichen im Eingabefeld steht.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Hinweis mit placeholder ansehen …
<label for="bname">Benutzername:</label> 
<input id="bname" size="30" maxlength="30" placeholder="Benutzername oder EMail-Adresse">
 
<label for="ort">Wohnort</label>  
<input id="ort" size="30" maxlength="40" placeholder="Ihr Wohnort">

autofocus[Bearbeiten]

Mit dem booleschen autofocus-Attribut wandert der Cursor beim Laden der Seite automatisch auf dieses Feld. Sie können dieses Attribut für button, input und textarea-Elemente verwenden.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

autocomplete[Bearbeiten]

Das boolesche autocomplete-Attribut zeigt dem Browser, ob ein Eingabefeld automatisch ausgefüllt werden soll.

  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
  • HTML5

Details: caniuse.com

Beachten Sie:
  • Der Internet Explorer 11 und IE Edge 12 und 13 ignorieren autocomplete="off" bei Passworteingaben
  • Firefox ignoriert autocomplete="off" bei Login-Formularen
  • Chrome ignoriert autocomplete="off" wenn Benutzer autofill aktiviert haben
  • Safari ignoriert autocomplete="off" bei username, email und Passworteingaben

Werte für autocomplete[Bearbeiten]

Um die autofill-Eigenschaft besser nutzen zu können, kann man in Chrome Eingabefeldern mit name="value" und autocomplete="value" einen festen Wert zuweisen, der dann aus bisherigen Eingaben einen Wert errät und vorschlägt.[1]

  • Chrome 4343
Beispiel
<label for="frmNameCC">Name on card</label> <input name="cc-name" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
Der Wert der name- und autocomplete-Atttribute zeigt der autoFill-funktion an, dass hier eine Kreditkartennummer eingegeben werden soll. Falls eine solche Nummer (mit diesem Namen) bereits einmal eingegeben wurde, wird sie nun vorgeschlagen.

Bei google.developers finden Sie eine der möglichen Attribute.[2]

autocorrect[Bearbeiten]

Das boolesche autocorrect-Attribut ermöglicht es auf Apple-Geräten eine Autokorrektur einzuschalten.

  • Leer
  • Leer
  • Leer
  • Leer
  • Safari
Beispiel
<input type="text" autocorrect="on" />

autocapitalize[Bearbeiten]

Das autocapitalize-Attribut wandelt bei Formulareingaben Text automatisch in Großbuchstaben um. Dies ist besonders bei Namens- und Sucheingaben nützlich. Es wirkt bei input type="text" und type="search" und bei textarea-Elementen - bei anderen Eingabetypen bleibt es wirkungslos.

  • Chrome
  • Leer
  • Leer
  • Leer
  • Safari

Folgende Angaben sind möglich:

  • characters: alle Buchstaben werden groß geschrieben
  • words: jedes Wort wird groß geschrieben
  • sentences: Nur das erste Wort im Satz wird automatisch groß geschrieben
Beispiel
<input type="text" autocapitalize="word" />
<textarea autocapitalize="sentences" placeholder="Kommentar"></textarea>
Beachten Sie: Das autocapitalize-Attribut war eine proprietäre Entwicklung von Apple, Chrome übernahm es mit der Version 43. Es funktioniert in den angegebenen Browsern nur bei Mobilgeräten; auf Desktopgeräten bleibt es wirkungslos.

inputmode[Bearbeiten]

Das inputmode-Attribut hilft mobilen Geräten, die richtige Tastatur-(belegung) zu wählen. Eine Verwendung ist bei input mit den Typen text, password, email und url möglich.

  • Leer
  • Leer
  • Leer
  • Leer
  • Safari

Folgende Werte sind möglich:

  • verbatim: alphanumerisch
  • latin: Texteingabe mit Texteingabehilfe (auto suggest)
  • latin-name: Texteingabe mit Texteingabehilfe für Namen
  • latin-prose: Texteingabe mit Texteingabehilfe
  • full-width-latin:
  • kana full-width: Japanische Zeichen
  • katakana Katakana: Japanische Zeichen
  • numeric für Zahlen wie Postleitzahlen, Kreditkartenunmmern, etc
  • tel: Telefonnummer
  • email:
  • url
Beachten Sie: Firefox OS unterstützt x-inputmode.


Weblinks[Bearbeiten]

  1. google.developers: Help users checkout faster with Autofill
  2. google.developers Common Attributes


Siehe auch[Bearbeiten]