devstory

Le Tutoriel de Bootstrap Form

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- Vue d'ensemble Bootstrap Form

Pour Layout (Mise en page), Bootstrap a trois manières de mise en page des éléments sur l'interface.
  1. Utilisez la classe .form-group pour disposer les éléments verticalement.
  2. Utilisez la classe  .form-inline pour disposer les éléments horizontalement.
  3. Placez les éléments sur la Grid (Grille), puis les éléments seront affichés selon les règles du système de grille (Grid System) du Bootstrap.
.form-group
.form-inline
Grid

2- Forme verticale (.form-group)

Pour disposer les éléments verticalement, vous devez les envelopper (wrap) dans une étiquette <div class="form-group">. Ces éléments auront un élément parent remplissant (fill) la largeur.
Vertical Form (.form-group)

<form>

   <!-- Vertical -->
   <div class="form-group">
      <label for="myEmail">Email</label>
      <input type="email" id = "myEmail" class="form-control" placeholder="Email">
      <label for="myPassword">Password</label>
      <input type="password" id="myPassword" class="form-control" placeholder="Password">
      <button type="submit" class="btn btn-primary">Submit</button>
   </div>

</form>
Voir l'exemple complet :
form-group-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h2>.form-group (Vertical)</h2>

         <form>
            <!-- Vertical -->
            <div class="form-group">
               <label for="myEmail">Email</label>
               <input type="email" id = "myEmail" class="form-control" placeholder="Email">
               <label for="myPassword">Password</label>
               <input type="password" id="myPassword" class="form-control" placeholder="Password">
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
         </form>
         
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

3- Forme horizontale (.form-inline) **

Pour disposer les éléments à afficher sur une ligne, vous pouvez les envelopper (warp) dans la balise <div class="form-inline">. Cependant, ils peuvent être trouvés sur des lignes différentes si l'élément parent a une largeur trop petite.
Horizontal Form (.form-inline)

<form>
   <!-- Horizontal -->
   <div class="form-inline">
      <label for="myEmail">Email</label>
      <input type="email" id="myEmail" class="form-control" placeholder="Email">
      <label for="myPassword">Password</label>
      <input type="password" id="myPassword" class="form-control" placeholder="Password">
      <button type="submit" class="btn btn-primary">Submit</button>
   </div>
</form>

4- Form Grid

Le système de grille (Grid System) est un outil puissant pour mettre en page des éléments sur une interface et vous pouvez l'utiliser pour l'appliquer à Form.
Grid
Ci-dessous un exemple utilise le système de grille pour disposer des éléments sur l'interface. Remarque : les classes .row et .form-row fonctionnent les unes avec les autres, mais vous devez utiliser .form-row pour mettre en relation le contexte.
Grid example

<form>
   <div class="row">
      <div class="col-6 col-sm-4">
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-4">
      </div>
      <div class="col-6 col-sm-8">
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-8">
      </div>
   </div>
</form>
Grid + .form-group
Exemple de combinaison la classe Grid et la classe .form-group :
Grid + .form-group example

<form>
   <div class="form-row">
      <div class="col-6 col-sm-4 form-group">
         <label>Product Code</label>
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-4">
      </div>
      <div class="col-6 col-sm-8 form-group">
         <label>Product Name</label>
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-8">
      </div>
   </div>
</form>

5- Exemple de Form compliqué

