HTML5 Formularelemente

Neue HTML5-Formularelemente

HTML5 enthält die folgenden neuen Formularelemente:

• <datalist>
• <keygen>
• <output>

Hinweis:Nicht alle Browser unterstützen die neuen HTML5-Formularelemente, aber Sie können sie trotzdem verwenden. Selbst wenn die Formularattribute nicht unterstützt werden, werden sie weiterhin als reguläre Formularelemente angezeigt.

HTML5 <datalist>-Element

Das <datalist>-Element definiert eine Liste von Optionen für ein input-Element.

Das <datalist>-Element gibt das Formular- oder input-Element an, das über eine Auto-Vervollständigungsfunktion verfügen soll. Wenn der Benutzer beginnt, in ein Auto-Vervollständigungs-Element zu tippen, sollte der Browser die gefüllten Optionen in diesem Element anzeigen:

Verwenden Sie das list-Attribut des <input>-Elements, um es mit dem <datalist>-Element zu verbinden.

instance

Verwenden Sie das <datalist>-Element, um die vordefinierten Werte des <input>-Elements zu definieren:

<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Probieren Sie es aus »

HTML5 <keygen>-Element

Das <keygen>-Element bietet Benutzern eine zuverlässige Methode zur Authentifizierung.

Das <keygen>-Tag definiert ein Feld für einen Schlüsselpaargenerator in einem Formular.

Wenn das Formular übermittelt wird, werden zwei Schlüssel generiert: ein privater Schlüssel und ein öffentlicher Schlüssel.

Der private Schlüssel wird auf dem Client gespeichert, während der öffentliche Schlüssel an den Server gesendet wird. Der öffentliche Schlüssel kann später zum Überprüfen des Client-Zertifikats (Client-Zertifikat) verwendet werden.

Dieses Element ist veraltet und wird nicht mehr zur Verwendung empfohlen. Alternativen sind:

1. Verwendung der Web Cryptography API zum Generieren von Schlüsseln in JavaScript

2. Verwendung spezialisierter Verschlüsselungsbibliotheken

instance

Ein Formular mit einem <keygen>-Feld:

<form action="demo_keygen.asp" method="get">Benutzername:<input type="text" name="usr_name">Schlüsselgenerator:<keygen name="security"> <input type="submit"> </form>

Probieren Sie es aus »

HTML5 <output>-Element

Das <output>-Element wird für verschiedene Arten von Ausgaben verwendet, wie Berechnungen oder Skriptausgaben:

instance

Das Ergebnis der Berechnung im <output>-Element anzeigen:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </Form>

Probieren Sie es aus »

Neue HTML5-Formularelemente