HTML-Formulare und Eingabe

HTML-Formular

Ein Formular ist ein Bereich, der Formularelemente enthält.

Formularelemente ermöglichen Benutzern die Eingabe von Inhalten in das Formular, z. B. Textbereiche, Dropdown-Listen, Optionsfelder, Kontrollkästchen usw.

Formulare werden mit dem Formular-Tag

festgelegt:

.
Eingabeelemente
.

---

HTML-Formular – Eingabeelement

Das am häufigsten verwendete Formular-Tag ist das Eingabe-Tag ().

Eingabetypen werden durch das Typattribut (Typ) definiert. Die am häufigsten verwendeten Eingabetypen sind wie folgt:

---

Textfelder

Das Textfeld wird über das Tag festgelegt. Wenn der Benutzer Buchstaben, Zahlen usw. in das Formular eingibt, wird das Textfeld verwendet.

Vorname:

Nachname:

---

Passwortfeld

Das Passwortfeld wird durch das Tag definiert:

Passwort:

---

Optionsfelder

Das Tag definiert die Optionsfeldoptionen des Formulars

Male

Female

Der Browser-Anzeigeeffekt ist wie folgt:

---

Kontrollkästchen

definiert ein Kontrollkästchen. Der Benutzer muss eine oder mehrere Optionen aus einer Reihe vorgegebener Optionen auswählen.

Ich habe ein Fahrrad

Ich habe ein Auto

Der Browser-Anzeigeeffekt ist wie folgt:

---

Schaltfläche „Senden“

definiert die Schaltfläche zum Senden.

Wenn der Benutzer auf die Schaltfläche „Bestätigen“ klickt, wird der Inhalt des Formulars in eine andere Datei übertragen. Das Aktionsattribut des Formulars definiert den Dateinamen der Zieldatei. Die durch das Aktionsattribut definierte Datei führt normalerweise eine entsprechende Verarbeitung der empfangenen Eingabedaten durch. :

Benutzername:

HTML-Formular-Tag

Neu: HTML5 neues Tag

Schlagworte	Beschreibung
	Definieren Sie ein Formular für Benutzereingaben
	Eingabefelder definieren
</td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definieren Sie ein Textfeld (ein mehrzeiliges Eingabesteuerelement)</td> </tr> <tr style="background-color: rgb(246, 244, 240);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <label></td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definiert das Tag des <input>-Elements, normalerweise den Eingabetitel </td> </tr> <tr style="background-color: rgb(255, 255, 255);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <fieldset></td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definiert einen Satz zusammengehöriger Formularelemente und verwendet einen äußeren Rahmen, um sie einzuschließen </td> </tr> <tr style="background-color: rgb(246, 244, 240);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <Legende></td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definiert den Titel des <fieldset>-Elements</td> </tr> <tr style="background-color: rgb(255, 255, 255);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <wählen></td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definiert die Dropdown-Optionsliste </td> </tr> <tr style="background-color: rgb(246, 244, 240);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <optgroup></td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Optionsgruppe definieren </td> </tr> <tr style="background-color: rgb(255, 255, 255);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <Option></td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definieren Sie die Optionen in der Dropdown-Liste </td> </tr> <tr style="background-color: rgb(246, 244, 240);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <Schaltfläche></td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definieren Sie eine Klickschaltfläche </td> </tr> <tr style="background-color: rgb(255, 255, 255);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <datalist><span class="new" style="float: right; color: rgb(255, 255, 255); background-color: rgb(138, 192, 7); font-weight: bold; padding-left: 1px; padding-right: 1px; border: 1px solid rgb(255, 255, 255); outline: rgb(138, 192, 7) solid 1px;">Neu</span> </td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Geben Sie eine vordefinierte Liste von Eingabesteuerungsoptionen an </td> </tr> <tr style="background-color: rgb(246, 244, 240);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <keygen><span class="new" style="float: right; color: rgb(255, 255, 255); background-color: rgb(138, 192, 7); font-weight: bold; padding-left: 1px; padding-right: 1px; border: 1px solid rgb(255, 255, 255); outline: rgb(138, 192, 7) solid 1px;">Neu</span> </td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definiert das Schlüsselpaargeneratorfeld der Form </td> </tr> <tr style="background-color: rgb(255, 255, 255);"> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> <Ausgabe><span class="new" style="float: right; color: rgb(255, 255, 255); background-color: rgb(138, 192, 7); font-weight: bold; padding-left: 1px; padding-right: 1px; border: 1px solid rgb(255, 255, 255); outline: rgb(138, 192, 7) solid 1px;">Neu</span> </td> <td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;"> Definieren Sie ein Berechnungsergebnis</td> </tr> </tbody></table> <p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"> </p> <!--<p>Weitere Informationen</p>--><p>Das obige ist der detaillierte Inhalt vonHTML-Formulare und Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><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"><span>Vorheriger Artikel：<a class="dBlack" title="HTML基础内容详解" href="http://m.php.cn/de/faq/360389.html">HTML基础内容详解</a></span><span>Nächster Artikel：<a class="dBlack" title="HTML中三种方法实现img标签只显示图片中心位置的示例代码" href="http://m.php.cn/de/faq/360418.html">HTML中三种方法实现img标签只显示图片中心位置的示例代码</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://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><b></b><a href="http://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><b></b><a href="http://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><b></b><a href="http://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><b></b><a href="http://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><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(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>