Formulaires en HTML5

Par rapport au HTML4, les éléments et fonctionnalités du HTML5 offrent un plus grand degré de balisage sémantique et suppriment également un grand nombre d'éléments redondants qui existent dans HTML4 en raison des scripts et des styles. En rendant les formulaires plus cohérents sur différents sites Web et en répondant aux données saisies par les utilisateurs en temps opportun, les fonctionnalités des formulaires HTML5 offrent aux utilisateurs une meilleure expérience. Ces expériences s'appliquent également aux utilisateurs dont les scripts de navigateur sont désactivés.

Cette rubrique décrit certaines nouvelles fonctionnalités ou modifications prises en charge par Gecko/Firefox4 ou supérieur. L'attribut type de l'élément

a plus de valeurs

search : cet élément affiche un champ de recherche. Les nouvelles lignes sont supprimées de la valeur d'entrée, mais il n'y a aucune autre amélioration de la syntaxe.

tel : Cet élément peut être utilisé comme contrôle de saisie pour modifier un numéro de téléphone. Les nouvelles lignes sont supprimées de la valeur d'entrée et aucune autre amélioration de la syntaxe n'est apportée car les différences d'internationalisation des numéros de téléphone sont très évidentes. Vous pouvez utiliser des propriétés telles que pattern et maxlength pour limiter les valeurs saisies dans le contrôle.

url : cet élément restitue un contrôle d'entrée pour modifier une URL. Les nouvelles lignes et les espaces de début et de fin seront automatiquement supprimés.

email : cet élément affiche une adresse e-mail. Les sauts de ligne sont automatiquement supprimés. Il est possible de définir une adresse email invalide, mais si elle répond aux contraintes du champ de saisie, elle doit être conforme aux spécifications en Extended Backus Normal Form (ABNF) : 1( atext / "." ) "@" ldh-str 1( "." ldh-str ) où atext est défini dans la section 3.2.3 de la RFC 5322 et ldh-str est défini dans la section 3.5 de la RFC 1034. .

Remarque : si l'attribut multiple est défini, plusieurs e-mails peuvent être saisis dans la zone séparés par des virgules, mais Firefox ne le prend pas en charge. .

list : L'ID de l'élément

modèle : expression régulière utilisée pour vérifier la valeur d'un contrôle, qui peut être appliquée aux éléments d'entrée dont les valeurs de type sont text, tel, search, url et email.

form : Une chaîne indiquant à quel élément

appartient cette entrée. Une entrée ne peut exister que sous une seule forme.

formmethod : une chaîne indiquant quelle méthode HTTP (GET ou POST) sera utilisée lorsque le formulaire est soumis ; s'il est défini, l'attribut de méthode sur l'élément formmethod ne peut prendre effet que lorsque la valeur de type est image ou submit et que l'attribut form est défini.

x-moz-errormessage : Une chaîne qui affiche un message d'erreur lorsque la validation du champ du formulaire échoue. Cette valeur est une extension Mozilla et n'est pas un standard. L'élément

a une nouvelle fonctionnalité :

novalidate : la définition de cette fonctionnalité ne validera pas le formulaire avant sa soumission. L'élément

Vous pouvez utiliser l'attribut list sur l'élément pour associer une entrée spécifique à un élément

Vous pouvez utiliser l'attribut for pour associer l'élément

à d'autres éléments du document qui affectent l'opération (par exemple, une entrée ou des paramètres). La valeur de l'attribut for est une liste d'ID d'autres éléments séparés par des espaces.

Gecko 2.0 (pas le cas pour les autres navigateurs) prend en charge la personnalisation des contraintes de validité et des messages d'erreur pour l'élément

. Vous pouvez utiliser les pseudo-classes CSS suivantes : :invalid, :valid, :-moz. -ui-invalid et :-moz-ui-valid. Cela peut être utile dans les situations où le résultat calculé enfreint une règle métier mais n'est pas dû à une erreur dans une valeur d'entrée spécifique (par exemple, « le pourcentage total ne peut pas dépasser 100 »).

attribut placeholder

