Forms

Exemples et directives dutilisation des styles de contrôle de formulaire, des options de mise en page et des composants personnalisés pour créer une grande variété de formulaires.

Présentation

Les contrôles de formulaire de Bootstrap développent nos styles de formulaire redémarrés avec des classes. Utilisez ces classes pour activer leurs affichages personnalisés pour un rendu plus cohérent entre les navigateurs et les appareils.

Veillez à utiliser un attribut type approprié sur toutes les entrées (par exemple , email pour ladresse e-mail ou number pour les informations numériques) pour tirer parti des nouveaux contrôles de saisie tels que la vérification des e-mails, la sélection du numéro, etc.

Voici un exemple rapide pour illustrer les styles de formulaire de Bootstrap. Continuez à lire pour obtenir de la documentation sur les classes requises, la mise en page du formulaire, etc.

Contrôles de formulaire

Noubliez pas dexplorer nos formulaires personnalisés pour un style plus approfondi <select> s.

Pour les entrées de fichier, remplacez .form-control par .form-control-file.

Dimensionnement

Définissez les hauteurs à laide de classes telles que .form-control-lg et .form-control-sm.

Lecture seule

Ajoutez le readonly attribut booléen sur une entrée pour empêcher la modification de la valeur de lentrée. Les entrées en lecture seule semblent plus claires (tout comme les entrées désactivées), mais conservent le curseur standard.

Texte brut en lecture seule

Si vous souhaitez avoir des éléments <input readonly> dans votre formulaire sous forme de texte brut, utilisez .form-control-plaintext pour supprimer le style de champ de formulaire par défaut et conserver la marge et le remplissage corrects.

Cases à cocher et radios

Par défaut les cases à cocher et les radios sont améliorées à laide de .form-check, une classe unique pour les deux types dentrée qui améliore la présentation et le comportement de leurs éléments HTML. Les cases à cocher permettent de sélectionner une ou plusieurs options dans une liste, tandis que les radios permettent de sélectionner une option parmi plusieurs.

Les cases à cocher et les radios désactivées sont prises en charge, mais pour fournir un not-allowed curseur au survol du parent <label>, vous devrez ajouter lattribut disabled à .form-check-input. Lattribut désactivé appliquera une couleur plus claire pour aider à indiquer létat de lentrée.

Les cases à cocher et les radios utilisées sont conçues pour prendre en charge la validation de formulaire HTML et fournir des étiquettes concises et accessibles. En tant que tels, nos <input> et <label> sont des éléments frères par opposition à un <input> dans un <label>. Ceci est légèrement plus détaillé car vous devez spécifier les attributs id et for pour associer les <input> et <label>.

Par défaut (empilé)

Par défaut, nimporte quel nombre de cases à cocher et de radios qui sont des frères immédiats seront empilés verticalement et correctement espacé avec .form-check.

Inline

Regroupez les cases à cocher ou les radios sur la même ligne horizontale en ajoutant .form-check-inline à nimporte quel .form-check.

Sans libellés

Ajoutez .position-static aux entrées de .form-check qui nont pas de texte détiquette. Noubliez pas de toujours fournir une forme détiquette pour les technologies dassistance (par exemple, en utilisant aria-label).

Disposition

Puisque Bootstrap applique display: block et width: 100% à presque tous nos contrôles de formulaire , les formulaires sempileront par défaut verticalement. Des classes supplémentaires peuvent être utilisées pour faire varier cette mise en page pour chaque formulaire.

Groupes de formulaires

La classe .form-group est le moyen le plus simple pour ajouter de la structure aux formulaires. Il fournit une classe flexible qui encourage le regroupement approprié des étiquettes, des contrôles, du texte daide facultatif et des messages de validation de formulaire. Par défaut, il napplique que margin-bottom, mais il récupère des styles supplémentaires dans .form-inline si nécessaire. Utilisez-le avec des <fieldset>, des <div> ou presque tout autre élément.

