| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| 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 |
|---|
| ^:focus | Cible un élément ayant le focus | | ^:focus | Cible un élément ayant le focus | |
| ^:active | Cible un élément activé au clavier ou à la souris | | ^: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 ==== | ==== Champs requis ==== |
| |
| ==== Validité des données ==== | ==== 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 : | **:valid** et **:invalid** sont sollicités dans les cas suivants : |
| border-radius: 4px; | border-radius: 4px; |
| } | } |
| | |
| </style> | </style> |
| <div class="imageB"> | <div class="imageB"> |
| <div id="validation-form"> | <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> | <span></span> |
| </div> | </div> |
| </div> | </div> |
| </html> | </html> |
| | |
| | <button>[[web:html:formulaires:validation|]]</button> |
| | |
jcheron