Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung des Formular-Tags in HTML5

Detaillierte Erläuterung der Verwendung des Formular-Tags in HTML5

小云云Original: 2018-03-05 14:50:032549Durchsuche

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)
1. >
2. < html> Kopf
 >
3. < meta
4. http-equiv
 = "Content-Type" content ="text/html; charset=utf-8">
5. <Titel>Texteingabefeld, Passwort-EingabefeldTitel> ;/Kopf
6. <Körper
7. <Formular
8. Methode="post" Aktion="save.php"> Konto:
9. <Eingabe Typ = "text" name = "myName" />
10. ;
11. 密码：
12. <Eingabe Typ = "Passwort " name = "pass"/>
13. Formular>
14. Körper>
15. 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 <textarea> den Standardwert zwischen den Tags ein: <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li><!DOCTYPE HTML> </li> <li><html> </li> <li><Kopf> </li> <li> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </li> <li> <Titel>文本域 </Titel> </li> <li></Kopf> </li> <li><Körper> </li> <li><form Methode = "post" Aktion = "save.php"> </li> <li> <label>个人简介< /Label> </li> <li> <textarea rows = "5" cols = "10">Geben Sie hier den Inhalt ein. ..</textarea></span> ; </li><li> > Wert = "OK" Name = "Senden" /> </li> <li> <Eingabe Typ = "reset" Wert = "reset" Name = "reset" /> </li> <li> </Formular> </li> <li></body> </html</li><li>> Persönliche Vorstellung <lable> </li> </ol> 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. <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"><li><Eingabe Typ = "radio/checkbox" Wert = "Wert" Name = "Name" geprüft = "geprüft" /> ></li></ol>1 Kontrollkästchen: Kontrollfeld 2. Wert: Der Wert, der dem Server Daten bereitstellt 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. <!DOCTYPE HTML> <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li><html</li>><li> </li> <li><Kopf> </li> <li> <meta http-equiv=" Content-Type" content="text/html; charset=utf-8"> </li> <li> <Titel>单选框、复选框</title> </li> <li></Kopf> </li> <li><Körper> </li> <li><Formular Name = "iForm" Methode = "post" Aktion = "save.php"> </li> <li> Bist du Reisen Sie gern? <br /> </li> <li> <Eingabe Typ = "radio" Name = "radioLove" Wert = "喜欢" markiert = "markiert"/></span> </li> <li> <Eingabe Typ = "Radio" Name = "radioLove" Wert = "不喜欢" /> </li> <li> <Eingabe Typ = "radio" Name = "radioLove" Wert = "Es spielt keine Rolle"/> </li> <li> <br /> <br /> </li> <li> Für welche Sportarten interessierst du dich? <br /> </li> <li> <Eingabe Typ = "checkbox" Name = "checkbox1" Wert = "跑步"/> </li> <li> <Eingabe Typ = "Kontrollkästchen" Name = "checkbox1" Wert = "打球" geprüft = "geprüft"/> </li> <li> <Eingabe Typ = "checkbox" Name = "checkbox1" Wert = "登山" checked = "checked"/> </li> <li> <Eingabe Typ = "checkbox" Name = "checkbox1" Wert = "健身" /> </li> <li> </li> <li></Formular> </li> <li></Körper> </li> <li></html> </li></li> </ol> 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: <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li><!DOCTYPE HTML > </li> <li><html> </li> <li><Kopf> </li> <li> <meta http-equiv="Content-Type " content="text/html; charset=utf-8"> </li> <li> <Titel>下拉页表框</Titel> </li> <li></Kopf> </li> <li><Körper> </li> <li><Formular Name = "iForm" Methode = "Beitrag" Aktion = "save.php"> </li> <li> < Label>爱好:</Label> </li> <li> <auswählen> </li> <li> <Option Wert = „Lesen“>Lesen</Option>< /span> </li> <li> >Option Wert = "Sport">Sport< /Option> </li> <li> <Option Wert = „Musik“>Musik</Option> </li> <li> <Option Wert = "Reise">Reise</Option></li> <li>Wert = "Einkaufen"> ;Einkaufen</Option> </li> <li> <span Stil= „color:#ff0000;“></auswählen></span> </li> <li> </li> <li></Formular> </li> <li> </Körper> </li> <li></html> </li> </ol> Ergebnis: Hobbys: Lesen, Sport, Musik, Reisen und Einkaufen (kann heruntergezogen werden) <option value = "Wert einreichen " > option< /option> Wert senden: Es ist der an den Server übermittelte Wert Option: Es ist der angezeigte Wert Set selected = "selected", dann dies Die Option ist standardmäßig ausgewählt. Mehrfachauswahl: Ändern Sie einfach das obige <select> in <select multiple = "multiple" >, drücken Sie dann unter Windows die Strg-Taste und klicken Sie gleichzeitig unter Mac Command + Klicken Sie auf 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: <input type = "submit" value = "Submit"> 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. <input type = "reset" value = "reset"> 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: <Label für = "control id Name" > Hinweis: Der Wert des for-Attributs im Tag muss mit dem Wert des id-Attributs des Tags identisch sein zugehörige Kontrolle; <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li> <Label for=</li>"male"<li>>Male</label> </li> <li> <Eingabe Typ= „Radio“ Name=„Geschlecht“ <span style="color:#ff0000;"> id="männlich"</span> /> </li> <li> <br /> </li> <li> <Label für= „weiblich“>女</Label> </li> <li> <Eingabe Typ ="Radio" Name="Geschlecht" <span style="color:#990000;"> ;id="female"</span> /> </li> <li> <Label für= „E-Mail“>Geben Sie Ihre E-Mail-Adresse ein</Label> </li> <li> <Eingabe Typ ="E-Mail" <span Stil ="color:#ff6666;">id="email"</span> Platzhalter=" Eingeben E-Mail"> </li> <li></Formular> </li> </ol> Ergebnis: Männlich Weiblich Geben Sie Ihre E-Mail-Adresse ein Folgendes wird von Ihnen selbst nachgeahmt und kann überprüft werden: <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li> <!DOCTYPE HTML> </li> <li><html> </li> <li><Kopf> </li> <li> <meta http-equiv="Content -Type " content="text/html; charset=utf-8"> < / </li><li>Kopf> ><Körper> </li> </ol> <li><form></li> <li></li> <li> Was Sportarten, an denen Sie interessiert sind: <br/> </li> <li> <Label für = „sport1“>慢跑</label> </li> <li> <Eingabe Typ = "Kontrollkästchen" Name = "Sport" id = "sport1"/> </li> <li> <br /> </li> <li> <Label für = „sport2“>登山</label> </li> <li> <Eingabe Typ = "Kontrollkästchen" Name = "Sport" id = "sport2"/> </li> <li> <br /> </li> <li> <Label für = „sport3“>篮球</label> </li> <li> <Eingabe Typ = "Kontrollkästchen" Name = "Sport" id = "sport3"/> <br /> </li> <li></Formular> </li> <li> </li> <li></Körper> ; </li> <li></html> </li> Ergebnisse: Für welche Sportarten interessieren Sie sich: Joggen Wandern Basketball Verwandte Empfehlungen: <a href="http://www.php.cn/js-tutorial-387196.html" target="_self"> Implementierungsmethode zur dynamischen Generierung von Formularen </a> <a href="http://www.php.cn/js-tutorial-385336.html" target="_self">Beispiel einer JavaScript-Methode zum dynamischen Hinzufügen von Formularelementen</a> <a href="http://www.php.cn/div-tutorial-385258.html" target="_self">Detaillierte Erläuterung der HTML-Formularelemente</a>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!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Stellungnahme：<div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox">Vorheriger Artikel：<a class="dBlack" title="HTML-Code-Formatierungsmethode in der Vue-Datei" href="https://m.php.cn/de/faq/387471.html">HTML-Code-Formatierungsmethode in der Vue-Datei</a>Nächster Artikel：<a class="dBlack" title="HTML-Code-Formatierungsmethode in der Vue-Datei" href="https://m.php.cn/de/faq/387478.html">HTML-Code-Formatierungsmethode in der Vue-Datei</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><a href="https://m.php.cn/de/article.html" class="bBlack">Mehr sehen</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="https://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><a href="https://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><a href="https://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><a href="https://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><a href="https://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>