HTML-Formulare sind leistungsstarke Werkzeuge für die Interaktion mit Benutzern. Aus historischen und technischen Gründen ist jedoch nicht immer klar, wie sie ihr volles Potenzial nutzen können. In diesem Kapitel werden wir alle Aspekte von HTML-Formularen behandeln, von der Struktur bis zum Stil, von der Datenverarbeitung bis hin zu benutzerdefinierten Widgets.
Formular: Sammelt verschiedene Arten von Benutzereingabedaten und sendet sie an den Server, um die Dateninteraktion zwischen dem Benutzer und dem Server zu realisieren.
Das Formular-Tag form deklariert den Umfang der Datenerfassung. Solange es im Formular enthalten ist, handelt es sich um die zu erfassenden Daten.
Auf einer Seite können mehrere Formular-Tags vorhanden sein. Diese können nur parallel zueinander stehen und nicht verschachtelt sein. Wenn Benutzer Daten an den Server senden, können sie Daten jeweils nur in einer Form übermitteln. Wenn Sie mehrere Formulare senden möchten, müssen Sie die asynchrone Interaktion in js verwenden.
<form>-Element
HTML-Formulare werden zum Sammeln von Benutzereingaben verwendet.
HTML-Formular zur Elementdefinition:
<form>.formelements.</form>
1. HTML-Formulare enthalten Formularelemente.
Formularelemente beziehen sich auf verschiedene Arten von Eingabeelementen, Kontrollkästchen, Optionsfeldern, Senden-Schaltflächen usw.
(1) <input>-Element
Das <input>-Element ist das wichtigste Formularelement. Das <input>-Element hat je nach Typattribut viele Formen. Dies ist der Typ, der in diesem Kapitel verwendet wird:
(2) Texteingabe
<input type=text> definiert ein einzeiliges Eingabefeld für die Texteingabe:
<!DOCTYPEhtml><html><body><form>Nachname:<br><inputtype=textname=firstname><br>Vorname:<br><inputtype=textname=lastname></form><p>Bitte Beachten Sie, dass das Formular selbst unsichtbar ist. </p><p>Beachten Sie außerdem, dass die Standardbreite von Textfeldern 20 Zeichen beträgt. </p></body></html>
Die präsentierten Ergebnisse lauten wie folgt:
(3) Radio-Button-Eingabe
<input type=radio> definiert Optionsfelder. Mit Optionsschaltflächen kann der Benutzer eine aus einer begrenzten Anzahl von Optionen auswählen:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>Männlich<br><inputtype=radioname=sexvalue=2>Weiblich</form></body></html>
Die präsentierten Ergebnisse lauten wie folgt:
(4) Schaltfläche „Senden“.
<input type=submit> definiert die Schaltfläche, die zum Senden des Formulars an den Formularhandler verwendet wird. Ein Formularhandler ist normalerweise eine Serverseite, die Skripte zur Verarbeitung von Eingabedaten enthält. Der Formularhandler wird im Aktionsattribut des Formulars angegeben:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Nachname:<br><inputtype=textname=firstnamevalue=李><br>Name:<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Submit></form><p>Wenn Sie auf Submit klicken, werden die Formulardaten zur weiteren Verarbeitung an eine Seite namens demo_form.ashx gesendet. </p></body></html>
Die präsentierten Ergebnisse lauten wie folgt:
2. Formularattribute:
(1) Aktionsattribut
Das Aktionsattribut definiert die Aktion, die beim Absenden des Formulars ausgeführt werden soll. Der übliche Weg, ein Formular an den Server zu senden, ist die Verwendung einer Senden-Schaltfläche. Normalerweise werden Formulare an eine Webseite auf einem Webserver gesendet. Im obigen Beispiel wird ein Serverskript angegeben, um das übermittelte Formular zu verarbeiten:
<formaction=action.php>
Wenn das Aktionsattribut weggelassen wird, wird die Aktion auf die aktuelle Seite festgelegt.
(2)Methodenattribut
Das Methodenattribut gibt die HTTP-Methode (GET oder POST) an, die beim Absenden des Formulars verwendet wird:
<formaction=action.phpmethod=GET>
oder:
<formaction=action.phpmethod=POST>
Wann sollte GET verwendet werden?
Sie können GET (die Standardmethode) verwenden: wenn die Formularübermittlung passiv ist (z. B. eine Suchmaschinenabfrage) und keine vertraulichen Informationen vorhanden sind. Wenn Sie GET verwenden, werden die Formulardaten in der Adressleiste der Seite angezeigt:
action_page.php?firstname=Han&lastname=Meimei
Hinweis: GET eignet sich am besten für die Übermittlung kleiner Datenmengen. Der Browser legt eine Kapazitätsbeschränkung fest (255 Zeichen).
Wann sollte POST verwendet werden?
Sie sollten POST verwenden: wenn das Formular Daten aktualisiert oder vertrauliche Informationen (z. B. Passwörter) enthält. POST ist sicherer, da die in der Adressleiste der Seite übermittelten Daten unsichtbar sind.
(3) Namensattribut
Für jedes Eingabefeld muss ein Namensattribut festgelegt sein, damit es korrekt übermittelt werden kann. In diesem Beispiel wird nur das Eingabefeld „Nachname“ übermittelt:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Nachname:<br><inputtype=textvalue=李><br>Vorname:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>Wenn Sie auf Submit klicken, werden die Formulardaten an eine Seite namens demo_form.ashx gesendet. </p><p>Der Nachname wird nicht übermittelt, da dieses Eingabeelement kein Namensattribut hat. </p></body></html>
Die präsentierten Ergebnisse lauten wie folgt:
3. Formularkontrollen
Kombinieren Sie Formulardaten mit <fieldset>
Das <fieldset>-Element kombiniert zusammengehörige Daten in einem Formular. Das <legend>-Element definiert den Titel für das <fieldset>-Element.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>Persönliche Daten:</legend>Nachname:<br><inputtype=textname=firstnamevalue=Mickey><br > Name:<br><inputtype=textname=lastnamevalue=Maus><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
Mithilfe von Formularen werden Benutzerdaten erfasst, die in verschiedenen Steuerelementen ausgefüllt werden müssen. HTML-Steuerelemente werden ebenfalls über Tags implementiert, sie weisen jedoch einige besondere Erscheinungsbilder auf und verfügen über einige interaktive Funktionen.
HTML-Formulare können Steuerelemente enthalten, wie in der folgenden Tabelle dargestellt: