L'espace réservé de saisie HTML fonctionne comme un indice sur un élément donné qui permet d'identifier la valeur requise du champ de saisie donné. Cela peut être utilisé pour le champ de texte ou la zone de texte de saisie avant que l'utilisateur ne saisisse réellement sa saisie. Il sélectionne la valeur dans l'élément de sélection respectif inclus en tant que texte d'espace réservé et l'affiche sous forme de suggestion lorsque l'utilisateur saisit la saisie dans le champ de saisie. Placer des espaces réservés dans le champ de saisie permet à l'utilisateur de saisir facilement la valeur requise dans le champ de saisie donné. Cela minimise donc les efforts de l’utilisateur. Fondamentalement, l'espace réservé est de couleur gris plus clair, mais nous pouvons également changer sa couleur en utilisant certaines propriétés CSS.
Syntaxe :
Voyons la syntaxe de l'espace réservé, comment exactement il va être utilisé dans le champ de saisie.
<element placeholder="placeholder_text">
L'attribut
L'espace réservé peut être stylisé en utilisant le code CSS suivant :
::placeholder{ //CSS code; }
L'espace réservé peut être implémenté en utilisant des fonctionnalités telles que le rapport de contraste qui décrit que la couleur de votre espace réservé est plus claire que l'arrière-plan du champ de saisie. La convivialité définit le texte que vous utilisez comme espace réservé qui doit disparaître à chaque saisie dans le champ de saisie. .
En définissant des espaces réservés en plus du champ de saisie, cela est également traité comme le meilleur moyen d'utiliser un espace réservé pour le champ de saisie.
Ces champs de saisie vont être utilisés avec certaines pseudo-classes comme activé, désactivé, lecture seule, lecture-écriture, espace réservé, par défaut, coché, indéterminé, valide, invalide, dans la plage, hors de -range, obligatoire, facultatif, vide et bien d'autres classes également.
Comme les classes, de nombreux attributs seront également utilisés comme max, maxlength, min, minlength, pattern, require, step, type, etc.
Voyons comment l'espace réservé va être utilisé avec le texte saisi :
<input type="text " placeholder="placeholder-text">
Cette syntaxe est destinée aux champs de texte de saisie simples, vous aiderez donc l'utilisateur à ajouter une saisie appropriée dans le champ de saisie en utilisant l'attribut d'espace réservé. Le texte d'espace réservé n'est rien d'autre qu'une suggestion sur ce que l'utilisateur va réellement saisir dans ce champ de saisie.
Une autre chose pour laquelle nous utilisons un espace réservé est la zone de texte de saisie. Dans ce champ de saisie, nous pouvons suggérer ce que l'on peut exactement donner comme entrée en utilisant un espace réservé afin que cela soit utile à la fois aux personnes qui saisissent une valeur d'entrée appropriée ainsi qu'à l'utilisateur qui saisit une entrée pour une meilleure expérience utilisateur. 🎜>
<input type="textarea" placeholder="placeholder-text">
L'espace réservé ne fonctionne pas comme un attribut de titre ou d'étiquette et il n'est pas non plus traité comme un remplacement des deux.
On peut changer le style de l'espace réservé pour afficher l'espace réservé de la même manière dans n'importe quel navigateur. Pour ce scénario, nous devons appliquer le code CSS pour le navigateur spécifique afin qu'il affiche la même chose dans chaque navigateur.
Exemples d'espace réservé d'entrée HTML
Exemple n°1
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>
Sortie :
Exemple n°2
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>
Sortie :
Exemple #3
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>
Sortie :
Conclusion
D'après toutes les informations ci-dessus, nous pouvons dire qu'un espace réservé HTML n'est rien d'autre qu'une sorte de texte associé, de suggestion ou d'indice dans le champ de saisie, comme un champ de saisie de texte ou une zone de texte. Ainsi, l'utilisateur peut facilement saisir les éléments de l'espace réservé et donner la saisie appropriée dans le champ de saisie.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!