Grille de formulaire

Des formulaires plus complexes peuvent être construits en utilisant nos classes de grille. Utilisez-les pour les mises en page de formulaire qui nécessitent plusieurs colonnes, des largeurs variées et des options dalignement supplémentaires.

Ligne de formulaire

Vous pouvez également échanger .row pour .form-row, une variante de notre ligne de grille standard qui remplace les gouttières de colonne par défaut pour des mises en page plus serrées et plus compactes.

Des mises en page plus complexes peuvent également être créées avec le système de grille.

Forme horizontale

Créez des formes horizontales avec la grille en ajoutant la classe .row pour former des groupes et en utilisant le .col-*-* pour spécifier la largeur de vos libellés et contrôles. Veillez également à ajouter .col-form-label à vos <label> afin quils soient centrés verticalement avec leurs contrôles de formulaire associés.

Parfois, vous devrez peut-être utiliser des utilitaires de marge ou de remplissage pour créer lalignement parfait dont vous avez besoin. Par exemple, nous avons supprimé padding-top sur notre étiquette dentrées radio empilées pour mieux aligner la ligne de base du texte.

Étiquette de formulaire horizontal dimensionnement

Dimensionnement des colonnes

Comme indiqué dans les exemples précédents, notre système de grille vous permet de placer nimporte quel nombre de .col s dans un .row ou .form-row. Ils répartiront la largeur disponible de manière égale entre eux. Vous pouvez également choisir un sous-ensemble de vos colonnes pour occuper plus ou moins despace, tandis que les .col restants répartissent également le reste, avec des classes de colonnes spécifiques telles que .col-7.

Auto-dimensionnement

Lexemple ci-dessous utilise un utilitaire flexbox pour centrer verticalement le contenu et les modifications .col à .col-auto afin que vos colonnes noccupent que lespace nécessaire. En dautres termes, la colonne se taille elle-même en fonction du contenu.

Vous pouvez ensuite remixer cela à nouveau avec des classes de colonnes spécifiques à la taille.

Et bien sûr, les contrôles de formulaire personnalisés sont pris en charge.

Formulaires en ligne

Utilisez .form-inline classe pour afficher une série détiquettes, de contrôles de formulaire et de boutons sur une seule ligne horizontale. Les contrôles de formulaire dans les formulaires en ligne diffèrent légèrement de leur état par défaut.

• Les contrôles sont display: flex, réduisant tout espace blanc HTML et vous permettant de fournir un contrôle dalignement avec les utilitaires despacement et de flexbox.
• Les contrôles et les groupes dentrée reçoivent width: auto pour remplacer la valeur par défaut de Bootstrap width: 100%.
• Les contrôles napparaissent en ligne que dans les fenêtres dau moins 576 px de large pour tenir compte des fenêtres étroites sur les appareils mobiles.

Vous devrez peut-être régler manuellement la largeur et lalignement des contrôles de formulaire individuels avec des utilitaires despacement (comme indiqué ci-dessous). Enfin, veillez à toujours inclure un <label> avec chaque contrôle de formulaire, même si vous devez le masquer aux visiteurs non lecteurs décran avec .sr-only .

Les contrôles et sélections de formulaires personnalisés sont également pris en charge.

Texte daide

Le texte daide au niveau du bloc dans les formulaires peut être créé à laide de .form-text (anciennement .help-block dans la v3). Le texte daide en ligne peut être implémenté de manière flexible en utilisant nimporte quel élément HTML en ligne et des classes utilitaires telles que .text-muted.

Le texte daide sous les entrées peut être stylisé avec .form-text. Cette classe comprend display: block et ajoute une marge supérieure pour un espacement facile des entrées ci-dessus.

Le texte en ligne peut utiliser nimporte quel élément HTML en ligne typique (que ce soit un <small>, <span>, ou autre chose) avec rien de plus quune classe utilitaire.

