web:html:formulaires:pseudoclass

Différences

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

Lien vers cette vue comparative

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 11:47] – [Validité des données] jcheronweb: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 | ^: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 ====
  
Ligne 45: Ligne 48:
  
  
-Il est possible d'ajouter un élément de type texte (span vide dans le cas ci-dessous) pour mentionner le caractère obligatoire d'un champ :+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>
Ligne 101: Ligne 104:
 ==== 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 :
Ligne 143: Ligne 146:
  
 <html> <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 class="imageB">
-<div> +<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>
 +
  • web/html/formulaires/pseudoclass.1680860850.txt.gz
  • Dernière modification : il y a 3 ans
  • de jcheron