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"></element>

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.

Der Platzhalter kann mithilfe einiger CSS-Codes wie folgt gestaltet werden:

::placeholder{
//CSS code;
}

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 .

Durch die Definition von Platzhaltern neben dem Eingabefeld wird auch die beste Möglichkeit zur Verwendung eines Platzhalters für das Eingabefeld behandelt.

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.

Wie bei Klassen werden auch viele Attribute verwendet, z. B. max, maxlength, min, minlength, Muster, erforderlich, Schritt, Typ usw.

Sehen wir uns an, wie Platzhalter mit dem Eingabetext verwendet werden:

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

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.

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.

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

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.

Der Platzhalter funktioniert nicht als Titel- oder Beschriftungsattribut und wird auch nicht als Ersatz für beide behandelt.

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.

Beispiele für HTML-Eingabeplatzhalter

Hier sind die folgenden Beispiele.

Beispiel #1

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:

Code:

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

Ausgabe:

Beispiel #2

In diesem Beispiel werden wir sehen, wie man die Farbe des Platzhalters ändert.

Code:

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

Ausgabe:

Beispiel #3

Dies ist ein weiteres Beispiel für einen HTML-Platzhalter, der sowohl im Eingabefeld als auch im Textbereich funktioniert.

Code:

<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

Ausgabe:

Fazit

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.

Das obige ist der detaillierte Inhalt vonHTML-Eingabeplatzhalter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!