Définit un autre contenu pour les utilisateurs qui ne supportent pas les scripts côté client
Les formulaires Web sont un élément courant de la conception des sites Web, dont la complexité varie d'un champ de formulaire de recherche à des formulaires de contact et à des filtrages de données complexes.
Ce tutoriel couvre la création et le style d'un formulaire Web qui demande diverses données à l'utilisateur. Le formulaire utilise des champs de texte, des boutons radio, des cases à cocher, des sélections déroulantes, une zone de texte et des boutons d'envoi et de réinitialisation. Vous allez créer et styliser ce formulaire et ses éléments
Savoir comment utiliser le CSS pour styliser et travailler avec ces éléments permet de fournir de meilleures solutions à ces problèmes quotidiens et d'améliorer l'expérience de l'utilisateur sur votre site Web.
En réinitialisant les styles à l'aide des propriétés de l’ apparence, en définissant votre propre style cohérent pour le formulaire, en ajoutant des réponses de remplacement pour les champs de texte et en personnalisant les boutons radio et les cases à cocher à l'aide de diverses pseudo-classes et pseudo-éléments.
1 -Connaissances approfondi de html et CSS, voir notre tutoriel HTML et CSS
2 -Expérience de l'utilisation de sélecteurs avancés pour trouver et appliquer des styles aux éléments HTML avec CSS. Pour plus d'informations à ce sujet, consultez le tutoriel Comment sélectionner des éléments HTML à l'aide de sélecteurs d'ID, de classe et d'attribut en CSS.
Pour commencer créez un fichier HTML vide enregistré le dans un répertoire sur votre ordinateur local sous le nom d'index.html, auquel vous pouvez accéder à partir de l'éditeur de texte et du navigateur Web de votre choix.
Dans cette première section, vous allez configurer le HTML et les styles initiaux avec lesquels vous travaillerez pendant le reste du tutoriel. Ce HTML va mettre en place le squelette de la page et créer les champs de formulaire que vous styliserez plus tard.
Commencez par ouvrir le fichier index.html dans votre éditeur. Puis, ajoutez le HTML suivant pour fournir une structure de base au fichier :
Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
</main>
</body>
</html>
*
Les éléments contenus dans l'élément <head> définissent le nom de la page avec l'élément <title> et l'endroit où charger la feuille de style via l'élément <link>. Les balise <meta> définissent le codage des caractères et indiquent au navigateur comment afficher le site sur un appareil à petit écran. Les principaux contenus du formulaire résideront à l'intérieur des balises <body> et <main>. Ensuite, à l'intérieur de l'élément <main>, créez un élément <form>. À l'intérieur de <form>, vous ajouterez divers éléments de formulaire et des éléments <div> pour aider à la mise en page. Ajoutez le HTML mis en évidence dans le bloc de code suivant à votre fichier index.html :
Code HTML : Ajouter le formulaire
<main>
<form>
<div>
<label for="name">Nom</label>
<input id="name" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp">Compilateur CSS préféré</label>
<select id="comp">
<option value="sass">Sass</option>
<option value="less">Less</option>
<option value="stylus">Stylus</option>
<option value="postcss">PostCSS</option>
<option value="other">Other</option>
</select>
</div>
<div>
<fieldset>
<legend>Connaissez-vous la grille CSS ??</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes">Yes</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no">No</label>
</fieldset>
</div>
<div class="full-width">
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter">Recevoir notre newsletter ?</label>
</div>
<div class="full-width">
<button type="submit">Send Response</button>
<button type="reset">Clear Form</button>
</div>
</form>
</main>
La structure d'un formulaire HTML consiste en des valeurs d'attributs interconnectés afin de fonctionner correctement. Ce code crée un formulaire qui demande à un utilisateur son nom et son adresse électronique, lui demande son compilateur CSS préféré et s'il connaît la grille CSS, fournit un champ pour un message généré par l'utilisateur et comporte une case à cocher pour inscrire l'utilisateur à une newsletter. Pour en savoir plus sur la façon de structurer les formulaires en HTML, consultez notre page Web sur la structure des formulaires HTML.
Veillez enregistrer vos modifications dans index.html, puis créez un nouveau fichier dans le même répertoire, appelé le styles.css.
Ouvrez styles.css dans votre éditeur de texte. Ce fichier fournit les styles que le navigateur appliquera au contenu de index.html. Ajoutez le code CSS suivant à votre fichier styles.css :
Code
body {
margin: 0;
background-color: hsl(0, 0%, 98%);
color: #333;
font: 100% / normal sans-serif;
}
main {
margin: 0 auto;
padding: 4rem 0;
width: 90%;
max-width: 60rem;
}
form {
box-sizing: border-box;
padding: 2rem;
border-radius: 1rem;
background-color: hsl(0, 0%, 100%);
border: 4px solid hsl(0, 0%, 90%);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.full-width {
grid-column: span 2;
}
Les sélecteurs d'éléments body et main créent un style de texte initial et une mise en page pour l'ensemble de la page. Le sélecteur d'élément form crée les styles pour le conteneur de formulaire global, puis définit une grille CSS composée de deux colonnes de taille égale avec grid-template-columns : 1fr 1fr ;. Ensuite, le paramètre gap : 2rem fournit un espacement de 2rem entre chaque ligne et chaque colonne de la grille. Enfin, le sélecteur de classe .full-width permet aux conteneurs de cette classe de s'étendre entre les deux colonnes au lieu de rester dans une seule colonne.
Enregistrez vos modifications dans le fichier styles.css. Ensuite, ouvrez le navigateur Web de votre choix. Sélectionnez l'élément de menu Fichier dans le navigateur, puis l'option Ouvrir. Ensuite, accédez au dossier de votre projet et chargez votre fichier index.html dans le navigateur :
Le formulaire est affiché dans une boîte blanche sur un fond gris clair. Chaque élément de formulaire est dispersé dans la grille, les quatre premiers éléments alternant entre les deux colonnes et les trois derniers étant empilés, entre les deux colonnes. Le style par défaut des éléments de formulaire est celui qui apparaît dans Firefox ; chaque navigateur a un style par défaut différent pour les éléments de formulaire.
Dans cette section, vous avez configuré le HTML et le CSS initiaux nécessaires pour travailler avec les éléments de formulaire. Vous avez également appris que chaque navigateur gère le style de ces éléments d'une manière différente. Dans la section suivante, vous utiliserez la propriété apparence pour égaliser le style des éléments de formulaire dans tous les navigateurs
Chaque navigateur gère le style visuel des éléments de formulaire d'une manière différente. Souvent, le style de ces éléments va au-delà des capacités initiales de CSS et suit l'esthétique du système d'exploitation ou du langage de conception propre au navigateur. Afin de créer un style cohérent pour tous les navigateurs, vous utiliserez dans cette section la propriété appearance et d'autres propriétés pour supprimer les styles par défaut des navigateurs.
Pour commencer, ouvrez le fichier styles.css dans votre éditeur de texte. Créez un nouveau sélecteur de groupe composé de bouton, fieldset, input, legend, select et textarea. Ensuite, à l'intérieur du bloc sélecteur, ajoutez la propriété appearance définie sur none, comme indiqué dans le bloc de code suivant :
Code CSS
button, fieldset, input, legend, select, textarea {
appearance: none;
}
La propriété appearance est le moyen prévu pour supprimer le style spécial des éléments de formulaire. Toutefois, en raison de l'ancienneté et de la mise en œuvre de cette propriété, la plupart des navigateurs exigent toujours l'ajout d'un préfixe fournisseur au nom de la propriété. Un préfixe fournisseur est un ajout codé spécial ajouté au nom de la propriété comme identifiant d'un navigateur spécifique. Pour Chrome, Safari et les versions récentes de Edge et Opera, ce préfixe est -webkit-. Firefox utilise le préfixe -moz-.
Lorsque vous travaillez avec des préfixes de fournisseurs, il est important de placer les versions avec préfixe de fournisseur d'une propriété en premier et de terminer par la version sans préfixe. De cette façon, les anciens navigateurs qui ne prennent en charge que la propriété préfixée utiliseront le préfixe, mais les nouveaux navigateurs qui prennent en charge à la fois le préfixe et la version non préfixée utiliseront la version standard non préfixée. Ajoutez les propriétés d'apparence du préfixe en surbrillance, comme indiqué dans le bloc de code suivant :
Code
legend,fieldset,select,textarea,input,button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Enregistrez vos modifications dans le fichier styles.css, puis ouvrez le fichier index.html dans votre navigateur. Les propriétés d'apparence ont supprimé le style embelli et sont passées à un style plus simple
La propriété appearance vous permet seulement de modifier le style spécifique au navigateur. Le plus grand changement apporté par la valeur de la propriété appearance : none a été de supprimer complètement les boutons radio et la case à cocher. Pour le reste des éléments du formulaire, quelques propriétés supplémentaires sont nécessaires pour supprimer complètement les styles par défaut. Les propriétés CSS mises en évidence dans le bloc de code suivant ajoutent les styles nécessaires à la suppression des styles par défaut :
Code
button,
fieldset,
input,
legend,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
padding: 0;
margin: 0;
box-sizing: border-box;
}
Ce CSS supprime la couleur d'arrière-plan et réinitialise les paramètres du modèle de boîte. Tous ces styles ne sont pas nécessaires pour chacun des éléments, mais il est admissible de regrouper ces styles permettant de réinitialiser tous les éléments.
Enregistrez vos modifications dans styles.css, puis rafraîchissez index.html dans le navigateur. Les éléments du formulaire ont visuellement disparu de la page.
Dans cette partie, vous avez utilisé les propriétés appearance et additional pour supprimer complètement les styles par défaut des éléments de formulaire. Vous avez également utilisé les préfixes des fournisseurs pour appliquer la propriété dans l'ordre approprié aux futures versions des navigateurs. Dans la partie qui suit, vous allez commencer à personnaliser le style visuel des champs du formulaire
Maintenant que les styles par défaut du navigateur ont été totalement effacés, vous allez appliquer un style personnalisé cohérent à tous les éléments du formulaire. Cela implique la création de divers sélecteurs de groupe qui permettent de cibler des caractéristiques de formulaire spécifiques afin de recevoir les styles appropriés.
Pour commencer, ouvrez le fichier styles.css dans votre éditeur de texte. Puis, créez un sélecteur de groupe composé de input, select et textarea.
Ajoutez les styles mis en évidence dans le bloc de code suivant :
Code
...
legend,fieldset,select,textarea,input,button {
...
}
input,select,textarea {
border: 2px solid #333;
background-color: white;
border-radius: 0.25rem;
}
Ces styles ajoutent une bordure gris foncé de 2px autour de chacun des éléments de saisie de données, ainsi qu'un fond blanc et des coins arrondis.
Ensuite, vous appliquerez des styles aux éléments de saisie de données qui contiennent du texte. Vous utiliserez un sélecteur d'attribut pour spécifier les éléments de saisie à cibler en fonction de la valeur de leur attribut de type. Le CSS mis en évidence dans le bloc de code suivant fournit les styles pour les éléments nécessaires :
Code
input,
textarea,
select {
...
}
input[type="text"],
input[type="email"],
select,
textarea {
font: 1.25rem / 1.5 sans-serif;
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.5rem 0.75rem;
}
Ces styles appliquent une taille et une famille de police cohérentes à tous les éléments. Par exemple, l'élément <textarea> n'hérite pas des paramètres de police de l'élément body. Les propriétés display, box-sizing, width et padding assurent une mise en page et une structure uniformes pour chacun de ces éléments de saisie de données.
Sauvegardez vos modifications dans le fichier styles.css, puis ouvrez le fichier index.html dans votre navigateur Web. Comme vous avez pu le constater, le contour des champs a maintenant une bordure gris foncé plus épaisse et le texte de l'élément <select> est maintenant beaucoup plus grand :
Deux éléments ont ensuite besoin d'un style particulier, en plus du style général que vous avez déjà écrit. Tout d'abord, il s'agit de donner plus de hauteur à la zone de texte et, ensuite, d'appliquer à l'élément <select> une flèche descendante personnalisée.
Reprenez le fichier styles.css et ajoutez un sélecteur d'élément textarea. Dans le bloc du sélecteur, créez une propriété min-height fixée à une valeur de 10rem. Cela créera une zone initiale plus grande pour que l'utilisateur du formulaire puisse remplir le texte. Le code CSS mis en évidence dans le bloc de code suivant illustre comment cela s'écrit :
Code
input[type="text"],
input[type="email"],
select,
textarea {
...
}
textarea {
min-height: 10rem;
}
Une fois les styles de la zone de texte ajoutés, il faut créer un répertoire d'images dans le même répertoire que vos fichiers index.html et styles.css et lui donner le nom images.
Ensuite, télécharger dans le nouveau répertoire images la première image avec laquelle vous allez travailler voici le lien :
www.oujood.com/how/img/down-arrow.svg
L'image que vous venez de télécharger est un SVG, qui est un langage de balisage similaire au HTML permettant de dessiner des formes.
Afin d'ajouter cette nouvelle image à l'élément <select>, revenez au fichier styles.css et créez un sélecteur d'élément select puis ajoutez une propriété background avec la valeur comme le montre le bloc de code suivant :
Code
textarea {
min-height: 10rem;
}
select {
background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}
La propriété background charge l'image dans l'arrière-plan de l'élément <select> et ne répète pas l'image. Elle centre ensuite l'image verticalement avec center et la décale à droite avec right 0,75rem. Sauvegardez vos modifications dans le fichier styles.css, l'élément <textarea> a maintenant environ deux fois sa hauteur initiale et l'élément <select> a une flèche bleue orientée vers le bas sur le côté droit. Affichez ou rafraichir le fichier index.html dans votre navigateur et apprécier le résultat.
Tout au long de cette section, vous avez créé une esthétique personnalisée pour les éléments de saisie du formulaire. Nous avons également créé un arrière-plan pour l'élément <sélection> afin de remplacer la flèche par défaut. Dans la section suivante, vous allez créer des boutons radio et des cases à cocher personnalisés et appliquer des états sélectionnés lorsqu'ils sont cochés.
Maintenant que vous avez créé l'esthétique de base du formulaire, il est temps d'appliquer ce style visuel aux éléments de saisie interactifs que sont les boutons radio et les cases à cocher.
Commencez par ouvrir le fichier styles.css dans votre éditeur de texte. Vous allez modifier les éléments de saisie dont l'attribut type est radio ou checkbox de manière à ce qu'ils aient une hauteur et une largeur égales. Puis, vous transformerez les boutons radio en cercles. Les parties en surbrillance du bloc de code suivant montrent la façon dont le formatage est réalisé :
Code
select {
...
}
input[type="radio"],
input[type="checkbox"] {
height: 1.5em;
width: 1.5em;
vertical-align: middle;
}
input[type="radio"] {
border-radius: 50%;
}
La propriété vertical-align est destinée à aligner les éléments de texte en ligne. En lui attribuant la valeur "middle", les champs de saisie se situeront au milieu de l'alignement du texte. Ensuite, l'entrée radio avec une propriété border-radius de 50 % créera un cercle car la hauteur et la largeur sont identiques.
Enregistrez vos modifications dans le fichier styles.css, puis ouvrez le fichier index.html dans votre navigateur. Les deux boutons radio et la case à cocher sont maintenant plus grands et plus visibles.
Si l'on interagissait avec les boutons radio ou la case à cocher, il ne se passerait rien de visible. La propriété appearance supprime également les indicateurs sélectionnés pour ces types d'entrée. Vous allez ensuite utiliser le sélecteur psuedo-class :checked pour appliquer des styles à l'élément de saisie sélectionné.
Retournez dans le fichier styles.css et créez un nouveau sélecteur pour l'entrée du bouton radio avec une pseudo-classe :checked. Puis, à l'intérieur du bloc sélecteur, ajoutez une image d'arrière-plan avec un dégradé radial afin qu'un style de remplissage puisse être appliqué aux boutons radio sélectionnés. Le code CSS suivant montre comment cela est réalisé .
Code
nput[type="radio"] {
border-radius: 50%;
}
input[type="radio"]:checked {
background-image: radial-gradient(
hsl(213, 73%, 50%) 40%,
transparent calc(40% + 1px)
);
}
La fonction calc() permet de définir la propriété transparente 1px après la valeur de la couleur, créant ainsi un cercle bleu solide à l'intérieur du champ de saisie. Enregistrez vos modifications dans le fichier styles.css et retournez à index.html dans votre navigateur. Les boutons radio ont maintenant un cercle bleu plein entouré de blanc à l'intérieur du champ de saisie.
Ensuite, la case à cocher utilisera une image d'arrière-plan pour indiquer son état :checked, de manière similaire à la flèche de la liste déroulante <select>.
Télécharger l'image de la case à cocher dans votre répertoire d'images , voici le lien:
https://www.oujood.com/how/img/check.svg
Maintenant que vous avez téléchargé l'image et que vous êtes prêt à l'utiliser, revenez au fichier styles.css dans votre éditeur de texte.
Puis, ajoutez un sélecteur input[type="checkbox"] avec une pseudo-classe :checked attachée. Dans le bloc du sélecteur, ajoutez une propriété background qui charge l'image check.svg et la réduit pour qu'elle tienne dans la case. Le code CSS suivant indique comment cela s'écrit :
Code
...
input[type="radio"]:checked {
...
}
input[type="checkbox"]:checked {
background: url('images/check.svg') no-repeat center / 75% auto;
}
Les valeurs de la propriété background garantissent que l'image de la coche est centrée sur le conteneur, qu'elle ne se répète pas et qu'elle est réduite proportionnellement de 75 %.
Enregistrez vos modifications dans le fichier styles.css, puis actualisez la page dans le navigateur. Lorsque vous sélectionnez la case à cocher Recevoir notre bulletin d'information, une coche apparaît désormais à l'i Dans cette section, vous avez créé des boutons radio et des champs de saisie personnalisés et vous leur avez fait ajuster leur état sélectionné grâce à l'utilisation de la pseudo-classe :checked.
Dans la section suivante, vous allez donner un style aux éléments <label> et <legend> de la page. ntérieur.
Ajout des styles spéciaux aux étiquettes et aux légendes
Les prochains éléments à styliser sont les éléments <label> et <legend> du formulaire. Nous utiliserons deux styles différents : un petit style d'étiquette pour le bouton radio et les cases à cocher et un grand style d'étiquette pour les autres éléments.
Dans votre éditeur de texte, ouvrez le fichier index.html. Vous ajouterez un attribut class à chaque élément <label> et <legend> avec la valeur large-label ou small-label, comme indiqué dans le bloc de code suivant :
Code
...
<form>
<div>
<label for="name" class="large-label">Nom</label>
<input id="name" type="text" />
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp" class="large-label">Compilateur CSS préféré</label>
<select id="comp">
<option value="sass">Sass</option>
<option value="less">Less</option>
<option value="stylus">Stylus</option>
<option value="postcss">PostCSS</option>
<option value="other">Autre</option>
</select>
</div>
<div>
<fieldset>
<legend class="large-label">Êtes-vous familier avec la grille CSS ?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Oui</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">Non</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Recevoir notre newsletter ?</label>
</div>
<div class="full-width">
<button type="submit">Send Response</button>
<button type="reset">Effacer tout</button>
</div>
</form>
...
Sauvegardez ces ajouts dans index.html, puis ouvrez styles.css dans votre éditeur de texte. Dans styles.css, ajoutez un sélecteur de classe .large-label et ajoutez des propriétés comme indiqué dans le bloc de code suivant :
Code
...
.full-width {
grid-column: span 2;
}
.large-label {
display: inline-block;
font: bold 1.5rem sans-serif;
margin-bottom: 0.5rem;
}
...
Ces styles donnent aux éléments large-label une taille de police de 1,5rem, ce qui équivaut à 24px, et les mettent en gras. Ensuite, la propriété margin-bottom fournit un peu d'espace entre l'étiquette et ses homologues.
Enregistrez cette modification dans le fichier styles.css et ouvrez le fichier index.html dans votre navigateur Web. Le texte de l'étiquette au-dessus du champ d'entrée de données sera plus grand et plus gras.
Revenez au fichier styles.css et créez un autre sélecteur de classe pour .small-label. Étant donné que ces étiquettes se trouvent à droite d'un bouton radio ou d'une case à cocher, elles nécessitent des styles d'espacement et de dimensionnement différents de ceux du .large-label. Ajoutez le CSS à votre fichier styles.css comme le montre le bloc de code suivant :
Code
...
.large-label {
display: inline-block;
font: bold 1.5rem sans-serif;
margin-bottom: 0.5rem;
}
.small-label {
vertical-align: middle;
display: inline-block;
margin-left: 0.25rem;
margin-right: 1.5rem;
font: 1.25rem sans-serif;
}
...
Le paramètre vertical-align : middle décalera légèrement le texte. La police est fixée à 1,25rem, soit l'équivalent de 20px, avec une police sans-serif. Les propriétés margin à gauche et à droite, fournissent un espace entre les champs de saisie et l'étiquette.
Enregistrez vos mises à jour dans le fichier styles.css et actualisez le fichier index.html dans le navigateur. Les étiquettes situées à côté des boutons radio et de la case à cocher sont maintenant plus grandes et offrent plus d'espace. Le paramètre vertical-align : middle décalera légèrement le texte. La police est fixée à 1,25rem, soit l'équivalent de 20px, avec une police sans-serif. Les propriétés margin à gauche et à droite, fournissent un espace entre les champs de saisie et l'étiquette.
Enregistrez vos mises à jour dans le fichier styles.css et actualisez le fichier index.html dans le navigateur. Les étiquettes situées à côté des boutons radio et de la case à cocher sont maintenant plus grandes et offrent plus d'espace.
Le contenu de type placeholder d'un élément de saisie ou d'un élément de type textarea permet aux utilisateurs du formulaire d'avoir une démonstration visuelle du type d'informations demandées et de la manière de les formater. L'attribut placeholder est ajouté au HTML avec une valeur qui le décrit. Le pseudo-élément ::placeholder permet ensuite de personnaliser l'apparence du texte.
Ajouter l’attribut placeholder à chaque élément de saisie input ou texarea dans le fichier index.html comme le montre le bloc de code suivant :
Code
...
<form>
<div>
<label for="name" class="large-label" >Nom</label>
<input id="name" type="text" placeholder="First or Full Name"/>
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" placeholder="name@example.com" />
</div>
<div>
<label for="comp" class="large-label">Compilateur CSS préféré</label>
<select id="comp">
<option value="sass">Sass</option>
<option value="less">Less</option>
<option value="stylus">Stylus</option>
<option value="postcss">PostCSS</option>
<option value="other">Autre</option>
</select>
</div>
<div>
<fieldset>
<legend class="large-label">Êtes-vous familier avec la grille CSS ?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Oui</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">Non</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message" placeholder="Leave a message…"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Recevoir notre newsletter ?</label>
</div>
<div class="full-width">
<button type="submit">Send Response</button>
<button type="reset">Effacer tout</button>
</div>
</form>
...
Enregistrez vos modifications apportées à index.html, puis ouvrez la page dans un navigateur Web. Ces trois zones de saisie de texte ont maintenant du contenu à l'intérieur. Une fois que ces zones de saisie de texte sont sélectionnées et que le contenu est ajouté, le texte de l'espace réservé sera supprimé par le navigateur.
Pour donner un style à l'espace réservé, ouvrez le fichier styles.css dans votre éditeur de texte. Ajoutez un sélecteur de groupe pour input::placeholder et textarea::placeholder. Veillez à utiliser des doubles-colonnes entre le sélecteur et le pseudo-élément, car c'est ainsi que le navigateur reconnaît la différence entre une pseudo-classe et un pseudo-élément. Dans le bloc de code suivant, le CSS mis en évidence montre comment cela s'écrit
Code
...
textarea {
min-height: 10rem;
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* Firefox */
color: hsl(213, 73%, 50%);
}
select {
background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}
...
La seule chose à noter est que Firefox a besoin d'une valeur d'opacité de 1 afin d'obtenir la valeur complète de la couleur. Sinon, Firefox réduit l'opacité, atténuant la couleur du texte et causant des problèmes de contraste de couleur accessibles selon la valeur de la couleur. Comme il s'agit d'une situation propre à Firefox, un commentaire explique le but de la présence de la propriété d'opacité.
Enregistrez vos modifications dans le fichier styles.css et retournez dans le navigateur pour rafraîchir le fichier index.html. Le texte de l'espace réservé est maintenant de la même couleur bleue que celle utilisée pour la flèche de la liste déroulante et les états sélectionnés pour le bouton radio et la case à cocher.
Dans cette section, vous avez créé du contenu de type placeholder dans les champs de saisie de texte et vous leur avez donné un style à l'aide du pseudo-élément ::placeholder. Dans la section suivante, vous allez créer des styles personnalisés pour les éléments de formulaire <bouton>.
Dans les formulaires Web, les éléments <bouton> sont souvent utilisés pour soumettre ou réinitialiser un formulaire. Dans index.html, il y a deux boutons, l'un avec le type submit et l'autre reset. Les deux sont fonctionnellement utiles, mais effectuent des actions opposées. Le bouton submit envoie le formulaire à un processeur, tandis que le bouton reset efface toutes les données saisies dans le formulaire. En raison de ces actions différentes, les éléments <bouton> doivent également avoir un aspect visiblement différent.
Pour commencer, ouvrez styles.css dans votre éditeur de texte et créez un sélecteur d'élément de bouton. Dans ce bloc sélecteur, vous ajouterez les styles qui sont partagés entre les éléments <bouton>soumettre et réinitialiser, comme le montre le bloc de code suivant :
Code
...
input[type="checkbox"]:checked {
background: url("images/check.svg") no-repeat center / 75% auto;
}
button {
font: 1.25rem sans-serif;
border-radius: 0.25rem;
cursor: pointer;
padding: 0.75rem 1.25rem;
}
La police permet de définir le même style et la même taille de police pour les deux boutons. Ensuite, la propriété border-radius ajoute des coins arrondis aux deux boutons. La propriété cursor modifie le style du curseur, qui devient un pointeur de type manuel. Enfin, la propriété padding définit l'espace autour de l'intérieur du bouton.
Enregistrez vos modifications dans le fichier styles.css, puis ouvrez le fichier index.html dans votre navigateur Web. Le texte du bouton s'agrandit et l'espacement entre les textes augmente visuellement en raison du remplissage.
Ensuite, retournez dans le fichier styles.css pour ajouter des styles pour chaque type de bouton en utilisant un sélecteur d'attribut ciblant chacun d'eux. Pour le bouton submit, ajoutez une couleur de fond bleue et une couleur de texte blanche. Le bouton de réinitialisation sera caractérisé par un soulignement de type lien et une marge pour ajouter de l'espace entre les boutons. Ajoutez le CSS mis en évidence dans le bloc de code suivant à votre fichier styles.css :
Code
...
button {
...
}
button[type="submit"] {
background-color: hsl(213, 73%, 50%);
color: white;
}
button[type="reset"] {
text-decoration: underline;
margin-left: 1rem;
}
Dans votre éditeur de texte, sauvegardez ces ajouts dans le fichier styles.css puis rafraîchissez le fichier index.html. Le bouton d'envoi est maintenant d'un bleu et d'un blanc bien visibles, tandis que le bouton de réinitialisation est un texte souligné discret.
Le bouton n'a pas d'état :hover par défaut, vous allez donc l'ajouter à votre style. Un état :hover est utile pour aider les utilisateurs de curseurs à avoir un retour visuel lorsque le curseur est situé sur les boutons.
Pour créer des états :hover pour ces éléments <bouton>, revenez au fichier styles.css dans votre éditeur de texte.
Définissez la couleur d'arrière-plan du bouton submit pour qu'elle s'assombrisse au survol. Ensuite, faites en sorte que le bouton reset perde son soulignement au survol. Le code CSS mis en évidence dans le bloc de code suivant montre comment écrire ces styles :
Code
...
button[type="submit"] {
background-color: hsl(213, 73%, 50%);
color: white;
}
button[type="submit"]:hover {
background-color: hsl(213, 73%, 40%);
}
button[type="reset"] {
text-decoration: underline;
margin-left: 1rem;
}
button[type="reset"]:hover {
text-decoration: none;
}
Sauvegardez vos modifications dans le fichier styles.css, puis retournez dans le navigateur pour rafraîchir le fichier index.html. Les éléments <bouton> changent de style lorsque le curseur de la souris les survole .
Dans cette section, vous avez créé des styles pour les éléments <bouton> afin de rendre leurs différences visuellement perceptibles. Vous avez modifié la façon dont le curseur apparaît au survol en ajustant la propriété du curseur. Vous avez également créé des styles personnalisés à appliquer à chaque bouton pour fournir un retour visuel supplémentaire.
Alor que pouvons nous faire de plus ? Dans la dernière section, vous fournirez un retour d'information visuel supplémentaire sur l'activité en créant des styles lorsqu'un élément de formulaire est actuellement utilisé avec la pseudo-classe :focus.
Lorsque vous remplissez un formulaire, il est important que l'utilisateur sache sur quel champ il travaille actuellement. Vous pouvez y parvenir en utilisant la pseudo-classe :focus. Par défaut, les navigateurs utilisent une propriété de contour pour indiquer quand un élément a le :focus, mais il arrive que cet indicateur ne soit pas perceptible ou qu'il entre en conflit avec d'autres aspects visuels de la conception. Dans cette section, vous allez créer un état :focus personnalisé qui correspond à l'esthétique de votre formulaire.
Pour commencer à travailler avec les états :focus des champs de formulaire, ouvrez le fichier styles.css dans votre éditeur de texte. Créez un sélecteur de groupe pour input, select et textarea, tous dotés d'une pseudo-classe :focus, comme le montre le bloc de code suivant :
Code
...
input,
select,
textarea {
...
}
input:focus,
select:focus,
textarea:focus {
outline: none;
box-shadow: 0 0 0 4px hsl(213, 90%, 70%);
}
input[type="text"],
input[type="email"],
select,
textarea {
...
}
...
Ces styles suppriment la valeur de contour par défaut du navigateur et remplacent le style par un trait bleu épais créé avec la propriété box-shadow. Les trois premières valeurs de la propriété box-shadow correspondent à l'emplacement de l'ombre et à la quantité de flou. La quatrième est appelée l'étendue, qui dans ce cas crée un trait de 4px autour de l'élément ciblé. Ensuite, les boutons recevront un état de focalisation légèrement différent, puisque le bouton d'envoi est de la même couleur bleue. Le but et l'intention d'un état de focalisation est d'attirer l'attention sur l'élément focalisé, vous distinguerez donc ces contours de différentes manières.
Ajoutez un sélecteur button:focus au fichier styles.css. Dans le bloc du sélecteur, désactivez le contour par défaut et ajoutez une propriété box-shadow. Les valeurs de placement, de flou et d'étalement resteront les mêmes que pour les champs de saisie, mais la couleur sera noire au lieu de bleue, comme le montre le bloc de code suivant :
Code
...
button {
...
}
button:focus {
outline: none;
box-shadow: 0 0 0 4px black;
}
button[type="submit"] {
...
}
...
Enregistrez vos modifications dans le fichier styles.css et retournez dans votre navigateur. Actualisez le fichier index.html et commencez à appuyer sur la touche de tabulation pour que le focus passe d'un élément à l'autre du formulaire. Le style de focus est appliqué lorsque le focus change avec la touche Tab.
Appréciez donc le travail que vous venez de réaliser . Vous avez appris comment personnaliser vos formulaires, n’hésitez donc pas à modifier touts les styles en utilisant les astuces que vous venez d’apprendre.
Nous ne prétendons pas que c’est parfait ou idéale ni que c’est le top.
Tout au contraire car notre but est que vous apprenez des astuces pour utiliser ce que vous connaissez en css et comment on peut appliquer vos connaissances pour personnaliser le formulaire.