Différences

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

--- web:html:formulaires:pseudoclass [2023/04/07 12:16] – [Validité des données] 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 101: / Ligne 104: @@
 ==== Validité des données ====
-L'utilisation des pseudo-classes **:valid** et **:invalid** permettent de gérer l'état visuel des contrôles de formulaires vis à vis de la validation.
+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 :
@@ Ligne 184: / Ligne 187: @@
 }
-#validation-form input:out-of-range + span::after {
-  color: white;
-  background-color: #db4764;
-  width: 155px;
-  content: "En dehors de l'intervalle autorisé";
-  left: -182px;
-}
 </style>
 <div class="imageB">
 <div id="validation-form">
-<div>
   <label for="nom">Nom *: </label>
   <input id="nom" name="nom" type="text" required>
   <span></span>
-</div>
-<div>
-  <label for="age">Age (+de 12) : </label>
-  <input id="age" name="age" type="number" min="12" max="130">
-  <span></span>
-</div>
 </div>
 </div>
 </html>
+<button>[[web:html:formulaires:validation|]]</button>