Maison > Article > interface Web > Comment sélectionner le champ de saisie de texte à l'aide du sélecteur CSS ?
Comment sélectionner le champ de saisie de texte à l'aide du sélecteur CSS ?
- 王林avant
- 2023-08-26 15:41:161005parcourir
La sélection de champs de saisie de texte à l'aide de sélecteurs CSS est un outil puissant et crucial pour styliser et cibler les éléments spécifiques de la page Web. Les champs de saisie de texte sont une partie essentielle de tout formulaire Web qui nécessite que les utilisateurs fournissent une saisie. ou un concepteur, nous devrons peut-être sélectionner des champs de saisie de texte à l'aide de sélecteurs CSS pour leur appliquer un style. Si nous souhaitons modifier la couleur de la police, la couleur d'arrière-plan ou ajouter des styles personnalisés aux champs de saisie, il est important de comprendre comment les sélectionner. en utilisant des sélecteurs CSS.
Structure du champ de saisie de texte
Avant d'utiliser les sélecteurs CSS pour sélectionner un champ de saisie de texte, il est important de comprendre sa structure. Un champ de saisie de texte est généralement représenté par un élément HTML avec son attribut type défini sur "text". Par exemple, le code HTML suivant crée un champ de saisie de texte.
<input type="text" name="user-name" id="user-id" value="initial-value" placeholder="Enter username >
Dans le code ci-dessus -
type="text" précise qu'il s'agit d'un champ de saisie de texte.
name="user-name" définit les attributs du champ de saisie pour identifier l'entrée lorsque le formulaire est soumis.
id="user-id" définit l'attribut ID du champ de saisie, qui est utilisé pour identifier le champ de saisie à des fins de style et de script.
value="initial-value"Définissez la valeur initiale du champ de saisie. Ceci est facultatif et peut être omis.
placeholder="Entrez le nom d'utilisateur" Définissez un texte d'espace réservé à afficher dans la zone de saisie pour donner à l'utilisateur une invite de saisie.
Sélectionnez tous les champs de saisie de texte à l'aide du sélecteur d'élément
Un moyen simple de sélectionner tous les champs de saisie de texte sur une page Web consiste à utiliser un sélecteur d'éléments. Les champs de saisie de texte sont des éléments HTML qui permettent aux utilisateurs de saisir du texte, tel que leur nom, leur adresse e-mail ou leur mot de passe. Ces éléments sont généralement créés à l'aide de la balise « input » avec l'attribut « type » défini sur « texte », « email », « mot de passe » ou « recherche ». Pour sélectionner tous les champs de saisie de texte, nous pouvons utiliser le sélecteur CSS suivant −
input[type="text"], input[type="email"], input[type="password"] {
/* write your CSS Code */
}
Ce sélecteur cible tous les champs de saisie dont l'attribut « type » est défini sur « texte », « email » ou « mot de passe ». Une virgule entre les sélecteurs signifie que tous les sélecteurs recevront le même style.
Exemple 1 : Sélectionnez le champ de saisie de texte à l'aide de l'attribut type
Dans cet exemple, nous utilisons le sélecteur d'attribut type pour sélectionner tous les champs de saisie de texte du formulaire. Les styles CSS sont appliqués à tous les champs de saisie de texte avec les attributs type="text", type="email" et type="password". Ces champs de saisie ont des styles de bordure, de remplissage, de taille de police et de marge inférieure appliqués.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
input[type="text"],
input[type="email"],
input[type="password"] {
border: 2px solid lightgray;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h3>Selecting text input fields using type attribute</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your Password"><br>
</form>
</body>
</html>
Sélectionnez des champs de saisie de texte spécifiques à l'aide du sélecteur d'ID
Nous pouvons utiliser des sélecteurs d'ID pour cibler des champs de saisie de texte spécifiques. Le sélecteur ID est représenté par le caractère "#", suivi de la valeur de l'attribut ID de l'élément HTML. Par exemple, si nous avons un élément HTML avec l'attribut ID défini sur "nom d'utilisateur", nous pouvons le sélectionner à l'aide du sélecteur CSS suivant -
#username {
/* Write CSS rules here */
}
Exemple 2 : sélectionnez le champ de saisie de texte à l'aide de l'attribut ID.
Dans cet exemple, nous utilisons le sélecteur d'attributs ID pour sélectionner trois zones de saisie de texte avec les identifiants nom, email et mot de passe. Ces styles CSS sont appliqués aux trois zones de saisie. Les styles border-radius et background-color sont appliqués à ces zones de saisie.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
input[type="text"], input[type="email"],input[type="password"] {
border: 2px solid lightgray;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
#name, #email{
background-color: lightgreen;
border-radius:10px;
}
</style>
</head>
<body>
<h3>Selecting text input fields using ID attribute</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your Password"><br>
</form>
</body>
</html>
Sélectionnez plusieurs champs de saisie de texte à l'aide des sélecteurs de classe
Si nous avons plusieurs champs de saisie de texte avec un style ou des fonctionnalités similaires, nous pouvons utiliser des sélecteurs de classe pour les cibler. Le sélecteur de classe est représenté par le caractère ".", suivi de la valeur de l'attribut de classe de l'élément HTML. Par exemple, si nous avons plusieurs éléments HTML avec l'attribut de classe défini sur "input-field", nous pouvons les sélectionner à l'aide du sélecteur CSS suivant :
.input-field {
/* write CSS rules here */
}
Ce sélecteur cible tous les éléments HTML dont l'attribut de classe est défini sur "input-field".
Exemple 3 : Sélectionnez le champ de saisie de texte à l'aide de l'attribut de classe
Dans cet exemple, nous utilisons le sélecteur d'attributs de classe pour sélectionner trois zones de saisie de texte avec les noms de classe nom, email, et mot de passe. Ces styles CSS sont appliqués à ces trois zones de saisie. Les styles border-radius et background-color sont appliqués à ces zones de saisie.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
input[type="text"], input[type="email"], input[type="password"]{
border: 2px solid lightgray;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
.password, .search{
background-color: lightgreen;
border-radius:10px;
}
</style>
</head>
<body>
<h3>Selecting text input fields using ID attribute</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
<label for="password">Password:</label>
<input type="password" class="password" id="password" name="password" placeholder="Enter your Password"><br>
</form>
</body>
</html>
Conclusion
La sélection des champs de saisie de texte à l'aide des sélecteurs CSS est un processus simple une fois que nous comprenons la structure des champs de saisie de texte et les différents sélecteurs CSS disponibles. En utilisant des sélecteurs CSS appropriés, nous pouvons facilement positionner et styliser les champs de saisie de texte pour améliorer l'expérience utilisateur des formulaires Web.
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!