Dieser Artikel gibt Ihnen hauptsächlich eine detaillierte Erklärung der Verwendung von Formular-Tags in HTML5. Ich hoffe, dass er Ihnen helfen kann.
Syntax:
und das Formular muss dazwischen platziert werden.2. Die Methodenübertragungsmethode Get/Post ist eine Sache, die Back-End-Programmierer berücksichtigen sollten
3. Aktion Die eingegebenen Daten B. eine PHP-Seite (save.php)
< Formular Methode="post" Aktion="save.php">
🎜><Label für="Benutzername">Benutzername:Label>
<Eingabe Typ= "text" name="username" />
<Label für="pass">密码:Label >
<Eingabe Typ="Passwort" Name=" pass" />
Formular>
Texteingabefeld, Passworteingabefeld
Wenn der Benutzer Buchstaben, Daten usw. in das Formular eingeben muss, wird das Texteingabefeld verwendet Das Texteingabefeld wird ebenfalls verwendet. Kann in ein Passworteingabefeld umgewandelt werden
Syntax:
<Formular>
<Eingabe Typ = "Text/Passwort" Name = "Name" Wert = "Text" />
Formular > Wenn es sich beim Typ um Text handelt, handelt es sich um ein Texteingabefeld Wenn der Typ „Passwort“ ist, handelt es sich um das Passwort-Eingabefeld 2.Name: Benennen Sie das Textfeld zur Verwendung durch Hintergrund-ASP-PHP 3.Wert: Legen Sie den Standardwert für das Texteingabefeld fest (wird im Allgemeinen als Eingabeaufforderung verwendet) > < html> Kopf < meta = "Content-Type" content ="text/html; charset=utf-8"> <Titel>Texteingabefeld, Passwort-EingabefeldTitel> ;/Kopf <Körper <Formular Methode="post" Aktion="save.php"> Konto: <Eingabe Typ = "text" name = "myName" /> <br /> ; 密码: <Eingabe Typ = "Passwort " name = "pass"/> Formular> Körper> html>
Ergebnis:
Konto:
Passwort:
Textfeld: unterstützt mehrzeilige Texteingabe
Texteingabe wird verwendet, wenn Benutzer große Textblöcke in die Formulardomäne eingeben müssen
Syntax:
<textarea rows = "Anzahl der Zeilen" cols = "Anzahl der Spalten" > Text textarea>
Erklärung: 1. Das Texteingabefeld beginnt mit
2.rows : Eingabe Die Anzahl der Zeilen des Texteingabefelds
3.cols: Geben Sie die Anzahl der Spalten des Texteingabefelds ein
4 . Geben Sie in
>
<html>
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<Titel>文本域 Titel>
Kopf>
<Körper>
<form Methode = "post" Aktion = "save.php">
<label>个人简介< /Label>
<textarea rows = "5" cols = "10">Geben Sie hier den Inhalt ein. ..textarea>span> ;
> Wert = "OK" Name = "Senden" />
<Eingabe Typ = "reset" Wert = "reset" Name = "reset" />
Formular>
body>
htmlPersönliche Vorstellung
Verwenden Sie Optionsfelder und Kontrollkästchen, um Benutzern die Auswahl zu ermöglichenBei der Verwendung von Formularen zum Entwerfen von Fragebögen, um die zu reduzieren Für den Benutzer ist die Verwendung eines Auswahlfelds eine gute Möglichkeit. In HTML gibt es Optionsfelder und Kontrollkästchen. Der Hauptunterschied zwischen beiden besteht darin, dass der Benutzer im Optionsfeld nur eine Option auswählen kann, während der Benutzer im Kontrollkästchen nur eine Option auswählen kann Sie können beliebige Elemente auswählen, mehrere Elemente auswählen oder sogar alle auswählen.
<Eingabe Typ = "radio/checkbox" Wert = "Wert" Name = "Name" geprüft = "geprüft" /> > Kontrollkästchen: Kontrollfeld 3. Name des Steuerelements zur Verwendung durch das Hintergrundprogramm ASP, PHP 4.checked: Bei Einstellung geprüft = "checked" ist diese Option standardmäßig ausgewählt.
1
2. Wert: Der Wert, der dem Server Daten bereitstellt
<html
<Kopf>
<meta http-equiv=" Content-Type" content="text/html; charset=utf-8">
<Titel>单选框、复选框title>
Kopf>
<Körper>
<Formular Name = "iForm" Methode = "post" Aktion = "save.php">
Bist du Reisen Sie gern? <br />
<Eingabe Typ = "radio" Name = "radioLove" Wert = "喜欢" markiert = "markiert"/>span>
<Eingabe Typ = "Radio" Name = "radioLove" Wert = "不喜欢" />
<Eingabe Typ = "radio" Name = "radioLove" Wert = "Es spielt keine Rolle"/>
<br /> <br />
Für welche Sportarten interessierst du dich? <br />
<Eingabe Typ = "checkbox" Name = "checkbox1" Wert = "跑步"/>
<Eingabe Typ = "Kontrollkästchen" Name = "checkbox1" Wert = "打球" geprüft = "geprüft"/>
<Eingabe Typ = "checkbox" Name = "checkbox1" Wert = "登山" checked = "checked"/>
<Eingabe Typ = "checkbox" Name = "checkbox1" Wert = "健身" />
Formular>
Körper>
html>
Ergebnisse:
Reisen Sie gerne?
Für welche Sportarten interessierst du dich?
Hinweis: Der Wert des Namens der Optionsfelder in derselben Gruppe muss konsistent sein, damit die Optionsfelder in derselben Gruppe die Rolle der Optionsauswahl übernehmen können.
Dropdown-Listenfeld
Verwenden Sie die Dropdown-Liste -Down-Listenfeld, Platz sparen, Sie können entweder eine Einzel- oder Mehrfachauswahl treffen.
Einzelauswahl:
>
<html>
<Kopf>
<meta http-equiv="Content-Type " content="text/html; charset=utf-8">
<Titel>下拉页表框Titel>
Kopf>
<Körper>
<Formular Name = "iForm" Methode = "Beitrag" Aktion = "save.php">
< Label>爱好:Label>
<auswählen>
<Option Wert = „Lesen“>LesenOption>< /span>
>Option Wert = "Sport">Sport< /Option>
<Option Wert = „Musik“>MusikOption>
<Option Wert = "Reise">ReiseOption>
Wert = "Einkaufen"> ;EinkaufenOption>
<span Stil= „color:#ff0000;“>auswählen>span>
Formular>
Körper>
html>
Ergebnis: Hobbys: Lesen, Sport, Musik, Reisen und Einkaufen (kann heruntergezogen werden)
Option: Es ist der angezeigte Wert
Set selected = "selected", dann dies Die Option ist standardmäßig ausgewählt.
Mehrfachauswahl:
Ändern Sie einfach das obige
Verwenden Sie die Schaltfläche „Senden“, um Daten zu übermitteln
Es gibt zwei Schaltflächen, die im Formular verwendet werden können: die Schaltfläche „Senden“ und die Schaltfläche „Zurücksetzen“, wenn der Benutzer Informationen an die senden muss Server, Schaltfläche „Senden“ erforderlich.
Syntax:
Erklärung:
1 Nur wenn type = " sumit“, die Schaltfläche hat die Funktion der Übermittlung
2.Wert: Die auf der Schaltfläche angezeigten Wörter
Zurücksetzen
Wenn die Benutzer Wenn Sie die Formularinformationen auf den Ausgangszustand zurücksetzen müssen, können Sie die Schaltfläche „Zurücksetzen“ verwenden. Ändern Sie einfach den Typ, um ihn zurückzusetzen.
Erklärung:
1 Das Gleiche gilt für die Schaltfläche „Senden“, nur wenn type = „ „Zurücksetzen“ Nur wenn die Schaltfläche eine Reset-Funktion hat
2.Wert: Der auf der Schaltfläche angezeigte Text
Label-Label
Label-Label wird nicht angezeigt Dem Benutzer werden alle Spezialeffekte angezeigt. Seine Funktion besteht darin, die Benutzerfreundlichkeit für Mausbenutzer zu verbessern. Wenn Sie auf den Text innerhalb des Etiketts klicken, wird dieses Steuerelement ausgelöst Etikett, der Browser richtet den Fokus automatisch auf das mit dem Etikett verknüpfte Formularsteuerelement (das mit dem Etikett verknüpfte Formularsteuerelement wird automatisch ausgewählt).
Syntax:
Hinweis: Der Wert des for-Attributs im Tag muss mit dem Wert des id-Attributs des Tags identisch sein zugehörige Kontrolle;
<Label for=
>Malelabel>
<Eingabe Typ= „Radio“ Name=„Geschlecht“ <span style="color:#ff0000;"> id="männlich"span> />
<br />
<Label für= „weiblich“>女Label>
<Eingabe Typ ="Radio" Name="Geschlecht" <span style="color:#990000;"> ;id="female"span> />
<Label für= „E-Mail“>Geben Sie Ihre E-Mail-Adresse einLabel>
<Eingabe Typ ="E-Mail" <span Stil ="color:#ff6666;">id="email"span> Platzhalter=" Eingeben E-Mail">
Formular>
Ergebnis:
Männlich
Weiblich
Geben Sie Ihre E-Mail-Adresse ein
Folgendes wird von Ihnen selbst nachgeahmt und kann überprüft werden:
>
<html>
<Kopf>
<meta http-equiv="Content -Type " content="text/html; charset=utf-8">
< /> ><Körper>
<form>
<br/>
<Label für = „sport1“>慢跑label>
<Eingabe Typ = "Kontrollkästchen" Name = "Sport" id = "sport1"/>
<br />
<Label für = „sport2“>登山label>
<Eingabe Typ = "Kontrollkästchen" Name = "Sport" id = "sport2"/>
<br />
<Label für = „sport3“>篮球label>
<Eingabe Typ = "Kontrollkästchen" Name = "Sport" id = "sport3"/> <br />
Formular>
Körper> ;
html>
Ergebnisse:
Für welche Sportarten interessieren Sie sich:
Joggen
Wandern
Basketball
Verwandte Empfehlungen:
Implementierungsmethode zur dynamischen Generierung von Formularen
Beispiel einer JavaScript-Methode zum dynamischen Hinzufügen von Formularelementen
Detaillierte Erläuterung der HTML-Formularelemente
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Formular-Tags in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!