Grundlegende Einführung und Verwendung von HTML-Formular-Tags

Was ist ein Formular? Formulare werden in HTML verwendet, um verschiedene Arten von Benutzereingaben zu sammeln. Ein Formular ist ein Bereich, der zum Sammeln von Informationen verwendet wird.

1.Was ist das Formular-Tag?

1.1 Grundlegende Einführung

Das Formular-Tag ist ein wichtiger Bestandteil von HTML und wird zum Sammeln von Informationen verwendet, die von verschiedenen Benutzertypen eingegeben werden. Das Formular-Tag beginnt mit <form> und endet mit </form>.

1.2 Verwandte Attribute des Formular-Tags

1.2.1 Aktionsattribut

Das Aktionsattributdefiniert 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.

1.2.2 Methodenattribut

Das Methodenattribut gibt die HTTP-Methode an, die beim Absenden des Formulars verwendet werden soll (GET oder ):POST

erhalten	Post
Formulardaten werden als Wert an die URL angehängt	Formulardaten werden nicht an die URL angehängt und ausgeblendet.
Zur Übermittlung nicht sensibler Daten	Es können sensible Daten übermittelt werden

Hinweis: GET eignet sich am besten für die Übermittlung kleiner Datenmengen. Browser legen Kapazitätsgrenzen fest.

1.2.3 Namensattribut

Es kann mehr als ein Formular auf einer Seite geben. Um diese Formulare zu unterscheiden, wird das Namensattribut zum Benennen des Formulars benötigt, das normalerweise mit dem ID-Attributwert identisch ist. Es ist zu beachten, dass der Formularname keine Sonderzeichen und Leerzeichen enthalten darf.

2. Elemente des Formular-Tags

2.1 Eingabeelement

Das Eingabeelement ist das wichtigste Formularelement

Das Eingabeelement kann je nach Typattribut in mehrere Formen geändert werden.

2.1.1 Text

<input type="text"> definiert eine einzeilige Eingabe für Texteingabe Feld:

Wie zum Beispiel

Nutzername:

</form>

Der obige Code sieht im Browser so aus:

2.1.2 Passwort

<input type="password"> DefinitionPasswortfeld:

Wie zum Beispiel

Passwort:

<Eingabetyp="Passwort">

</form>

Der obige Code sieht im Browser so aus:

2.1.3 einreichen

<input type="submit"> DefinitionFormulardaten senden an a> a>-Schaltfläche. Formular-Handler

Wie zum Beispiel

</form>

Der obige Code sieht im Browser so aus:

Hinweis: Submit kann den im Browser angezeigten Inhalt über das Wertattribut ändern

2.1.4 Funk

<input type="radio"> definiert ein Optionsfeld.

Wie zum Beispiel

<input type="radio" name="xingbie"vaule="男"checked>男

<input type="radio" name="xingbie"vaule="女">女

Der obige Code sieht im Browser so aus:

2.1.5 Kontrollkästchen

<input type="checkbox"> definiert ein Kontrollkästchen.

Wie zum Beispiel

<input type="checkbox">Fußball

<input type="checkbox">Basketball

<input type="checkbox">lol

<input type="checkbox">Koreanisches Drama

<input type="checkbox">König der Herrlichkeit

Der obige Code sieht im Browser so aus:

2.1.6 Schaltfläche

<input type="button> 定义按钮

Wie zum Beispiel

<input type="button" οnclick="alert('Hello World!')" value="Klick mich!">

2.1.7 Neue Attribute in HTML5 hinzugefügt

Typ	Wirkung
Nummer	Damit die Eingabe wirksam wird, beschränken Sie die Eingabe auf Zahlen
Email	Damit die Eingabe wirksam wird, beschränken Sie die Eingabe auf die E-Mail-Adresse
Farbe	Nachdem Sie den Fokus erreicht haben, wird ein Farbwähler angezeigt
Datum	Die Datumsauswahl wird im Eingabefeld angezeigt
Reichweite	Möglichkeit, Schiebereglerfelder anzuzeigen
Monat	Datumsauswahl (Monat)
Woche	Datumsauswahl (Woche)
Zeit	Zeitauswahl
Terminzeit	Zeitauswahl
datatime-clocle	Datumsauswahl
Tel	Telefoneingang
URL	Möglichkeit zur automatischen Validierung von URL-Feldern bei der Übermittlung.
suchen	für Suchfelder (Suchfelder verhalten sich wie normale Textfelder)

2.2 Andere Attribute von Eingabeelementen

aktiviert: Optionsfelder und Kontrollkästchen festlegen. Der Anfangszustand ist aktiviert und der Attributwert ist nur aktiviert.

deaktiviert: Legen Sie fest, dass das Element beim ersten Laden deaktiviert wird. Der Attributwert ist nur deaktiviert, was darauf hinweist, dass das Element deaktiviert ist.

maxlength: Legen Sie die maximale Anzahl der in das Textfeld eingegebenen Zeichen fest.

readonly: Schreibgeschützt, was darauf hinweist, dass der Inhalt des Textfelds nicht direkt vom Benutzer geändert werden darf.

Größe: Legen Sie die Breite des Elements fest.

src: Legen Sie die URL des im Bildfeld angezeigten Bildes fest.

2.2 Element auswählen (Dropdown-Liste) und Element auswählen

<select> ElementdefinitionDropdown-Liste: Das Element <option> definiert die auszuwählende Option.

Das Select-Element und das Option-Element werden normalerweise zusammen verwendet.

Das Namensattribut von select kann den Übermittlungsnamen angeben und die ID kann in Verbindung mit dem for-Attribut von <labl> verwendet werden, um eine Mausklickoptimierung zu erreichen.

In Listen wird normalerweise die erste Option als ausgewählte Option angezeigt.

Sie können vordefinierte Optionen definieren, indem Sie das ausgewählte Attribut hinzufügen.

Sie können es in Listenform über das Attribut multiple="multiple" anzeigen -------

Wie zum Beispiel

</select>

Der obige Code sieht im Browser so aus:

2.3 Textbereichselement

<textarea> Element behoben 义mehrzeilige Eingabespalte (Textbereich):

textarea stellt einen mehrzeiligen Nur-Text-Editor dar, der von Benutzern verwendet werden kann. Sie können das id-Attribut und <lable> festlegen, um eine Mausklickoptimierung zu implementieren, die cols- und rows-Attribute können die Anzeigegröße des Editors festlegen und das name-Attribut wird verwendet, um den Einreichungsnamen anzugeben.

Aufgeführt als

</textarea><br>

Der obige Code sieht im Browser so aus:

Zusammenfassen

Das Formularformular ist ein wichtiger Teil von HTML. Das Obige ist eine grundlegende Einführung in das Formular-Tag.