Combinez des classes .form-group, .form-row, .form-inline,.. pour obtenir un Form avec la mise en page complexe.
complex-form-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-2">Complex Form</h4>
         <form>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="myEmail">Email</label>
                  <input type="email" class="form-control"
                     id="myEmail" placeholder="Email">
               </div>
               <div class="form-group col-sm-6">
                  <label for="myPassword">Password</label>
                  <input type="password" class="form-control"
                     id="myPassword" placeholder="Password">
               </div>
            </div>
            <div class="form-group">
               <label for="inputAddress">Address</label>
               <input type="text" class="form-control"
                  id="myAddress" placeholder="1234 Main St">
            </div>
            <div class="form-group">
               <label for="inputAddress2">Address 2</label>
               <input type="text" class="form-control"
                  id="myAddress2" placeholder="Apartment, studio, or floor">
            </div>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="myCity">City</label>
                  <input type="text" class="form-control" id="myCity">
               </div>
               <div class="form-group col-sm-4">
                  <label for="myState">State</label>
                  <select id="myState" class="form-control">
                     <option selected>Choose...</option>
                     <option>...</option>
                  </select>
               </div>
               <div class="form-group col-sm-2">
                  <label for="myZip">Zip</label>
                  <input type="text" class="form-control" id="myZip">
               </div>
            </div>
            <div class="form-group">
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="myCheck">
                  <label class="form-check-label" for="myCheck">
                  Check me out
                  </label>
               </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

6- HTML Input Types

L'élément <input> est l'un des composants impliqués dans une Form. Avant HTML5, il y a 9 classes <input> telles que button, checkbox, file, hidden, image, password, radio, reset, submit, text. En octobre 2014, HTML5 est né. Il introduit 12 autres types de <input> tels que color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Tous ces types sont pris en charge par Bootstrap et les classes pré-créées à appliquer :
Bootstrap ClassTypeDescription
.btnbuttonDéfinit un bouton cliquable (clickable)
resetDéfinit un bouton reset (Reset button) pour réinitialiser (reset) les valeurs de Form
submitDéfinit le bouton  submit.
.form-check-input
.form-check-label
checkboxDéfinit un checkbox.
radioDéfinit un radio button.
.form-controltext(Type par défaut). Définit un champ (field) pour saisir une ligne de texte.
passwordDéfinir un champ pour saisir le mot de passe.
https://www.w3schools.com/images/html5_badge20.pngemailDéfinir un champ pour saisir l'adresse de email.
https://www.w3schools.com/images/html5_badge20.pngsearchĐịnh nghĩa một trường văn bản để nhập vào từ khóa tìm kiếm.
https://www.w3schools.com/images/html5_badge20.pngurlDéfinir un champ pour saisir un  URL.
https://www.w3schools.com/images/html5_badge20.pngtelDéfinir un champ pour saisir le numéro de téléphone.
https://www.w3schools.com/images/html5_badge20.pngnumberDéfinir un champ pour saisir un numéro.
.form-controlhttps://www.w3schools.com/images/html5_badge20.pngcolorDéfinir un champ pour saisir un color picker (Un sélecteur de couleurs)
.form-control-filefileDéfinir un champ pour afficher le fichier sélectionné et cliquez sur le bouton "Browse" pour sélectionner le fichier.

hiddenDéfinir un champ caché.
imageDéfinir une image comme un bouton submit.
 .form-control-rangehttps://www.w3schools.com/images/html5_badge20.pngrangeDéfinir un  control pour sélectionner une valeur dans une plage (range) (Comme slider)
.form-controlhttps://www.w3schools.com/images/html5_badge20.pngdateDéfinir un  control pour sélectionner la date, le mois (année, mois, date sans tenir compte du temps)
https://www.w3schools.com/images/html5_badge20.pngtimeDéfinir un  control pour sélectionner l'heure (à l'exclusion du fuseau horaire)
https://www.w3schools.com/images/html5_badge20.pngdatetime-localDéfinir un  control pour sélectionner la date, le mois, l'année et l'heure (année, mois, date, heure, sans compter le fuseau horaire (timezone))
https://www.w3schools.com/images/html5_badge20.pngmonthDéfinir un  control pour sélectionner le mois et l'année.
https://www.w3schools.com/images/html5_badge20.pngweekDéfinir un  control pour sélectionner la semaine et l'année (sans compter le fuseau horaire).
button, reset, submit
Les éléments <input type="button|reset|submit"> sont en fait un button, Bootstrap utilise la classe .btn pour les utiliser. Vous pouvez voir des détails dans la leçon du Bootstrap Button.
text, password, email, search, url, tel, number
L'élément <input> avec les types ci-dessus est un champ (field) permettant à un utilisateur de saisir des données textuelles (textual). Bootstrap utilise la classe .form-control pour appliquer ces éléments.
text, password, email, search, url, tel, number

