Contrôles de formulaire pris en charge en Bootstrap

Les Contrôles de formulaire pris en charge en Bootstrap

  1. Objectifs

    • Connaitre les contrôles de formulaire pris en charge en Bootstrap 4
    • Etre capable de travailler avec les contrôles de formulaire pris en charge en Bootstrap 4






  2. Présentation

    • Bootstrap supporte de manière native les contrôles de formulaire les plus courants, notamment <input>, <textarea>, <checkbox>, <radio>, et <select>.
  3. Les <input>

    • Le champ de texte de formulaire le plus courant est <input>. C’est ici que les utilisateurs saisiront la plupart des données de formulaire essentielles.
    • Bootstrap prend en charge tous les types <input> HTML5 natifs: texte, mot de passe, date-heure, date-heure locale, date, mois, heure, semaine, numéro, email, URL, recherche, tél et couleur.
    • Une déclaration de type correcte est nécessaire pour que les entrées soient entièrement stylisées.
    • <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="prenom" 
                    class="col-sm-2 control-label">Prénom</label>
                <div class="col-sm-8">
                   <input type="text" 
                    class="form-control" id="prenom" 
                    placeholder="Entrez votre prénom">
                 </div>
             </div>
      </form>
  4. Les <textarea>

    • Le <textarea> est utilisée lorsque vous avez besoin de plusieurs lignes d’entrée.
    • Modifiez l’attribut de lignes si nécessaire (moins de lignes = plus petite zone, plus de lignes = plus grande).
    • <form class="form-horizontal" role="form">
                  <div class="form-group">
                     <label for="prenom"
                     class="col-sm-2 control-label">TextArea</label>
                     <div class="col-sm-8">
                        <textarea class="form-control" rows="3"></textarea>
                     </div>
                  </div>
      </form>
  5. Les <checkbox>

    • Les cases à cocher sont parfaits lorsque vous souhaitez que les utilisateurs choisissent parmi une liste d’options prédéfinies.
    • Lors de la création d’un formulaire, utilisez la case à cocher si vous souhaitez que l’utilisateur sélectionne un nombre quelconque d’options dans une liste.
    • Utilisez les classes .checkbox-inline pour une série de cases à cocher afin que les contrôles apparaissent sur la même ligne.
    • <form class="form-horizontal" role="form">
            <label for="name">Exemple de case à cocher par défaut </label>
            <div class="checkbox"> <label>
               <input type="checkbox" value="">Option 1</label>
            </div>
            <div class="checkbox">
               <label><input type="checkbox" value="">Option 2</label>
            </div>
            <div class="checkbox"> <label>
                  <input type="checkbox" value="">Option 3</label>
            </div>
            <div class="checkbox"> <label>
                  <input type="checkbox" value="">Option 4</label>
            </div>
            <label for="name">Exemple de case à cocher en ligne </label>
               <div>
                  <label class="checkbox-inline">
                     <input type="checkbox" id="inlineCheckbox1" 
                     value="option1"> Option 1
                  </label>
                  <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox2" 
                        value="option2"> Option 2 
                  </label>
                  <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox1" 
                        value="option1"> Option 3
                  </label>
                  <label class="checkbox-inline">
                           <input type="checkbox" id="inlineCheckbox2" 
                           value="option2"> Option 4 
                  </label>
               </div>
      </form>
    • Ce qui nous donne:
  6. Les <radio>

    • Les boutons radio sont parfaits lorsque vous souhaitez que les utilisateurs choisissent parmi une liste d’options prédéfinies.
    • Utilisez la radio si vous souhaitez limiter l’utilisateur à une seule sélection.
    • Utilisez les classes .radio-inline pour une série de radios afin que les contrôles apparaissent sur la même ligne.
    • <form class="form-horizontal" role="form">
            <label for="name">Exemple de case à cocher par défaut </label>
            <div class="radio"> <label>
                  <input type="radio" name="optionsRadios" 
                  id="optionsRadios1" value="option1" checked> Option 1 </label>
            </div>
            <div class="radio">
                  <label>
                     <input type="radio" name="optionsRadios" 
                     id="optionsRadios2" value="option2" checked> Option 2 
                  </label>
            </div>
            <div class="radio">
                  <label>
                     <input type="radio" name="optionsRadios" 
                     id="optionsRadios3" value="option3" checked> Option 3 
                  </label>
               </div>
               <div class="radio">
                     <label>
                        <input type="radio" name="optionsRadios" 
                        id="optionsRadios4" value="option4" checked> Option 4 
                     </label>
               </div>
            <label for="name">Exemple de case à cocher en ligne </label>
               <div>
                  <label class="radio-inline" >
                     <input type="radio" name="optionsRadiosinline" 
                     value="option1" checked> Option 1
                  </label>
                  <label class="radio-inline" name="optionsRadiosinline">
                        <input type="radio" name="optionsRadiosinline" 
                        value="option2"> Option 2 
                  </label>
                  <label class="radio-inline" name="optionsRadiosinline">
                        <input type="radio" name="optionsRadiosinline" 
                        value="option3"> Option 3
                  </label>
                  <label class="radio-inline" name="optionsRadiosinline">
                           <input type="radio" name="optionsRadiosinline" 
                           value="option4"> Option 4 
                  </label>
               </div>
            </form>
    • Ce qui nous donne:
  7. Les <select>

    • Une sélection est utilisée lorsque vous souhaitez permettre à l’utilisateur de choisir parmi plusieurs options, mais par défaut, elle n’en autorise qu’une.
      • Utilisez <select> pour les options de liste avec lesquelles l’utilisateur est familiarisé, telles que les états ou les nombres.
      • Utilisez multiple = “multiple” pour permettre à l’utilisateur de sélectionner plusieurs options.
      <form role="form">
         <div class="form-group">
               <label for="name">Liste de sélection</label>
            <select class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
            </select>
            <label for="name">Liste de sélection multiple</label>
            <select multiple class="form-control">
               <option>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
            </select>
         </div>
      </form>
    • Ce qui nous donne:



Abonnez vous à notre chaîne YouTube gratuitement