Bootstrap - Formulaires

Dans ce chapitre, nous étudierons comment créer facilement des formulaires à l'aide de Bootstrap. Bootstrap facilite les choses avec le balisage HTML simple et les classes étendues pour différents styles de formulaires. Dans ce chapitre, nous étudierons comment créer facilement des formulaires à l'aide de Bootstrap.

Disposition du formulaire

Bootstrap vous fournit les types suivants de dispositions de formulaire:

• Forme verticale (par défaut)
• Formulaire en ligne
• Forme horizontale

Forme verticale ou de base

La structure de base du formulaire 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 -

• Ajoutez un formulaire de rôle à l'élément <form> parent.

• Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group . Ceci est nécessaire pour un espacement optimal.

• 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">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Formulaire en ligne

Pour créer un formulaire dans lequel tous les éléments sont en ligne, alignés à gauche et les étiquettes à côté, ajoutez la classe .form-inline à la balise <form>.

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

• Par défaut, les entrées, les sélections et les zones de texte ont une largeur de 100% dans Bootstrap. Vous devez définir une largeur sur les contrôles de formulaire lors de l'utilisation du formulaire en ligne.

• En utilisant la classe .sr-only, vous pouvez masquer les étiquettes des formulaires en ligne.

Forme horizontale

Les formes horizontales se distinguent des autres non seulement par le montant du balisage, mais également par la présentation du formulaire. Pour créer un formulaire qui utilise la disposition horizontale, procédez comme suit:

• Ajoutez une classe de .form-horizontal à l'élément <form> parent.

• Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group .

• Ajoutez une classe de .control-label aux étiquettes.

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

Contrôles de formulaire pris en charge

Bootstrap prend en charge nativement les contrôles de formulaire les plus courants, principalement la saisie, la zone de texte, la case à cocher, la radio et la sélection.

Contributions

Le champ de texte de formulaire le plus courant est le champ de saisie. C'est là que les utilisateurs entreront la plupart des données essentielles du formulaire. Bootstrap prend en charge tous les types d'entrée HTML5 natifs: texte, mot de passe, date / heure, date / heure locale, date, mois, heure, semaine, numéro, e-mail, URL, recherche, tel et couleur . Une déclaration de type correcte est requise pour que les entrées soient entièrement stylisées.

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Textarea

La zone de texte est utilisée lorsque vous avez besoin de plusieurs lignes d'entrée. Modifiez l' attribut de lignes si nécessaire (moins de lignes = boîte plus petite, plus de lignes = boîte plus grande).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Cases à cocher et boutons radio

Les cases à cocher et les boutons radio 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 la radio si vous souhaitez limiter l'utilisateur à une seule sélection.

• Utilisez la classe .checkbox-inline ou .radio-inline pour qu'une série de cases à cocher ou de radios pour que les contrôles apparaissent sur la même ligne.

L'exemple suivant montre les deux types (par défaut et en ligne) -

<label for = "name">Example of Default Checkbox and radio button </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 = "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">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </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 = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Sélectionne

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 familier, comme les états ou les nombres.

• Utilisez multiple = "multiple" pour permettre aux utilisateurs de sélectionner plus d'une option.

L'exemple suivant montre les deux types (select et multiple) -

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Contrôle statique

Utilisez la classe .form-control-static sur un <p>, lorsque vous devez placer du texte brut à côté d'une étiquette de formulaire dans un formulaire horizontal.

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

États de contrôle de formulaire

En plus de l'état : focus (c'est-à-dire, un utilisateur clique sur l'entrée ou les onglets dessus), Bootstrap propose un style pour les entrées désactivées et des classes pour la validation de formulaire.

Focus d'entrée

Lorsqu'une entrée reçoit : focus , le contour de l'entrée est supprimé et une boîte-ombre est appliquée.

Entrées désactivées

Si vous devez désactiver une entrée, en ajoutant simplement désactivé attribut non seulement désactiver; cela changera également le style et le curseur de la souris lorsque le curseur survolera l'élément.

Jeux de champs désactivés

Ajoutez l'attribut désactivé à un <fieldset> pour désactiver tous les contrôles dans le <fieldset> à la fois.

États de validation

Bootstrap inclut des styles de validation pour les erreurs, les avertissements et les messages de réussite. Pour l'utiliser, ajoutez simplement la classe appropriée ( .has-warning, .has-error ou .has-success ) à l'élément parent.

L'exemple suivant montre tous les états de contrôle de formulaire -

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control"> 
               <option>Disabled select</option>
            </select> 
         </div>
      </div> 
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

Dimensionnement du contrôle de formulaire

Vous pouvez définir la hauteur et la largeur des formulaires en utilisant respectivement des classes comme .input-lg et .col-lg- * . L'exemple suivant illustre ceci -

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

Texte d'aide

Les contrôles de formulaire Bootstrap peuvent avoir un texte d'aide au niveau du bloc qui accompagne les entrées. Pour ajouter un bloc de contenu pleine largeur, utilisez le bloc .help après <input>. L'exemple suivant illustre ceci -

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>