Verschiedene Beispiele zum Parsen von HTML-Formularen
Dieser Artikel verwendet hauptsächlich verschiedene Beispiele, um Ihnen zu helfen, die Verwendung von HTML-Formularen zu verstehen, und erklärt, wie Formularformulare mit Benutzern interagieren.
9 Ein einfaches Beispiel analysiert die Verwendung von HTML-Formularen Formular als Referenz. Der spezifische Inhalt lautet wie folgt:
1 Formular-Tag
Wie interagiert die Website mit Benutzern? Die Antwort ist die Verwendung von HTML-Formularen. Das Formular kann die vom Betrachter eingegebenen Daten an den Server übertragen, sodass das serverseitige Programm die vom Formular übergebenen Daten verarbeiten kann.
Syntax:
•
.•Aktion: Der Ort, an den die vom Betrachter eingegebenen Daten gesendet werden, z. B. eine PHP-Seite (save.php).
•Methode: Die Methode der Datenübertragung (Get/Post).
Alle Formularsteuerelemente (Textfelder, Textfelder, Schaltflächen, Optionsfelder, Kontrollkästchen usw.) müssen zwischen den Tags
platziert werden (ansonsten werden die vom Benutzer eingegebenen Informationen angezeigt). can Kann nicht an den Server gesendet werden!).Der Unterschied zwischen method:post/get muss von Back-End-Programmierern berücksichtigt werden. Interessierte Freunde können sich das Wiki dieses Abschnitts ansehen, das eine ausführliche Einführung enthält.
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form>
2 Eingaben/Text/Passworttext und Passwort-Eingabefeld
Wenn Benutzer Buchstaben, Zahlen usw. in das Formular eingeben möchten, wird das Texteingabefeld verwendet. Das Textfeld kann auch in ein Passwort-Eingabefeld umgewandelt werden.
Syntax:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<form> <input type="text/password" name="名称" value="文本" /> </form>
Wenn Sie = eingeben „Text“, das Eingabefeld ist ein Texteingabefeld;
wenn type="password“, ist das Eingabefeld ein Passwort-Eingabefeld.
Name: Benennen Sie das Textfeld zur Verwendung durch die Hintergrundprogramme ASP und PHP.
Wert: Legen Sie den Standardwert für das Texteingabefeld fest. (Wird im Allgemeinen als Eingabeaufforderung verwendet)
Testcode:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文本输入框、密码输入框</title> </head> <body> <form method="post" action="save.php"> 账户:<input type="text" name="myName" /><br><br> 密码:<input type="password" name="pass" /> </form> </body> </html>
Browser Wirkung:
3 Textfeld-Textfelder, unterstützt mehrzeilige Texteingabe
Wird verwendet, wenn Benutzer große Textblöcke in das Texteingabefeld des Formulars eingeben müssen .
Syntax:
1 .
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文本域</title> </head> <body> <form action="save.php" method="post" > <label>个人简介:</label><br> <textarea cols="40" rows="10">在这里输入内容...</textarea><br> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> </form> </body> </html>
Browsereffekt:
4 Radio-/Kontrollkästchen-Optionsfelder und Kontrollkästchen
Wenn Sie Formulare zum Entwerfen von Fragebögen verwenden, ist es eine gute Idee, Auswahlfelder in HTML zu verwenden, um den Benutzeraufwand zu reduzieren. Es gibt zwei Arten von Auswahlfeldern, nämlich Optionsfeldern und Kontrollkästchen. Der Unterschied zwischen beiden besteht darin, dass der Benutzer im Optionsfeld nur eine Option auswählen kann, während er im Kontrollkästchen mehrere oder sogar alle Optionen auswählen kann.
Syntax:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1. Bei type="radio" ist das Steuerelement ein Optionsfeld
2. Bei type="checkbox" ist das Steuerelement Für das Kontrollkästchen
3.Wert: Der Wert der Übermittlung von Daten an den Server (wird vom Hintergrundprogramm PHP verwendet)
4.Name: Benennen Sie das Steuerelement zur Verwendung durch das Hintergrundprogramm ASP und PHP
5 .checked: Bei der Einstellung „checked“ ist diese Option standardmäßig ausgewählt
6. Hinweis: Die Namenswerte der Optionsfelder in derselben Gruppe müssen konsistent sein. Das obige Beispiel hat beispielsweise dieselben Werte Benennen Sie „radioLove“, damit die Optionsfelder in derselben Gruppe den gleichen Namen haben. Nur die Auswahlschaltfläche kann als Optionsfeld fungieren.
XML/HTML-CodeInhalt in die Zwischenablage kopieren
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>单选框、复选框</title> </head> <body> <form action="save.php" method="post" > 你喜欢旅游吗?请选择:<br> <input type="radio" name="radiolove" value="like" checked="checked">喜欢 <input type="radio" name="radiolove" value="dislike" >不喜欢 <input type="radio" name="radiolove" value="unknown" >无所谓 <br><br> 你喜欢哪些运动?<br> <input type="checkbox" name="checkbox" value="Run" checked="checked"> Run <input type="checkbox" name="checkbox" value="Basketball"> Basketball <input type="checkbox" name="checkbox" value="FootBall"> FootBall <input type="checkbox" name="checkbox" value="Fat" checked="checked"> Fat </form> </body> </html>
Der Browsereffekt ist:
Dieser Democode implementiert ein Optionsfeld mit 3 Optionen und ein Kontrollkästchen mit 4 Optionen
同一个选框的name值必须一致,否则不能实现单选和复选功能。在同一个选框中value值必须不同,否则传递到后台数据有误。
5 select/option使用下拉列表框单选
下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。
语法:
<option value=”name” selected=”selected”>Run</option>
Value为向服务器提交的值;
设置selected=”selected”属性,则该选项就被默认选中。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉列表框</title> </head> <body> <form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="submit" name="submit" value="submit"> <input type="reset" name="reset" value="reset"> <br><br> <label>留言给我们:</label><br> <textarea cols="40" rows="5">在这里输入留言...</textarea> <br> <input type="submit" value="点击确认提交留言" name="advise"> </form> </body> </html>
浏览器效果:
6 select/multiple/option使用下拉框多选
下拉列表也可以进行多选操作,在标签中设置multiple=”multiple”属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用下拉列表框进行多选</title> </head> <body> <form action="save.php" method="post" > <label>爱好:</label><br> <select multiple="multipl"> <option value="看书">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <br><br> <label>留言给我们:</label><br> <textarea cols="40" rows="5">在这里输入留言...</textarea><br> <input type="submit" value="点击确认提交留言" name="advise"> </form> </body> </html>
浏览器效果:
7 input/submit使用提交按钮提交数据
语法:
type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>提交按钮</title> </head> <body> <form method="post" action="save.php"> <label for="myName">姓名:</label> <input type="text" value=" " name="myName " /> <input type="submit" value="提交" name="submitBtn" /> </form> </body> </html>
浏览器效果:
8 input/reset使用重置按钮重置表单信息
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
语法:
1
type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>重置按钮</title> </head> <body> <form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="submit" value="确定" /> <input type="reset" value="重置" /> </form> </body> </html>
浏览器效果:
9 表单中label标签
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>form中的lable标签</title> </head> <body> <form> <label for="male">男</label> <input type="radio" name="gender" id="male" /><br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <br /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"><br> 你对什么运动感兴趣:<br> <label for="run">慢跑</label> <input type="checkbox" name="sports" id="run"><br> <label for="climb">登山</label> <input type="checkbox" name="sports" id="climb"><br> <label for="basketball">篮球</label> <input type="checkbox" name="sports" id="basketball"><br> </form> </body> </html>
浏览器效果:
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关推荐:
Das obige ist der detaillierte Inhalt vonVerschiedene Beispiele zum Parsen von HTML-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet
