Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:formulaires:pseudoclass [2023/04/05 17:22] – [Champs requis] jcheron
+++ web:html:formulaires:pseudoclass [2023/04/07 15:46] (Version actuelle) – [Validité des données] jcheron
@@ Ligne 9: / Ligne 9: @@
 ^:focus | Cible un élément ayant le focus |
 ^:active | Cible un élément activé au clavier ou à la souris |
+^:required | Cible un élément requis (ayant l'attribut **required**) |
+^:optional| Cible un élément non requis (opposé de **:required**) |
+^:valid | Cible un élément valide (ou n'ayant aucun contrôle de validité) |
+^:invalid | Cible un élément non requis (opposé de **:valid**) |
 ==== Champs requis ====
@@ Ligne 45: / Ligne 48: @@
-Il est possible d'ajouter un élément de type texte (span vide) pour mentionner le caractère obligatoire :
+Il est possible d'ajouter un élément de type texte (span vide dans le cas ci-dessous), et de l'utiliser pour faire apparaître le caractère obligatoire du champ, en position **absolute** :
 <sxh html>
@@ Ligne 61: / Ligne 64: @@
 input:required + span::after {
-  font-size: 0.7rem;
+  font-size: 1rem;
   position: absolute;
   content: "obligatoire";
   color: white;
-  background-color: black;
+  background-color: #db4764;
   padding: 5px 10px;
-  top: -26px;
+  top: -36px;
   left: -70px;
 }
@@ Ligne 83: / Ligne 86: @@
   content: "obligatoire";
   color: white;
-  background-color: red;
+  background-color: #db4764;
   padding: 5px 10px;
   top: -36px;
   left: -70px;
+  border-radius: 4px;
 }
 </style>
@@ Ligne 97: / Ligne 101: @@
 </div>
 </html>
+==== Validité des données ====
+L'utilisation des pseudo-classes **:valid** et **:invalid** permet de gérer l'état visuel des contrôles de formulaires vis à vis de la validation.
+**:valid** et **:invalid** sont sollicités dans les cas suivants :
+  * Contrôles requis (**:required**) invalides s'ils n'ont pas de valeur.
+  * Contrôles avec validation native (champs input d'un certain type) invalides si la valeur saisie est non conforme.
+  * Contrôles avec limites (min et max) invalides en dehors des plages (**:out-of-range** ajouté).
+<sxh html>
+<div>
+  <label for="prenom">Prénom *: </label>
+  <input id="prenom" name="prenom" type="text" required>
+  <span></span>
+</div>
+</sxh>
+<sxh css>
+input + span {
+  position: relative;
+}
+input + span::before {
+  position: absolute;
+  right: -20px;
+  top: 5px;
+}
+input:invalid {
+  border: 2px solid red;
+}
+input:invalid + span::before {
+  content: '✖';
+  color: red;
+}
+input:valid + span::before {
+  content: '✓';
+  color: green;
+}
+</sxh>
+<html>
+<style>
+#validation-form input {
+  width: 200px;
+  display: inline-block;
+}
+#validation-form input + span {
+  position: relative;
+}
+#validation-form input + span::before {
+  position: absolute;
+  right: -20px;
+  top: 0px;
+  margin-right: 30px;
+}
+#validation-form input:invalid {
+  border: 2px solid #db4764;
+}
+#validation-form input:invalid + span::before {
+  content: '✖';
+  color: #db4764;
+}
+#validation-form input:valid + span::before {
+  content: '✓';
+  color: green;
+}
+#validation-form input:required + span::after {
+  font-size: 1rem;
+  position: absolute;
+  content: "obligatoire";
+  color: white;
+  background-color: #db4764;
+  padding: 5px 10px;
+  top: -36px;
+  left: -70px;
+  border-radius: 4px;
+}
+</style>
+<div class="imageB">
+<div id="validation-form">
+  <label for="nom">Nom *: </label>
+  <input id="nom" name="nom" type="text" required>
+  <span></span>
+</div>
+</div>
+</html>
+<button>[[web:html:formulaires:validation|]]</button>