| 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/05 17:22] – [Champs requis] 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 ==== |
| |
| |
| |
| 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> | <sxh html> |
| |
| input:required + span::after { | input:required + span::after { |
| font-size: 0.7rem; | font-size: 1rem; |
| position: absolute; | position: absolute; |
| content: "obligatoire"; | content: "obligatoire"; |
| color: white; | color: white; |
| background-color: black; | background-color: #db4764; |
| padding: 5px 10px; | padding: 5px 10px; |
| top: -26px; | top: -36px; |
| left: -70px; | left: -70px; |
| } | } |
| content: "obligatoire"; | content: "obligatoire"; |
| color: white; | color: white; |
| background-color: red; | background-color: #db4764; |
| padding: 5px 10px; | padding: 5px 10px; |
| top: -36px; | top: -36px; |
| left: -70px; | left: -70px; |
| | border-radius: 4px; |
| } | } |
| </style> | </style> |
| </div> | </div> |
| </html> | </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> |
| |
jcheron