Formes

Aperçu

Les contrôles de formulaire de Bootstrap étendent 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 sur tous les navigateurs et appareils.

Assurez-vous d'utiliser un typeattribut approprié sur toutes les entrées (par exemple, emailpour l'adresse e-mail ou numberpour les informations numériques) pour tirer parti des nouveaux contrôles d'entrée comme la vérification de l'e-mail, la sélection du numéro, etc.

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

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Texte du formulaire

Le texte de formulaire au niveau du bloc ou au niveau de la ligne peut être créé à l'aide de .form-text.

Le texte du formulaire sous les entrées peut être stylisé avec .form-text. Si un élément de niveau bloc est utilisé, une marge supérieure est ajoutée pour faciliter l'espacement des entrées ci-dessus.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Le texte en ligne peut utiliser n'importe quel élément HTML en ligne typique (que ce soit un <span>, <small>ou autre chose) avec rien de plus que la .form-textclasse.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Formulaires désactivés

Ajoutez l' disabledattribut booléen sur une entrée pour empêcher les interactions de l'utilisateur et la rendre plus claire.

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

Ajoutez l' disabledattribut à a <fieldset>pour désactiver tous les contrôles qu'il contient. Les navigateurs traitent tous les contrôles de formulaire natifs ( éléments <input>, <select>et <button>) à l'intérieur d'un <fieldset disabled>comme désactivés, empêchant les interactions clavier et souris sur ceux-ci.

Cependant, si votre formulaire comprend également des éléments de type bouton personnalisés tels que <a class="btn btn-*">...</a>, ceux-ci ne recevront qu'un style de pointer-events: none, ce qui signifie qu'ils peuvent toujours être mis au point et utilisables à l'aide du clavier. Dans ce cas, vous devez modifier manuellement ces contrôles en ajoutant tabindex="-1"pour les empêcher de recevoir le focus et aria-disabled="disabled"pour signaler leur état aux technologies d'assistance.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Accessibilité

Assurez-vous que tous les contrôles de formulaire ont un nom accessible approprié afin que leur objectif puisse être transmis aux utilisateurs de technologies d'assistance. Le moyen le plus simple d'y parvenir est d'utiliser un <label>élément ou, dans le cas des boutons, d'inclure un texte suffisamment descriptif dans le cadre du <button>...</button>contenu.

Pour les situations où il n'est pas possible d'inclure un contenu textuel visible <label>ou approprié, il existe d'autres moyens de toujours fournir un nom accessible, tels que :

• <label>éléments masqués à l'aide de la .visually-hiddenclasse
• Pointant vers un élément existant qui peut agir comme une étiquette en utilisantaria-labelledby
• Fournir un titleattribut
• Définition explicite du nom accessible sur un élément à l'aide dearia-label

Si aucun de ces éléments n'est présent, les technologies d'assistance peuvent recourir à l'utilisation de l' placeholderattribut comme solution de secours pour le nom accessible sur les éléments <input>et <textarea>. Les exemples de cette section fournissent quelques suggestions d'approches spécifiques à chaque cas.

Bien que l'utilisation de contenu visuellement masqué ( .visually-hidden, aria-label, et même placeholderdu contenu, qui disparaît une fois qu'un champ de formulaire a du contenu) profitera aux utilisateurs de technologies d'assistance, un manque de texte d'étiquette visible peut toujours être problématique pour certains utilisateurs. Une certaine forme d'étiquette visible est généralement la meilleure approche, à la fois pour l'accessibilité et la convivialité.

Toupet

De nombreuses variables de formulaire sont définies à un niveau général pour être réutilisées et étendues par des composants de formulaire individuels. Vous les verrez le plus souvent sous forme de variables $btn-input-*et .$input-*

variables

$btn-input-*les variables sont des variables globales partagées entre nos boutons et nos composants de formulaire. Vous les trouverez fréquemment réaffectés en tant que valeurs à d'autres variables spécifiques aux composants.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;