Die Attribute im Überblick

In HTML5 wurden neue Attribute für die Formelemente eingeführt. Diese bieten zusätzliche Funktionalität und sind im Folgenden zusammenfassend aufgeführt:

AttributWertBeschreibung
autocompleteon
off
Aktiviert oder deaktiviert die automatische Vervollständigung.
autofocusboolWenn gesetzt, bekommt dieses Feld automatisch den Fokus, wenn die Seite geladen ist.
formform_idDefiniert das Formular, zu dem das Input-Feld gehört.
formactionform_actionÜberschreibt das action="" Attribut.
formenctypeform_enctypeÜberschreibt das enctype="" Attribut.
formmethodform_methodÜberschreibt das method="" Attribut.
formnovalidateboolÜberschreibt das novalidate="" Attribut.
formtargetform_targetÜberschreibt das target="" Attribut.
heightpxDefiniert die Höhe des <input type="image" /> Elements.
widthpxDefiniert die Breite des <input type="image" /> Elements.
listdatalist_idVerweis auf ein <datalist></datalist> Element, welches die vordefinierten Optionen für ein Input-Feld enthält.
minzahlDefiniert einen Minimum-Wert für bestimmte Elemente.
maxzahlDefiniert einen Maximum-Wert für bestimmte Elemente.
multipleboolWenn gesetzt, dürfen mehrere Dateien zum Hochladen ausgewählt werden.
patternregular_expressionDefiniert eine "regular expression", die den Wert des Input-Felds prüfen soll.
placeholdertextDefiniert einen Hinweis, welcher den erwarteten Wert des Input-Felds beschreibt.
requiredboolDefiniert, dass das Input-Feld
stepzahlDefiniert die Werte-Intervalle für bestimmte Elemente.

Neue Syntax

HTML5 hat sich losgelöst von dem alten XHTML und erlaubt somit eine einfachere Handhabung in vielen Bereichen. Beispielsweise müssen leere Elemente nun keinen schließenden Schrägstrich / (Slash) mehr am Ende aufweisen.

Eine wesentliche Änderung stellen ebenfalls die sogenannten "Boolschen Attribute" dar. Damit sind Attribute gemeint, die keine Werte haben, sondern lediglich ihren Zweck erfüllen, wenn sie gesetzt werden.

<input type="text" >

<input type="text" required>

Das Attribut required im zweiten Beispiel hat keinen Wert, ist jedoch gesetzt. Folglich ist dieses Element auch erforderlich, damit das Formular bestätigt werden kann.

Form Attribute

Die neuen Attribute ermöglichen es uns das Verhalten des Formulars auf mehreren Wegen zu definieren. Wir können nun die bestehenden Attribute des <form></form> Elements überschreiben. Dafür haben wir die folgenden Elemente, welche wir den beiden Input-Typen type="submit" und type="image" hinzufügen können:

HTML5-AttributÜberschriebenes Attribut
<input type="submit" formaction=""><form action="">
<input type="submit" formenctype=""><form enctype="">
<input type="submit" formmethod=""><form method="">
<input type="submit" formnovalidate><form novalidate>
<input type="submit" formtarget=""><form target="">

Mit diesen Attributen können wir ein Formular mit verschiedenen submit-Buttons definieren und den Benutzer bestimmen lassen, auf welche Weise die Daten gehandhabt werden sollen:

  • Html
  • Ergebnis
<form action="dokument_a.php" enctype="multipart/form-data" method="get" target="_self"> <input type="text" name="benutzername"> <input type="password" name="passwort"> <input type="submit" value="Normal abschicken"> <input type="submit" value="Als Admin abschicken" formaction="dokument_b.php" formenctype="text/plain" formmethod="post" formtarget="_blank" formnovalidate> </form>

Klickt man auf den Button "Als Admin abschicken" werden die Attribute action="", enctype="", method="" und target="" überschrieben und zusätzlich das novalidate Attribut des Formulars gesetzt.

Attribute für Zahlen-Felder

