HTML/Formulare/Gestaltung

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

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 Liste 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.


Siehe auch[Bearbeiten]

Quellen[Bearbeiten]

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