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:56] – 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 144: Ligne 147:
 <html> <html>
 <style> <style>
-#form-validation input {+#validation-form input {
   width: 200px;   width: 200px;
   display: inline-block;   display: inline-block;
 } }
-#form-validation input + span {+#validation-form input + span {
   position: relative;   position: relative;
 } }
  
-#form-validation input + span::before {+#validation-form input + span::before {
   position: absolute;   position: absolute;
   right: -20px;   right: -20px;
-  top: 15px;+  top: 0px; 
 +  margin-right: 30px;
 } }
  
-#form-validation input:invalid { +#validation-form input:invalid { 
-  border: 2px solid red;+  border: 2px solid #db4764;
 } }
  
-#form-validation input:invalid + span::before {+#validation-form input:invalid + span::before {
   content: '✖';   content: '✖';
-  color: red;+  color: #db4764;
 } }
  
-#form-validation input:valid + span::before {+#validation-form input:valid + span::before {
   content: '✓';   content: '✓';
   color: green;   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> </style>
-<div class="imageB" style="width:100%"> +<div class="imageB"> 
-<div id="form-validation"> +<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.1680861399.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron