Das <form> Element
HTML-Formulare werden verwendet, um Benutzereingaben zu sammeln.
Die <form> -Element definiert ein HTML - Formular:
<form>
.
HTML - Formulare enthalten Formularelemente. Form-Elemente sind unterschiedliche Arten von Eingabeelementen, Kontrollkästchen, Optionsfelder, Schaltflächen vorlegen und mehr.
Das <input> Element
Das <input> Element ist die wichtigste Form Element.
Das <input> Element hat viele Varianten, je nach dem type - Attribute.
Hier sind die Arten in diesem Kapitel:
Art Beschreibung text Definiert normale Texteingabe radio Definiert Optionsfeld Eingang (for selecting one of many choices) der (for selecting one of many choices) submit Definiert eine Submit - Button (for submitting the form)
Sie werden viel mehr über Eingabetypen später in diesem Tutorial lernen.
Text Eingabe
<input type="text"> definiert ein einzeiliges Eingabefeld für die Texteingabe:
Beispiel
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Versuch es selber " Dies ist, wie es in einem Browser aussehen:
Vorname:
Familienname, Nachname:
Note: Das Formular selbst nicht sichtbar ist. Beachten Sie auch, dass die Standardbreite eines Textfeldes 20 Zeichen ist.
Radio Button - Eingang
<input type="radio"> definiert eine radio - Taste.
Radio Tasten lassen einen Benutzer eine von einer begrenzten Anzahl von Möglichkeiten wählen:
Beispiel
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Männlich
Weiblich
Andere
Die Senden-Schaltfläche
<input type="submit"> definiert eine Schaltfläche für ein Formular zu einem Formular-Handler einreichen.
Der Formular-Handler ist in der Regel eine Server-Seite mit einem Skript Eingangsdaten für die Verarbeitung.
Die form Handler wird in der Form der angegebene action Attribute:
Beispiel
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
Vorname:
Familienname, Nachname:
Das Action - Attribut
Die action Attribut definiert die Aktion durchgeführt wird , wenn das Formular abgeschickt wird.
Der gemeinsame Weg, um eine Form zu einem Server zu übermitteln, ist durch einen Submit-Button verwenden.
Normalerweise wird die Form auf eine Webseite auf einem Web-Server übermittelt.
In dem obigen Beispiel wird ein serverseitiges Skript spezifiziert die vorgelegte Form zu handhaben:
<form action="action_page.php ">
Wenn die action Attribut weggelassen wird, wird die Aktion auf die aktuelle Seite setzen.
Die Method Attribut
Das method Attribut gibt die HTTP - Methode ( GET oder POST ) verwendet werden , wenn die Formen der Einreichung:
<form action="action_page.php" method="get" > oder:
<form action="action_page.php" method="post" >
Wann Verwenden von GET ?
Sie können mit GET (the default method) :
Wenn das Formular Vorlage ist passiv (like a search engine query) , und ohne sensible Informationen.
Wenn Sie GET , werden die Formulardaten in der Seitenadresse zu sehen sein:
action_page.php?firstname=Mickey&lastname=Mouse GET ist am besten geeignet, um kurze Datenmengen. Größenbeschränkungen sind in Ihrem Browser eingestellt.
Wann Verwenden von POST ?
Sie sollten verwenden POST :
Wenn das Formular Daten zu aktualisieren, oder enthält sensible Informationen (password) .
POST bietet eine bessere Sicherheit , weil die vorgelegten Daten nicht sichtbar in der Seitenadresse ist.
Der Name des Attribut
Um richtig gestellt werden, muss jedes Eingabefeld ein haben name
In diesem Beispiel wird das einzige einreichen "Last name" Eingabefeld:
Beispiel
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Versuch es selber "
Gruppieren von Formulardaten mit <fieldset>
Die <fieldset> Elementgruppen bezogenen Daten in einem Formular.
Die <legend> Element definiert eine Beschriftung für das <fieldset> Element.
Beispiel
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Versuch es selber " Dies ist, wie der HTML-Code oben wird in einem Browser angezeigt werden:
HTML - Form - Attribute
Ein HTML <form> Element, mit allen möglichen Attribute gesetzt ist , wird wie folgt aussehen:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
Testen Sie sich mit Übungen! Übung 1 » Übung 2» Übung 3 » Übung 4»
Hier ist die Liste der <form> Attribute:
Attribut Beschreibung accept-charset Gibt die charset in der eingereichten Form verwendet (Standard: die Seite charset). action Gibt eine Adresse (url) , wo die Form (Standard: die einreichenden Seite) einreichen. autocomplete Gibt an, ob der Browser das Formular automatisch vervollständigen sollte (default: on) . enctype Gibt die Verschlüsselung der übermittelten Daten (default: is url-encoded) . method Gibt die HTTP - Methode verwendet wird, wenn das Formular abschicken (default: GET) . name Gibt einen Namen (für DOM Nutzung: document.forms.name) zur Identifizierung der Form verwendet. novalidate Gibt an, dass der Browser die Form nicht bestätigen sollte. target Gibt das Ziel der Adresse in dem action (default: _self).
Sie werden mehr über Attribute in den nächsten Kapiteln lernen.
Mehr Beispiele
Senden Sie E-Mail von einem Formular
Wie E-Mail von einem Formular senden.