Tutorial zur Verwendung von HTML-Formular-Tags

Formulare sind die einfachste Möglichkeit, mit Benutzereingaben und serverseitigen Daten auf einer Webseite zu interagieren. Hier konzentrieren wir uns auf die grundlegendste Anzeige von Formularinhalten und werfen einen Blick auf das Tutorial zur Verwendung von HTML-Formular-Tags

In HTML können Formulare verwendet werden, um verschiedene Arten von Eingabeinformationen von Benutzern zu sammeln. Ein Formular ist eigentlich ein Bereich, der Formularelemente enthält. Die Eingabeinformationen verschiedener Elemente in diesem Bereich werden schließlich über das Formular an das Programmskript übermittelt. Zu den häufigsten gehören beispielsweise Benutzeranmeldung, Registrierung, Veröffentlichung von Artikeln usw., die alle an dynamische Programme zur Verarbeitung über Formulare übermittelt werden. In diesem Abschnitt geht es hauptsächlich um Formulare und Formularelemente. Wie Formularinformationen an dynamische Programme übermittelt werden, wird in zukünftigen Programmiersprachenlektionen besprochen.
Der Bereich des Formulars verwendet das Tag

, um den Umfang des Formulars zu definieren. Die Werte der Elemente in

dieses Formular.

Eingabeinformationen
Im Allgemeinen wird das -Tag in Formularen verwendet, um Benutzereingabeinformationen zu sammeln.
Das in den meisten Fällen verwendete Formular-Tag ist das Eingabe-Tag (). Eingabetypen werden durch das Typattribut (Typ) definiert. Zu den gängigen Eingabetypen gehören Textfelder, Optionsfelder, Kontrollkästchen, Dropdown-Menüs usw.

Textfeld
Das Textfeld bietet Benutzern die Möglichkeit, Text einzugeben. Der Browser interpretiert das Textfeld als rechteckiges Feld und klickt, um den Cursor zu bewegen . Bewegen Sie sich in den Rahmen. Benutzer können Buchstaben, Zahlen usw. in das Formular eingeben.
Das Textfeld wird durch Festlegen des Textwerts für das Typattribut im definiert

<form>  
文本域1:<input type=”text” name=”firstname” />  
文本域2:<input type=”text” name=”lastname” />  
</form>

Der Browser zeigt Folgendes an:

Optionsfeld
Das Optionsfeld erscheint am häufigsten in den Optionen für Benutzer zur Eingabe von Informationen bei der Registrierung. Bei dieser Art von Mehrbenutzermodus können Benutzer nur ein Ergebnis auswählen.
Das Optionsfeld wird definiert, indem der Wert des Typattributs auf radio

<form>  
<input type=”radio” name=”sex” value=”male” /> 男生   
<input type=”radio” name=”sex” value=”female” /> 女生   
</form>

im -Tag gesetzt wird. Die Anzeige im Browser lautet:

Kontrollkästchen
Kontrollkästchen ermöglicht dem Benutzer, eine oder mehrere entsprechende Optionen zu aktivieren. Eine häufige Möglichkeit besteht darin, Benutzern Funktionen bereitzustellen, z. B. das Speichern ihres Anmeldekontos beim Anmelden. Auf der Benutzerumfrageseite können Sie auch mehrere Meinungen von Benutzern einholen.
Das Kontrollkästchen wird definiert, indem der Wert des Typattributs im -Tag auf checkbox gesetzt wird

<form>  
<input type=”checkbox” name=”val1″ />  
前端开拓者不错   
<input type=”checkbox” name=”val2″ />  
前端开拓者一般   
</form>

Der Browser zeigt Folgendes an:

Dropdown-Menü
Das Drop-Down-Menü ähnelt der Radioauswahl in der Informationsauswahl, das Drop-Down-Menü kann jedoch mehr Informationen aufnehmen. Und das Dropdown-Menü kann nach Auswahl des Menüwerts zusätzliche Skripte ausführen.
Das Dropdown-Menü beginnt mit , und jedes Options-Tag im Select-Tag ist ein Wert im Dropdown-Menü.

<form>  
<select name=”cars”>  
<option value=”volvo”>Volvo</option>  
<option value=”saab”>Saab</option>  
<option value=”fiat”>Fiat</option>  
<option value=”audi”>Audi</option>  
</select>  
</form>

Browseranzeige:

Senden-Button
Der Absenden-Button ist für alle Formularkomponenten erforderlich . Nachdem der Benutzer die entsprechenden Informationen eingegeben hat, muss er auf die Schaltfläche „Senden“ klicken, um die Aktion auszulösen und die Formularwerte an die nächste Seite zu senden. Wenn das Aktionsattribut im

-Tag die entsprechende Übermittlungsadresse festlegt, werden mit der Schaltfläche „Senden“ alle im Formular erhaltenen Daten an diese Adresse an die Seite gesendet.
Die Schaltfläche „Senden“ wird definiert, indem der Wert des zu sendenden Typs im Eingabe-Tag festgelegt wird. Das Folgende ist ein Beispiel für das Suchfeld des Front-End-Entwicklers, bei dem die Übermittlungsadresse als Suchseite festgelegt wird.

<form name=”input” action=”www.frontopen.com” method=”get”>  
关键字:   
<input type=”text” name=”s” id=”s” />  
<input type=”submit” value=”搜索” />  
</form>

Der Browser zeigt Folgendes an:

Fazit: Dieser Abschnitt ist nur eine grundlegende Demonstration und Erklärung häufig verwendeter Formularvorderseiten. Endlayoutelemente. Realform-Anwendungen werden meist in Server-Programmiersprachen verwendet, und es müssen mehr Parameter und Regeln festgelegt werden. In dieser Lektion müssen Sie nur verstehen, wie die Elemente des Formulars angeordnet werden. In den meisten Fällen können Sie grundsätzlich mit dem Hintergrundprogrammierer zusammenarbeiten, um die Website-Entwicklung abzuschließen.

Weitere Lerntutorials und verwandte Artikel zur Verwendung von HTML-Formular-Tags finden Sie auf der chinesischen PHP-Website!