Formulare/Eingabe von Text

20min

leicht

• Was ist ein Webformular?
• Benutzereingaben
  zugänglich gestalten

Während der Standardwert für input type="text" ist und eine Texteingabe erlaubt, gibt es weitere einzeilige Eingabefelder, deren Inhalt jeweils eine andere Bedeutung hat. So kann z.B. eine URL oder Email-Adresse bereits bei der Eingabe durch den Browser auf Validität geprüft werden - früher musste dies durch ein Script erfolgen.

Dieses Tutorial zeigt, wie man mit den verschiedenen Eingabetypen und Attributen Formulareingaben erleichtert.

type = "text"

Ein Eingabefeld vom Typ text ist für die Eingabe kurzer einzeiliger Texte vorgesehen.

input-Element, type text ansehen …

	<label>Vorname:</label>
	<input name="vorname">

	<label>Zuname:</label>
	<input type="text" name="zuname" size="30" maxlength="40">

text ist der Standardwert des type-Attributes für input-Elemente und kann deshalb – wie beim Feld vname – weggelassen werden. Es ist auch aus Gründen der CSS-Selektion oder des JavaScript-Zugriffs nicht mehr notwendig.

Empfehlung: Ordne den Eingabefeldern eine Beschriftung mit einem label-Element zu, das mit for- bzw. id-Attribute verknüpft wird.

⇒ Benutzereingaben zugänglich gestalten

Folgende Attribute können verwendet werden:

• name: für den Formularfeldzugriff mit JavaScript, bei CGI-Scripts und auch bei E-Mail-Formularen
• size: Anzeigelänge in Zeichen
  
  Beachte: Eine Breitenangabe durch size wird durch eine CSS-Angabe von width überschrieben.
• maxlength: interne Feldlänge in Zeichen. Wenn die interne Feldlänge größer ist als die angezeigte Feldlänge size (wie im zweiten Eingabefeld des obigen Beispiels), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).

Um alle Text-Input Elemente zu selektieren, verwende den folgenden Selektor

Selektieren von Text-Input in CSS

input[type="text"], input:not([type]) {
   …
}

Durch diese Deklaration werden sowohl die input-Elemente, deren type-Attribut den Wert text hat, als auch alle input-Elemente ohne type-Attribut selektiert.

Weitere Typen

Mit HTML5 wurden ab 2008 weitere Typen für Eingabefelder eingeführt, die speziell auf den einzugebenden Begriff zugeschnitten sind. So werden Eingaben bereits beim Eingeben auf Gültigkeit überprüft. Ungültige Eingaben werden gleich zurückgewiesen und nicht erst zum Server gesandt.

type = "search"

Ein Eingabefeld vom Typ search (englisch Suche) ist für Eingabe von Suchbegriffen vorgesehen.

Suchfeld mit type="search" ansehen …

<search>
  <form action="search.php">
    <label for="query">Finde deinen Lieblingsvogel</label>
    <input id="query" name="q" type="search" list="Vögel">
    <button type="submit">Los!</button>
  </form>
</search>

  <datalist id="Vögel">
    <option value="Amsel"> 
    <option value="Buntspecht"> 
    <option value="Drossel"> 
    <option value="Eisvogel"> 
    <option value="Fink"> 
    <option value="Graugans"> 
    <option value="Meise">
    <option value="Spatz"> 
    <option value="Specht"> 
  </datalist>

Hier ist ein Suchfeld zu sehen, das sich auf den ersten Blick nicht von einem Eingabefeld des Typs text unterscheidet. Einige Browser, so Safari on iOS ergänzen ein Lupensymbol, fügen ein Bedienfeld hinzu, welches das Eingabefeld leert oder passen ggf. automatisch den Wert eines input-Elements vom Typ submit an.

Besonderheit des Beispiels ist das search-Element, das dem Formular als Container dient. Diese neue Element enthält gleich die passende ARIA-Rolle search.

Das Beispiel enthält aber auch ein list-Attribut, das als Wert die id eines datalist-Elements erhält. So werden verschiedene Vogelnamen als Eingabemöglichkeiten vorgeschlagen. Es können aber auch Begriffe eingegeben werden, die nicht zu den Vorschlägen gehören.

