HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

HTML -Formularattribute


Dieses Kapitel beschreibt die verschiedenen Attribute für das HTML- <form>Element.


Das Aktionsattribut

Das actionAttribut definiert die Aktion, die beim Absenden des Formulars ausgeführt werden soll.

Normalerweise werden die Formulardaten an eine Datei auf dem Server gesendet, wenn der Benutzer auf die Schaltfläche „Senden“ klickt.

Im Beispiel unten werden die Formulardaten an eine Datei namens „action_page.php“ gesendet. Diese Datei enthält ein serverseitiges Skript, das die Formulardaten verarbeitet:

Beispiel

Senden Sie beim Absenden Formulardaten an "action_page.php":

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Tipp: Wenn das actionAttribut weggelassen wird, wird die Aktion auf die aktuelle Seite gesetzt.


Das Zielattribut

Das targetAttribut gibt an, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wird.

Das targetAttribut kann einen der folgenden Werte haben:

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

Der Standardwert ist _self, was bedeutet, dass die Antwort im aktuellen Fenster geöffnet wird.

Beispiel

Hier wird das übermittelte Ergebnis in einem neuen Browser-Tab geöffnet:

<form action="/action_page.php" target="_blank">

Das Methodenattribut

Das methodAttribut gibt die beim Senden der Formulardaten zu verwendende HTTP-Methode an.

Die Formulardaten können als URL-Variablen (mit method="get") oder als HTTP-Post-Transaktion (mit method="post") gesendet werden.

Die Standard-HTTP-Methode beim Senden von Formulardaten ist GET. 

Beispiel

Dieses Beispiel verwendet die GET-Methode beim Senden der Formulardaten:

<form action="/action_page.php" method="get">

Beispiel

Dieses Beispiel verwendet die POST-Methode beim Senden der Formulardaten:

<form action="/action_page.php" method="post">

Hinweise zu GET:

  • Hängt die Formulardaten in Name/Wert-Paaren an die URL an
  • Verwenden Sie NIEMALS GET, um sensible Daten zu senden! (Die übermittelten Formulardaten sind in der URL sichtbar!)
  • Die Länge einer URL ist begrenzt (2048 Zeichen)
  • Nützlich für Formularübermittlungen, bei denen ein Benutzer das Ergebnis mit einem Lesezeichen versehen möchte
  • GET eignet sich gut für nicht sichere Daten wie Abfragezeichenfolgen in Google

Hinweise zu POST:

  • Fügt die Formulardaten in den Hauptteil der HTTP-Anforderung ein (die gesendeten Formulardaten werden nicht in der URL angezeigt)
  • POST hat keine Größenbeschränkungen und kann zum Senden großer Datenmengen verwendet werden.
  • Formularübermittlungen mit POST können nicht mit einem Lesezeichen versehen werden

Tipp: Verwenden Sie immer POST, wenn die Formulardaten sensible oder persönliche Informationen enthalten!


Das Autocomplete-Attribut

Das autocompleteAttribut gibt an, ob ein Formular die automatische Vervollständigung ein- oder ausschalten soll.

Wenn die automatische Vervollständigung aktiviert ist, vervollständigt der Browser automatisch Werte basierend auf Werten, die der Benutzer zuvor eingegeben hat.

Beispiel

Ein Formular mit automatischer Vervollständigung:

<form action="/action_page.php" autocomplete="on">

Das Novalidate-Attribut

Das novalidateAttribut ist ein boolesches Attribut.

Wenn vorhanden, gibt es an, dass die Formulardaten (Eingabe) beim Senden nicht validiert werden sollen.

Beispiel

Ein Formular mit einem novalidate-Attribut:

<form action="/action_page.php" novalidate>

HTML-Übungen

Testen Sie sich mit Übungen

Übung:

Fügen Sie eine Senden-Schaltfläche hinzu und geben Sie an, dass das Formular zu „/action_page.php“ gehen soll.

<form ="/action_page.php">
Name: <input type="text" name="name">
<>
</form>


Liste aller <form>-Attribute

Attribut Beschreibung
Zeichensatz akzeptieren Gibt die für die Formularübermittlung verwendeten Zeichencodierungen an
Aktion Gibt an, wohin die Formulardaten gesendet werden, wenn ein Formular gesendet wird
Autovervollständigung Gibt an, ob ein Formular die automatische Vervollständigung ein- oder ausschalten soll
enctyp Gibt an, wie die Formulardaten codiert werden sollen, wenn sie an den Server gesendet werden (nur für method="post")
Methode Gibt die beim Senden von Formulardaten zu verwendende HTTP-Methode an
Name Gibt den Namen des Formulars an
novalidieren Gibt an, dass das Formular beim Absenden nicht validiert werden soll
rel Gibt die Beziehung zwischen einer verknüpften Ressource und dem aktuellen Dokument an
Ziel Gibt an, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wird