Les formulaires
Principe La librairie Bootstrap est fournie avec deux types de formulaires : Formulaire horizontaux : Les éléments sont disposés sur la même ligne Par exemple : barre de recherche h dans une barre de menus Formulaire verticaux : Formulaire classique vertical Structure générale d'un formulaire : <form> <fieldset> <legend> <div> <label> <input> Le formulaire Regroupement des contrôles Légende du formulaire Div pour 1 élément du formulaire Label de l'élément Elément du formulaire </fieldset> </form> 109
Formulaire horizontal Balise <form> classe.form-inline : <div class="container"> <form role="form" class="form-inline"> <fieldset> <legend>accédez à votre compte:</legend> 601_formulaireLigne.html <div class="form-group"> <input type="email" class="form-control" > <div class="form-group"> <input type="password" class="form-control" > <button type="submit" class="btn btn-primary">connexion</button> </fieldset> </form> 110
Formulaire vertical Balise <form> classe.form-vertical : 602_formulaireVertical.html <div class="container"> <form role="form" class="form-vertical"> <fieldset> <legend>accédez à votre compte:</legend> <div class="form-group"> <label for="mail">adresse email</label> <input type="email" class="form-control" id="mail" placeholder="votre mail"> <div class="form-group"> <label for="psw">mot de passe</label> <input type="password" class="form-control" id="psw" placeholder="votre mot de passe"> <button type="submit" class="btn btn-primary">connexion</button> </fieldset> </form> 111
Formulaire vertical 602_formulaireVertical.html 112
Gérer la taille des éléments Bootstrap 3 génère des éléments de formulaire optimisés pour les supports mobiles. Ils occupent donc toute la largeur de l écran. Pour optimiser i pour chaque type de terminal,on utilise le concept de grille Terminal Classe Nombre de colonnes Smartphone.col-xs-12 12 colonnes, soit toute la largeur de lécran. l écran Tablette.col-sm-6 6 colonnes, soit la moitié de l écran. Ordinateur de bureau.col-md-4 4 colonnes, soit le tiers de l écran. 113
114 <div class="container"> <form role="form" class="form-vertical"> <fieldset> <legend>accédez à votre compte:</legend> Gérer la taille des éléments - Exemple 603_formulaireGrille.html <div class="form-group"> <label for="mail">adresse email</label> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <input type="email" class="form-control" id="mail" placeholder="votre mail"> <div class="form-group"> <label for="psw">mot de passe</label> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <input type="password" class="form-control" id="psw" placeholder="votre mot de passe"> <button type="submit" class="btn btn-primary">connexion</button> </fieldset> </form>
Gérer la taille des éléments - Exemple 603_formulaireGrille.html Sur un ordinateur de bureau, les zones de saisie occupent bien un tiers de l écran. La classe.col-md-4 est alors prise en compte Sur une tablette, les éléments du formulaire ont une largeur égale à la moitié de la grille. Ici, c est cest la classe.col-sm-6 qui s applique. Lorsque nous visionnons ce même formulaire sur un smartphone, les zones de texte occupent toute la grille. Le navigateur utilise la classe.col-xs-12 12. 115
Modifier la hauteur des éléments Il est possible de créer des éléments de formulaire plus grands ou plus petits en utilisant respectivement les classes suivantes :.input-lg et.input-sm. Caractéristiques ti : Classe Height Padding Font-size Line-height.input-sm 30px 5px 10px 12px 1.5 Valeur par défaut 34px 6px 12px 14px 1.43.input-lg 45px 10px 16px 18px 1.33 116
Modifier la hauteur des éléments - Exemple 604_formulaireHauteur.html <div class="container"> <input type="text" text class="form-control control input-sm" placeholder="petite zone de saisie"> <input type="text" class="form-control" placeholder="zone de saisie standard"> <input type="text" class="form-control input-lg" placeholder="grande zone de saisie"> 117
Désactiver des éléments de formulaire Utilisation de l'attribut : disabled Exemple : <input type="email" email class="form-control" control id="mail" placeholder="adresse email" disabled> 118 Pour désactiver un ensemble d'éléments, positionner l'attribut au niveau d'une div ou fieldset
Autres éléments Zones de saisie (input) Bootstrap 3 supporte les types définis par le HTML5 suivants : "text" "password" "datetime" "datetime-local" "date" "month" "time"" "week" "number" " "email" "url" "search" "tel" "color" "textarea" Néanmoins, la plupart de ces éléments ne sont pas pris en charge par les navigateurs récents. Conseil : N utiliser que les types suivants : "text", "password", "email" et "textarea" 119
Autres éléments Cases à cocher / zones d'options Bootstrap 3 propose un jeu stylisé de cases à cocher (checkbox) et de zones d options (radio) Balises <label> et <input> L'attribut t checked permet tla coche par défaut Syntaxe : <label> <input type="radio / checkbox" > Libellé Option </label> L'attribut checked permet la coche par défaut Les classes.checkbox-inline et.radio-inline permettent de faire apparaître les éléments sur une seule et même ligne à partir d'un conteneur (div) 120
Autres éléments Cases à cocher / zones d'options 605_RadioCheckBox.html html <div class="checkbox-inline"> <label> <input type="checkbox" name="checkbox" id="checkbox" value=""> Checkbox 1 </label> <div class="checkbox-inline"> <label> <input type="checkbox" name="checkbox" id="checkbox" value=""> Checkbox 2 </label> <br/> <div class="radio-inline"> <label> <input type="radio" name="radiolist" id="radio1" value="1" checked> Option 1 (par défaut) </label> <div class="radio-inline"> <label> <input type="radio" name="radiolist" id="radio2" value="2"> Option 2 </label> 121
Autres éléments Listes déroulantes - Exemple <div class="form-group"> <label for="selectlist">liste déroulante :</label> <div class="row"> <div class="col-sm-6"> <select name="selectlist" id="selectlist" class="form-control"> <option value="1">choix 1</option> <option value="1">choix 2</option> <option value="1">choix 3</option> </select> Grâce à la classe.col-sm-6, la largeur de tout élément sera égale à la moitié de l écran sur les tablettes et les ordinateurs de bureau La classse form-control afin d intégrer la mise en forme Bootstrap 3 122
Contrôles groupés 606_CtrlGroupesChaine.html html Bootstrap 3 permet de grouper dans un seul élément, plusieurs éléments de formulaire Classes :.input-group,.input-group-btn et.input-group-addon Il est déconseillé d utiliser les contrôles groupés avec une liste déroulante select Exemple : Picto avant une zone de texte <div class="container"> <div class="input-group"> <span class="input-group-addon"> addon"> <i class="fa fa-barcode fa-lg"></i></span> <input type="text" class="form-control" placeholder="numéro du code-barres"> 123
Contrôles groupés Exemple : Caractères après une zone de texte 607_CtrlGroupesChaine.html html <div class="container"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> 124
Contrôles groupés Exemple : Caractères avant et après une zone de texte 608_CtrlGroupesChaine.html html <div class="container"> <p>complétez la phrase en conjugant le verbe "apprendre" au présent :</p> <div class="input-group"> <span class="input-group-addon">j </span> <input type="text" class="form-control"> <span class="input-group-addon">bootstrap en m amusant</span> 125
Contrôles groupés avec bouton Exemple : Boutons après une zone de texte 609_CtrlGroupesBouton.html <div class="container"> <div class="input-group"> <input type="text" class="form-control" placeholder="votre recherche"> <span class="input-group-btn"> <button class="btn btn-info">rechercher</button> </span> 126
Contrôles groupés avec checkbox Exemple : Case à cocher avant une zone de texte 610_CtrlGroupesCheck.html html <div class="container"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" value=""> </span> <input type="text" class="form-control" placeholder="cochez la case avant..."> 127
Exemple : zone de texte avec menu Contrôles groupés avec menu déroulant 611_CtrlGroupesMenu.html <div class="input-group"> <input type="text" class="form-control" placeholder="zone de saisie"> <div class="input-group-btn"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">sélectionnez <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">catégorie 1</a></li> <li><a href="#">catégorie 2</a></li> <li><a href="#">catégorie 3</a></li> <li class="divider"></li> <li><a href="#">catégorie 4</a></li> </ul> 128
Communication avec l'utilisateur Bootstrap permet l'ajout de message d'aide, permettant d'accompagner l'utilisateur Classe.help-block Classes contextuelles permettant d'afficher des messages pré formatés : Classe Couleur Contexte.has-success Vert Les données sont validées..has-error Orange Les données sont validées mais un contrôle est nécessaire..has-warning Rouge Information ou format non valide. 129
Communication avec l'utilisateur Exemple <div class="container"> <div class="form-group has-success" id="form-group-id"> <label for="psw">votre identifiant</label> <input type="text" class="form-control" id="psw" required placeholder="identifiant"> <span class="help-block" id="valid-msg"> <strong>identifiant tifi t disponible</strong></span> ibl / 612_Message.html 130
Communication avec l'utilisateur Exemple complet avec JQuery 613_Message_jvs.html Nb de caractères inférieur à 6 Nb de caractères de 6 à 10 Nb de caractères supérieur à 10 131
Input type file Les input de type file ne sont pas nativement customiser dans Bootstrap On peut utiliser des bibliothèques complémentaires pour le faire : Par exemple : bootstrap.file-input.js Qui permet via JQuery de créer son proposer visuel Nécessité d'instancier le bouton via Jquery : $(document).ready(function () { $('input[type=file]').bootstrapfileinput(); $('.file-inputs').bootstrapfileinput(); }); <div class="form-group"> <input id="input-1" type="file" class="file" title="rechercher > 132
Exercice Exo 05 Créer le formulaire de création d'une vidéo : 133