type = "tel"

input type="tel" bereitet ein Eingabefeld für eine Telefonnummer vor.

Browserunterstützung
caniuse.com

Telefonnummerneingabe mit type="tel"

<form>
  <label>Geben Sie ihre Mobilnummer ein: 
    <input type="tel" name="MobilNummer" placeholder="0179-">
  </label>
</form>

Bei mobilen Geräten wird eine angepasste Tastatur eingeblendet. Das kann mit dem inputmode-Attribut aber auch eingestellt werden.

type = "url"

Mit input type="url" können Web-Adressen eingegeben werden. Schon während der Eingabe wird überprüft, ob diese eine gültige Web-Adresse ist.

Browserunterstützung
caniuse.com

Eingabe einer Internet-Adresse

<form>
  <label>url: 
    <input type="url" name="deine-url" value="https://">
  </label>
</form>

Es wird überprüft, ob die Internet-Adresse valide ist. In Chrome erscheint sonst eine Fehlermeldung; Firefox und Opera verhindern ein Senden.

Bei mobilen Geräten (iOS, Android) erscheint bei der Eingabe ein .com automatisch im Tastenfeld.

Beachte: Die Browser bestehen auf einer vollständigen, validen Internet-Adresse. So ist

selfhtml.org nicht valide

www.selfhtml.org nicht valide

https://www.selfhtml.org valide

Empfehlung: Belege value mit dem Anfang der vollständigen, validen Internet-Adresse vor!

type = "email"

Mit input type="email" können E-Mail-Adressen eingegeben werden. Bei mobilen Geräten (iOS, Android) erscheint bei der Eingabe das @-Symbol automatisch im Tastenfeld.

Browserunterstützung
caniuse.com

Eingabe der E-Mail-Adresse

<form>
  <label>E-Mail: 
    <input type="email" name="email">
  </label>
</form>

Es wird überprüft, ob die Eingabe ein @-Symbol beinhaltet und verhindert Satzzeichen außer dem Punkt hinter dem @. Im Chrome und Edge erscheint dann eine Fehlermeldung; Firefox und Opera verhindern ein Senden.

So kannst du gleich clientseitig eine browsereigene Vorprüfung vornehmen lassen.

Die Browser verwenden folgenden regulären Ausdruck:

[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*

Eingabehilfen

Es ist mühselig, immer wieder die gleichen Daten in Formulare einzugeben. Gerade für Nutzer, die nicht schnell tippen können oder aus motorischen Gründen viele Fehler machen, würden Korrekturen und Vorschläge den Eingabeprozess beschleunigen.

In guten Editoren werden Elemente, Attribute, CSS-Eigenschaften und Standardwerte bei der Eingabe eines Buchstabens bereits vorgeschlagen, weitere Eingaben engen die Zahl der möglichen Begriffe ein. Der Nutzer kann entschieden, ob er fertigtippt oder - wie bei dem Suchfeld mit datalist weiter oben - den vorgeschlagenen Begriff anklickt. Dies funktioniert auch bei Webformularen im Browser immer öfter.

Das unter dem Begriff Autofill bekannte Verhalten kann durch mehrere HTML-Attribute gesteuert werden:

autocomplete

Das autocomplete-Attribut hilft dem Browser beim automatischen Ausfüllen von Eingabefeldern auf der Grundlage früherer Interaktionen des Benutzers. Dies wird in der Regel für Dinge wie Adressen, Kreditkartendaten oder Suchanfragen verwendet, die der Benutzer bereits einmal zuvor eingegeben hat.

Browserunterstützung
caniuse.com

Beispiel

<label for="frmNameCC">Name on card</label> <input autocomplete="cc-name"> id="frmNameCC" name="cc-name" required

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

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.

In der Spec gibt es eine Liste der möglichen autofill field keywords.

Beachte:

• Firefox ignoriert autocomplete="off" bei Login-Formularen
• Chrome ignoriert autocomplete="off" wenn Benutzer autofill in den Browser-Einstellungen aktiviert haben
• Safari ignoriert autocomplete="off" bei username, email und Passworteingaben

⇒ Passwortmanager - Fluch und Segen

writingsuggestions

Browserunterstützung
caniuse.com

Das writingsuggestions-Attribut geht einen Schritt weiter: Im Gegensatz zur Autovervollständigung bietet es „intelligente“ Echtzeitvorschläge, einschließlich Grammatik, Rechtschreibung und sogar Satzumstrukturierung, je nach Plattform oder Tool, das diese Funktion anbietet.

Eingabefeld mit autofill ansehen …

<label for="story-title">Titel</label>
<input id="story-title" size="50"
       writingsuggestions="true" 
       spellcheck="true">
           
<label for="story-content">Inhalt</label>
<textarea id="story-content" cols="50" rows="10"
        writingsuggestions="true" 
       spellcheck="true">
    Es war einmal …
</textarea>

Genau wie bei spellcheck entsteht dabei potentiell ein Sicherheitsproblem:

Browser haben mittlerweile zwar Wörterlisten an Bord, um bspw. die Silbentrennung durchzuführen, senden Eingaben teilweise aber auch an externe Dienste, ohne den Nutzer explizit erneut um Erlaubnis zu bitten (Bei der Erstinstallation gab es mal einen Punkt „Wollen Sie uns helfen Ihr Browsing-Erlebnis zu verbessern?“, bei dem man schnell auf ja geklickt hatte.)

autocapitalize

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.

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>

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

Sonderfall type = "password"

In einem Eingabefeld type="password" - bereits aus dem vorherigen Kapitel bekannt - können Geheimnummern, Passwörter usw. eingegeben werden. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens „bullet points“ oder Sternchen) dargestellt, sodass Personen im Raum des Anwenders nicht zufällig das eingegebene Passwort mitlesen können.

