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">
Das Attribut für
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.
Hier sind die folgenden Beispiele.
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:
<!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>
Ausgabe:
In diesem Beispiel werden wir sehen, wie man die Farbe des Platzhalters ändert.
Code:
<!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>
Ausgabe:
Dies ist ein weiteres Beispiel für einen HTML-Platzhalter, der sowohl im Eingabefeld als auch im Textbereich funktioniert.
Code:
<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>
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!