HTML5 Formularattribute

Neue HTML5-Formularattribute

HTML5 hat den <form>- und <input>-Tags mehrere neue Attribute hinzugefügt.

Neue Attribute von <form>:

• autocomplete
• novalidate

Neue Attribute von <input>:

• autocomplete
• autofocus
• Form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height und width
• Liste
• min und max
• multiple
• pattern (regexp)
• placeholder
• required
• Schrittweite

<form> / <input> autocomplete-Attribut

Das autocomplete-Attribut gibt an, dass ein Formular- oder Eingabefeld eine Autovervollständigungsfunktion haben sollte.

Wenn der Benutzer beginnt, in ein Autovervollständigungsfeld einzugeben, sollte der Browser die ausgefüllten Optionen in diesem Feld anzeigen.

Hinweis:Das autocomplete-Attribut kann in einem Formularelement aktiviert und in einem Eingabeelement deaktiviert sein.

Hinweis:Das autocomplete-Attribut ist auf das <form>-Tag und die folgenden Typen von <input>-Tags anwendbar: text, search, url, telephone, email, password, datepickers, range und color.

Beispiel

Autovervollständigung ist in einem Formularfeld aktiviert, aber in einem Eingabefeld deaktiviert:

<form action="demo-form.php" autocomplete="auf"> Vorname:<input type="text" name="fname"><br> Nachname: <input type="text" name="lname"><br> E-Mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </Form>

Probieren Sie es aus »

Hinweis:In einigen Browsern müssen Sie möglicherweise die Autovervollständigungsfunktion aktivieren, damit dieses Attribut funktioniert.

<form> novalidate-Attribut

Das novalidate-Attribut ist ein boolesches (true oder false) Attribut.

Das novalidate-Attribut ist ein boolesches Attribut des HTML-Formularelements, mit dem der Browser angewiesen wird, das Formular nicht zu validieren.

Wenn das novalidate-Attribut zum <form>-Element hinzugefügt wird, führt der Browser die standardmäßige Formularvalidierung nicht aus und prüft nicht, ob die Eingabefelder den angegebenen Validierungsregeln entsprechen.

Das novalidate-Attribut ermöglicht es Entwicklern, die Formularvalidierungslogik vollständig zu steuern, die mithilfe von JavaScript oder anderen Mitteln angepasst werden kann.

Beispiel

Keine Validierung für übermittelte Formulardaten:

<form action="demo-form.php" novalidate> E-Mail: <input type="email" name="user_email"> <input type="submit"> </form>

Probieren Sie es aus »

<input> autofocus-Attribut

Das autofocus-Attribut ist ein boolesches Attribut.

Das autofocus-Attribut gibt an, dass die Domain automatisch den Fokus erhalten soll, wenn die Seite geladen wird.

Beispiel

Sorgen Sie dafür, dass das Eingabefeld "Vorname" automatisch den Fokus erhält, wenn die Seite geladen wird:

Vorname:<input type="text" name="fname" autofocus>

Probieren Sie es aus »

<input> form-Attribut

Das form-Attribut gibt an, zu welchem Formular oder welchen Formularen ein Eingabefeld gehört.

Hinweis:Verwenden Sie eine Liste durch Leerzeichen getrennter Werte, um auf mehrere Formulare zu verweisen.

Beispiel

Ein Eingabefeld außerhalb eines Formulars verweist auf ein HTML-Formular (das Eingabefeld gehört weiterhin zum Formular):

<form action="demo-form.php" id="form1"> Vorname: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Nachname: <input type="text" name="lname" form="form1">

Probieren Sie es aus »

<input> formaction-Attribut

Das formaction-Attribut beschreibt die URL-Adresse zum Absenden des Formulars.

Das formaction-Attribut überschreibt das action-Attribut im <form>-Element.

Hinweis:Das formaction-Attribut wird mit type="submit" und type="image" verwendet.

Beispiel

Das HTML-Formular enthält zwei verschiedene Absende-Schaltflächen mit unterschiedlichen URLs:

<form action="demo-form.php"> Vorname: <input type="text" name="fname"><br> Nachname: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo-admin.php" value="Submit"> </form>

Probieren Sie es aus »

<input> formenctype-Attribut

Das formenctype-Attribut beschreibt die Datenkodierung, die an den Server gesendet wird, wenn das Formular abgeschickt wird (nur für Formularelemente mit method="post").

Das formenctype-Attribut überschreibt das enctype-Attribut im <form>-Element.

Haupt:Dieses Attribut wird mit type="submit" und type="image" verwendet.

Beispiel

Die erste Absende-Schaltfläche sendet die Formulardaten in der Standardkodierung, während die zweite Absende-Schaltfläche die Formulardaten im Kodierungsformat "multipart/form-data" sendet:

<form action="demo-post_enctype.php" method="post"> Vorname: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Absenden mit Multipart/form-data"> </form>

Probieren Sie es aus »

<input> formmethod-Attribut

Das formmethod-Attribut legt fest, wie das Formular übermittelt wird.

Das formmethod-Attribut überschreibt das method-Attribut im <form>-Element.

Hinweis:Dieses Attribut kann mit type="submit" und type="image" verwendet werden.

Beispiel

Methode zur Formularübermittlung neu definieren:

<form action="demo-form.php" method="get"> Vorname: <input type="text" name="fname"><br> Nachname: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo-post.php" value="Absenden mit POST"> </form>

Probieren Sie es aus »

<input> formnovalidate-Attribut

Das formnovalidate-Attribut ist ein boolesches Attribut.

Das formnovalidate-Attribut gibt an, dass das input-Element nicht validiert werden soll, wenn das Formular übermittelt wird.

