HTML-Eingabeplatzhalter

HTML-Eingabeplatzhalter dienen als Hinweis auf ein bestimmtes Element und helfen dabei, den erforderlichen Wert des angegebenen Eingabefelds zu identifizieren. Dies kann für die Eingabe von Textfeldern oder Textfeldern verwendet werden, bevor der Benutzer seine Eingabe tatsächlich eingibt. Es wählt den Wert aus dem jeweiligen Selektorelement aus, das als Platzhaltertext eingebunden ist, und zeigt ihn als Vorschlag an, wenn der Benutzer die Eingabe in das Eingabefeld eingibt. Das Platzieren von Platzhaltern im Eingabefeld erleichtert dem Benutzer die Eingabe des erforderlichen Werts in das vorgegebene Eingabefeld. Dadurch wird der Aufwand für den Benutzer minimiert. Grundsätzlich hat der Platzhalter eine hellere graue Farbe, aber wir können seine Farbe auch mithilfe einiger CSS-Eigenschaften ändern.

Syntax:

Sehen wir uns die Syntax für den Platzhalter an und wie genau er im Eingabefeld verwendet wird.

<element placeholder="placeholder_text">

Das Attribut für und Element ist Platzhalter. Der Platzhalter wird als Hinweis für den Benutzer behandelt, den tatsächlichen Eingabewert in das Eingabefeld einzugeben.</p> <p>Der Platzhalter kann mithilfe einiger CSS-Codes wie folgt gestaltet werden:</p> <pre class="brush:php;toolbar:false">::placeholder{ //CSS code; }</pre> <p>Der Platzhalter kann mithilfe von Funktionen wie dem Kontrastverhältnis implementiert werden, das beschreibt, dass die Farbe Ihres Platzhalters heller ist als der Hintergrund des Eingabefelds. Die Benutzerfreundlichkeit definiert den Text, den Sie als Platzhalter verwenden. Er muss verschwinden, wenn Sie eine Eingabe in das Eingabefeld eingeben .</p> <p>Durch die Definition von Platzhaltern neben dem Eingabefeld wird auch die beste Möglichkeit zur Verwendung eines Platzhalters für das Eingabefeld behandelt.</p> <p>Diese Eingabefelder werden mit einigen Pseudoklassen wie aktiviert, deaktiviert, schreibgeschützt, Lese-/Schreibzugriff, Platzhalteranzeige, Standard, überprüft, unbestimmt, gültig, ungültig, im Bereich, außerhalb des Bereichs verwendet -Range, erforderlich, optional, leer und weitere Klassen.</p> <p>Wie bei Klassen werden auch viele Attribute verwendet, z. B. max, maxlength, min, minlength, Muster, erforderlich, Schritt, Typ usw.</p> <p>Sehen wir uns an, wie Platzhalter mit dem Eingabetext verwendet werden:</p> <pre class="brush:php;toolbar:false"><input type="text " placeholder="placeholder-text"></pre> <p>Diese Syntax ist für einfache Eingabetextfelder gedacht, sodass Sie dem Benutzer mithilfe des Platzhalterattributs helfen, die richtigen Eingaben in das Eingabefeld einzufügen. Platzhaltertext ist nichts anderes als ein Vorschlag darüber, was der Benutzer tatsächlich in dieses Eingabefeld eingeben wird.</p> <p>Eine weitere Sache, bei der wir Platzhalter verwenden, ist der Eingabetextbereich. In diesem Eingabefeld können wir mithilfe von Platzhaltern vorschlagen, was genau als Eingabe eingegeben werden kann. Dies ist sowohl für Personen hilfreich, die Eingaben für einen geeigneten Eingabewert vornehmen, als auch für Benutzer, die Eingaben eingeben, um eine bessere Benutzererfahrung zu erzielen.</p> <pre class="brush:php;toolbar:false"><input type="textarea" placeholder="placeholder-text"></pre> <p>Es gibt zwei verschiedene Dinge im Platzhalter, eines ist :placeholder-shown, was bedeutet, dass die Auswahl der Eingabe erfolgt, wenn sie über den im Eingabefeld verfügbaren Platzhaltertext erfolgt, während ein anderes::placeholder verwendet wird um dem Platzhalter Stile zu geben.</p> <p>Der Platzhalter funktioniert nicht als Titel- oder Beschriftungsattribut und wird auch nicht als Ersatz für beide behandelt.</p> <p>Man kann den Stil des Platzhalters ändern, um den Platzhalter in jedem Browser gleich anzuzeigen. Für dieses Szenario müssen wir CSS-Code für den jeweiligen Browser anwenden, damit er in jedem Browser dasselbe anzeigt.</p> <h3>Beispiele für HTML-Eingabeplatzhalter</h3> <p>Hier sind die folgenden Beispiele.</p> <h4>Beispiel #1</h4> <p>In diesem Beispiel erstellen wir ein Anmeldeformular und ein Registrierungsformular, in denen wir einen Platzhalter für alle Eingabefelder verwenden, sodass der HTML-Code und die Ausgabe dafür wie folgt lauten:</p> <p><strong>Code:</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><strong>Ausgabe: </strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006758459.png" alt="HTML-Eingabeplatzhalter" ></p> <h4>Beispiel #2</h4> <p>In diesem Beispiel werden wir sehen, wie man die Farbe des Platzhalters ändert.</p> <p><strong>Code:</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><strong>Ausgabe:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544006863390.png" alt="HTML-Eingabeplatzhalter" ></p> <h4>Beispiel #3</h4> <p>Dies ist ein weiteres Beispiel für einen HTML-Platzhalter, der sowohl im Eingabefeld als auch im Textbereich funktioniert.</p> <p><strong>Code:</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><strong>Ausgabe:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172544007059734.png" alt="HTML-Eingabeplatzhalter" ></p> <p><strong>Fazit</strong></p> <p>Aus all den oben genannten Informationen können wir sagen, dass ein HTML-Platzhalter nichts anderes als eine Art verwandter Text, Vorschlag oder Hinweis in das Eingabefeld wie Texteingabefeld oder Textbereich ist. So kann der Benutzer Dinge einfach anhand des Platzhalters erfassen und entsprechende Eingaben in das Eingabefeld eingeben.</p><p>Das obige ist der detaillierte Inhalt vonHTML-Eingabeplatzhalter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>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-Formulareingabetyp" href="http://m.php.cn/de/faq/1796600268.html">HTML-Formulareingabetyp</a></span><span>Nächster Artikel：<a class="dBlack" title="HTML-Formulareingabetyp" href="http://m.php.cn/de/faq/1796600270.html">HTML-Formulareingabetyp</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/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><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>