Espace réservé d'entrée HTML

L'espace réservé de saisie HTML fonctionne comme un indice sur un élément donné qui permet d'identifier la valeur requise du champ de saisie donné. Cela peut être utilisé pour le champ de texte ou la zone de texte de saisie avant que l'utilisateur ne saisisse réellement sa saisie. Il sélectionne la valeur dans l'élément de sélection respectif inclus en tant que texte d'espace réservé et l'affiche sous forme de suggestion lorsque l'utilisateur saisit la saisie dans le champ de saisie. Placer des espaces réservés dans le champ de saisie permet à l'utilisateur de saisir facilement la valeur requise dans le champ de saisie donné. Cela minimise donc les efforts de l’utilisateur. Fondamentalement, l'espace réservé est de couleur gris plus clair, mais nous pouvons également changer sa couleur en utilisant certaines propriétés CSS.

Syntaxe :

Voyons la syntaxe de l'espace réservé, comment exactement il va être utilisé dans le champ de saisie.

<element placeholder="placeholder_text">

L'attribut et L'élément est un espace réservé. L'espace réservé est traité comme une indication permettant à l'utilisateur de saisir la valeur de saisie réelle dans le champ de saisie.</p> <p>L'espace réservé peut être stylisé en utilisant le code CSS suivant :</p> <pre class="brush:php;toolbar:false">::placeholder{ //CSS code; }</pre> <p> L'espace réservé peut être implémenté en utilisant des fonctionnalités telles que le rapport de contraste qui décrit que la couleur de votre espace réservé est plus claire que l'arrière-plan du champ de saisie. La convivialité définit le texte que vous utilisez comme espace réservé qui doit disparaître à chaque saisie dans le champ de saisie. .</p> <p>En définissant des espaces réservés en plus du champ de saisie, cela est également traité comme le meilleur moyen d'utiliser un espace réservé pour le champ de saisie.</p> <p>Ces champs de saisie vont être utilisés avec certaines pseudo-classes comme activé, désactivé, lecture seule, lecture-écriture, espace réservé, par défaut, coché, indéterminé, valide, invalide, dans la plage, hors de -range, obligatoire, facultatif, vide et bien d'autres classes également.</p> <p>Comme les classes, de nombreux attributs seront également utilisés comme max, maxlength, min, minlength, pattern, require, step, type, etc.</p> <p>Voyons comment l'espace réservé va être utilisé avec le texte saisi :</p> <pre class="brush:php;toolbar:false"><input type="text " placeholder="placeholder-text"></pre> <p>Cette syntaxe est destinée aux champs de texte de saisie simples, vous aiderez donc l'utilisateur à ajouter une saisie appropriée dans le champ de saisie en utilisant l'attribut d'espace réservé. Le texte d'espace réservé n'est rien d'autre qu'une suggestion sur ce que l'utilisateur va réellement saisir dans ce champ de saisie.</p> <p>Une autre chose pour laquelle nous utilisons un espace réservé est la zone de texte de saisie. Dans ce champ de saisie, nous pouvons suggérer ce que l'on peut exactement donner comme entrée en utilisant un espace réservé afin que cela soit utile à la fois aux personnes qui saisissent une valeur d'entrée appropriée ainsi qu'à l'utilisateur qui saisit une entrée pour une meilleure expérience utilisateur. 🎜> </p> <pre class="brush:php;toolbar:false"><input type="textarea" placeholder="placeholder-text"></pre>Il y a deux choses différentes dans l'espace réservé, l'une est :placeholder-shown, ce qui signifie que la sélection de l'entrée se fait lorsqu'elle se fait via le texte d'espace réservé qui est disponible dans le champ de saisie, tandis qu'une autre est ::placeholder qui est utilisé. pour donner des styles à l'espace réservé.<p> </p>L'espace réservé ne fonctionne pas comme un attribut de titre ou d'étiquette et il n'est pas non plus traité comme un remplacement des deux.<p> </p>On peut changer le style de l'espace réservé pour afficher l'espace réservé de la même manière dans n'importe quel navigateur. Pour ce scénario, nous devons appliquer le code CSS pour le navigateur spécifique afin qu'il affiche la même chose dans chaque navigateur.<p> </p>Exemples d'espace réservé d'entrée HTML<h3> </h3>Voici les exemples suivants mentionnés ci-dessous.<p> </p>Exemple n°1<h4> </h4>Dans cet exemple, nous allons créer un formulaire de connexion et un formulaire d'inscription dans lesquels nous utilisons un espace réservé pour tous les champs de saisie, donc le code HTML et la sortie pour cela sont les suivants :<p> </p> <p>Code :<strong></strong> </p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { padding: 2px 12px; } .card { border: 1px solid blue; border-radius: 5px; padding-left: 5%; } </style> </head> <body > <div class="card"> <h4>Login Form</h4> <form action="#"> <label for="username">User Name : </label><br> <input type="text" name="username" placeholder="Enter User Name"><br> <label for="pw">Password : </label><br> <input type="password" name="pw" placeholder="Enter Password" ><br><br> <input type="submit" value="Login"><br><br> </form> </div> <br><hr> <div class="card"> <h4>Registration Form</h4> <form> <label for="fname">First Name</label><br> <input type="text" name="fname" placeholder="Enter First Name here"><br> <label for="lname">Last Name</label><br> <input type="text" name="lname" placeholder="Enter Last Name here"><br> <label for="email">Email_ID</label><br> <input type="email" name="email" placeholder="Enter Email ID here"><br> <label for="mobileno">Contact No</label><br> <input type="number" name="fname" placeholder="Enter Contact No"><br> <label for="address">Address</label><br> <input type="textarea" name="address" placeholder="Enter Address Here"><br><br> <input type="submit" value="Register"><br><br> </form> </div> </body> </html></pre> <p>Sortie : <strong></strong> </p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006758459.png" alt="Espace réservé d'entrée HTML" > </p>Exemple n°2<h4> </h4>Dans cet exemple, nous allons voir comment changer la couleur de l'espace réservé.<p> </p> <p>Code :<strong></strong> </p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Placeholder Color Demo</title> </head> <style> ::placeholder{ color: coral; } </style> <body> <center> <h3> Changing Color of Placeholder </h3> <h5>Enter Course Details Here</h5> <form action="#"> <input type="text" name="cname" placeholder="Course Name"> <br> <br> <input type="text" name="duration" placeholder="Course Durations (in Months)"> <br> <br> <textarea placeholder="Course Details (Syllabus)"></textarea> <br><br>  <input type="submit" value="Get Details"> </form> </center> </body> </html></pre> <p>Sortie :<strong></strong> </p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006863390.png" alt="Espace réservé d'entrée HTML" > </p>Exemple #3<h4> </h4> Ceci est un autre exemple d'espace réservé HTML, qui fonctionnera également sur le champ de saisie ainsi que sur la zone de texte. <p> </p> <p>Code :<strong></strong> </p> <pre class="brush:php;toolbar:false"><html> <head> <title>HTML Placeholder</title> </head> <body> <form > <table border="2" align="center" width="500" bgcolor="lightblue" > <caption><b>We help jobseeker for getting better Jobs!</b></caption> <tr> <th>Enter First Name</th> <td><input type="text" name="fn" placeholder="John" required/></td> </tr> <tr> <th>Enter Last Name</th> <td><input type="text" placeholder="Smith" required/ ></td> </tr> <tr> <th>Enter Email ID</th> <td><input type="email" placeholder="[email&#160;protected]" required/></td> </tr> <tr> <th>Enter  Password</th> <td><input type="password" placeholder="JSJS123" required/></td> </tr> <tr> <th>Confirm Password</th> <td><input type="password" placeholder="JSJS123" required/></td> </tr> <tr> <th>Enter Mobile Number</th> <td><input type="number" placeholder="9867986798" required/></td> </tr> <tr> <th>Select Date of Birth</th> <td><input type="date" placeholder="30-04-1994"/></td> </tr> <tr> <th>Enter City</th> <td><input type="city" placeholder="Eg. Pune"/></td> </tr> <tr> <th>Enter Address</th> <td><textarea rows="3" cols="20" placeholder="Enter address details"></textarea></td> </tr> <tr> <th>Select Gender</th> <td> male<input type="radio" name="g" /> female<input type="radio" name="g" /> other<input type="radio" name="o"/> </td> </tr> <tr> <th>Position Applied for</th> <td> <select name="position"> <option value="" selected="selected" disabled="disabled">Select Position</option> <option value="1">.NET Developer</option> <option value="2">UX-UI Designer</option> <option value="3">Full Stack Developer</option> <option value="4">Digital Marketing</option> </select> </td> </tr> <tr> <th>Additional skills or Certifications</th> <td><textarea rows="5" cols="20" placeholder="Enter your master skills as well as certification you completed"></textarea></td> </tr> <tr> <th>Upload Resume Here</th> <td><input type="file"/ ></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Save Details"/> <input type="reset" value="Reset Details"/> </td> </tr> </table> </form> </body> </html></pre> <p>Sortie :<strong></strong> </p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544007059734.png" alt="Espace réservé d'entrée HTML" > </p> <p>Conclusion<strong></strong> </p>D'après toutes les informations ci-dessus, nous pouvons dire qu'un espace réservé HTML n'est rien d'autre qu'une sorte de texte associé, de suggestion ou d'indice dans le champ de saisie, comme un champ de saisie de texte ou une zone de texte. Ainsi, l'utilisateur peut facilement saisir les éléments de l'espace réservé et donner la saisie appropriée dans le champ de saisie.<p></p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">catch</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">kind</a><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="Type d'entrée de formulaire HTML" href="http://m.php.cn/fr/faq/1796600268.html">Type d'entrée de formulaire HTML</a></span><span>Article suivant：<a class="dBlack" title="Type d'entrée de formulaire HTML" href="http://m.php.cn/fr/faq/1796600270.html">Type d'entrée de formulaire HTML</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/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</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>