HTML入力プレースホルダー-htmlチュートリアル-php.cn

HTML 入力プレースホルダーの例

例 #3

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML入力プレースホルダー

王林

Sep 04, 2024 pm 04:54 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 入力プレースホルダーは、指定された入力フィールドの必要な値を識別するのに役立つ、指定された要素へのヒントとして機能します。これは、ユーザーが実際に入力を入力する前に、入力テキストフィールドまたはテキストエリアに使用できます。プレースホルダーテキストとして含まれるそれぞれのセレクター要素から値を選択し、ユーザーが入力フィールドに入力するときにその値を候補として表示します。入力フィールドにプレースホルダーを配置すると、ユーザーは特定の入力フィールドに必要な値を簡単に入力できるようになります。したがって、ユーザーの労力が最小限に抑えられます。基本的に、プレースホルダーは明るい灰色ですが、いくつかの CSS プロパティを使用して色を変更することもできます。

構文:

プレースホルダーの構文を見て、入力フィールドでどのように正確に使用されるかを見てみましょう。

<element placeholder="placeholder_text">

の属性要素はプレースホルダーです。プレースホルダーは、ユーザーが実際の入力値を入力フィールドに入力するためのヒントとして扱われます。</p> <p>プレースホルダーは、次の CSS コードを使用してスタイルを設定できます。</p> <pre class="brush:php;toolbar:false">::placeholder{ //CSS code; }</pre> <p>プレースホルダーは、プレースホルダーの色が入力フィールドの背景よりも明るいことを表すコントラスト比などの機能を使用して実装できます。ユーザビリティは、入力フィールドに入力するたびにプレースホルダーとして使用しているテキストが消える必要があることを定義します。 .</p> <p>入力フィールド以外にプレースホルダーを定義することも、入力フィールドにプレースホルダーを使用する最良の方法として扱われます。</p> <p>これらの入力フィールドは、有効、無効、読み取り専用、読み取り/書き込み、プレースホルダー表示、デフォルト、チェック済み、不定、有効、無効、範囲内、範囲外などのいくつかの疑似クラスで使用されます。 -range、required、optional、blank、その他のクラスも含まれます。</p> <p>クラスと同様に、max、maxlength、min、minlength、pattern、required、step、type などの多くの属性も使用されます。</p> <p>入力テキストでプレースホルダーがどのように使用されるかを見てみましょう:</p> <pre class="brush:php;toolbar:false"><input type="text " placeholder="placeholder-text"></pre> <p>この構文は単純な入力テキストフィールド用であるため、プレースホルダー属性を使用してユーザーが入力フィールドに適切な入力を追加できるようにします。プレースホルダーテキストは、ユーザーがこの入力フィールドに実際に何を入力するかについての提案にすぎません。</p> <p>プレースホルダーを使用しているもう 1 つの点は、入力テキストエリアです。この入力フィールドでは、プレースホルダーを使用して入力として正確に何を入力できるかを提案できるため、適切な入力値を取得するユーザーと、より良いユーザーエクスペリエンスのために入力を入力するユーザーの両方にとって役立ちます。</p> <pre class="brush:php;toolbar:false"><input type="textarea" placeholder="placeholder-text"></pre> <p>プレースホルダーには 2 つの異なるものがあります。1 つは :placeholder-shown で、入力フィールドで使用可能なプレースホルダーテキストを通じて入力の選択が行われるという意味を与え、もう 1 つは使用される ::placeholder です。プレースホルダーにスタイルを与えます。</p> <p>プレースホルダーは、タイトル属性またはラベル属性として機能しません。また、その両方の代替としても扱われません。</p> <p>プレースホルダーのスタイルを変更して、どのブラウザーでも同じプレースホルダーを表示できます。このシナリオでは、各ブラウザーで同じものが表示されるように、特定のブラウザーに CSS コードを適用する必要があります。</p> <h3 id="HTML-入力プレースホルダーの例">HTML 入力プレースホルダーの例</h3> <p>以下に挙げる例を次に示します。</p> <h4 id="例">例 #1</h4> <p>この例では、すべての入力フィールドにプレースホルダーを使用する 1 つのログインフォームと 1 つの登録フォームを作成します。そのため、HTML コードと出力は次のようになります。</p> <p><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><strong>出力: </strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172544006758459.png" class="lazy" alt="HTML入力プレースホルダー" ></p> <h4 id="例">例 #2</h4> <p>この例では、プレースホルダーの色を変更する方法を見ていきます。</p> <p><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><strong>出力:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172544006863390.png" class="lazy" alt="HTML入力プレースホルダー" ></p> <h4 id="例">例 #3</h4> <p>これは HTML プレースホルダーのもう 1 つの例で、入力フィールドだけでなくテキストエリアでも機能します。</p> <p><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 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>出力:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172544007059734.png" class="lazy" alt="HTML入力プレースホルダー" ></p> <p><strong>結論</strong></p> <p>上記のすべての情報から、HTML プレースホルダーは、テキスト入力フィールドやテキストエリアなどの入力フィールドへの関連テキスト、提案、またはヒントの一種にすぎないと言えます。そのため、ユーザーはプレースホルダーから簡単に情報を取得し、入力フィールドに適切な入力を行うことができます。</p><p>以上がHTML入力プレースホルダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットAIツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>脱衣画像を無料で</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>リアルなヌード写真を作成する AI 搭載アプリ</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>写真から衣服を削除するオンライン AI ツール。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI衣類リムーバー</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="//m.sbmmt.com/ja/ai">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="//m.sbmmt.com/ja/faq/1796839536.html" title="PHP変数スコープは説明されています" class="phpgenera_Details_mainR4_bottom_title">PHP変数スコープは説明されています</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 百草</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="//m.sbmmt.com/ja/faq/1796840616.html" title="PHPコメントを書くためのヒント" class="phpgenera_Details_mainR4_bottom_title">PHPコメントを書くためのヒント</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 百草</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="//m.sbmmt.com/ja/faq/1796840634.html" title="PHPでコードをコメントします" class="phpgenera_Details_mainR4_bottom_title">PHPでコードをコメントします</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 百草</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="//m.sbmmt.com/ja/faq/1796841677.html" title="<🎜>：庭を育てる - 旅行商人の完全なガイド" class="phpgenera_Details_mainR4_bottom_title"><🎜>：庭を育てる - 旅行商人の完全なガイド</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By Jack chen</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="//m.sbmmt.com/ja/faq/1796837309.html" title="OnePlusがAndroid 16を取得するとき（Oxygenos 16）" class="phpgenera_Details_mainR4_bottom_title">OnePlusがAndroid 16を取得するとき（Oxygenos 16）</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 か月前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="//m.sbmmt.com/ja/article.html">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title"> <h3>メモ帳++7.3.1</h3> </a> <p>使いやすく無料のコードエディター</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 中国語版</h3> </a> <p>中国語版、とても使いやすい</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title"> <h3>ゼンドスタジオ 13.0.1</h3> </a> <p>強力な PHP 統合開発環境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title"> <h3>ドリームウィーバー CS6</h3> </a> <p>ビジュアル Web 開発ツール</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="//m.sbmmt.com/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="//m.sbmmt.com/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神レベルのコード編集ソフト（SublimeText3）</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="//m.sbmmt.com/ja/ai">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>ホットトピック</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="//m.sbmmt.com/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1604</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="//m.sbmmt.com/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1510</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>276</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="//m.sbmmt.com/ja/faq/zt">もっと見る</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796861764.html" title="HTMLのWebサイトタイトルタイトルにアイコンを追加する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175458060390983.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTMLのWebサイトタイトルタイトルにアイコンを追加する方法" /> </a> <a href="//m.sbmmt.com/ja/faq/1796861764.html" title="HTMLのWebサイトタイトルタイトルにアイコンを追加する方法" class="phphistorical_Version2_mids_title">HTMLのWebサイトタイトルタイトルにアイコンを追加する方法</a> <span class="Articlelist_txts_time">Aug 07, 2025 pm 11:30 PM</span> <p class="Articlelist_txts_p">Webサイトタイトルバーにアイコンを追加するには、HTMLの一部でFaviconファイルをリンクする必要があります。特定の手順は次のとおりです。1。16x16または32x32ピクセルアイコンファイルを準備します。 Favicon.icoを使用して名前を付けてWebサイトのルートディレクトリに配置するか、PNGやSVGなどの最新の形式を使用することをお勧めします。 2。PNGやSVG形式などのHTMLにリンクタグを追加すると、それに応じて型属性を調整します。 3.オプションで、Appletouchiconなどのモバイルデバイスに高解像度アイコンを追加し、サイズ属性を介してさまざまなサイズを指定します。 4.ベストプラクティスに従って、ルートディレクトリにアイコンを配置して自動検出を確認し、更新後にブラウザキャッシュをクリアし、ファイルパスの正しさを確認します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796862645.html" title="HTML5の読み取り属性は何ですか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175462530895470.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5の読み取り属性は何ですか？" /> </a> <a href="//m.sbmmt.com/ja/faq/1796862645.html" title="HTML5の読み取り属性は何ですか？" class="phphistorical_Version2_mids_title">HTML5の読み取り属性は何ですか？</a> <span class="Articlelist_txts_time">Aug 08, 2025 am 11:55 AM</span> <p class="Articlelist_txts_p">thereadonlyattributionhtml5makesforminputsnon-edable whilestallowingsubmissionanduser interaction; 1. itappliestoanttribute;</p> </div> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796862066.html" title="HTML5フォームでカラーピッカーを作成する方法は？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175459608287703.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5フォームでカラーピッカーを作成する方法は？" /> </a> <a href="//m.sbmmt.com/ja/faq/1796862066.html" title="HTML5フォームでカラーピッカーを作成する方法は？" class="phphistorical_Version2_mids_title">HTML5フォームでカラーピッカーを作成する方法は？</a> <span class="Articlelist_txts_time">Aug 08, 2025 am 03:48 AM</span> <p class="Articlelist_txts_p">type = "color"を使用して、HTML5カラーセレクターを作成します。1。カラー入力を追加します。 2。値属性を使用してデフォルトの色値を設定できます（#ffffffなどの7文字の16進形式である必要があります）。 3.すべての最新のブラウザはそれをサポートし、古いブラウザはテキスト入力に戻ります。 4. JavaScriptを使用して、色の変更をリアルタイムでプレビューできます。 5。アクセシビリティを改善するためにラベルタグを追加する必要があり、JavaScriptライブラリを使用して、必要に応じてダウングレードサポートを提供できます。この方法は、シンプルで効果的で、広くサポートされています。</p> </div> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796862153.html" title="HTML5に基本的な連絡フォームを実装する方法は？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175460022277162.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5に基本的な連絡フォームを実装する方法は？" /> </a> <a href="//m.sbmmt.com/ja/faq/1796862153.html" title="HTML5に基本的な連絡フォームを実装する方法は？" class="phphistorical_Version2_mids_title">HTML5に基本的な連絡フォームを実装する方法は？</a> <span class="Articlelist_txts_time">Aug 08, 2025 am 04:57 AM</span> <p class="Articlelist_txts_p">要素を使用して、アクション、メソッドなどのプロパティを設定して、データの提出アドレスとメソッドを指定します。 2。Type= "Email"などのHTML5入力タイプを追加して、セマンティクスと基本的な検証を実現するために必要な属性を追加します。 3.属性のラベルを介して入力ボックスIDに関連し、アクセシビリティを改善し、タグと入力ボックスの各セットをPまたはDIVでラップして構造を最適化します。 4。フォームの提出にはバックエンド処理が必要であり、テスト中にFormspreeなどのサードパーティサービスを交換できます。 5.オプションでは、JavaScriptを介してクライアントの検証を強化しますが、ネイティブのHTML5検証は基本的なニーズを満たし、最後にサーバー側のデータを検証およびクリーニングしてセキュリティを確保します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796863839.html" title="どのようにしてユーザーがHTML要素を編集可能にすることができますか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175490418327107.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="どのようにしてユーザーがHTML要素を編集可能にすることができますか？" /> </a> <a href="//m.sbmmt.com/ja/faq/1796863839.html" title="どのようにしてユーザーがHTML要素を編集可能にすることができますか？" class="phphistorical_Version2_mids_title">どのようにしてユーザーがHTML要素を編集可能にすることができますか？</a> <span class="Articlelist_txts_time">Aug 11, 2025 pm 05:23 PM</span> <p class="Articlelist_txts_p">はい、ContentEditable属性を使用して、HTML要素を編集可能にすることができます。特定の方法は、ターゲット要素にContentEditable = "true"を追加することです。たとえば、このテキストを編集でき、ユーザーはコンテンツを直接クリックして変更できます。この属性は、Div、P、Span、H1からH6などのブロックレベルおよびインライン要素に適しています。デフォルトの値は、編集可能である「真」、「false」ではなく、編集不可能であり、親要素の設定を継承する「継承」です。アクセシビリティを改善するために、tabindex = "0＆quoを追加することをお勧めします</p> </div> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796865569.html" title="html5の脇の要素は何ですか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175498782365796.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="html5の脇の要素は何ですか？" /> </a> <a href="//m.sbmmt.com/ja/faq/1796865569.html" title="html5の脇の要素は何ですか？" class="phphistorical_Version2_mids_title">html5の脇の要素は何ですか？</a> <span class="Articlelist_txts_time">Aug 12, 2025 pm 04:37 PM</span> <p class="Articlelist_txts_p">そのためには、継続的に関連することができるようになりました</p> </div> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796861778.html" title="応答性の高いHTMLレイアウトを作成する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175458162281328.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="応答性の高いHTMLレイアウトを作成する方法" /> </a> <a href="//m.sbmmt.com/ja/faq/1796861778.html" title="応答性の高いHTMLレイアウトを作成する方法" class="phphistorical_Version2_mids_title">応答性の高いHTMLレイアウトを作成する方法</a> <span class="Articlelist_txts_time">Aug 07, 2025 pm 11:47 PM</span> <p class="Articlelist_txts_p">ViewPortメタタグを追加して、ページがモバイルデバイスによって正しくレンダリングされるようにする必要があります。 2.モバイルファースト設計方法を使用して、最初に小さな画面の基本スタイルを書き、次にメディアクエリを介して大画面に適応します。 3. FlexBoxまたはグリッドを使用して、柔軟なレスポンシブグリッドレイアウトを作成します。 4.最大幅を介して画像がさまざまなデバイスで適応的にスケーリングされていることを確認し、100％、画像が異なるデバイスで適応的にスケーリングされるようにします。 5.固定ピクセル値ではなく、REM、％、VWなどの相対ユニットに優先順位を付けます。 6.ブラウザ開発ツールを使用し、マルチシーンテスト用の実際のデバイスを組み合わせます。 7.レイアウトをシンプルでアクセスしやすいままにして、セマンティックHTMLを使用し、タッチエリアが十分に大きいことを確認し、最終的にはすべてのデバイスでうまく機能するレスポンシブWebレイアウトを実現します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="//m.sbmmt.com/ja/faq/1796862706.html" title="HTML5の振動APIとは何ですか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175462920820832.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5の振動APIとは何ですか？" /> </a> <a href="//m.sbmmt.com/ja/faq/1796862706.html" title="HTML5の振動APIとは何ですか？" class="phphistorical_Version2_mids_title">HTML5の振動APIとは何ですか？</a> <span class="Articlelist_txts_time">Aug 08, 2025 pm 01:00 PM</span> <p class="Articlelist_txts_p">このAPIは、Navigator.vibrate（）メソッドを介したデバイスの振動を制御します。これにより、ユーザージェスチャーがトリガーを必要とし、時間またはモードの振動をサポートし、インタラクティブなフィードバックを強化するために使用されます。 1. Navigator.vibrate（500）を呼び出すと、デバイスが500ミリ秒間振動する可能性があります。 2。[300,200,300]などの配列を渡すと、振動後の交互モードを達成できます。 3。Navigator.vibrate（0）を呼び出すと、すぐに振動を停止できます。 4.ユーザー操作によってトリガーされる必要があり、自動再生は禁止されています。 5.一部のモバイルブラウザのみがサポートしていますが、Iossafariは通常それをサポートしていません。 6. 1つの振動モードのみが同時に実行され、新しい呼び出しは現在の振動を置き換えます。この関数は、ゲームのフィードバックとフォーム確認に適しています</p> </div> </div> <a href="//m.sbmmt.com/ja/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p> </div> <div class="footermid"> <a href="//m.sbmmt.com/ja/about/us.html">私たちについて</a> <a href="//m.sbmmt.com/ja/about/disclaimer.html">免責事項</a> <a href="//m.sbmmt.com/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1755219951"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' 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 type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <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> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96f4c93758ebba16',t:'MTc1NTIxOTk1MQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"8c758bee214b4fe0858e454e5edf6f97","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>