Spektakuläre Formulare mit HTML5

HTML5 Rocks

Einführung

Nicht viele lassen sich für Formulare begeistern, HTML5 bringt jedoch einige wesentliche Verbesserungen mit sich, sowohl für den Entwickler des Formulars als auch für die Nutzer, die es ausfüllen. Neue Elemente, Attribute, Eingabetypen, die browserbasierte Validierung, CSS3-Stiltechniken sowie das FormData-Objekt vereinfachen die Erstellung von Formularen und sorgen für den nötigen Spaß.

There is even more up to date forms guidance on our new Web Fundamentals site.

Browser-Unterstützung

Zum Zeitpunkt der Entstehung dieses Artikels gab es große browserabhängige Unterschiede im Hinblick auf die Unterstützung der neuen Formular- und Eingabeelemente, Attribute und Typen. Auch bei Browsern, die eine bestimmte Funktion unterstützen, kann das Verhalten von einem Browser zum nächsten variieren. Die Unterstützung von HTML5-Formularen nimmt jedoch immer weiter zu. Zum Zeitpunkt der Entstehung dieses Artikels waren diese Diagramme die aktuellsten, die ich finden konnte. Diese zeigen im Detail, inwieweit HTML5-Formulare vom jeweiligen Browser unterstützt werden.

Überblick über Neuerungen

Neue Elemente

HTML5 bietet fünf neue Eingabe- und Formularelemente.

Element Verwendungszweck Hinweise
progress Gibt an, inwieweit eine Aufgabe abgeschlossen ist Das Element progress könnte zum Beispiel den Fortschritt einer Datei anzeigen, die gerade hochgeladen wird.
meter Stellt einen skalaren Messwert innerhalb eines bekannten Bereichs dar Das Element meter könnte zum Beispiel für eine Temperatur- oder Gewichtsangabe verwendet werden.
datalist Stellt eine Auswahl von option-Elementen dar, die zusammen mit dem neuen Attribut list zur Erstellung von Dropdown-Menüs verwendet werden kann Wenn das Eingabefeld mit der zugehörigen Datenliste fokussiert wird, erscheint ein Dropdown-Menü, das Werte aus der datalist enthält.
keygen Ein Steuerungselement zur Generierung eines Schlüsselpaars Beim Senden des Formulars wird der private Schlüssel im lokalen Schlüsselspeicher abgelegt, während der öffentliche Schlüssel an den Server gesendet wird.
output Zeigt die Ergebnisse einer Berechnung an Zum Beispiel könnte mithilfe des output-Elements die Summe der Werte zweier Eingabeelemente angezeigt werden.

Neue Eingabetypen

HTML5 bietet dreizehn neue Eingabetypen. Wenn diese in einem Browser angezeigt werden, der keine Unterstützung bietet, wird auf die Texteingabe zurückgegriffen.

Eingabetyp Verwendungszweck Hinweise
tel Zur Eingabe einer Telefonnummer tel setzt keine bestimmte Syntax voraus, wenn also ein bestimmtes Format eingehalten werden soll, können Sie zusätzlich pattern oder setCustomValidity() verwenden.
search Fordert Nutzer zur Eingabe von Text auf, nach dem gesucht werden soll Der Unterschied zwischen search und text ist in erster Linie stilistischer Natur. Durch Verwendung des Eingabetyps search wird der Stil des Eingabefelds möglicherweise an die Suchfelder dieser Plattform angeglichen.
url Zur Eingabe einer URL url ist zur Eingabe einer einzelnen, absoluten URL bestimmt, die einen sehr großen Wertebereich abdeckt.
email Zur Eingabe einer E-Mail-Adresse oder einer Liste von E-Mail-Adressen Bei Verwendung des Attributs multiple können mehrere, durch Komma getrennte E-Mail-Adressen eingegeben werden.
datetime Zur Eingabe von Datum und Uhrzeit auf der Grundlage der Zeitzone UTC
date Zur Eingabe eines Datums ohne Zeitzone
month Zur Eingabe eines Datums mit Jahr und Monat, jedoch ohne Zeitzone
week Zur Eingabe eines Datums bestehend aus einer Jahres- und einer Wochenzahl, jedoch ohne Zeitzone Ein Beispiel für dieses Format ist 2011-W05 für die fünfte Woche des Jahres 2011.
time Zur Eingabe einer Uhrzeit mit Stunde, Minute, Sekunden und Bruchsekunden, jedoch ohne Zeitzone
datetime-local Zur Eingabe von Datum und Uhrzeit ohne Zeitzone
number Für numerische Eingaben Gültige Werte sind Gleitkommazahlen.
range Für numerische Eingaben, bei denen, im Gegensatz zu number, der tatsächliche Wert nicht von Bedeutung ist In den meisten Browsern, die diesen Eingabetyp unterstützen, erfolgt die Implementierung in Form eines Schiebereglers.
color Zur Auswahl einer Farbe über ein entsprechendes Steuerungselement Der Wert muss eine gültige einfache Farbe in Kleinbuchstaben sein, zum Beispiel #ffffff.

Neue Eingabeattribute

