Les formulaires de base Bootstrap

Les formulaires de base Bootstrap

  1. Objectifs

    • Connaitre les formulaires de base en Bootstrap 4
    • Etre capable de travailler avec les formulaires de base en Bootstrap 4






  2. Présentation

    • Formulaire de mise en forme Bootstrap fournit les types de mise en page suivants:
      • Formulaire vertical (par défaut)
      • Formulaire en ligne
      • Formulaire horizontal
  3. ِCréer un formulaire de base

    • La structure de base des formulaires est fournie avec Bootstrap, les contrôles de formulaire individuels reçoivent automatiquement un style global.
    • Pour créer un formulaire de base, procédez comme suit:
      1. Ajoutez un formulaire de rôle à l’élément parent <form>.
      2. Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group. Ceci est nécessaire pour un espacement optimal.Dans le cas contraire vous pouvez utiliser la classe: <fieldset>
      3. Ajoutez une classe de .form-control à tous les éléments textuels <input>, <textarea> et <select>.
      <form role="form">
          <div class="form-group">
             <label for="name">Nom</label>
             <input type="text" class="form-control" id="name" placeholder="Saisir votre nom">
             <label for="name">Prénom</label>
             <input type="text" class="form-control" id="rename" placeholder="Saisir votre prénom">
          </div>
          <div class="form-group">
             <label for="inputfile">Télécharger un fichier</label>
             <input type="file" id="inputfile">
             <p class="help-block">Exemple de texte d'aide .</p>
          </div>
          <div class="checkbox"> <label>
             <input type="checkbox">Le CheckBox</label>
          </div>
          <button type="submit" class="btn btn-default">Soumettre</button>
       </form>
    • Ce qui nous donne la figure suivante.
  4. ِTaille des formulaires Bootstrap

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



Abonnez vous à notre chaîne YouTube gratuitement