需要注意的是/如果页面中设置了多个autofocus属性,那么用户的光标只会定位到最后一个设置了autofocus属性的表单域上。
使用占位文本

Heim >Web-Frontend >H5-Tutorial >Automatischer Fokus und Platzhaltertext-Beispielcode für HTML5-Registrierungsformular_HTML5-Tutorial-Fähigkeiten

Automatischer Fokus und Platzhaltertext-Beispielcode für HTML5-Registrierungsformular_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:49:101297Durchsuche

Sehen Sie sich zunächst den Beispielcode unten an, um HTML-Autofokus und Platzhaltertext zu verwenden

Kopieren Sie den Code
Der Der Code lautet wie folgt:


Registrieren ;meta charset= "utf-8"> <br></head> <br><body> id="register_information "<legend>Registrierung neuer Benutzer</legend> /label> <br><input type="email" id="name" name="name"> user" > Benutzername</label> <br><input type="text" id="user" name="user"> <br></li> <br><li> <br> <label for="Nickname"> Anzeigename</label><input type="text" id="Nickname"> <li><label for="password">password</label><input type="password" id="password" name="user_password"> /li> <br><li> <br><label for="confirm_password">Passwort bestätigen</label><input type="password" id="confirm_password" name= "user_password" > <br></ol> <br><br><br><br>Autofokus verwenden<br> <br>Um die Autofokus-Funktion von HTML5 zu verwenden, müssen Sie nur das Autofokus-Attribut zum Formularfeld hinzufügen<br>Denken Sie beispielsweise oben an Let Der Cursor wird beim Laden der Seite automatisch auf das erste Formularfeldpostfach des Formulars positioniert und verbessert die Eingabeeffizienz. <br><br><br><br><br><br>Code kopieren<br><br><br>Der Code lautet wie folgt:<br><br> <br><li> ><label for="name">email</label><input type="name" name="name" autofocus> <br><br><br><br>Es ist zu beachten, dass, wenn mehrere Autofokus-Attribute auf der Seite festgelegt sind, der Cursor des Benutzers nur auf dem letzten Formularfeld positioniert wird, in dem das Autofokus-Attribut festgelegt ist. <br> </div>Platzhaltertext verwenden<br> <strong>Platzhaltertext wird vor allem dazu verwendet, Benutzern zu erklären, wie sie das Formular richtig ausfüllen. Das heißt, die Eingabeaufforderung wird durchgeführt. Um Platzhaltertext zu verwenden, müssen Sie nur das Platzhalterattribut zum Eingabefeld hinzufügen </strong>Das Folgende ist das Eingabeformularfeld, das das Platzhalterattribut verwendet<br><br><br><br><div class="msgheader"> <div class="right">Kopieren Code<span style="CURSOR: pointer" onclick="copycode(getid('phpcode57'));"><u></u>Der Code lautet wie folgt:</span> </div> </div><ol> <div class="msgborder" id="phpcode57"><li><label for="name">email< ;/ label> <br><input type="email" id="name" name="name" autofocus placeholder="Bitte geben Sie eine gültige E-Mail-Adresse ein"</li> ;li> ; <br><label for="user"> username</label> <br></li> <br><li><label for="nickname"> display name</label> name="user" placeholder="Spitzname eingeben"> <br><li> ;input type="password" id="password" name="user_password" placeholder="Passwort eingeben"> </div></li> ">Passwort bestätigen</label> <br><input type="password" id="confirm_password" name="user_password" placeholder="Passwort erneut eingeben"> <img src="http://files.jb51.net/file_images/article/201307/201307191531451.gif?2013619153229" alt=""></li> ; <br> </ol> <br><strong><br>L'effet de l'opération est le suivant <br><img src="http://files.jb51.net/file_images/article/201307/201307191533292.gif?2013619153340" alt=""> <br><strong>Si la saisie semi-automatique est activée </strong> <br>L'attribut de saisie semi-automatique a été introduit en HTML5. Utilisé pour indiquer au navigateur s'il doit remplir automatiquement les données du champ de formulaire actuel. Certains navigateurs mémorisent les données précédemment saisies par l'utilisateur et, dans certains cas, nous pouvons ne pas souhaiter que l'utilisateur enregistre les données, notamment pour des éléments tels que les mots de passe <br><strong>Désactiver la saisie semi-automatique</strong> <br> <br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode59'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode59"> <br><input type="password" id ="password" name="user_password" autocomplete="off" placeholder="Entrez le mot de passe"> <br> </div> <br>Il vous suffit de désactiver la valeur d'atuocomplete pour empêcher l'achèvement automatique. </strong></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="Einführung in neue CSS-Selektoren und Pseudoklassen in HTML5_html5-Tutorial-Fähigkeiten" href="https://m.php.cn/de/faq/6255.html">Einführung in neue CSS-Selektoren und Pseudoklassen in HTML5_html5-Tutorial-Fähigkeiten</a></span><span>Nächster Artikel:<a class="dBlack" title="Einführung in neue CSS-Selektoren und Pseudoklassen in HTML5_html5-Tutorial-Fähigkeiten" href="https://m.php.cn/de/faq/6259.html">Einführung in neue CSS-Selektoren und Pseudoklassen in HTML5_html5-Tutorial-Fähigkeiten</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://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="https://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="https://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="https://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="https://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="https://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><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>