Heim > Artikel > Web-Frontend > Verschiedene Beispiele zum Parsen von HTML-Formularen
Verschiedene Beispiele zum Parsen von HTML-Formularen
- 不言Original
- 2018-06-05 11:18:512322Durchsuche
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:
d7534d02403f614ad039b12d3a33b1b2
•ff9c23ada1bcecdd1a0fb5d5a0f18437: ff9c23ada1bcecdd1a0fb5d5a0f18437 Tags erscheinen paarweise, beginnend mit ff9c23ada1bcecdd1a0fb5d5a0f18437 und endend mit f5a47148e367a6035fd7a2faa965022e.
•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 ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e 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:
39a1b08cf90018a46452665c502b4be2Textstandardwert40587128eee8df8f03d0b607fe983014
1 . 4750256ae76b6b9d804861d8f69e79d3-Tags erscheinen paarweise, beginnend mit 4750256ae76b6b9d804861d8f69e79d3.
2. Spalten: Die Anzahl der Spalten im mehrzeiligen Eingabefeld.
3. Zeilen: Die Anzahl der Zeilen im mehrzeiligen Eingabefeld.
4. Sie können Standardwerte zwischen Tags eingeben.
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使用提交按钮提交数据
语法：892fc1b3743fe80ae197d7a1a60c2276
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”就可以。
语法：
4091b5f1b74b6c5332cb5e27ee906caf1
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标签相关连的表单控件上）。
语法：
f2601599f81b7104ea47b5c86080e721
注意：标签的 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!