Passwort-Felder unterscheiden sich von Textfeldern außerdem dadurch, dass der Browser Nutzereingaben speichert und beim nächsten Mal wieder anbietet. Zudem bieten Browser für Textfelder eine Rechtschreibprüfung an. Das will man bei Passwort-Feldern nicht; fürs input-Element muss man daher autocomplete="off" spellcheck="false" setzen. Die erweiterte Rechtschreibprüfung nutzt ansonsten einen Webservice zum Prüfen der Eingabe, sprich des Passworts, sendet also das Passwort an den Webservice.

Sichere Passworteingabe ohne autofill ansehen …

<label for="email">Email-Adresse</label>
<input id="email" autocomplete="email" required>

<label for="currentPasswd">bestehendes Passwort</label>
<input type="password" id="currentPasswd" autocomplete="current-password" required>

<label for="newPasswd">neues Passwort</label>
<input type="password" id="newPasswd" autocomplete="new-password" required>

Dieses Login-Formular verwendet das bereits weiter oben besprochene autocomplete-Attribut. Im ersten Passwort-Feld sollte das aktuelle Passwort eingegeben werden; in das zweite ein neues.

Du kannst mit dem pattern-Attribut die Eingabe bestimmter Zeichen, Zeichenfolgen und -längen vorschreiben.

Beachte: Ein Passwortfeld in HTML ist keine Abfrage für geschützte Web-Seiten. Lies zu diesem Thema den Abschnitt über .htaccess - Server-Reaktionen kontrollieren.

Empfehlung: Passwortabfragen erfolgen meist in Kombination mit einem Benutzernamen oder einer E-Mail-Adresse. Bei der Verwendung von Benutzernamen muss bei der Registrierung überprüft werden, ob dieser schon vergeben ist. Für viele Benutzer ist es schwierig, sich viele verschiedene Benutzernamen und Passwörter zu merken. Damit nicht das berüchtigte PostIt mit den Zugangsdaten am Monitor verwendet wird, ist es benutzerfreundlicher, wenn die E-Mail-Adresse des Benutzers abgefragt wird. Diese ist jedem immer bekannt und genau so sicher wie ein individueller Benutzername.

Passwort sichtbar machen

Damit niemand bei einem Blick über die Schulter das Passwort erfahren kann, zeigen Passwortfelder nicht die Eingabe, sondern nur Platzhalter an.

Oft ist man jedoch allein zuhaus, möchte sich aber vor dem Absenden vergewissern, ob die Eingabe richtig war.

