formulaires

exemples et directives d’utilisation pour les styles de contrôle de formulaire, les options de mise en page et les composants personnalisés pour créer une grande variété de formulaires.

aperçu

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

assurez-vous d’utiliser un attributtype approprié sur toutes les entrées (par exemple,,email pour l’adresse e-mail ounumber pour les informations numériques) pour tirer parti des contrôles d’entrée plus récents tels que la vérification des e-mails, la sélection des numéros, etc.

Voici un exemple rapide pour démontrer les styles de formulaire de Bootstrap. Continuez à lire pour la documentation sur les classes requises, la mise en page des formulaires, etc.

les contrôles de Formulaire

assurez-vous d’explorer nos formulaires personnalisés pour plus de style <select>s.

Pour le fichier d’entrées, de swap de la balise .form-control par .form-control-file.,

Dimensionnement

Définir les hauteurs à l’aide de classes comme .form-control-lg et .form-control-sm.

Readonly

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

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

texte brut en lecture seule

Si vous voulez avoir <input readonly> éléments de votre formulaire en texte brut, utilisez la classe .form-control-plaintext pour supprimer le style de champ de formulaire par défaut et préserver la marge et le remplissage corrects.

Plage d’Entrées

le Jeu défilement horizontal gamme d’intrants à l’aide de .form-control-range.,

cases à cocher et radios

Les cases à cocher et radios par défaut sont améliorées à l’aide de.form-check, une classe unique pour les deux types d’entrée qui améliore la mise en page 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 désactivées et les radios sont prises en charge. L’attributdisabled applique une couleur plus claire pour indiquer l’état de l’entrée.,

Les cases à cocher et les radios utilisées sont conçues pour prendre en charge la validation de formulaires HTML et fournir des étiquettes concises et accessibles. En tant que tel, notre <input>s et <label>s sont les éléments frères, par opposition à un <input> dans un <label>. C’est un peu plus détaillé que vous devez spécifier id et for attributs de relier le <input> et <label>.,

Default (stacked)

par défaut, n’importe quel nombre de cases à cocher et de radios qui sont des frères et sœurs immédiats seront empilés verticalement et espacés de manière appropriée avec.form-check.

Inline

groupez les cases à cocher ou les radios sur la même ligne horizontale en ajoutant .form-check-inlineà tout.form-check.,

Sans étiquettes

Ajouter .position-static pour les entrées à l’intérieur de la balise .form-check qui n’ont pas de texte de l’étiquette. N’oubliez pas de fournir une certaine forme d’étiquette pour les technologies d’assistance (par exemple, en utilisant aria-label).,

Présentation

Depuis le Bootstrap s’applique display: block et width: 100% à presque tous nos contrôles de formulaire, formulaires par défaut de la pile à la verticale. Des classes supplémentaires peuvent être utilisées pour modifier cette mise en page sur une base par formulaire.

groupes de formulaires

la classe.form-group est le moyen le plus simple d’ajouter une structure aux formulaires. Il fournit une classe flexible qui encourage le regroupement approprié des étiquettes, des contrôles, du texte d’aide facultatif et de la messagerie de validation de formulaire., Par défaut, il applique uniquement margin-bottom, mais il récupère des styles supplémentaires dans .form-inline au besoin. L’utiliser avec des <fieldset>s, <div>s, ou presque n’importe quel autre élément.

Formulaire de grille

des formes Plus complexes peuvent être construits à l’aide de notre grille de classes. Utilisez-les pour les dispositions de formulaires qui nécessitent plusieurs colonnes, des largeurs variées et des options d’alignement supplémentaires.,

Form row

Vous pouvez également échanger.row contre.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.

formulaire Horizontal

créez des formulaires horizontaux avec la grille en ajoutant la classe.row pour former des groupes et en utilisant les classes.col-*-* pour spécifier la largeur de vos étiquettes et contrôles., Assurez-vous également d’ajouter .col-form-label à vos <label>afin qu’ils soient centrés verticalement avec leurs contrôles de formulaire associés.

parfois, vous devez peut-être utiliser des utilitaires de marge ou de remplissage pour créer l’alignement parfait dont vous avez besoin. Par exemple, nous avons supprimé le padding-top sur notre étiquette d’entrées radio empilées pour mieux aligner la ligne de base du texte.,

Horizontal étiquette de formulaire de dimensionnement

Colonne de dimensionnement

Comme indiqué dans les exemples précédents, notre système de grille vous permet de placer n’importe quel nombre de .coldans un .row ou .form-row. Ils vont diviser la largeur disponible également entre eux. Vous pouvez également choisir un sous-ensemble de vos colonnes pour prendre plus ou moins de place, tandis que les .colrestants divisent également le reste, avec des classes de colonnes spécifiques comme .col-7.,

auto-dimensionnement

l’exemple ci-dessous utilise un utilitaire flexbox pour centrer verticalement le contenu et change .col en .col-auto afin que vos colonnes prennent seulement autant d’espace que nécessaire. Autrement dit, la colonne se dimensionne elle-même en fonction du contenu.

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

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

formulaires en ligne

utilisez la classe .form-inline 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 varient légèrement par rapport à leurs états par défaut.