HTML5 bietet zudem mehrere neue Attribute für die Eingabe- und Formularelemente.

Attribute Verwendungszweck Hinweise
autofocus Richtet den Fokus der Eingabe auf das Element, sobald die Seite geladen wurde autofocus kann auf Eingabe, Auswahl, Textbereich oder Schaltfläche angewendet werden.
placeholder Gibt dem Nutzer einen Hinweis darauf, welche Art von Daten eingegeben werden sollen Der Wert für "placeholder" wird als heller Text dargestellt, bis das Element fokussiert wird und der Nutzer Daten eingibt. Mögliche Anwendungsgebiete: Eingabe und Textbereich.
form Gibt ein oder mehrere Formulare an, auf das bzw. die sich das Eingabeelement bezieht Bei Verwendung des Attributs form können die Eingabeelemente überall auf der Seite platziert werden, nicht nur innerhalb des Formularelements. Darüber hinaus kann ein einzelnes Eingabeelement mit mehreren Formularen verknüpft werden.
required Ein boolesches Attribut, das angibt, dass das Element erforderlich ist Das Attribut required ist hilfreich, wenn Sie eine browserbasierte Validierung ohne Verwendung von benutzerdefiniertem JavaScript durchführen möchten.
autocomplete Legt fest, dass ein Feld nicht auf der Grundlage der vorherigen Eingaben des Nutzers vom Browser automatisch vervollständigt oder vorausgefüllt werden soll Das Attribut autocomplete eignet sich für Felder, in die zum Beispiel eine Kreditkartennummer oder eine Einmalpasswort eingegeben werden und die nicht automatisch vervollständigt werden sollen. Standardmäßig ist für das Attribut autocomplete der Wert on festgelegt, Sie müssen also off auswählen, um es zu deaktivieren.
pattern Gleicht den Wert eines Elements mit einem regulären Ausdruck ab Bei Verwendung von pattern sollten Sie auch einen Wert für title eingeben, damit der Nutzer weiß, welches Muster erwartet wird.
dirname Sendet die Ausrichtung des Steuerungselements zusammen mit dem Formular Wenn der Nutzer zum Beispiel Textdaten von rechts nach links eingegeben hat und das Eingabeelement das Attribut dirname enthält, wird zusammen mit dem Eingabewert ein entsprechender Hinweis gesendet.
novalidate Verhindert eine Validierung der Formulareingaben, sofern dies für ein Formularelement angegeben ist
formaction Überschreibt das für das Formularelement angegebene Attribut "action" Dieses Attribut wird für die Elemente input und button unterstützt.
formenctype Überschreibt das für das Formularelement angegebene Attribut "enctype" Dieses Attribut wird für die Elemente input und button unterstützt.
formmethod Überschreibt das für das Formularelement angegebene Attribut "enctype" Dieses Attribut wird für die Elemente input und button unterstützt.
formnovalidate Überschreibt das für das Formularelement angegebene Attribut "novalidate" Dieses Attribut wird für die Elemente input und button unterstützt.
formtarget Überschreibt das für das Formularelement angegebene Attribut "target" Dieses Attribut wird für die Elemente input und button unterstützt.

Das FormData-Objekt

Eine der Verbesserungen von XMLHttpRequest ist die Einführung des FormData-Objekts. Mit dem FormData-Objekt können Sie über XMLHttpRequest eine Auswahl von Schlüssel/Wert-Paaren sowie Dateien (optional) erstellen und senden. Bei dieser Technik werden die Daten im gleichen Format wie bei Verwendung der Methode submit() mit dem Codierungstyp multipart/form-data gesendet.

FormData ermöglicht Ihnen, HTML-Formulare mithilfe von JavaScript im Handumdrehen zu erstellen und sie unter Verwendung von XMLHttpRequest.send() zu senden. Hier ein einfaches Beispiel:

var formData = new FormData();
formData.append("part_num", "123ABC"); 
formData.append("part_price", 7.95);
formData.append("part_image", somefile)

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");  
xhr.send(formData);

Sie können mit FormData auch weitere Daten zu einem vorhandenen Formular hinzufügen, bevor Sie es senden.

var formElement = document.getElementById("someFormElement");
var formData = new FormData(formElement);
formData.append("part_description", "The best part ever!");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");
xhr.send(formData);

Browserbasierte Validierung

Seien wir ehrlich. Das Validieren von Formulardaten ist eine ziemlich langweilige Aufgabe, dennoch muss es getan werden. Für eine clientseitige Formularvalidierung schreiben Sie heute wahrscheinlich einen benutzerdefinierten JavaScript-Code oder verwenden eine Bibliothek, um vor dem Absenden des Formulars zu überprüfen, ob die eingegebenen Werte gültig sind oder alle erforderlichen Felder ausgefüllt wurden.

Neue Eingabeattribute wie required und pattern in Kombination mit CSS-Pseudoklassen-Selektoren vereinfachen das Schreiben von Prüfmechanismen und das Anzeigen von Feedback für den Nutzer. Auch andere erweiterte Validierungstechniken ermöglichen es Ihnen, unter Verwendung von JavaScript benutzerdefinierte Validierungsregeln und -nachrichten festzulegen oder herauszufinden, ob und warum ein Element ungültig ist.

