Différences

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

--- web:html:formulaires:pseudoclass [2023/04/07 12:05] – 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 183: / Ligne 186: @@
   border-radius: 4px;
 }
 </style>
 <div class="imageB">
 <div id="validation-form">
-  <label for="prenom">Prénom *: </label>
+  <label for="nom">Nom *: </label>
-  <input id="prenom" name="prenom" type="text" required>
+  <input id="nom" name="nom" type="text" required>
   <span></span>
 </div>
 </div>
 </html>
+<button>[[web:html:formulaires:validation|]]</button>