HTML入力プレースホルダー

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

構文:

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

<element placeholder="placeholder_text"></element>

の属性要素はプレースホルダーです。プレースホルダーは、ユーザーが実際の入力値を入力フィールドに入力するためのヒントとして扱われます。

プレースホルダーは、次の CSS コードを使用してスタイルを設定できます。

::placeholder{
//CSS code;
}

プレースホルダーは、プレースホルダーの色が入力フィールドの背景よりも明るいことを表すコントラスト比などの機能を使用して実装できます。ユーザビリティは、入力フィールドに入力するたびにプレースホルダーとして使用しているテキストが消える必要があることを定義します。 .

入力フィールド以外にプレースホルダーを定義することも、入力フィールドにプレースホルダーを使用する最良の方法として扱われます。

これらの入力フィールドは、有効、無効、読み取り専用、読み取り/書き込み、プレースホルダー表示、デフォルト、チェック済み、不定、有効、無効、範囲内、範囲外などのいくつかの疑似クラスで使用されます。 -range、required、optional、blank、その他のクラスも含まれます。

クラスと同様に、max、maxlength、min、minlength、pattern、required、step、type などの多くの属性も使用されます。

入力テキストでプレースホルダーがどのように使用されるかを見てみましょう:

<input type="text " placeholder="placeholder-text">

この構文は単純な入力テキストフィールド用であるため、プレースホルダー属性を使用してユーザーが入力フィールドに適切な入力を追加できるようにします。プレースホルダーテキストは、ユーザーがこの入力フィールドに実際に何を入力するかについての提案にすぎません。

プレースホルダーを使用しているもう 1 つの点は、入力テキストエリアです。この入力フィールドでは、プレースホルダーを使用して入力として正確に何を入力できるかを提案できるため、適切な入力値を取得するユーザーと、より良いユーザー エクスペリエンスのために入力を入力するユーザーの両方にとって役立ちます。

<input type="textarea" placeholder="placeholder-text">

プレースホルダーには 2 つの異なるものがあります。1 つは :placeholder-shown で、入力フィールドで使用可能なプレースホルダー テキストを通じて入力の選択が行われるという意味を与え、もう 1 つは使用される ::placeholder です。プレースホルダーにスタイルを与えます。

プレースホルダーは、タイトル属性またはラベル属性として機能しません。また、その両方の代替としても扱われません。

プレースホルダーのスタイルを変更して、どのブラウザーでも同じプレースホルダーを表示できます。このシナリオでは、各ブラウザーで同じものが表示されるように、特定のブラウザーに CSS コードを適用する必要があります。

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

以下に挙げる例を次に示します。

例 #1

この例では、すべての入力フィールドにプレースホルダーを使用する 1 つのログイン フォームと 1 つの登録フォームを作成します。そのため、HTML コードと出力は次のようになります。

コード:

<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>


<div class="card">
<h4 id="Login-Form">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 id="Registration-Form">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>

出力:

例 #2

この例では、プレースホルダーの色を変更する方法を見ていきます。

コード:

<title>Placeholder Color Demo</title>

<style>
::placeholder{
color: coral;
}
</style>

<center>
<h3 id="Changing-Color-of-Placeholder"> Changing Color of Placeholder </h3>
<h5 id="Enter-Course-Details-Here">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>

出力:

例 #3

これは HTML プレースホルダーのもう 1 つの例で、入力フィールドだけでなくテキストエリアでも機能します。

コード:

<title>HTML Placeholder</title>

We help jobseeker for getting better Jobs!

Enter First Name
Enter Last Name
Enter Email ID
Enter  Password
Confirm Password
Enter Mobile Number
Select Date of Birth
Enter City
Enter Address
Select Gender	male female other
Position Applied for	Select Position .NET Developer UX-UI Designer Full Stack Developer Digital Marketing
Additional skills or Certifications
Upload Resume Here

出力:

結論

上記のすべての情報から、HTML プレースホルダーは、テキスト入力フィールドやテキストエリアなどの入力フィールドへの関連テキスト、提案、またはヒントの一種にすぎないと言えます。そのため、ユーザーはプレースホルダーから簡単に情報を取得し、入力フィールドに適切な入力を行うことができます。

以上がHTML入力プレースホルダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。