Heim > Artikel > Web-Frontend > Grundlegendes HTML-Tutorial zur Interaktion mit Betrachtern und Formular-Tags
Grundlegendes HTML-Tutorial zur Interaktion mit Betrachtern und Formular-Tags
- 零下一度Original
- 2017-05-12 13:57:011470Durchsuche
1. Verwenden Sie Formular-Tags, um mit Benutzern zu interagieren
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>表单标签</title> 6 </head> 7 <body> 8 <form> 9 <label for="username">用户名:</label> 10 <input type="text" name="username" id="username" value="" /> 11 <label for="pass">密码:</label> 12 <input type="password" name="pass" id="pass" value="" /> 13 <input type="submit" value="确定" name="submit" /> 14 <input type="reset" value="重置" name="reset" /> 15 </form> 16 </body> 17 </html>
Wie interagiert die Website mit Benutzern? Die Antwort ist die Verwendung von HTML-Formular(Formular). Das Formular kann die vom Betrachter eingegebenen Daten an den Server übertragen, sodass das serverseitige Programm die vom Formular übergebenen Daten verarbeiten kann.
Grammatik:
<form method="传送方式" action="服务器文件">
Erklärung:
1.
.2.Aktion: Der Ort, an den die vom Betrachter eingegebenen Daten gesendet werden, z. B. eine PHP-Seite (save.php).
3.Methode: Die Methode der Datenübertragung (Get/Post). Post ist eine verschlüsselte Übertragung; get ist eine Adressleistenübertragung, also eine unverschlüsselte Übertragung.
<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>Hinweis:
1. Alle Formular--Steuerelemente (Textfeld, Textfeld, -Schaltfläche , Optionsfeld, Kontrollkästchen usw.) müssen zwischen den Tags
stehen (andernfalls werden die vom Benutzer eingegebenen Informationen möglicherweise nicht an den Server übermittelt!).2. Der Unterschied zwischen der Methode: Post/Get. Diesen Teil müssen Back-End-Programmierer berücksichtigen.
Probieren Sie es aus: Fügen Sie Code zum
15 16Wenn Benutzer Buchstaben, Zahlen usw. in das Formular eingeben möchten, wird das Texteingabefeld verwendet. Das Textfeld kann auch in ein Passwort-Eingabefeld umgewandelt werden.
Grammatik:
<form> <input type="text/password" name="名称" value="文本" /> </form>
Typ:
Wenn type="text", ist das Eingabefeld ein Texteingabefeld; Typ Wenn =="Passwort", ist das Eingabefeld das Passwort-Eingabefeld.
2. Name: Benennen Sie das Textfeld zur Verwendung durch Hintergrundprogramme
ASP. 3. Wert: Legen Sie den Standardwert für das Texteingabefeld fest. (Wird im Allgemeinen als Erinnerung verwendet)
Beispiel:
Das Ergebnis von<form> 姓名： <input type="text" name="myName"> <br/> 密码： <input type="password" name="pass"> </form>
wird im Browser angezeigt:
Probieren Sie es aus: Geben Sie in das Formular Namens- und Passworteingabefelder ein
1. Geben Sie den Code in Zeile 10 im Editor ein:
2 Zeileneingabecode:<input type="text" name="myName" />Mindestens ein Leerzeichen zwischen Attributen.
<input type="password" name="pass" />
versteckt definiert ein ausgeblendetes Eingabefeld.
Bild definiert ein Bild als Senden-Schaltfläche.Zahl definiert einen Spinner Steuerung Numerisches Feld
Passwort definiert das Passwortfeld. Zeichen im Feld werden verdeckt
Radio definiert Optionsfeld
Bereich definiert numerisches Feld mit Schieberegler
Reset definiert Reset-Schaltfläche. Mit der Schaltfläche „Zurücksetzen“ werden alle Formularfelder auf ihre Anfangswerte zurückgesetzt.
Suche Definiert das für die Suche verwendete Textfeld.
Senden Definiert die Schaltfläche „Senden“. Die Schaltfläche „Senden“ sendet Daten an den Server
Text Standard. Definieren Sie ein einzeiliges Eingabefeld, in das Benutzer Text eingeben können. Der Standardwert beträgt 20 Zeichen.
url definiert das für die URL verwendete Textfeld.
Einige Leute sagen, dass der Wert jetzt nur noch selten verwendet wird. Ich denke, Anfänger wissen nicht, dass Platzhalter ein neues Attribut von H5 ist, und zwar ist von IE6 bis IE9. Nativer Platzhalter wird nicht unterstützt.
Wenn Sie nur Platzhalter verwenden, ohne das Kompatibilitätsproblem zu lösen (Sie müssen einen langen Abschnitt Kompatibilitätscode hinzufügen, um Platzhalter zu verwenden), kann man nur sagen, dass Sie sich nur umschauen und nicht arbeiten.
(Der rote Text ist der Inhalt des Kommentarbereichs, von dem einige vorübergehend unverständlich sind)
3. Textfeld, unterstützt mehrzeilige Texteingabe
Wenn der Benutzer große Textblöcke in ein Formular eingeben muss, müssen Sie Texteingabefelder verwenden.1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>文本域</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>个人简介：</label> 10 <textarea>在这里输入内容...</textarea> 11 <input type="submit" value="确定" name="submit" /> 12 <input type="reset" value="重置" name="reset" /> 13 </form> 14 </body> 15 </html>
Syntax:
1. DieBeispiel:
Ergebnisse im Browser anzeigen:
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
来试一试：修改文本域的列数和行数
在编辑器中第10行
标签的语义一定要根据单词来记忆，这样才会扎实透彻，
preformattde：预定义格式(文本)的意思，这里的<textarea>是多行文本区域的意思，<p class="sycode">根据意思就知道不同了，而且<textarea>中的默认字样，用户可以自行更改的，<pre class="brush:php;toolbar:false">中的内容，用户只能看不能动！ <br>
col与rows设定的值只会影响输入框的大小，不会影响你输入多少字
四、使用单选框、复选框，让用户选择
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>单选框、复选框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>性别:</label> 10 <label>男</label> 11 <input type="radio" value="1" name="gender-man" /> 12 <label>女</label> 13 <input type="radio" value="2" name="gender-woman" /> 14 </form> 15 </body> 16 </html>
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，
两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
如下面代码：
在浏览器中显示的结果：
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
来试一试：修改单选框代码错误（男、女可以同时选择），使其具有单选作用。
1、在编辑器中第11行、13行代码有错误，请改正。
记住：
1、同一组单选框name命名要一致。
2、你是否输入像下面的代码：
<label>男</label> <input type="radio" value="1" name="gender" /> <label>女</label> <input type="radio" value="2" name="gender" />
五、使用下拉列表框，节省空间
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>下拉列表框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>爱好:</label> 10 <select> 11 <option value="看书">看书</option> 12 <option value="旅游">旅游</option> 13 <option value="运动">运动</option> 14 <option value="购物">购物</option> 15 </select> 16 </form> 17 </body> 18 </html>
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
讲解：
1、value：
2、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
在浏览器中显示的结果：
来试一试：把“爱好”下拉列表的“旅游”选项设置为默认选项
在编辑器中的第12行补充代码 selected="selected"。
你是否输入像下面的代码：
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
Das obige ist der detaillierte Inhalt vonGrundlegendes HTML-Tutorial zur Interaktion mit Betrachtern und Formular-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!