• Les contrôles sont display: flex, réduisant tout espace blanc HTML et vous permettant de fournir un contrôle d’alignement avec les utilitaires spacing et flexbox.
• Les contrôles et les groupes d’entrée reçoiventwidth: auto pour remplacer la valeur par défaut du Bootstrapwidth: 100%.,
• Les contrôles apparaissent uniquement en ligne dans les fenêtres d’au moins 576 pixels de large pour tenir compte des fenêtres étroites sur les appareils mobiles.

vous devrez peut-être traiter manuellement la largeur et l’alignement des contrôles de formulaire individuels avec des utilitaires d’espacement (comme indiqué ci-dessous). Enfin, assurez-vous de toujours inclure un <label> avec chaque contrôle de formulaire, même si vous devez le cacher aux visiteurs non-screenreader avec .sr-only.

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

texte D’aide

le texte D’aide au niveau du bloc dans les formulaires peut être créé en utilisant.form-text (précédemment connu sous le nom.help-block dans la v3). Le texte d’aide en ligne peut être implémenté de manière flexible à l’aide de n’importe quel élément HTML en ligne et de classes d’utilité comme .text-muted.,

le texte d’aide ci-dessous peut être stylisé avec.form-text. Cette classe inclut display: block et ajoute une marge supérieure pour un espacement facile des entrées ci-dessus.,

le texte en ligne peut utiliser n’importe quel élément HTML en ligne typique (que ce soit un <small>, <span>, ou autre chose) avec rien de plus qu’une classe utilitaire.

Disabled forms

ajoutez l’attribut booléendisabled sur une entrée pour empêcher les interactions utilisateur et le rendre plus léger.,

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

Ajoutez la balise disabled l’attribut d’une balise <fieldset> désactiver tous les contrôles.

Validation

fournissez des commentaires utiles et exploitables à vos utilisateurs avec 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 JavaScript de démarrage.,

comment cela fonctionne

Voici comment fonctionne la validation de formulaire avec Bootstrap:

• la validation de formulaire HTML est appliquée via les deux pseudo-classes CSS,:invalid Et:valid. Il s’applique à la balise <input>, <select> et <textarea> éléments.,
• Bootstrap étendues de la balise :invalid et :valid styles de parent .was-validated de classe, généralement appliquée à la balise <form>. Sinon, tout champ obligatoire sans valeur apparaît comme invalide au chargement de la page. De cette façon, vous pouvez choisir quand les activer (généralement après la tentative de soumission du formulaire).
• Pour réinitialiser l’apparence du formulaire (par exemple, dans le cas de soumissions de formulaires dynamiques utilisant AJAX), supprimez à nouveau la classe .was-validated du <form> après la soumission.,
• En tant que solution de secours, les classes.is-invalidEt.is-valid peuvent être utilisées à la place des pseudo-classes pour la validation côté serveur. Ils ne nécessitent pas de classe parent.was-validated.
• En Raison de contraintes dans le fonctionnement de CSS, nous ne pouvons pas (à l’heure actuelle) appliquer des styles à un<label> qui précède un contrôle de formulaire dans le DOM sans L’aide de JavaScript personnalisé.
• tous les navigateurs modernes prennent en charge l’API de validation des contraintes, une série de méthodes JavaScript pour valider les contrôles de formulaire.,
• Les messages de Feedback peuvent utiliser les paramètres par défaut du navigateur (différents pour chaque navigateur et non modifiables via CSS) ou nos styles de feedback 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, les classes côté serveur facultatives et les valeurs par défaut du navigateur.,

styles personnalisés

pour les messages de validation de formulaire Bootstrap personnalisés, vous devrez ajouter l’attribut booléennovalidate à votre<form>. Cela désactive les infobulles de rétroaction par défaut du navigateur, mais permet toujours d’accéder aux API de validation de formulaire en JavaScript. Essayez de soumettre le formulaire ci-dessous; notre JavaScript interceptera le bouton Soumettre et vous transmettra les commentaires. Lorsque vous tentez de soumettre ,vous verrez les styles:invalid Et:valid appliqués à vos contrôles de formulaire.,

styles de commentaires personnalisés appliquez des couleurs, des bordures, des styles de focus et des icônes d’arrière-plan personnalisés pour mieux communiquer les commentaires. Les icônes d’arrière-plan pour <select>s ne sont disponibles qu’avec .custom-select, et non avec .form-control.

paramètres par défaut du navigateur

Vous n’êtes pas intéressé par les messages de rétroaction de validation personnalisés ou par l’écriture de JavaScript pour modifier les comportements des formulaires? Tout va 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 d’exploitation, vous verrez un style de commentaires légèrement différent.,

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

Côté Serveur

Nous recommandons d’utiliser la validation côté client, mais si vous avez besoin d’une validation 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

Les styles de Validation sont disponibles pour les contrôles et Composants de formulaire suivants:

infobulles

