Heim > Artikel > Web-Frontend > Wie implementiert man den Auswahlboxeffekt eines Formulars in HTML? Implementierung von Optionsfeldern und Mehrfachauswahlfeldern (Codebeispiel)
Wie implementiert man den Auswahlboxeffekt eines Formulars in HTML? Implementierung von Optionsfeldern und Mehrfachauswahlfeldern (Codebeispiel)
- 青灯夜游Original
- 2018-09-12 11:16:4517211Durchsuche
Wenn Sie Daten über ein Formular übermitteln, empfiehlt es sich, ein Auswahlfeld zu verwenden, um einige Vorgänge für den Benutzer zu reduzieren. In diesem Kapitel erfahren Sie, wie Sie den Auswahlfeldeffekt des Formulars in HTML implementieren. Implementierung von Optionsfeldern und Kontrollkästchen (Codebeispiel). Durch Radio-Button-Code und Kontrollkästchen-Code-Beispiele werden der Radio-Button-Stil und der Multi-Select-Box-Stil implementiert, die einen gewissen Referenzwert haben. Ich hoffe, dass sie für Sie hilfreich sind.
1. Arten und Syntax von Auswahlfeldern
Es gibt zwei Arten von Auswahlfeldern in HTML, nämlich Optionsfelder und Kontrollkästchen Der Unterschied besteht darin, dass der Benutzer nur eine Option im Optionsfeld auswählen kann, während der Benutzer im Kontrollkästchen mehrere Optionen oder sogar alle auswählen kann.
Syntax:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
2. HTML-Optionsfeld-Stil
HTML-Optionsfeld-Stil-Code :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单选框</title> </head> <body> <form name="form" method="post" action=""> 你是否喜欢运动？<br /> <input type="radio" name="radio" value="喜欢"/>喜欢 <input type="radio" name="radio" value="不喜欢"/>不喜欢 <input type="radio" name="radio" value="无所谓"/>无所谓 </form> </body> </html>
Rendering:
Wie aus dem obigen Beispiel ersichtlich ist:
Beim Typ="Radio" ist das Auswahlfeld als Optionsfeld definiert.
Namensattribut: Definiert den Namen des Optionsfelds, das in Gruppen verwendet wird Dieselbe Gruppe muss denselben Namen verwenden.
Wertattribut: Definiert den Wert des Optionsfelds. Die Feldwerte in derselben Gruppe müssen unterschiedlich sein.
Wenn „checked“ festgelegt ist, ist diese Option standardmäßig ausgewählt. Sie kann entweder im Optionsfeld oder im Kontrollkästchen verwendet werden, z. B. im Optionsfeld:
 "153671643175698Wie implementiert man den Auswahlboxeffekt eines Formulars in HTML? Implementierung von Optionsfeldern und Mehrfachauswahlfeldern (Codebeispiel)")
3. HTML-Kontrollkästchen-Stil
Das Kontrollkästchen ermöglicht es Web-Viewern hauptsächlich, mehrere Optionen gleichzeitig in einer Reihe von Optionen auszuwählen. Jedes Kontrollkästchen ist ein unabhängiges Element und muss einen eindeutigen Namen haben.
HTML-Checkbox-Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复选框</title> </head> <body> <form name="form" method="post" action=""> 你喜欢什么运动？<br /> <input type="checkbox" name="checkbox" value="跑步" checked="checked"/>跑步 <input type="checkbox" name="checkbox" value="羽毛球"/>羽毛球 <input type="checkbox" name="checkbox" value="乒乓球"/>乒乓球 <input type="checkbox" name="checkbox" value="乒乓球"/>登山 </form> </body> </html>
Rendering:
Wie aus dem obigen Beispiel ersichtlich ist:
Wenn type="checkbox", ist das Auswahlfeld als Kontrollkästchen definiert;
Namensattribut: Definiert den Namen des Kontrollkästchens in derselben Gruppe, kann aber auch unterschiedliche Namen haben definiert als derselbe Name (Array), zum Beispiel: name[];
Wertattribut: Definiert den Wert des Kontrollkästchens und die Feldwerte müssen in derselben Gruppe unterschiedlich sein.
4. Das Namensattribut des Auswahlfelds
In einem HTML-Formular, ob es sich um eine Gruppe von Optionsfeldern (Radio) handelt eine Gruppe komplexer Das Kontrollkästchen muss das Namensattribut enthalten. Dies soll das Abrufen des vom Formular übergebenen Werts auf der Verarbeitungsseite erleichtern.
Eine Gruppe von Optionsfeldern (Radio): Da der Wert im Namensattribut gleich ist, kann nur eines ausgewählt werden, das direkt auf der Verarbeitungsseite abgerufen wird, z. B. $_GET['name'] ;
Eine Reihe von Kontrollkästchen (Kontrollkästchen): Im Allgemeinen wird der Wert im Namensattribut auf name[] gesetzt. Wenn ausgewählt, wird ein Element zum Array name[] hinzugefügt und der Wert wird angezeigt erhalten Sie auf der Verarbeitungsseite wie folgt:
if(!empty($_POST['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
}Auf diese Weise können Sie mehrere unterschiedliche Daten erfassen, die im Formular-Kontrollkästchen (Kontrollkästchen) übergeben wurden.
Das obige ist der detaillierte Inhalt vonWie implementiert man den Auswahlboxeffekt eines Formulars in HTML? Implementierung von Optionsfeldern und Mehrfachauswahlfeldern (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!