Passwort sichtbar machen ansehen …

  <form>
    <label for="email">E-Mail</label>
    <input type="email" id="email" required>
 
    <label for="passwd">Passwort</label>
    <input type="password" id="passwd" required autocomplete="off" spellcheck="false">
 
    <button type="button" id="check">Passwort sichtbar machen</button>
    <button class="ok" type="submit">anmelden</button>    
  </form>

Das Formular enthält je ein Eingabefeld für die E-Mail-Adresse und für eine Passworteingabe. Damit das Passwortfeld im sichtbaren Modus nicht durch die Autovervollständigung ausgefüllt wird, erhält es neben dem required-Attribut noch ein autocomplete="off"-Attribut.

Um zu verhindern, dass eine erweiterte Rechtschreibprüfung in diesem Fall das Passwort (gegen einen Webservice) prüft, ist spellcheck="false".

Beispiel

  document.querySelector('#check').addEventListener('click', function () {
		const passwd = document.querySelector('#passwd');
		
	  if (passwd.type == 'password' ) { 
		passwd.type = 'text';
		passwd.setAttribute('writingsuggestions', 'false');
		this.innerText = 'Passwort verstecken'; 
	  }
	  else {
	    document.getElementById('passwd').type = 'password';
	    this.innerText = 'Passwort sichtbar machen'; 
	  }
  });

Das Beispiel enthält ein Formular mit einem Passwortfeld. Durch einen Klick auf den Button wird das type-Attribut des input-Felds auf type="text" geändert. Der eingegebene String wird so sichtbar.

Allerdings ist für type="text" das oben bereits besprochene writingsuggestions-Attribut standardmäßig auf true gesetzt. Passwörter können so zur Überprüfung an Externe übertragen werden. Um dies zu verhindern, wird mit setAttribute der Wert auf false gesetzt.

Passwortmanager - Fluch und Segen

Vielen Nutzern erscheint es (zu) mühselig, dass sie Passwörter immer wieder neu eingeben müssen. Vorgaben der Entwickler, dass Passwörter eine bestimmte Mindestlänge und eine Mischung aus Groß- und Kleinbuchstaben, Ziffern und Sonderzeichen haben müssen, führten oft dazu, dass das gleiche Passwort für mehrere Webseiten und Apps verwendet wird. Solche Passwörter finden sich dann in Listen gestohlener Passwörter wie z. B. beim Yahoo-Hack und ermöglichen einen Zugriff von außen.

Passwortmanager versprechen hier eine höhere Sicherheit, indem sie zufällig ausgewählte, längere Zeichenketten verwenden. Dies mag einen Zugriff über das Internet erschweren, führt aber dazu, dass jeder Nutzer, der sich im PC oder Mobilgerät eingeloggt hat, bei einem Login-Versuch kein Passwort mehr eingeben muss. Was als Erleichterung gedacht war, wird so zum Sicherheitsrisiko!

Achtung!

Überlege bei jeder Anmeldung, ob du das Login dem Passwortmanager - und damit jedem Nutzer deines Geräts - anvertrauen willst.
Auch wenn bei Online-Banking eine Zwei-Faktor-Authentifizierung (2FA) vorgeschrieben ist, kann mit einem Login zumindest der Kontostand eingesehen werden.

Bereits weiter oben wurde thematisiert, dass bei aktivertem Passwortmanager (Firefox), Google Passwortmananger (Chrome) bzw Microsoft Wallet (Edge) autocomplete=off ignoriert und alle bisher je eingegebenen Passwörter aus dieser Domain zum Einfügen angeboten werden.

Camping Rider schlug im SELF-Forum vor, bei Passwortfeldern, für die auf keinen Fall der Passwortmanager einspringen soll, den Input-Type text statt password zu verwenden. Die nötige Abschirmung gegenüber wachsamen über die Schulter blickenden Augen wird dadurch erzeugt, dass für das Textfeld ein Font verwendet wird, in dem jede Glyphe ein Punkt ist - wie in einem Passwortfeld. Der Passwort-Peeker-Button schaltet dann den fürs Eingabefeld verwendeten Font (z.B. text-security-disk) um.

• Formulare (Übersicht)
• Eingabe von Zahlen

Siehe auch

• 

  Sichere Passwortwahl
   
• PHP/Tutorials/Loginsystem