Composant de formulaire universel. La classe .form-control
stylise tous les types d'input HTML natifs, le select et le
textarea. Disponible en 3 modificateurs de taille via
.form-control-sm, .form-control-md
et .form-control-lg. La validation visuelle est activée
au submit via FormValidate.
Le CSS supporte deux façons de lier un label à son input :
<label for="id"> + <input id="id"><label><input></label> — le CSS détecte automatiquement via :has(input)Le switch utilise obligatoirement un label séparé car il nécessite role="switch" sur l'input.
Toujours ajouter novalidate sur le <form>
pour désactiver la validation native du navigateur et laisser FormValidate
gérer l'affichage des erreurs via les classes CSS.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.form-control |
<div> |
Conteneur principal. Applique flex-direction: column, stylise tous les inputs, select et textarea enfants. Requise sur chaque champ. |
.form-control-sm |
<div> |
Applique les hauteurs réduites sur tous les inputs, réduit le switch et applique zoom: 0.9 sur range, checkbox et radio. |
.form-control-md |
<div> |
Applique les hauteurs intermédiaires sur tous les inputs et adapte la taille du switch. |
.form-control-lg |
<div> |
Applique les hauteurs augmentées sur tous les inputs, agrandit le switch et applique zoom: 1.5 sur range, checkbox et radio. |
.validated |
<form> |
Ajoutée par FormValidate au submit si le formulaire est invalide. Active les styles visuels d'erreur sur les inputs invalides. |
Tous les types d'input HTML natifs sont supportés dans .form-control.
| TYPE | PARTICULARITÉ |
|---|---|
text, email, password, search, tel, url |
Inputs textuels standard. Pleine largeur, hauteur fixe, bordure et padding via variables CSS. |
date, datetime-local, time, month, week |
Inputs temporels. Même style que les inputs textuels. |
number |
Padding uniquement à gauche via padding-left pour ne pas masquer les boutons +/- natifs du navigateur. |
select |
Flèche personnalisée via --input-icon-select-arrow-svg. Varie selon le thème clair/sombre. |
textarea |
Hauteur automatique, redimensionnable verticalement. Non affecté par les modificateurs de hauteur. |
checkbox |
Couleur personnalisée via accent-color: var(--input-accent-color). Taille ajustée via zoom selon le modificateur de taille. |
checkbox + role="switch" |
Toggle switch entièrement CSS. Le curseur SVG se déplace via background-position. Deux SVG distincts : --input-icon-switch-svg-before (non coché) et --input-icon-switch-svg-after (coché). Taille contrôlée par --input-switch-height. |
radio |
Couleur personnalisée via accent-color. Taille ajustée via zoom. |
range |
Pleine largeur. Couleur personnalisée via accent-color. Taille ajustée via zoom. |
color |
Bordure et border-radius personnalisés. Hauteur fixe. |
file |
Bouton de sélection stylisé via ::file-selector-button en --input-accent-color. |
button, reset, submit |
Bordure, border-radius et padding via variables CSS. Hauteur fixe. |
image |
Border-radius et overflow: clip. Le contenu est défini via src. |
hidden |
Aucun style appliqué — non visible dans l'interface. |
disabled |
Applicable sur tous les inputs, select et textarea. Applique opacity: 0.5, cursor: not-allowed, une couleur de texte et un fond dégradés via --input-disabled-color et --input-disabled-background-color. |
Les modificateurs de taille s'appliquent sur le .form-control
et affectent simultanément la hauteur des inputs, la taille du switch et le zoom des checkbox, radio et range.
Ne jamais les appliquer directement sur l'input.
La validation visuelle est activée par l'ajout de la classe .validated
sur le <form>, ajoutée automatiquement par
FormValidate au submit si le formulaire est invalide.
Une fois active, les inputs invalides reçoivent des styles d'erreur distincts.
| ÉTAT | SÉLECTEUR | EFFET VISUEL |
|---|---|---|
| Invalide | :invalid ou [aria-invalid="true"] |
Bordure en --input-accent-color-invalid, box-shadow d'erreur, accent-color en couleur d'erreur. Pour le switch : fond en couleur d'erreur. Pour le file : bouton en couleur d'erreur. |
Pour les inputs que le navigateur ne peut pas invalider nativement (range,
color, image),
posez aria-invalid="true" manuellement dans le HTML
pour déclencher les styles d'erreur.
La validation JS est gérée par la classe FormValidate.
Elle écoute l'événement submit sur le document.
Si le formulaire est invalide, elle bloque la soumission et ajoute
.validated pour activer les styles d'erreur CSS.
Si le formulaire est valide, il se soumet normalement sans intervention.
import FormValidate from './FormValidate.js';
// A single instance is enough for the entire page.
new FormValidate();
La classe implémente un guard FormValidate.initialized :
instancier FormValidate plusieurs fois n'entraîne aucun
doublon de listeners.
| ATTRIBUT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
data-ui="validate" |
<form> |
Marque le formulaire comme géré par FormValidate. Sans cet attribut, le JS ignore complètement le formulaire au submit. |
novalidate |
<form> |
Désactive la validation native du navigateur. Requis pour laisser le CSS gérer l'affichage des erreurs sans les bulles natives. |
| MÉTHODE | DESCRIPTION |
|---|---|
FormValidate.onSubmit(event) |
Gestionnaire global de submit. Vérifie que le formulaire porte data-ui="validate".
Si invalide (checkValidity() retourne false),
bloque la soumission via event.preventDefault() et
event.stopPropagation(), puis ajoute
.validated sur le formulaire.
Si valide, le formulaire se soumet normalement.
|
| TOKEN | RÔLE |
|---|---|
--form-control-gap |
Espacement entre le label et l'input |
--input-height |
Hauteur par défaut des inputs |
--input-height-sm |
Hauteur — taille sm |
--input-height-md |
Hauteur — taille md |
--input-height-lg |
Hauteur — taille lg |
--input-padding-x |
Padding horizontal des inputs textuels |
--input-padding-y |
Padding vertical des inputs textuels |
--textarea-padding-x |
Padding horizontal du textarea |
--textarea-padding-y |
Padding vertical du textarea |
--input-border-radius |
Rayon des coins |
--input-border-color |
Couleur de bordure par défaut |
--input-border-style |
Style de bordure |
--input-border-width |
Épaisseur de bordure |
--input-background-color |
Couleur de fond des inputs |
--input-accent-color |
Couleur d'accentuation principale (focus, checkbox, radio, range, switch coché) |
--input-content-on-accent-color |
Couleur du texte sur fond d'accentuation (bouton file) |
--input-border-focus-color |
Couleur de bordure au focus |
--input-box-shadow-focus |
Ombre de focus |
--input-accent-color-invalid |
Couleur d'accentuation — état invalide |
--input-content-on-accent-color-invalid |
Couleur du texte sur fond invalide (bouton file en erreur) |
--input-box-shadow-focus-invalid |
Ombre — état invalide |
--input-icon-select-arrow-svg |
Icône flèche du select (définie par thème) |
--input-icon-switch-svg-before |
SVG du curseur switch — état non coché |
--input-icon-switch-svg-after |
SVG du curseur switch — état coché |
--input-switch-height |
Hauteur du switch par défaut (largeur = hauteur × 2) |
--input-switch-height-sm / -md / -lg |
Hauteur du switch selon modificateur de taille |
--input-disabled-color |
Couleur du texte des inputs désactivés |
--input-disabled-background-color |
Couleur de fond des inputs désactivés |
| PRATIQUE | DÉTAIL |
|---|---|
for / id |
Toujours lier le label à l'input via for + id, ou en englobant l'input dans le label. Sans cette liaison, les lecteurs d'écran ne peuvent pas annoncer le libellé du champ. |
role="switch" |
Requis sur la checkbox pour indiquer aux lecteurs d'écran qu'il s'agit d'un toggle switch et non d'une checkbox standard. |
aria-invalid |
Posez aria-invalid="true" manuellement sur les inputs que le navigateur ne peut pas invalider nativement (range, color, image) pour déclencher les styles d'erreur et informer les technologies d'assistance. |
required |
L'attribut natif est pris en compte par checkValidity() et communiqué aux lecteurs d'écran. |
| Focus visible | Le focus est stylisé via box-shadow sur tous les inputs. Ne pas supprimer outline sans le remplacer par un indicateur visible. |
disabled |
L'attribut natif désactive l'input et le signale automatiquement aux lecteurs d'écran. Le style associé (opacity: 0.5, cursor: not-allowed) renforce l'indication visuelle. |
Un champ vide sans required est considéré comme
:valid par le navigateur — il ne recevra pas les styles
d'erreur même après l'ajout de .validated.
Utilisez aria-invalid="true" pour forcer l'état invalide
sur ces champs si nécessaire.
Toujours ajouter novalidate sur le <form>
et data-ui="validate" quand vous utilisez
FormValidate.
Appliquer les modificateurs de taille (.form-control-sm,
.form-control-md, .form-control-lg)
sur le .form-control — jamais directement sur l'input.
Ne pas instancier FormValidate avant le chargement du DOM.
Utilisez DOMContentLoaded ou placez le script en bas de page.
Le textarea n'est pas affecté par les modificateurs de hauteur.
Sa hauteur est toujours auto et définie par l'attribut
rows. Il reste redimensionnable verticalement par l'utilisateur.
Form · WEBDEV-UI DOCS / V1