rudless.

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%.