So verwenden Sie ein HTML-Formular mit mehreren Beispielen

Neun einfache Beispiele analysieren die Verwendung von HTML-Formularen zu Ihrer Information. Die spezifischen Inhalte sind wie folgt

1 Formular-Tag

Wie interagiert die Website mit Benutzern? Die Antwort ist, ein HTML-Formular zu verwenden. Das Formular kann die vom Browser eingegebenen Daten an den Server übermitteln, sodass das serverseitige Programm die vom Formular übergebenen Daten verarbeiten kann.
Grammatik:

<form method="Übertragungsmethode" action="Serverdatei">

•<form>: <form>-Tags erscheinen paarweise, beginnend mit <form> und enden mit </form>.
•Aktion: Der Ort, wohin die vom Browser eingegebenen Daten gesendet werden, beispielsweise eine PHP-Seite (save.php).
•Methode: Die Methode der Datenübertragung (Get/Post).

Alle Formular-Steuerelemente (Textfelder, Textfelder, Schaltflächen, Optionsfelder, Kontrollkästchen usw.) müssen zwischen den Tags <form></form> platziert werden (andernfalls können die vom Benutzer eingegebenen Informationen nicht an den Server übermittelt werden!).
Methode: Der Unterschied zwischen Post/Get ist eine Frage, die sich Backend-Programmierer stellen müssen. Interessierte Freunde können sich das Wiki dieses Abschnitts ansehen, das eine ausführliche Einführung enthält.

2 Eingabe/Text/Passwort Text- und Passwort-Eingabefeld

Ein Texteingabefeld wird verwendet, wenn Benutzer Buchstaben, Zahlen usw. in ein Formular eingeben möchten. Textfelder können auch in Passwort-Eingabefelder umgewandelt werden.
Grammatik:

Wenn Typ „Text“ ist, ist das Eingabefeld ein Texteingabefeld.
Wenn Typ „Passwort“ ist, handelt es sich bei dem Eingabefeld um ein Kennwort-Eingabefeld.
Name: Benennen Sie das Textfeld zur Verwendung durch die Hintergrundprogramme ASP und PHP.
Wert: Legen Sie einen Standardwert für das Texteingabefeld fest. (Dient normalerweise als Erinnerung)

Testcode:

Browser-Effekt:

3 Textarea-Textfeld, unterstützt mehrzeilige Texteingabe

Wenn Benutzer langen Text in ein Formular eingeben müssen, ist ein Texteingabefeld erforderlich.
Grammatik:

<textarea rows="rows" cols="columns">Standardwert des Textes</textarea>

1. Das <textarea>-Tag erscheint paarweise, beginnend mit <textarea> und endend mit </textarea>.
2. cols: Die Anzahl der Spalten in einem mehrzeiligen Eingabefeld.
3. Zeilen: Die Anzahl der Zeilen in einem mehrzeiligen Eingabefeld.
4. Sie können zwischen den Beschriftungen Standardwerte eingeben.

Browser-Effekt:

4 Radio/Checkbox Optionsfeld und Kontrollkästchen

Wenn Sie Formulare zum Entwerfen von Umfragen verwenden, empfiehlt es sich, Auswahlfelder zu verwenden, um die Anzahl der Benutzeroperationen zu reduzieren. In HTML gibt es zwei Arten von Auswahlfeldern: Optionsfelder und Kontrollkästchen. Der Unterschied zwischen beiden besteht darin, dass Benutzer bei einem Optionsfeld nur eine Option auswählen können, während sie bei einem Kontrollkästchen mehrere oder sogar alle Optionen auswählen können.
Grammatik:

<input type="radio/checkbox" value="Wert" name="Name" checked="aktiviert"/>

