Derniers tutoriels de développement web
 

Bootstrap Forms

❮ Précédent Suivant Chapitre ❯

Bootstrap's des paramètres par défaut

Les contrôles de formulaire reçoivent automatiquement un peu de style global avec Bootstrap :

Tous les textes <input> , <textarea> , et <select> éléments avec la classe .form-control ont une largeur de 100%.

Bootstrap la présentation des formulaires

Bootstrap fournit trois types de présentation des formulaires:

  • forme verticale (ce qui est par défaut)
  • forme horizontale
  • forme Inline

Règles standard pour tous les trois mises en forme:

  • Toujours utiliser <form role="form"> (aide à améliorer l' accessibilité pour les personnes utilisant des lecteurs d'écran)
  • Enveloppez les étiquettes et les contrôles de formulaire dans <div class="form-group"> (nécessaire pour l' espacement optimal)
  • Ajouter classe .form-control à tous textuelle <input> , <textarea> , et <select> éléments

Bootstrap Vertical Form (par défaut)

L'exemple suivant crée une forme verticale avec deux champs de saisie, une case à cocher, et un bouton de soumission:

Exemple

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Essayez - le vous - même »

Bootstrap Form Inline

Dans une forme en ligne, tous les éléments sont en ligne, aligné à gauche, et les étiquettes sont à côté.

Note: Ceci ne concerne que les formes dans les viewports qui sont au moins 768px de large!

Règle supplémentaire pour obtenir un formulaire en ligne:

  • Ajouter classe .form-inline à la <form> élément

L'exemple suivant crée un formulaire en ligne avec deux champs de saisie, une case à cocher, et un bouton submit:

Exemple

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Essayez - le vous - même »

Astuce: Si vous ne pas inclure une étiquette pour chaque entrée, les lecteurs d'écran auront du mal avec vos formes. Vous pouvez masquer les étiquettes pour tous les appareils, à l' exception des lecteurs d'écran, en utilisant le .sr-only classe:

Exemple

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Essayez - le vous - même »

Bootstrap Formulaire Horizontal

Une forme horizontale se distingue des autres formes à la fois dans la quantité de balisage, et dans la présentation du formulaire.

Des règles supplémentaires pour une forme horizontale:

  • Ajouter classe .form-horizontal à la <form> élément
  • Ajouter classe .control-label à tous les <label> éléments

Astuce: Utilisez Bootstrap's classes des grilles prédéfinies pour aligner les étiquettes et les groupes de contrôles de formulaire dans une disposition horizontale.

L'exemple suivant crée une forme horizontale avec deux champs de saisie, une case à cocher, et un bouton submit:

Exemple

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Essayez - le vous - même »

❮ Précédent Suivant Chapitre ❯