Kursempfehlung:

HTML-Formular

HTML-Formulare werden verwendet, um verschiedene Arten von Benutzerinput zu sammeln.

<form>-Element

HTML-Formulare werden verwendet, um Benutzerinput zu sammeln.

Beispiel

<form>
 .
form elements
 .
</form>

<form>-Element definiert das HTML-Formular:Formularelemente。

HTML-Formulare enthalten

Elemente sind die <input>-Elemente, Kontrollkästchen, Auswahlbuttons, Abschicken-Buttons usw.

<input> Elemente sind das WichtigsteFormularelemente。

Das <input>-Element hat viele Formen, abhängig von verschiedenen type Attribute.

Dies sind die in diesem Kapitel verwendeten Typen:

Typ Beschreibung
text Definieren Sie den regulären Texteingabe.
radio Definieren Sie die Auswahlbuttons (Wählen einer von mehreren Optionen)
submit Definieren Sie den Abschicken-Button (Absenden des Formulars)

Anmerkung:Sie werden später im教程中学习更多有关输入类型的知识。

Texteingabe

<input type="text"> Definieren Sie fürTexteingabeeines einziligen Eingabefeldes:

Beispiel

<form>
 Vorname:<br>
<input type="text" name="firstname">
<br>
 Nachname:<br>
<input type="text" name="lastname">
</form>

Versuchen Sie es selbst

So erscheint es im Browser:

Vorname:


Nachname:

Anmerkung:Das Formular selbst ist nicht sichtbar. Beachten Sie auch, dass die Standardbreite für Textfelder 20 Zeichen beträgt.

Auswahlbuttons-Eingabe

<input type="radio"> DefinierenAuswahlbuttons。

Die Auswahlbuttons erlauben dem Benutzer, eine von einer begrenzten Anzahl von Optionen auszuwählen:

Beispiel

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

Versuchen Sie es selbst

So erscheinen die Auswahlbuttons im Browser:

Male

Female

Abschicken-Button

<input type="submit"> Definieren Sie die fürFormular-Handler（form-handler）AbsendenFormular-Button

Der Formular-Handler ist in der Regel eine Serverseite, die Skripts enthält, um die Eingabedaten zu verarbeiten.

Der Formular-Handler im Formular action Im Attribut angegeben:

Beispiel

<form action="action_page.php">
Vorname:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nachname:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Versuchen Sie es selbst

So erscheint es im Browser:

Vorname:


Nachname:


Action-Attribut

Action-AttributDefinieren Sie die Aktion, die beim Absenden des Formulars ausgeführt wird.

Die gängige Methode, ein Formular an den Server zu senden, ist die Verwendung eines Abschicken-Buttons.

Normalerweise wird das Formular auf eine Webseite auf dem Web-Server eingereicht.

In den obigen Beispielen wurde ein Server-Skript angegeben, um den eingereichten Formular zu verarbeiten:

<form action="action_page.php">

Wenn das action-Attribut weggelassen wird, wird action auf die aktuelle Seite gesetzt.

Method-Attribut

method-Attributbestimmt den HTTP-Method, der bei der Übermittlung des Formulars verwendet wird (GET oder POST)

<form action="action_page.php" method="GET">

oder:

<form action="action_page.php" method="POST">

Wann sollte man GET verwenden?

Sie können GET (Standardmethode) verwenden:

wenn das Formularsubmit passiv ist (z.B. Suchmaschinenabfrage) und keine sensiblen Informationen enthält.

Wenn Sie GET verwenden, sind die Formulardaten in der Adresszeile der Seite sichtbar:

action_page.php?firstname=Mickey&lastname=Mouse

Anmerkung:GET ist am besten für die Übermittlung kleiner Datenmengen geeignet. Der Browser legt Kapazitätsbeschränkungen fest.

Wann sollte man POST verwenden?

Sie sollten POST verwenden:

wenn das Formular Daten aktualisiert oder sensible Informationen (z.B. Passwörter) enthält.

POST ist sicherer, da die übermittelten Daten in der Adresszeile der Seite nicht sichtbar sind.

Name-Attribut

Jedes Eingabefeld muss eine name-Attribut gesetzt haben, um korrekt übermittelt zu werden.

In diesem Beispiel wird nur das "Nachname"-Eingabefeld übermittelt:

Beispiel

<form action="action_page.php">
Vorname:<br>
<input type="text" value="Mickey">
<br>
Nachname:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Versuchen Sie es selbst

Verwenden Sie <fieldset>, um Formulardaten zu kombinieren

<fieldset> Elemente kombinieren verwandte Daten im Formular.

<legend> Das Element <fieldset> definiert den Titel.

Beispiel

<form action="action_page.php">
<fieldset>
<legend>Personliche Informationen:</legend>
Vorname:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nachname:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Versuchen Sie es selbst

Der obige HTML-Code sieht im Browser so aus:

Persönliche Informationen:
Vorname:


Nachname:


HTML Formularattribute

HTML <form>-Element, mit allen möglichen Attributen, so aussieht:

Beispiel

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Nachstehend finden Sie eine Liste der <form>-Attribute:

Attribute Beschreibung
accept-charset Bestimmt das Zeichensatzsystem, das im gesendeten Formular verwendet wird (Standard: Zeichensatz der Seite).
action Bestimmt die Adresse (URL), an die das Formular gesendet wird (Submit-Seite).
autocomplete Bestimmt, ob der Browser das Formular automatisch vervollständigen soll (Standard: aktiviert).
enctype Bestimmt die Kodierung der gesendeten Daten (Standard: url-encoded).
method Bestimmt die HTTP-Methode, die beim Senden des Formulars verwendet wird (Standard: GET).
name Bestimmt den Namen des Formulars, das erkannt wird (für DOM: document.forms.name).
novalidate Bestimmt, dass der Browser das Formular nicht überprüft.
target Bestimmt das Ziel der Adresse im action-Attribut (Standard: _self).

Anmerkung:Sie werden im folgenden Kapitel mehr über Attribute lernen.