HTML-Tag <form>
Das <form>-Tag wird verwendet, um HTML-Formulare zur Webseite hinzuzufügen, damit Benutzereingaben erfasst werden können. Formulare dienen dazu, die vom Benutzer übermittelten Daten an den Server zu senden. Die Daten werden beim Drücken der Schaltfläche „Submit“ gesendet. Wenn es keine solche Schaltfläche gibt, werden die Informationen gesendet, wenn die Taste „Enter“ gedrückt wird.
TIP
Wenn die einzelnen Elemente innerhalb des <form>-Tags gültig sind, können Sie die CSS- :valid-Pseudoklasse zum Stylen des Tags verwenden, und die :invalid-Pseudoklasse, falls sie nicht gültig sind.
Syntax
Das <form>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<form>) und dem schließenden (</form>) Tag geschrieben.
Das <form>-Element enthält andere HTML-Tags, die die Eingabemethode der Daten definieren:
- Das
<input>-Tag definiert ein Benutzereingabefeld. - Das
<textarea>-Tag definiert ein Formularfeld zum Erstellen eines mehrzeiligen Eingabebereichs. - Das
<button>-Tag wird verwendet, um eine Schaltfläche in einem Formular zu platzieren. - Das
<select>-Tag richtet ein Steuerelement zum Erstellen einer Dropdown-Liste ein. - Das
<option>-Tag definiert die Elemente in der vom<select>-Tag festgelegten Dropdown-Liste. - Das
<optgroup>-Tag gruppiert zusammengehörige Daten in der vom<select>-Tag festgelegten Dropdown-Liste. - Das
<fieldset>-Tag gruppiert die Elemente innerhalb des vom<form>-Tag festgelegten Formulars visuell. - Das
<label>-Tag legt die Textbeschriftung für das<input>-Element fest. - Das
<legend>-Tag definiert die Überschrift für das<fieldset>-Element.
Beispiel für das HTML-<form>-Tag:
Beispiel für das HTML-<form>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Ergebnis
Beispiel für das HTML-<form>-Tag mit den Tags <input> und <label>:
Beispiel für das HTML-<form>-Tag mit den Tags <input> und <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Beispiel für das HTML-<form>-Tag mit dem <textarea>-Tag:
Beispiel für das HTML-<form>-Tag mit dem <textarea>-Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<textarea rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Attribute
| Attribute | Wert | Beschreibung |
|---|---|---|
| accept | file_type | Gibt eine durch Kommas getrennte Liste von Dateitypen an, die der Server akzeptiert. In HTML5 für <input type="file"> unterstützt. |
| accept-charset | character_set | Gibt die Kodierung an, in der der Server Daten empfangen und verarbeiten kann. |
| action | URL | Gibt die Adresse an, an die die Daten gesendet werden und wo sie verarbeitet werden. Wenn Sie dieses Attribut verwenden, ändern Sie den „Skriptnamen“ in den Namen und den Speicherort der Skriptdatei. |
| autocomplete | on off | Aktiviert/deaktiviert die automatische Vervollständigung von Formularfeldern. Der Standardwert ist on. |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Bestimmt, wie die Formulardaten kodiert werden, wenn sie gesendet werden. (Der Standard ist application/x-www-form-urlencoded). (Nur mit der POST-Methode verwendet). |
| method | get post | Gibt die HTTP-Methode zum Senden von Formulardaten an. (Die Standardmethode ist GET). Sendet Formulardaten in der Adressleiste („name = value“), die nach dem Fragezeichen an die Seiten-URL angehängt und durch ein kaufmännisches Und (&) getrennt werden. (http://example.ru/doc/?name=Ivan&password=vanya) - Der Browser verbindet sich mit dem Server und sendet die Daten zur Verarbeitung. |
| name | text | Definiert den Formularnamen. |
| novalidate | novalidate | Legt fest, dass die in das Formular eingegebenen Daten vor dem Senden nicht überprüft werden. |
| target | _blank, _self, _parent, _top, framename | Bestimmt, wo die nach dem Absenden des Formulars empfangene Antwort angezeigt werden soll. |
Das <form>-Tag unterstützt außerdem die Global attributes und die Event Attributes.
Practice
Welche der folgenden Methoden werden verwendet, um Formulardaten in HTML zu senden?