Da wir in HTML5 eine große Menge an Zahlen Input-Feldern hinzubekommen haben, gibt es auch eine große Anzahl an neuen Attributen dafür. Folgende Input-Typen sind hinzugekommen:

Input-TypBeispiel
number
range
date
datetime
datetime-local
month
time
week

Für alle diese Input-Typen können die folgenden neuen Attribute benutzt werden:

  • min
  • max
  • step

Das min="" Attribut sollte in der Regel mit dem max="" Attribut zusammen benutzt werden und gibt den kleinstmöglichen Wert für ein Input-Feld an. Das max="" Attribut gibt dabei den größtmöglichen Wert für ein Input-Feld an. Viele Input-Felder haben einen Aufwärts-/Abwärts-Pfeil, mit welchem der Benutzer mithilfe der Maus die Werte einstellen kann. Mit dem step="" Attribut können wir ein Intervall angeben, in welchem sich die Werte verändern.

  • Html
  • Ergebnis
<form> <input type="number" name="menge" step="3" min="3" max="12" value="3"> <input type="submit"> </form>

Boolsche Attribute

Zu den neuen boolschen Formattributen gehören folgende:

  • autofocus
  • required
  • multiple

Mit dem autofocus Attribut geben wir an, dass das Feld, in welchem es gesetzt ist, automatisch den Fokus bekommt, sobald die Seite geladen wurde. Bekommen mehrere Elemente dieses Attribut, wird das erste genommen, bei dem der Browser es erkennt. Im folgenden Beispiel bekommt das Passwort-Feld den automatischen Fokus:

  • Html
  • Ergebnis
<form> <input type="text" name="benutzername"> <input type="password" name="passwort" autofocus> <input type="submit"> </form>

required setzt fest, dass ein Formular nicht abgeschickt werden darf, wenn das Element mit diesem Attribut keinen Wert hat. Ohne die Angabe des Nachnamens kann das folgende Formular nicht abgeschickt werden.

  • Html
  • Ergebnis
<form> <input type="text" name="vorname" placeholder="Vorname" > <input type="text" name="nachname" placeholder="Nachname" required> <input type="submit"> </form>

Das Attribut multiple ist einzig und allein für das Input-Feld type="file" gedacht und ermöglicht, dass gleich mehrere Dateien von einem Dateifenster ausgewählt werden dürfen.

  • Html
  • Ergebnis
<form> Bilder auswählen: <input type="file" name="bilder" multiple> <input type="submit"> </form>

Sonstige Attribute

Zu den sonstigen Elementen gehören folgende:

  • autocomplete
  • form
  • height
  • width
  • list
  • pattern
  • placeholder

Wollen wir einen Hinweis angeben, können wir das mit dem placeholder="" Attribut. Dessen Wert wird im Input-Feld als (meistens in grau) Beispieltext dargestellt und wieder gelöscht, sobald das Feld den Fokus bekommt.

  • Html
  • Ergebnis
<form> Vorname: <input type="text" name="vorname"> <input type="text" name="vorname" placeholder="Vorname"> <input type="submit"> </form>

Mit dem form="" Attribut geben wir die ID des Formulars an, zu dem das Input-Feld gehört, denn in HTML5 können Felder auch außerhalb des Formulars stehen:

  • Html
  • Ergebnis
<form id="DIE_FORM_ID"> Vorname: <input type="text" name="vorname"> <input type="submit"> </form> Nachname: <input type="text" name="nachname" form="DIE_FORM_ID">

Im obigen Beispiel gehört das Input-Feld für den Nachnamen zum Formular mit der ID DIE_FORM_ID dazu, obwohl es außerhalb dessen definiert ist. Klicken wir auf den "Abschicken"-Button, so wird auch der Nachname gesendet.

Das autocomplete="" Attribut ist nur für das <form></form> Element bestimmt und kann die Werte on bzw. off annehmen. Wenn dieses Attribut auf "on" gesetzt ist, wird der Browser versuchen alle Felder des Formulars bereits auszufüllen, basierend auf vorherigen Eingaben.

  • Html
  • Ergebnis
<form autocomplete="on"> Benutzername: <input type="text" name="benutzername"><br> E-Mail: <input type="email" name="email"><br> <input type="submit"> </form>

