Formulaires Bootstrap 5

Formulaire empilé

Tous les éléments <input> et <textarea> dotés de la classe .form-control peuvent obtenir le style de formulaire correct :

Exemple

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">E-mail :</label>
    <input type="email" class="form-control" id="email" placeholder="Veuillez saisir l'adresse e-mail" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Mot de passe：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Entrez le mot de passe" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Se souvenir de moi
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

Essayez-le vous-même

En outre, veuillez noter que nous avons ajouté .form-label La classe pour assurer le bon remplissage.

Les cases à cocher ont des marqueurs différents. Ils sont définis .form-check L'élément de conteneur de la classe, et l'étiquette est définie .form-check-label L'élément de conteneur de la case à cocher et du bouton radio utilise .form-check-input。

Textarea

Exemple

<label for="comment">Commentaire：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Essayez-le vous-même

ligne de formulaire / grille (formulaire en ligne)

Si vous souhaitez que les éléments du formulaire s'affichent côte à côte, utilisez .row et .col：

Exemple

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Entrez l'adresse e-mail" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Entrez le mot de passe" name="pswd">
    </div>
  </div>
</form>

Essayez-le vous-même

Vous allez recevoir Grille Bootstrap Apprendre plus sur les colonnes et les lignes dans le chapitre.

Taille des contrôles de formulaire

Vous pouvez utiliser .form-control-lg ou .form-control-sm Modifier .form-control La taille des contrôles d'entrée :

Exemple

<input type="text" class="form-control form-control-lg" placeholder="Contrôle d'entrée de grande taille">
<input type="text" class="form-control" placeholder="Contrôle d'entrée ordinaire">
<input type="text" class="form-control form-control-sm" placeholder="Contrôle d'entrée de petite taille">

Essayez-le vous-même

Désactivé et lu seule

Utilisez les attributs disabled et/ou readonly pour désactiver les champs d'entrée :

Exemple

<input type="text" class="form-control" placeholder="Contrôle d'entrée ordinaire">
<input type="text" class="form-control" placeholder="Contrôle d'entrée désactivé" disabled>
<input type="text" class="form-control" placeholder="Contrôle d'entrée lu seule" readonly>

Essayez-le vous-même

Contrôle d'entrée texte pur

Utilisez .form-control-plaintext Utilisez la classe pour définir le style des champs d'entrée sans bordure, mais conservez une marge extérieure et intérieure appropriée :

Exemple

<input type="text" class="form-control-plaintext" placeholder="Contrôle d'entrée texte pur">
<input type="text" class="form-control" placeholder="Contrôle d'entrée ordinaire">

Essayez-le vous-même

Sélecteur de couleurs

Pour configurer correctement le style d'entrée pour type="color", utilisez .form-control-color Classe :

Exemple

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Essayez-le vous-même