Aperçu

Les contrôles de formulaire de Bootstrap étendent nos styles de formulaire reboot avec des classes. Utilisez ces classes pour activer leurs affichages personnalisés afin d'obtenir un rendu plus cohérent sur tous les navigateurs et appareils.

Assurez-vous d'utiliser un attribut type approprié sur toutes les entrées (par exemple, email pour l'adresse e-mail ou number pour les informations numériques) pour prendre profitez des nouveaux contrôles de saisie 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 obtenir de la documentation sur les cours requis, la mise en page 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 de 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 le < code>.form-text classe.

<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'attribut booléen disabled 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'attribut disabled à un <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>) dans un <fieldset disabled> comme désactivé, empêchant à la fois les interactions clavier et souris.

Toutefois, si votre formulaire comprend également des éléments personnalisés de type bouton tels que <a class="btn btn-*">...</a>, ceux-ci ne reçoivent qu'un style pointer-events : none, ce qui signifie qu'ils sont toujours focalisables 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 élément <label> ou, dans le cas des boutons, d'inclure un texte suffisamment descriptif dans le cadre de l'élément <button>... </bouton> contenu.

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

• <label> éléments masqués à l'aide de la classe .visually-hidden
• Pointer vers un élément existant pouvant servir d'étiquette à l'aide de aria-labelledby
• Fournir un attribut title
• Définir explicitement le nom accessible sur un élément à l'aide de aria-label

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

Tout en utilisant du contenu visuellement masqué (.visually-hidden, aria-label, et même du contenu placeholder, 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é.

Sass

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 la forme de variables $btn-input-* et $input-*.

Variables

$btn-input-* sont des variables globales partagées entre nos boutons et nos composants de formulaire. Vous les trouverez fréquemment réaffectées 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;