l'attribut placeholder fonctionne sur les éléments et , indiquant à l'utilisateur quel contenu peut être saisi dans ce champ. Le texte dans l'espace réservé ne peut pas contenir de retours chariot ni de sauts de ligne. </p> <p>Attribut autofocus </p> <p>L'attribut autofocus vous permet de spécifier un contrôle de formulaire qui obtient automatiquement le focus lors du chargement de la page, à moins que l'utilisateur ne le remplace, par exemple en saisissant une valeur dans un autre contrôle. Un seul formulaire dans un document peut avoir l'attribut autofocus, qui est une valeur booléenne. Cet attribut s'applique aux éléments <input>, <button>, <select> et <textarea>. L'exception est que si la valeur de l'attribut type d'un élément de mise au point automatique est définie sur masqué, la mise au point automatique ne prendra pas effet (c'est-à-dire que vous ne pouvez pas laisser un contrôle masqué obtenir automatiquement le focus). </p> <p>attribut DOM label.control</p> <p>L'interface DOM HTMLLabelElement fournit un attribut supplémentaire en plus des propriétés correspondantes pour l'élément <label> La propriété control renvoie le contrôle étiqueté, qui est le contrôle auquel l'étiquette s'applique, tel que déterminé par l'attribut for (s'il est défini) ou le premier contrôle d'élément descendant. </p> <p>Validation des contraintes</p> <p>HTML5 fournit une syntaxe et une API pour la validation des formulaires côté client. Bien entendu, ces fonctionnalités ne peuvent pas remplacer la validation côté serveur, qui est toujours nécessaire pour des raisons de sécurité et d'intégrité des données, mais la validation côté client peut offrir une bonne expérience utilisateur grâce à un retour instantané sur les données saisies. </p> <p>Si l'élément <input> est défini avec l'attribut title, lorsque la validation échoue, la valeur de l'attribut sera affichée dans le message d'invite. Si le titre est défini sur une chaîne vide, aucun message d'invite ne sera affiché. Si l'attribut title n'est pas défini, les informations de validation standard (telles que spécifiées via l'attribut x-moz-errormessage ou appelant la méthode setCustomValidity()) seront affichées à la place. </p> <p>Remarque : la validation par contrainte ne prend pas en charge l'élément <button> si vous souhaitez modifier le style du bouton en fonction des résultats de validation du formulaire, vous pouvez utiliser l'option :-moz-. pseudo-classe non valide à la soumission. Syntaxe HTML pour la validation des contraintes </p> <p>Les entrées suivantes dans la syntaxe HTML5 sont utilisées pour spécifier des contraintes pour les données de formulaire. L'attribut obligatoire sur les éléments </p> <p><input>, <select> et <textarea> spécifie qu'une valeur doit être fournie pour cet élément. (Sur l'élément <input>, require ne peut prendre effet qu'en combinaison avec une valeur d'attribut de type spécifique.) L'attribut pattern sur l'élément </p> <p><input> Mode d’expression régulière spécifique. Les attributs min et max de l'élément </p> <p><input> limitent les valeurs maximales et minimales pouvant être saisies dans l'élément. L'attribut step de l'élément </p> <p><input> (utilisé conjointement avec les attributs min et max) limite l'intervalle entre les valeurs d'entrée. Si une valeur ne correspond pas à la ligne de valeurs autorisées, la validation échoue. L'attribut maxlength des éléments </p> <p><input> et <textarea> limite le nombre maximum de caractères (dans les points de code Unicode) que l'utilisateur peut saisir. Les valeurs url et email de type </p> <p> sont utilisées pour limiter si la valeur d'entrée est respectivement une URL ou une adresse e-mail valide. </p> <p>De plus, pour empêcher la validation de contrainte sur le formulaire, vous pouvez définir l'attribut novalidate sur le <form>, ou sur les éléments <button> et <input> Définissez l'attribut formnovalidate. Ces attributs précisent qu'aucune validation n'est effectuée lors de la soumission du formulaire. </p> <p>API de validation de contraintes</p> <p>Les propriétés DOM suivantes sont liées aux méthodes et à la validation de contraintes et peuvent être utilisées dans les scripts clients : </p> <p>méthode checkValidity() sur l'objet HTMLFormElement, lorsque Renvoie vrai si les éléments pertinents du formulaire ont réussi leur validation de contrainte, sinon renvoie faux. </p> <p>Sur les éléments liés au formulaire : </p> <p>attribut willValidate, la valeur est fausse si les contraintes de l'élément ne sont pas respectées. </p> <p>l'attribut de validité est un objet ValidityState qui représente l'état de validation actuel de l'élément (c'est-à-dire si la contrainte est réussie ou échouée). </p> <p>Attribut validationMessage, utilisé pour décrire les informations d'échec des contraintes liées aux éléments. </p> <p>méthode checkValidity(), si l'élément ne satisfait aucune de ses contraintes, renvoie false, sinon il renvoie true. </p> <p>méthode setCustomValidity(), définit les informations de validation personnalisées, qui sont utilisées pour implémenter et vérifier les contraintes afin de remplacer les informations prédéfinies. </p> <p>Documentation HTML5</p> <p>HTML </p> <p>Canevas audio/vidéo WebGL SVG MathML WebForms AppCache Microformats SemanticTags</p> <p>JavaScript </p> <p>Stockage IndexedDB WebSockets WebWorkers Événements Glisser/Déposer ProtocolHandler Geolocation Focus</p> <p>CSS </p> <p>NewSelectors Typographie Effets visuels</p> <p>Pour plus d'articles liés aux formulaires en HTML5, veuillez faire attention au site Web PHP chinois ! </p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Travailleurs Web HTML5" href="http://m.php.cn/fr/faq/350834.html">Travailleurs Web HTML5</a></span><span>Article suivant：<a class="dBlack" title="Travailleurs Web HTML5" href="http://m.php.cn/fr/faq/350849.html">Travailleurs Web HTML5</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/348281.html" title="Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes" class="aBlack">Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348372.html" title="Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)" class="aBlack">Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348373.html" title="Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9" class="aBlack">Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348374.html" title="Expressions régulières et nouveaux éléments HTML5" class="aBlack">Expressions régulières et nouveaux éléments HTML5</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348469.html" title="Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur" class="aBlack">Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur</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/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</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/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</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/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</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:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " 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>