<form>
   <div class="form-group">
      <label for="myTel1">Input Tel (Default)</label>
      <input type="tel" id="myTel1">
   </div>
   <div class="form-group">
      <label for="myTel2">Bootstrap Input Tel</label>
      <input type="tel" id="myTel2" class="form-control">
   </div>
</form>
color
Bootstrap utilise la classe .form-control pour appliquer au <input type="color">. Mais il semble que cela ne fonctionne pas aussi bien que prévu (au moins jusqu'à la version 4.1).
Par exemple, ci-dessous deux éléments <input type="color">, un élément n'est pas appliqué à la classe .form-control, et un autre est appliqué à la classe .form-control :
Voici un exemple de solution pour remédier à ce problème :

input[type=color].form-control {
     height: 40px;
}
input-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         input[type=color].form-control {
         height: 40px;
         }
      </style>
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-5">Input type="color"</h4>
         <form>
            <div class="form-group">
               <label for="myColor1">Input Color (Default)</label>
               <input type="color" id="myColor1">
            </div>
            <div class="form-group">
               <label for="myColor2">Bootstrap Input Color (.form-control)</label>
               <input type="color" class="form-control input-sm" id="myColor2">
            </div>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
checkbox, radio
Pour Bootstrap un composant checkbox (ou radio) complet comprend deux éléments tels que <input> et <label> qui sont enveloppés (wrap) par <div class="form-check">. Bootstrap utilise la classe .form-check-input pour appliquer à <input>, et il utilise la classe .form-check-label pour appliquer à <label>.
Remarque : <label> doit être mis juste devant <input type="checkbox|radio">.
checkbox/radio

<form>
   <div class="form-group">
      <div class="form-check">
         <input type="radio" id="myRadio1" class="form-check-input">
         <label for="myRadio1">Bootstrap Input Radio</label>
      </div>
   </div>
   <div class="form-group">
      <div class="form-check">
         <input type="checkbox" id="myCheckbox2" class="form-check-input">
         <label for="myCheckbox2" class="form-check-label">Bootstrap Input Checkbox</label>
      </div>
   </div>
</form>
Appliquez l'attribut disabled au élément <input type="checkbox|radio"> pour le désactiver. Des utilisateurs ne seront pas capable de interagir avec cet élément et il désactive des éléments <label> dans même .form-check comme <input> mentionné ci-dessus.
disabled checkbox/radio

<form>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">
      Default checkbox
      </label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
      <label class="form-check-label" for="defaultCheck2"
      Disabled checkbox
      </label>
   </div>
</form>
range
<input type="range"> est introduit dans HTML à partir de la version 5. Il permet aux utilisateurs de sélectionner une valeur dans le champ. Bootstrap utilise la classe .form-control-range pour appliquer à cet élément.
Input range

<form>
   <div class="form-group">
      <label for="myRange1">Input Range (Default)</label>
      <input type="range" id="myRange1" min="5" max="10" step="0.01">
   </div>
   <div class="form-group">
      <label for="myRange2">Bootstrap Input Range</label>
      <input type="range" id="myRange2" min="5" max="10" step="0.01"
         class="form-control-range">
   </div>
</form>
file
Le <input type="file"> permet aux utilisateurs de sélectionner un fichier de téléchargement. Bootstrap utilise la classe .form-control-file pour appliquer à cet élément.
Form file

<form>
   <div class="form-group">
      <label for="myFile1">Input File (Default)</label>
      <input type="file" id="myFile1">
   </div>
   <div class="form-group">
      <label for="myFile2">Bootstrap Input File</label>
      <input type="file" class="form-control-file" id="myFile2">
   </div>
</form>
date, time, datetime-local, week, month
La version HTML5 utilise quelques types <input> qui permettent aux utilisateurs de saisir les informations relatives à la date, au mois et au temps. Bootstrap utilise la classe .form-control pour appliquer à ces types.
Input Date

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-5">Input type="date" (.form-control)</h4>
         <form>
            <div class="form-group">
               <label for="myDate1">Input Date (Default)</label>
               <input type="date" id="myDate1">
            </div>
            <div class="form-group">
               <label for="myDate2">Bootstrap Input Date</label>
               <input type="date" id="myDate2" class="form-control"
                  min="2018-01-01" max="2018-12-31" value="2018-05-18">
            </div>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
<input type="date">
Input Date

<div class="form-group">
   <label for="myDate2">Bootstrap Input Date</label>
   <input type="date" id="myDate2" class="form-control"
      min="2018-01-01" max="2018-12-31" value="2018-05-18">
</div>
<input type="datetime-local">
Input Datetime-Local

<div class="form-group">
   <label for="myDateTimeLocal2">Bootstrap Input DateTimeLocal</label>
   <input type="datetime-local" id="myDateTimeLocal2" class="form-control"
      min="2018-06-07T00:00" max="2018-06-14T00:00" value="2018-06-08T14:02">
</div>
<input type="time">
Input Time

<div class="form-group">
   <label for="myTime2">Bootstrap Input Time</label>
   <input id="myTime2" class="form-control"
      type="time"
      min="9:00" max="18:00" value="13:07">
</div>
<input type="week">
Input Week

<div class="form-group">
   <label for="myWeek2">Bootstrap Input Week</label>
   <input id="myWeek2" class="form-control"
      type="week"
      min="2018-W27" max="2018-W35" value="2018-W30">
</div>
<input type="month">
Input Month

<div class="form-group">
   <label for="myMonth2">Bootstrap Input Month</label>
   <input id="myMonth2" class="form-control"
      type="month"
      min="2018-03" value="2018-05">
</div>

7- Form Textarea, Select

L'élément <textarea> est utilisé pour créer une zone permettant aux utilisateurs de saisir des données textuelles sur une ou plusieurs lignes. Bootstrap applique la classe .form-control à cet élément.
Textarea

<form>
   <div class="form-group">
      <label for="myTextarea1">Textarea (Default)</label>
      <textarea id="myTextarea1" rows="3">Line1<br>Line2</textarea>
   </div>
   <div class="form-group">
      <label for="myTextarea2">Bootstrap Textarea</label>
      <textarea id="myTextarea2" class="form-control" rows="3"></textarea>
   </div>
</form>
L'élément <select> est utilisé pour créer une liste de choix et les utilisateurs peuvent en sélectionner un ou plusieurs.
Form Select

<form>
   <div class="form-group">
      <label for="mySelect1">Select (Single Select)</label>
      <select id="mySelect1" class="form-control">
         <option value="js">Javascript</option>
         <option value="css">Css</option>
         <option value="bootstrap" selected>Bootstrap</option>
      </select>
   </div>
   <div class="form-group">
      <label for="mySelect2">Select (Multi Select)</label>
      <select id="mySelect2" class="form-control" multiple>
         <option value="js">Javascript</option>
         <option value="css">Css</option>
         <option value="bootstrap" selected>Bootstrap</option>
      </select>
   </div>
</form>

8- Disabled Form

A la base, vous pouvez utiliser l'attribut disabled aux <input>,<texarea>,<select> afin de les désactiver. Pourtant, si vous voulez désactiver tous ces éléments, enveloppez- les (wrap) par <fieldset disabled>.
Remarque : L'attribut disabled de <fieldset> ne fonctionne probablement pas avec certains navigateurs, par exemple, IE, version 11 ou plus ancienne. Par conséquent, vous devez utiliser le Javascript personnalisé pour ces navigateurs.
fieldset disabled

<form>
   <fieldset disabled>
      <div class="form-group">
         <label for="myEmail">Email</label>
         <input type="email" id = "myEmail" class="form-control" placeholder="Email">
         <label for="myPassword">Password</label>
         <input type="password" id="myPassword" class="form-control" placeholder="Password">
         <button type="submit" class="btn btn-primary">Submit</button>
      </div>
   </fieldset>
</form>
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.