1. Wenn type="radio" ist, ist das Steuerelement ein Optionsfeld
2. Wenn type="checkbox" ist das Steuerelement ein Kontrollkästchen
3.Wert: Der Wert der an den Server übermittelten Daten (wird vom Hintergrundprogramm PHP verwendet)
4.name: Benennen Sie das Steuerelement für die Verwendung durch Hintergrundprogramme ASP und PHP
5. checked: Wenn Sie checked="checked" setzen, ist diese Option standardmäßig ausgewählt
6. Hinweis: Bei Optionsfeldern in derselben Gruppe muss der Namewert konsistent sein. Im obigen Beispiel lautet der Name beispielsweise „radioLove“, sodass die Optionsfelder in derselben Gruppe die Rolle einer Einzelauswahl spielen können.

Der Browsereffekt ist:

Dieser Democode implementiert ein Optionsfeld mit 3 Optionen und ein Kontrollkästchen mit 4 Optionen.

Der Namewert desselben Auswahlfelds muss konsistent sein, da sonst die Funktionen Einzelauswahl und Mehrfachauswahl nicht implementiert werden können. Die Werte im gleichen Auswahlfeld müssen unterschiedlich sein, sonst werden falsche Daten an den Hintergrund übergeben.

5 Auswahl/Option über ein Dropdown-Listenfeld

Dropdown-Listen werden auch häufig auf Webseiten verwendet und können effektiv Webseitenplatz sparen. Sie können eine oder mehrere Optionen auswählen.

Grammatik:

<option value=”name” selected=”selected”>Ausführen</option>

Der Wert ist der an den Server übermittelte Wert.

Wenn Sie das Attribut selected="selected" festlegen, wird die Option standardmäßig ausgewählt.

Browser-Effekt:

6 Auswahl/Mehrfachauswahl/Option mit Dropdown-Feld zur Auswahl mehrerer Optionen

Die Dropdown-Liste kann auch Mehrfachauswahlvorgänge ausführen. Sie können das Attribut multiple="multiple" im Tag festlegen, um die Mehrfachauswahlfunktion zu erreichen. Unter dem Windows-Betriebssystem drücken Sie die Strg-Taste und klicken gleichzeitig (verwenden Sie auf dem Mac Befehl + Klick), um mehrere Optionen auszuwählen.

Browser-Effekt:

7 input/submit verwendet die Submit-Schaltfläche zum Senden von Daten

Syntax: <input type="submit" value="Senden">

Typ: Die Schaltfläche verfügt nur dann über eine Übermittlungsfunktion, wenn der Typwert auf „Senden“ eingestellt ist.
Wert: der auf der Schaltfläche angezeigte Text

Browser-Effekt:

8 Eingabe/Reset Mit dem Reset-Button können Sie die Formulardaten zurücksetzen

Wenn der Benutzer die Formularinformationen auf ihren ursprünglichen Zustand zurücksetzen muss, z. B. wenn er den „Benutzernamen“ eingibt und feststellt, dass die Eingabe falsch ist, kann er das Eingabefeld mit der Schaltfläche „Zurücksetzen“ auf seinen ursprünglichen Zustand zurücksetzen. Stellen Sie den Typ einfach auf „Zurücksetzen“ ein.
Grammatik:

<Eingabetyp="Zurücksetzen" Wert="Zurücksetzen">1

Typ: Die Schaltfläche wird nur zurückgesetzt, wenn der Typwert auf Zurücksetzen eingestellt ist.
Wert: der auf der Schaltfläche angezeigte Text

Browser-Effekt:

9 Label-Tag im Formular

Das Etikett hat für den Benutzer keinen besonderen Effekt, sein Zweck besteht darin, die Benutzerfreundlichkeit für Mausbenutzer zu verbessern. Wenn Sie auf den Text innerhalb des Beschriftungstags klicken, wird dieses Steuerelement ausgelöst. Das heißt, wenn der Benutzer per Klick das Beschriftungstag auswählt, verschiebt der Browser den Fokus automatisch auf das mit der Beschriftung verknüpfte Formularsteuerelement (automatisch das mit dem Beschriftungstag verknüpfte Formularsteuerelement auswählen).
Grammatik:

<label für="Control-ID-Name">

Hinweis: Der Wert im „For“-Attribut der Bezeichnung muss mit dem „ID“-Attributwert des zugehörigen Steuerelements übereinstimmen.

Browser-Effekt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.