Das Attribut "required"

Bei Verwendung des Attributs required muss das entsprechende Feld einen Wert enthalten, wenn das Formular gesendet wird. Im Folgenden finden Sie ein Beispiel eines Eingabefelds für eine erforderliche E-Mail-Adresse. Damit wird sichergestellt, dass das Feld einen Wert aufweist und dass es sich bei dem Wert gemäß dieser Definition um eine gültige E-Mail-Adresse handelt.

<input type="email" id="email_addr" name="email_addr" required />

Das Attribut "pattern"

Das Attribut pattern legt einen regulären Ausdruck fest, der zur Validierung eines Eingabefelds verwendet wird. Dieses Beispiel zeigt ein erforderliches Texteingabefeld für eine Teilenummer. Nehmen wir für dieses Beispiel an, dass eine Teilenummer aus drei Großbuchstaben gefolgt von vier Zahlen besteht. Durch die Verwendung von required und pattern wird sichergestellt, dass das Feld einen Wert enthält und dieser das richtige Format einer Teilenummer aufweist. Bewegt der Nutzer seine Maus über das Feld, erscheint die Nachricht im Attribut "title".

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
       title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

Um noch einmal auf das vorherige Beispiel zurückzukommen, können Sie das Eingabefeld auch rot umranden, wenn eine ungültige Teilenummer eingegeben wird. Fügen Sie hierzu dieses CSS hinzu, um das Eingabefeld im Falle eines ungültigen Werts rot zu umranden.

:invalid {
  border: 2px solid #ff0000;
}

Das Attribut "formnovalidate"

Das Attribut formnovalidate kann für die Elemente input oder button verwendet werden. In diesem Fall wird die Validierung beim Senden des Formulars deaktiviert. Im Folgenden finden Sie ein Beispiel, bei dem für das Senden eines Formulars über die Schaltfläche "Senden" eine gültige Eingabe erforderlich ist, beim Senden über die Schaltfläche "Speichern" hingegen nicht.

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
       title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">

Einschränkungsvalidierungs-API

Mit dem Einschränkungsvalidierungs-API erhalten Sie leistungsstarke Tools für die benutzerdefinierte Validierung. Mithilfe des APIs können Sie zum Beispiel einen benutzerdefinierten Fehler festlegen, überprüfen, ob ein Element gültig ist, oder herausfinden, warum ein Element ungültig ist. Im Folgenden finden Sie ein Beispiel, bei dem ein benutzerdefinierter Fehler angezeigt wird, falls die Werte zweier Felder nicht übereinstimmen.

<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">

<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">

<script>
function check(input) {
  if (input.value != document.getElementById('email_addr').value) {
    input.setCustomValidity('The two email addresses must match.');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
  }
}
</script>

Gemeinsame Verwendung

Das folgende Beispiel zeigt ein Anfrageformular für eine Reservierung, welches verschiedene Eingabetypen, die Formularvalidierung sowie CSS-Selektoren und -Stile vereint.

$99,00

HTML und JavaScript für das Formular sehen wir folgt aus:

<form oninput="total.value = (nights.valueAsNumber * 99) + 
 ((guests.valueAsNumber - 1) * 10)">

  <label>Full name:</label>
  <input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>

  <label>Email address:</label>
  <input type="email" id="email_addr" name="email_addr" required>

  <label>Repeat email address:</label>
  <input type="email" id="email_addr_repeat" name="email_addr_repeat" required 
   oninput="check(this)">

  <label>Arrival date:</label>
  <input type="date" id="arrival_dt" name="arrival_dt" required>
  
  <label>Number of nights (rooms are $99.00 per night):</label>
  <input type="number" id="nights" name="nights" value="1" min="1" max="30" required>

  <label>Number of guests (each additional guest adds $10.00 per night):</label>
  <input type="number" id="guests" name="guests" value="1" min="1" max="4" required>

  <label>Estimated total:</label>
  $<output id="total" name="total">99</output>.00
  <br><br>

  <label>Promo code:</label>
  <input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" 
   title="Promo codes consist of 6 alphanumeric characters.">

  <input type="submit" value="Request Reservation" /> 
</form>

<script>
function check(input) {
  if (input.value != document.getElementById('email_addr').value) {
    input.setCustomValidity('The two email addresses must match.');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
  }
}
</script>

Dies ist das CSS in Verbindung mit dem Formularcode:

:invalid { 
  border-color: #e88;
  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  box-shadow:0 0 5px rgba(255, 0, 0, .8);
}

:required {
  border-color: #88a;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  box-shadow: 0 0 5px rgba(0, 0, 255, .5);
}

form {
  width:300px;
  margin: 20px auto;
}

input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border:1px solid #ccc;
  font-size:20px;
  width:300px;
  min-height:30px;
  display:block;
  margin-bottom:15px;
  margin-top:5px;
  outline: none;

  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;
}

input[type=submit] {
  background:none;
  padding:10px;
}

Ressourcen

Comments

0