Formulaires désactivés

Ajoutez lattribut booléen disabled sur une entrée pour empêcher les interactions de lutilisateur et le faire apparaître plus léger.

Ajoutez le disabled attribuer à un <fieldset> pour désactiver tous les contrôles à lintérieur.

Validation

Fournissez des commentaires utiles et exploitables à vos utilisateurs grâce à la validation de formulaire HTML5, disponible dans tous nos navigateurs pris en charge. Choisissez parmi les commentaires de validation par défaut du navigateur ou implémentez des messages personnalisés avec nos classes intégrées et notre JavaScript de démarrage.

Comment ça marche

Voici comment la validation de formulaire fonctionne avec Bootstrap:

• La validation de formulaire HTML est appliquée via les deux pseudo-classes de CSS, :invalid et :valid. Il sapplique aux éléments <input>, <select> et <textarea>.
• Bootstrap étend les styles :invalid et :valid à la classe parent .was-validated, généralement appliquée au <form>. Sinon, tout champ obligatoire sans valeur apparaît comme non valide au chargement de la page. De cette façon, vous pouvez choisir quand les activer (généralement après la tentative denvoi du formulaire).
• En guise de solution de secours, .is-invalid et .is-valid peuvent être utilisées à la place des pseudo-classes pour la validation côté serveur. Ils ne nécessitent pas de classe parente .was-validated.
• En raison des contraintes de fonctionnement du CSS, nous ne pouvons pas (pour le moment) appliquer des styles à un <label> qui précède un contrôle de formulaire dans le DOM sans laide de JavaScript personnalisé.
• Tous les navigateurs modernes prennent en charge lAPI de validation de contrainte, une série de méthodes JavaScript pour valider les contrôles de formulaire.
• Les messages de commentaires peuvent utiliser les paramètres par défaut du navigateur (différents pour chaque navigateur et instables via CSS) ou nos styles de commentaires personnalisés avec HTML et CSS supplémentaires.
• Vous pouvez fournir des messages de validité personnalisés avec setCustomValidity en JavaScript.

Dans cet esprit, considérez les démos suivantes pour nos styles de validation de formulaire personnalisés, nos classes côté serveur facultatives et les paramètres par défaut du navigateur.

Styles personnalisés

Pour les messages de validation du formulaire Bootstrap personnalisé, vous devrez ajouter lattribut booléen novalidate à votre <form>. Cela désactive les info-bulles de commentaires par défaut du navigateur, mais permet toujours daccéder aux API de validation de formulaire en JavaScript. Essayez de soumettre le formulaire ci-dessous; notre JavaScript interceptera le bouton denvoi et vous transmettra vos commentaires.

Lors de la tentative denvoi, vous verrez les :invalid et :valid styles appliqués à vos contrôles de formulaire.

Paramètres par défaut du navigateur

Vous nêtes pas intéressé par les messages de commentaires de validation personnalisés ou par lécriture de JavaScript pour modifier les comportements du formulaire? Très bien, vous pouvez utiliser les paramètres par défaut du navigateur. Essayez de soumettre le formulaire ci-dessous. Selon votre navigateur et votre système dexploitation, vous verrez un style de commentaires légèrement différent.

Bien que ces styles de commentaires ne puissent pas être stylisés avec CSS, vous pouvez toujours personnaliser le texte des commentaires via JavaScript.

Côté serveur

Nous vous recommandons dutiliser la validation côté client, mais si vous avez besoin du côté serveur, vous pouvez indiquer des champs de formulaire invalides et valides avec .is-invalid et .is-valid. Notez que .invalid-feedback est également pris en charge avec ces classes.

Éléments pris en charge

Nos exemples de formulaires affichent les <input> textuels natifs ci-dessus, mais des styles de validation de formulaire sont disponibles pour nos contrôles de formulaire personnalisés.

Info-bulles