Si votre disposition de formulaire le permet, vous pouvez échanger les classes.{valid|invalid}-feedback contre les classes.{valid|invalid}-tooltip pour afficher les commentaires de validation dans une info-bulle stylisée. Assurez-vous d’avoir un parent avec position: relative pour le positionnement de l’info-bulle. Dans l’exemple ci-dessous, notre colonne classes ont déjà, mais votre projet peut nécessiter une configuration alternative.,

Personnalisation

états de Validation peuvent être personnalisés par le biais de Sass avec la balise $form-validation-states carte. Située dans notre fichier_variables.scss, cette carte Sass est bouclée pour générer les états de validation par défautvalid/invalid. Inclus est une carte imbriquée pour personnaliser la couleur et l’icône de chaque État. Bien qu’aucun autre État ne soit pris en charge par les navigateurs, ceux qui utilisent des styles personnalisés peuvent facilement ajouter des commentaires de formulaire plus complexes.,

veuillez noter que nous ne recommandons pas de personnaliser ces valeurs sans modifier également leform-validation-state mixin.

formulaires personnalisés

pour encore plus de personnalisation et de cohérence entre les navigateurs, utilisez nos éléments de formulaire entièrement personnalisés pour remplacer les paramètres par défaut du navigateur. Ils sont construits au-dessus du balisage sémantique et accessible, de sorte qu’ils sont des remplacements solides pour tout contrôle de formulaire par défaut.,

Cases à cocher et les radios

Chaque case de radio et de <input> et <label> le couplage est enveloppé dans un <div> pour créer notre contrôle personnalisé. Structurellement, c’est la même approche que notre .form-checkpar défaut.

nous utilisons le sélecteur frère (~) pour tous nos états <input>—comme :checked—pour styliser correctement notre indicateur de formulaire personnalisé., Lorsqu’il 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 cacher la valeur par défaut <input> par opacity et utiliser la balise .custom-control-label pour construire un nouveau formulaire personnalisé indicateur à sa place avec des ::before et ::after. Malheureusement, nous ne pouvons pas en construire un personnalisé à partir du <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 base64 de Open Iconic. Cela nous fournit le meilleur contrôle pour le style et le positionnement sur les navigateurs et les appareils.

cases à cocher

Les cases à cocher personnalisées peuvent également utiliser la pseudo-classe:indeterminate lorsqu’elles sont définies manuellement via JavaScript (il n’y a pas d’attribut HTML Disponible pour la spécifier).,

Si vous utilisez jQuery, quelque chose comme cela devrait suffire:

$('.your-checkbox').prop('indeterminate', true)

Radios

Inline

Désactivé

Personnaliser les cases à cocher et les radios peuvent également être désactivé., Ajoutez l’attribut booléendisabled au<input> et l’indicateur personnalisé et la description de l’étiquette seront automatiquement stylisés.

Passe

Un switch a le balisage d’une coutume case, mais utilise la balise .custom-switch de classe pour rendre un interrupteur à bascule. Les commutateurs prennent également en charge l’attribut disabled.,

Sélectionnez menu

Personnalisé <select> menus besoin seulement d’une classe personnalisée, .custom-select pour déclencher les styles personnalisés. Les styles personnalisés sont limités à l’apparence initiale de <select>et ne peuvent pas modifier les <option>en raison des limitations du navigateur.

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

Le multiple l’attribut est également pris en charge:

Comme le size attribut:

Gamme

Créer un custom <input type="range"> contrôles avec des .custom-range. La piste (l’arrière-plan) et le pouce (La valeur) sont tous deux stylisés pour apparaître de la même manière dans tous les navigateurs. Comme seuls IE et Firefox prennent en charge le « remplissage” de leur piste à partir de la gauche ou de la droite du pouce pour indiquer visuellement les progrès, nous ne le prenons actuellement pas en charge.,

<label for="customRange1">Example range</label><input type="range" class="custom-range">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">

By default, range inputs « snap” to integer values., Pour changer cela, vous pouvez spécifier une valeurstep. Dans l’exemple ci-dessous, nous doublons le nombre d’étapes en utilisant step="0.5".

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

navigateur de Fichier

l’entrée de fichier est la plus noueuse du groupe et nécessite du JavaScript supplémentaire si vous souhaitez les connecter avec le fichier de sélection fonctionnel Choose et le texte du nom de fichier sélectionné.

Nous cacher le fichier par défaut <input> par opacity et au lieu de style de la balise <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 entourer le contenu.,

traduire ou personnaliser les chaînes avec SCSS

La pseudo-classe:lang() est utilisée pour permettre la traduction du texte « Parcourir” dans d’autres langues. Remplacez ou ajoutez des entrées à la variable $custom-file-text Sass 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 espagnole (le code de langue de l’espagnol est es):

$custom-file-text: ( en: "Browse", es: "Elegir");

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

vous devrez définir correctement la langue de votre document (ou sous-arbre de celui-ci) pour que le texte correct soit affiché., Cela peut être fait en utilisant l’attributlang sur l’élément<html> ou l’en-tête HTTPContent-Language, entre autres méthodes.

traduire ou personnaliser les chaînes avec HTML

Bootstrap fournit également un moyen de traduire le texte « parcourir” en HTML avec l’attributdata-browse qui peut être ajouté à l’étiquette d’entrée personnalisée (exemple en néerlandais):