Speziell für das Element <input type="image"> wurden die beiden Attribute width und height eingeführt. Diese geben die Breite (width) und Höhe (height) des Button-Bildes.

  • Html
  • Ergebnis
<form> Vorname: <input type="text" name="vorname"><br> Nachname: <input type="text" name="nachname"><br> <input type="image" src="https://www.coding-lab.de/img/logo_std.png" alt="Abschicken" width="128" height="128"> </form>

Natürlich stellt sich jetzt die Frage, warum wir die Dimensionen des Bildes überhaupt angeben sollten. Der Browser erkennt die Größe des Bildes doch sowieso und Skalierungen können wir mit CSS ebenfalls vornehmen. Der Punkt ist folgender:

Wenn der Browser die Seite lädt, dann weiß er ohne diese beiden Attribute leider nicht, welche Größe das Bild hat und kann den Platz dafür nicht reservieren. Erst wenn das Bild geladen ist (Bilder werden hinterher angefragt), ändert der Browser die Größe, was zur Folge hat, dass sich die Seite noch einmal in ihrer Größe verändert, nachdem sie geladen wurde. Dieser unerwünschte Effekt wird mit den beiden Attributen ausgeschlossen.

Mit dem Attribut pattern="" können wir den Wert eines Elements prüfen. Der Wert ist eine "regular expression" (dt. Regulärer Ausdruck) und stellt leider ein separates Themengebiet dar; kann in diesem Zusammenhang also nicht erklärt werden. Viel wichtiger ist jedoch, warum dieses Attribut eingeführt worden ist. Früher ging man bei der Prüfung eines Formulars wie folgt vor:

Klickte jemand auf "Abschicken", so wurden mithilfe von Javascript alle Werte der Input-Felder genommen und auf ihre Richtigkeit geprüft. Ist der Wert im Telefonnummern-Feld auch wirklich eine Zahl? Viele weitere Fragen konnte man so abklären und die flinken unter den Entwicklern taten das mit einem regulären Ausdruck. Dieser ist zwar schwerer zu lesen, kann aber auf kleinsten Raum sehr viele Tests mit dem Wert durchführen. Diese Tests wurden natürlich auf dem Server dupliziert, sodass ein Angriff auf den Server (wenn Javascript ausgeschaltet wurde) nicht auf diese Weise funktionieren kann.

Mit dem pattern="" Attribut können wir die Prüfung beim Abschicken des Formulars automatisch vom Browser mit dem gewünschten regulären Ausdruck durchführen lassen. Stimmt der Wert nicht mit den Kriterien der Prüfung überein, wird das Formular nicht abgeschickt. Im folgenden Beispiel ist ein Regulärer Ausdruck definiert, der genau 4 Zahlen zulässt. Nicht weniger und nicht mehr und auch keine anderen Zeichen. Das zugehörige title="" Attribut wird angezeigt, sobald der Wert nicht übereinstimmt und sollte in der Regel einen Hinweis zu den Kriterien geben.

  • Html
  • Ergebnis
<form> Postleitzahl: <input type="text" name="plz" pattern="[0-9]{4}" title="Vier Zahlen und nicht mehr!"> <input type="submit"> </form>

Das list="" Attribut wurde bereits bei den Form-Elementen beschrieben und kommt in Verbindung mit dem Element <datalist></datalist> vor. Dieses Element gibt eine Reihe von möglichen Werten vor, die ein Input-Element haben kann. Damit das Input-Element seine Liste von Möglichkeiten bekommt, muss es das list="" Attribut mit der ID des <datalist></datalist> Elements haben:

  • Html
  • Ergebnis
Browser eingeben: <input type="text" list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Tippt man im obigen Beispiel in das Input-Feld den Buchstaben g ein, so wird der Wert "Google Chrome" für das Feld vorgeschlagen, weil es der einzige Wert mit dem Anfangsbuchstaben "g" ist. Alternativ steht in vielen Browsern ein Pfeil zur Verfügung, der die gesamte Liste anzeigt, sobald man ihn anklickt.