Si la mise en page de votre formulaire le permet, vous pouvez échanger les .{valid|invalid}-feedback classes pour les classes .{valid|invalid}-tooltip pour afficher les commentaires de validation dans une info-bulle stylisée. Assurez-vous davoir un parent avec position: relative dessus pour le positionnement de linfobulle. Dans lexemple ci-dessous, nos classes de colonnes lont déjà, mais votre projet peut nécessiter une configuration alternative.

Formulaires personnalisés

Pour encore plus de personnalisation et de croisement cohérence du navigateur, utilisez nos éléments de formulaire entièrement personnalisés pour remplacer les paramètres par défaut du navigateur. Ils sont construits sur un balisage sémantique et accessible, ils remplacent donc de manière solide tout contrôle de formulaire par défaut.

Cases à cocher et radios

Chaque case à cocher et radio est entourée dun <div> avec un frère <span> pour créer notre contrôle personnalisé et un <label> pour le texte daccompagnement. Structurellement, cest la même approche que notre .form-check par défaut.

Nous utilisons le sélecteur frère (~) pour tous nos états <input> – comme :checked – pour styliser correctement notre indicateur de formulaire personnalisé. Lorsquil est combiné avec la classe .custom-control-label, nous pouvons également styliser le texte de chaque élément en fonction de létat de <input>.

Nous masquons le <input> par défaut avec opacity et utilisons .custom-control-label pour créer un nouvel indicateur de formulaire personnalisé à sa place avec ::before et ::after. Malheureusement, nous ne pouvons pas en créer un personnalisé uniquement à partir de <input> car le content de CSS ne fonctionne pas sur cet élément.

Dans les états cochés, nous utilisons des icônes SVG intégrées en base64 dOpen Iconic. Cela nous offre le meilleur contrôle pour le style et le positionnement sur les navigateurs et les appareils.

Cases à cocher

Cases à cocher personnalisées peut également utiliser la pseudo-classe :indeterminate lorsquelle est définie manuellement via JavaScript (il ny a pas dattribut HTML disponible pour le spécifier).

Si vous utilisez jQuery, quelque chose comme ça devrait suffire:

Radios

Inline

Désactivée

Les cases à cocher et les radios personnalisées peuvent également être désactivées. Ajoutez lattribut booléen disabled au <input> et lindicateur personnalisé et la description du libellé seront automatiquement stylisés.

Sélectionner le menu

Personnalisé <select> les menus nont besoin que dune classe personnalisée, .custom-select pour déclencher les styles personnalisés.

Vous pouvez également choisir entre des sélections personnalisées petites et grandes pour correspondent à nos entrées de texte de taille similaire.

Lattribut multiple est également pris en charge:

De même que lattribut size:

Navigateur de fichiers

Lentrée de fichier est la plus gnarly du groupe et nécessite du JavaScript supplémentaire si vous souhaitez les connecter avec le fichier fonctionnel Choose file… et le texte du nom de fichier sélectionné.

Nous masquons le fichier par défaut <input> via et stylisez à la place le <label>. Le bouton est généré et positionné avec ::after. Enfin, nous déclarons un width et height sur le <input> pour un espacement approprié pour le contenu environnant .

Traduire ou personnaliser les chaînes

La pseudo-classe :lang() est utilisée pour permettre la traduction du texte « Parcourir » en un autre langues. Remplacez ou ajoutez des entrées à la variable Sass $custom-file-text avec la balise de langue appropriée et les chaînes localisées. Les chaînes anglaises peuvent être personnalisées de la même manière.Par exemple, voici comment ajouter une traduction en espagnol (le code de langue de lespagnol est es):

Voici lang(es) en action sur lentrée de fichier personnalisé pour une traduction espagnole:

Vous devrez définir correctement la langue de votre document (ou de son sous-arbre) pour que le texte correct soit affiché. Cela peut être fait à laide de lattribut lang sur lélément <html> ou sur len-tête HTTP Content-Language , entre autres méthodes.