Auteur Auteur

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

    5. Par défaut les contrôles s’alignent horizontalement. J’aimerais que les contrôles occupent toute la largeur disponible. Il faut utiliser la classe form-control pour obtenir cet effet

    • Tous les éléments textuels <input>, <textarea> et <select>, avec la classe .form-control ont une largeur de 100%.
    Formation.html 
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
    </head>
    <body>
    
    
 Légende 
 Text : 
 Textarea : 
 Select :
 <select class="form-control">
 <option> Option 1 </option>
 <option> Option 2 </option>
 <option> Option 3 </option>
 </select>
 <button> Envoyer </button>
 </form>

                     
   </body>
</html>

    Résultat

    Légende
    Text :
    Textarea :
    Select :

Précédent
Suivant