Formulare in HTML5

Im Vergleich zu HTML4 bieten die Elemente und Funktionen in HTML5 ein höheres Maß an semantischem Markup und entfernen außerdem eine große Anzahl redundanter Elemente, die in HTML4 aufgrund von Skripten und Stilen vorhanden sind. Indem sie dafür sorgen, dass sich Formulare auf verschiedenen Websites konsistenter verhalten und zeitnah auf Benutzereingabedaten reagieren, bieten HTML5-Formularfunktionen Benutzern ein besseres Erlebnis. Diese Erfahrungen gelten auch für Benutzer, die Browser-Scripting deaktiviert haben.

In diesem Thema werden einige neue Funktionen oder Änderungen beschrieben, die von Gecko/Firefox4 oder höher unterstützt werden. Das Typattribut des

-Elements hat mehr Werte: Dieses Element stellt ein Suchfeld dar. Zeilenumbrüche werden aus dem Eingabewert entfernt, es gibt jedoch keine weiteren Syntaxverbesserungen.

tel: Dieses Element kann als Eingabesteuerung zum Bearbeiten einer Telefonnummer verwendet werden. Zeilenumbrüche werden aus dem Eingabewert entfernt und es werden keine weiteren Syntaxverbesserungen vorgenommen, da die Unterschiede bei der Internationalisierung von Telefonnummern sehr offensichtlich sind. Sie können Eigenschaften wie Muster und Maxlänge verwenden, um die in das Steuerelement eingegebenen Werte zu begrenzen.

URL: Dieses Element rendert ein Eingabesteuerelement zum Bearbeiten einer URL. Zeilenumbrüche sowie führende und nachfolgende Leerzeichen werden automatisch entfernt.

E-Mail: Dieses Element gibt eine E-Mail-Adresse wieder. Zeilenumbrüche werden automatisch entfernt. Es ist möglich, eine ungültige E-Mail-Adresse festzulegen, aber wenn sie die Einschränkungen des Eingabefelds erfüllt, muss sie den Spezifikationen in der Extended Backus Normal Form (ABNF) entsprechen: 1( atext / "." ) "@" ldh-str 1( "." ldh-str ), wobei atext in RFC 5322 Abschnitt 3.2.3 und ldh-str in RFC 1034 Abschnitt 3.5 definiert ist. .

Hinweis: Wenn das Mehrfachattribut festgelegt ist, können mehrere E-Mails durch Kommas getrennt eingegeben werden, Firefox unterstützt dies jedoch nicht. Das Element .

Liste: Die ID des

Muster: Ein regulärer Ausdruck, der zum Überprüfen des Werts eines Steuerelements verwendet wird und auf Eingabeelemente angewendet werden kann, deren Typwerte Text, Tel., Suche, URL und E-Mail sind.

form: Eine Zeichenfolge, die angibt, zu welchem ​​

-Element diese Eingabe gehört. Eine Eingabe kann nur in einer Form vorliegen.

formmethod: Eine Zeichenfolge, die angibt, welche HTTP-Methode (GET oder POST) verwendet wird, wenn das Formular gesendet wird. Das Methodenattribut im -Element kann überschrieben werden. formmethod kann nur wirksam werden, wenn der Typwert „image“ oder „submit“ lautet und das Formularattribut festgelegt ist.

x-moz-errormessage: Eine Zeichenfolge, die eine Fehlermeldung anzeigt, wenn die Formularfeldvalidierung fehlschlägt. Dieser Wert ist eine Mozilla-Erweiterung und kein Standard. Das

-Element

hat eine neue Funktion:

novavalidate: Wenn Sie diese Funktion festlegen, wird das Formular nicht validiert, bevor es gesendet wird. Das

Sie können das Listenattribut für das -Element verwenden, um eine bestimmte Eingabe einem bestimmten

-Element

Sie können das for-Attribut verwenden, um das

