まず、HTML オート フォーカスとプレースホルダー テキストを使用するための以下のサンプル コードを確認します
アカウントの登録</title< ;meta charset= "utf-8"> <br></head> <br><form method="post" action="goto"> id="register_information "> <br> <legend> <br> <li> <br> <label for="name"< /label> <br><input type="email" id="name" name="name"> <br><li> user" > ユーザー名</label> <br><input type="text" id="user" name="user"> <br></li> <br><li> <br> <label for="ニックネーム"> 表示名</label> <br></li> <li> <br><label for="password"<password</label> <br><input type="password" id="password" name="user_password"> /li> <br><li> <br><label for="confirm_password">パスワードの確認</label> <br><input type="password" id="confirm_password" name= "user_password" > <br></li> <br></form> <br><br><br><br>オートフォーカスを使用する<br> <br>HTML5 のオートフォーカス機能を使用するには、フォームフィールドに autofocus 属性を追加するだけです<br>たとえば、上記のように考えてみましょうページが読み込まれると、カーソルがフォームの最初のフォーム フィールド メールボックスに自動的に配置され、入力効率が向上します。 <br><br><br><br><br><br>コードをコピーします<br>
</div>
<br>コードは次のとおりです。<strong></strong> <br><li> ><メールのラベル</ラベル><br></li> <br><br><div class="msgheader">
<div class="right">ページに複数のオートフォーカス属性が設定されている場合、ユーザーのカーソルはオートフォーカス属性が設定されている最後のフォーム フィールドにのみ配置されることに注意してください。 <span style="CURSOR: pointer" onclick="copycode(getid('phpcode57'));"><u>プレースホルダー テキストを使用する</u> </span>プレースホルダー テキストの最大の用途は、フォームに正しく入力する方法をユーザーに説明することです。つまり、入力プロンプトが実行されます。プレースホルダー テキストを使用するには、入力フィールドにプレースホルダー属性を追加するだけです</div>以下はプレースホルダー属性を使用した入力フォーム フィールドです</div>
<div class="msgborder" id="phpcode57">
<br><br><br><br>コピーコード<br>
</div>
<br>コードは次のとおりです:<img src="http://files.jb51.net/file_images/article/201307/201307191531451.gif?2013619153229" alt=""><br> <br><ol> <strong><li> </strong><label for="name">email< ;/ label> <br><input type="email" id="name" name="name" autofocus placeholder="有効なメール アドレスを入力してください"> ;li> ; <br><label for="user"</label> <br><input type="text" id="user" name="user" placeholder="ユーザー名を入力してください"> <br></li> <div class="msgheader"><label for="ニックネーム"> <div class="right"><input type="text" id="ニックネーム" name="ユーザー" プレースホルダー="ニックネームを入力"> <span style="max-width:90%" onclick="copycode(getid('phpcode58'));"></li> <u><パスワード>パスワード</label< ;input type="password" id="password" name="user_password" placeholder="パスワードを入力してください"> </u><li> ="confirm_password" のラベル">パスワードの確認</label> </span><input type="password" id="confirm_password" name="user_password" placeholder="パスワードを再入力してください"> </div></li> ; </div> </ol><div class="msgborder" id="phpcode58"><br /><br />The operation effect is as follows <br /><img src="http://files.jb51.net/file_images/article/201307/201307191533292.gif?2013619153340" alt="" /> <br /><strong>Whether autocomplete is enabled </strong> <br />The autocomplete attribute was introduced in HTML5. Used to notify the browser whether to automatically fill in data for the current form field. Some browsers will remember the data previously entered by the user, and in some cases, we may not want the user to record the data, especially for things like passwords <br /><strong>Turn off auto-complete</strong> <br /><br><div class="msgheader"><div class="right"><span style="max-width:90%" onclick="copycode(getid('phpcode59'));"><u>Copy code</u></span></div>The code is as follows:</div><div class="msgborder" id="phpcode59"> <br /><input type="password" id ="password" name="user_password" autocomplete="off" placeholder="Enter password"> <br>
</div>
<br>You only need to set the value of atuocomplete to off to prevent automatic completion. </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="HTML5_html5 チュートリアルのスキルにおける新しい CSS セレクターと疑似クラスの紹介" href="https://m.php.cn/ja/faq/6255.html">HTML5_html5 チュートリアルのスキルにおける新しい CSS セレクターと疑似クラスの紹介</a></span><span>次の記事：<a class="dBlack" title="HTML5_html5 チュートリアルのスキルにおける新しい CSS セレクターと疑似クラスの紹介" href="https://m.php.cn/ja/faq/6259.html">HTML5_html5 チュートリアルのスキルにおける新しい CSS セレクターと疑似クラスの紹介</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</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/ja/faq/348281.html" title="AlloyTouch 全画面スクロール プラグインは 30 秒で滑らかな H5 ページを作成します" class="aBlack">AlloyTouch 全画面スクロール プラグインは 30 秒で滑らかな H5 ページを作成します</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348372.html" title="HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）" class="aBlack">HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348373.html" title="HTML5 Canvas 9での画像描画例を詳しく解説" class="aBlack">HTML5 Canvas 9での画像描画例を詳しく解説</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348374.html" title="正規表現と新しい HTML5 要素" class="aBlack">正規表現と新しい HTML5 要素</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348469.html" title="NodeJS と HTML5 を組み合わせて複数のファイルをドラッグ アンド ドロップしてサーバーにアップロードする方法" class="aBlack">NodeJS と HTML5 を組み合わせて複数のファイルをドラッグ アンド ドロップしてサーバーにアップロードする方法</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>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/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>