Das formnovalidate-Attribut überschreibt das novalidate-Attribut im <form>-Element.

Hinweis:Das formnovalidate-Attribut wird zusammen mittype="submit"verwendet.

Beispiel

Zwei Submit-Buttons mit und ohne Validierung:

<form action="demo-form.php"> E-Mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Absenden ohne Validierung"> </Formular>

Probieren Sie es aus »

<input> formtarget-Attribut

Das formtarget-Attribut gibt einen Namen oder ein Schlüsselwort an, um anzugeben, wo die übermittelten Daten nach der Übermittlung angezeigt werden sollen.

Das formtarget-Attribut überschreibt das target-Attribut im <form>-Element.

Hinweis:Das formtarget-Attribut wird zusammen mittype="submit"undtype="image"verwendet.

Beispiel

Zwei Absende-Schaltflächen in verschiedenen Fenstern:

<form action="demo-form.php"> Vorname: <input type="text" name="fname"><br> Nachname: <input type="text" name="lname"><br> <input type="submit" value="Normale Übermittlung"> <input type="submit" formtarget="_blank" value="An eine neue Seite senden"> </form>

Probieren Sie es aus »

<input> height- und width-Attribute

Die Attribute height und width geben die Höhe und Breite des Bildes für <input>-Tags vom Typ image an.

Hinweis:Die Attribute height und width sind nur auf das <input>-Tag vom Typ image anwendbar.

Hinweis:Bilder werden in der Regel mit beiden Attributen height und width angegeben. Wenn Bilder mit height und width festgelegt werden, bleibt der Platz, den sie während des Ladens der Seite einnehmen, erhalten. Ohne diese Attribute kennt der Browser die Größe des Bildes nicht und kann keinen passenden Platz reservieren. Während des Ladens von Bildern kann sich das Layout der Seite ändern (selbst wenn das Bild bereits geladen wurde).

Beispiel

Definiert eine Bild-Absende-Schaltfläche, die die Attribute height und width verwendet:

<input type="image" src="img_submit.gif.html" alt="Submit" width="48" height="48">

Probieren Sie es aus »

<input> list-Attribut

Das list-Attribut definiert eine datalist für das Eingabefeld. Eine datalist ist eine Liste von Optionen für das Eingabefeld.

Beispiel

Definiert Eingabewerte in einer <datalist> vor:

<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 »

<input> min- und max-Attribute

Die Attribute min, max und step werden verwendet, um Einschränkungen (Grenzwerte) für Eingabetypen festzulegen, die Zahlen oder Datumsangaben enthalten.

Hinweis:Die Attribute min, max und step sind auf die folgenden Arten von <input>-Tags anwendbar: Datumsauswahl, number und range.

Beispiel

Legt die Minimal- und Maximalwerte für ein <input>-Element fest:

Geben Sie ein Datum vor 1980-01-01 ein:
<input type="date" name="bday" max="1979-12-31">

Geben Sie ein Datum nach 2000-01-01 ein:
<input type="date" name="bday" min="2000-01-02">

Menge (zwischen 1 und 5):
<input type="number" name="quantity" min="1" max="5">

Probieren Sie es aus »

<input> multiple-Attribut

Das multiple-Attribut ist ein boolesches Attribut.

Das multiple-Attribut legt fest, dass ein <input>-Element mehrere Werte auswählen kann.

Hinweis:Das multiple-Attribut gilt für die folgenden Typen von <input>-Tags: email und file.

Beispiel

Mehrere Dateien hochladen:

Bilder auswählen: <input type="file" name="img" multiple>

Probieren Sie es aus »

<input> pattern-Attribut

Das pattern-Attribut beschreibt einen regulären Ausdruck, der verwendet wird, um den Wert eines <input>-Elements zu validieren.

Hinweis:Das pattern-Attribut ist auf die folgenden Typen von <input>-Tags anwendbar: text, search, url, tel, email und password.

Tipp:Dieses Attribut wird verwendet, um das Muster zu beschreiben.titleHinweis:

Sie können mehr über reguläre Ausdrücke in unseremJavaScript-Tutorial.Beispiel:

Beispiel

Probieren Sie es aus »

Ländercode: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Dreibuchstabiger Ländercode">

Das <input> placeholder-Attribut

<input> placeholder-Attribut

Ein kurzer Hinweis wird im Eingabefeld angezeigt, bevor der Benutzer einen Wert eingibt.

Hinweis:

Das placeholder-Attribut ist auf die folgenden Typen von <input>-Tags anwendbar: text, search, url, telephone, email und password.Beispiel:

Beispiel

Probieren Sie es aus »

<input type="text" name="fname" placeholder="Vorname">

Das required-Attribut für <input>

<input> required-Attribut

Das required-Attribut legt fest, dass ein Eingabefeld vor dem Absenden ausgefüllt werden muss (darf nicht leer sein).

Hinweis:

Das required-Attribut gilt für die folgenden Typen von <input>-Tags: text, search, url, Telefon, email, password, Datumsauswahl, number, checkbox, radio und file.Beispiel:

Beispiel

Probieren Sie es aus »

Benutzername: <input type="text" name="usrname" required>

Das step-Attribut für <input>

<input> step-Attribut

Wenn step "3" ist, dann sind gültige Zahlen -3, 0, 3, 6 usw.

Tipp:']

Das step-Attribut kann mit den max- und min-Attributen einen Bereichswert erstellen.Hinweis:

Das step-Attribut wird mit den folgenden Eingabetypen verwendet: number, range, date, datetime, datetime-local, month, time und week.Beispiel:

Beispiel

Probieren Sie es aus »

<input type="number" name="points" step="3">

HTML5 <input>-Tag

HTML5 <input>-Tag