-Element mit anderen Elementen im Dokument zu verknüpfen, die sich auf den Vorgang auswirken (z. B. Eingaben oder Parameter). Der Wert des for-Attributs ist eine durch Leerzeichen getrennte Liste von IDs anderer Elemente.

Gecko 2.0 (was bei anderen Browsern nicht der Fall ist) unterstützt das Anpassen von Gültigkeitsbeschränkungen und Fehlermeldungen für das

. Sie können die folgenden CSS-Pseudoklassen verwenden: :invalid, :valid, :-moz -ui-invalid und :-moz-ui-valid. Dies kann in Situationen nützlich sein, in denen das berechnete Ergebnis gegen eine Geschäftsregel verstößt, aber nicht auf einen Fehler in einem bestimmten Eingabewert zurückzuführen ist (z. B. „Der Gesamtprozentsatz darf 100 nicht überschreiten“).

Platzhalterattribut

Platzhalterattribut funktioniert bei -Elementen und fordert den Benutzer auf, welche Inhalte in dieses Feld eingegeben werden können. Der Text im Platzhalter darf keine Wagenrückläufe und Zeilenvorschübe enthalten.

Autofokus-Attribut

Mit dem Autofokus-Attribut können Sie ein Formularsteuerelement angeben, das beim Laden der Seite automatisch den Fokus erhält, es sei denn, der Benutzer überschreibt es, indem er beispielsweise einen Wert in ein anderes Steuerelement eingibt. Nur ein Formular innerhalb eines Dokuments kann das Autofokus-Attribut haben, bei dem es sich um einen booleschen Wert handelt. Dieses Attribut gilt für die Elemente , , und . Die Ausnahme besteht darin, dass der Autofokus nicht wirksam wird, wenn der Typattributwert eines Autofokus-Elements auf „versteckt“ festgelegt ist (d. h. Sie können nicht zulassen, dass ein ausgeblendetes Steuerelement automatisch den Fokus erhält). </p> <p>label.control DOM-Attribut</p> <p>HTMLLabelElement DOM-Schnittstelle bietet zusätzlich zu den entsprechenden Eigenschaften für das <label> Die Steuereigenschaft gibt das beschriftete Steuerelement zurück. Dabei handelt es sich um das Steuerelement, für das die Beschriftung gilt, wie durch das for-Attribut (sofern definiert) oder das erste untergeordnete Elementsteuerelement bestimmt. </p> <p>Einschränkungsvalidierung</p> <p>HTML5 bietet Syntax und API für die clientseitige Formularvalidierung. Natürlich können diese Funktionen die serverseitige Validierung nicht ersetzen, die aus Sicherheits- und Datenintegritätsgründen immer noch notwendig ist, aber die clientseitige Validierung kann durch sofortiges Feedback zu Eingabedaten eine gute Benutzererfahrung bieten. </p> <p>Wenn das <input>-Element mit dem Titelattribut festgelegt ist und die Validierung fehlschlägt, wird der Attributwert in der Eingabeaufforderungsmeldung angezeigt. Wenn der Titel auf eine leere Zeichenfolge festgelegt ist, wird keine Eingabeaufforderung angezeigt. Wenn das Titelattribut nicht festgelegt ist, werden stattdessen Standardvalidierungsinformationen (z. B. angegeben über das x-moz-errormessage-Attribut oder den Aufruf der setCustomValidity()-Methode) angezeigt. </p> <p>Hinweis: Die Einschränkungsvalidierung unterstützt das <button>-Element im Formular nicht. Wenn Sie den Stil der Schaltfläche basierend auf den Validierungsergebnissen des Formulars ändern möchten, können Sie :-moz- verwenden. Submit-Invalid-Pseudoklasse. HTML-Syntax für die Einschränkungsvalidierung </p> <p>Die folgenden Einträge in der HTML5-Syntax werden verwendet, um Einschränkungen für Formulardaten anzugeben. Das erforderliche Attribut für die Elemente </p> <p><input>, <select> und <textarea> gibt an, dass für dieses Element ein Wert angegeben werden muss. (Auf dem <input>-Element kann „required“ nur in Kombination mit einem bestimmten Typattributwert wirksam werden.) Das Musterattribut auf dem </p> <p><input>-Element wird verwendet, um den Elementwert so zu begrenzen, dass er mit a übereinstimmt spezifischer regulärer Ausdruck. Die Min- und Max-Attribute des </p> <p><input>-Elements begrenzen die maximalen und minimalen Werte, die in das Element eingegeben werden können. Das Schrittattribut des </p> <p><input>-Elements (in Verbindung mit den Min- und Max-Attributen) begrenzt das Intervall zwischen den Eingabewerten. Wenn ein Wert nicht mit der Liste der zulässigen Werte übereinstimmt, besteht die Validierung nicht. Das maxlength-Attribut der Elemente </p> <p><input> begrenzt die maximale Anzahl von Zeichen (innerhalb von Unicode-Codepunkten), die der Benutzer eingeben kann. Die URL- und E-Mail-Werte vom Typ </p> <p>werden verwendet, um einzuschränken, ob der Eingabewert eine gültige URL bzw. E-Mail-Adresse ist. </p> <p>Um die Einschränkungsvalidierung im Formular zu verhindern, können Sie das novalidate-Attribut für die Elemente <button> festlegen (wenn der Typ „submit“ oder „image“ ist). Legen Sie das Attribut formnovalidate fest. Diese Attribute geben an, dass beim Absenden des Formulars keine Validierung durchgeführt wird. </p> <p>Einschränkungsvalidierungs-API</p> <p>Die folgenden DOM-Eigenschaften beziehen sich auf Methoden und Einschränkungsvalidierung und können in Client-Skripten verwendet werden: </p> <p>checkValidity()-Methode für das HTMLFormElement-Objekt, wenn Gibt „true“ zurück, wenn die relevanten Elemente des Formulars ihre Einschränkungsvalidierung bestanden haben, andernfalls wird „false“ zurückgegeben. </p> <p>Bei formularbezogenen Elementen: </p> <p>willValidate-Attribut, der Wert ist falsch, wenn die Einschränkungen des Elements nicht erfüllt sind. </p> <p>validity-Attribut ist ein ValidityState-Objekt, das den aktuellen Validierungsstatus des Elements angibt (d. h. ob die Einschränkung erfolgreich ist oder fehlgeschlagen ist). </p> <p>validationMessage-Attribut, das zur Beschreibung von Fehlerinformationen von Einschränkungen im Zusammenhang mit Elementen verwendet wird. </p> <p>checkValidity()-Methode: Wenn das Element keine seiner Einschränkungen erfüllt, gibt es „false“ zurück, andernfalls gibt es „true“ zurück. </p> <p>setCustomValidity()-Methode legt benutzerdefinierte Validierungsinformationen fest, die zum Implementieren und Überprüfen von Einschränkungen zum Überschreiben vordefinierter Informationen verwendet werden. </p> <p>HTML5-Dokumentation</p> <p>HTML </p> <p>Audio/Video Canvas WebGL SVG MathML WebForms AppCache-Mikroformate SemanticTags</p> <p>JavaScript </p> <p>Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus</p> <p>CSS </p> <p>NewSelectors Typography Visual Effects</p> <p>Weitere Artikel zu Formularen in HTML5 finden Sie auf der chinesischen PHP-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="HTML5-Webarbeiter" href="http://m.php.cn/de/faq/350834.html">HTML5-Webarbeiter</a></span><span>Nächster Artikel：<a class="dBlack" title="HTML5-Webarbeiter" href="http://m.php.cn/de/faq/350849.html">HTML5-Webarbeiter</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><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348281.html" title="Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite" class="aBlack">Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348372.html" title="Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)" class="aBlack">Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348373.html" title="Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9" class="aBlack">Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348374.html" title="Reguläre Ausdrücke und neue HTML5-Elemente" class="aBlack">Reguläre Ausdrücke und neue HTML5-Elemente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348469.html" title="So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen" class="aBlack">So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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>