HTML-Formulare
Ein HTML-Formular besteht aus Formularelementen, also verschiedenen Arten von Eingabeelementen wie Kontrollkästchen, Textfeldern, Senden-Schaltflächen, Optionsfeldern und so weiter.
Das HTML-<input>-Element
Das Element <input> ist ein wesentliches Formularelement, das je nach Attribut type auf unterschiedliche Weise dargestellt werden kann.
Lassen Sie uns über einige Eingabetypen sprechen.
Texteingabe
Das <input type="text"> legt ein einzeiliges Eingabefeld für Texteingaben fest.
Beispiel für die Texteingabe:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
Name:<br />
<input type="text" name="name" />
<br />
Surname:<br />
<input type="text" name="surname" />
</form>
</body>
</html>Radio-Button-Eingabe
Das <input type="radio"> legt ein Optionsfeld fest, mit dem Sie eine von mehreren Auswahlmöglichkeiten auswählen können.
Beispiel für die Radio-Button-Eingabe
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" name="game" value="football" checked /> Football
<input type="radio" name="game" value="basketball" /> Basketball
</form>
</body>
</html>Senden-Eingabe
Das <input type="submit"> sendet die Formulardaten an einen Formular-Handler.
Der Formular-Handler ist eine Serverseite mit einem Skript zur Verarbeitung der Eingabedaten, das im action-Attribut des Formulars definiert ist.
Beispiel für die Senden-Eingabe
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
Name:<br />
<input type="text" name="firstname" value="Tom" />
<br />
Surname:<br />
<input type="text" name="lastname" value="Brown" />
<br />
Age:<br />
<input type="text" name="Age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button to send the form data to the action page.</p>
</body>
</html>Das Action-Attribut
Das action-Attribut legt die Aktion fest, die ausgeführt werden soll, wenn das Formular gesendet wird.
Wenn der Benutzer auf die Senden-Schaltfläche klickt, werden die Formulardaten an eine Webseite auf dem Server gesendet.
HTML-Formulare
<form action="/form/submit">Das Target-Attribut
Das target-Attribut definiert, ob das Formularergebnis in einem neuen Browser-Tab, in einem Frame oder im aktuellen Fenster geöffnet wird.
Der Standardwert dieses Attributs ist _self. Mit diesem Wert wird das Formularergebnis im aktuellen Fenster geöffnet.
Der Wert _blank öffnet das Formularergebnis in einem neuen Browser-Tab.
HTML-Formulare
<form action="/form/submit" target="_blank">Das Method-Attribut
Das method-Attribut definiert die HTTP-Methode (GET oder POST), die beim Senden der Formulardaten verwendet wird.
Beispiel für die GET-Methode:
Beispiel für die GET-Methode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" target="_blank" method="GET">
Name:<br />
<input type="text" name="name" value="Tom" />
<br />
Surname:<br />
<input type="text" name="Surname" value="Brown" />
<br />
Age:<br />
<input type="number" name="age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p> Here we used the "_blank" value, which will open the form result in a new browser tab.</p>
</body>
</html>Beispiel für die POST-Methode:
Beispiel für die POST-Methode:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" target="_blank" method="POST">
Name:<br />
<input type="text" name="name" value="Tom" />
<br />
Surname:<br />
<input type="text" name="surname" value="Brown" />
<br />
Age:<br />
<input type="number" name="age" value="21" />
<br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Wann die GET-Methode verwendet werden sollte
GET ist die Standardmethode beim Senden von Formulardaten, und bei dieser Methode sind die Formulardaten im Adressfeld der Seite sichtbar.
DANGER
Verwenden Sie die GET-Methode nicht zum Senden sensibler Daten, da sie in der URL sichtbar sein werden.
TIP
Die GET-Methode ist nützlich für Formularübermittlungen, bei denen ein Benutzer das Ergebnis als Lesezeichen speichern möchte.
DANGER
Die Länge einer URL ist begrenzt (maximal 2048 Zeichen).
Wann die POST-Methode verwendet werden sollte
Wenn die Formulardaten sensible oder persönliche Informationen enthalten, verwenden Sie immer die POST-Methode, da sie die gesendeten Formulardaten nicht im Adressfeld der Seite anzeigt.
TIP
Da es bei der Verwendung der POST-Methode keine Größenbeschränkungen gibt, kann sie zum Senden großer Datenmengen verwendet werden.
Formularübermittlungen mit der POST-Methode können nicht als Lesezeichen gespeichert werden.
Weitere Attribute
Unten finden Sie weitere <form>-Attribute:
| Attribut | Beschreibung |
|---|---|
| accept-charset | Dieses Attribut definiert den Zeichensatz, der im gesendeten Formular verwendet wird (Standard: der Zeichensatz der Seite). |
| autocomplete | Dieses Attribut definiert, ob der Browser das Formular automatisch vervollständigen soll oder nicht (Standard: on). |
| enctype | Dieses Attribut definiert die Kodierung der gesendeten Daten (Standard: url-encoded). |
| name | Dieses Attribut definiert einen Namen, der zur Identifizierung des Formulars verwendet wird. |
| novalidate | Dieses Attribut definiert, dass der Browser das Formular nicht validieren darf. |
Practice
What are the essential attributes that every HTML form input element should include?