Principe. Formulaire verticaux : Structure générale d'un formulaire : Regroupement des contrôles. Div pour 1 élément du formulaire Label de l'élément

Transcription

1 Les formulaires

2 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

3 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=" " 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

4 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 </label> <input type=" " 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

5 Formulaire vertical 602_formulaireVertical.html 112

6 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 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

7 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 </label> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <input type=" " 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>

8 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

9 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

10 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

11 Désactiver des éléments de formulaire Utilisation de l'attribut : disabled Exemple : <input type=" " class="form-control" control id="mail" placeholder="adresse " disabled> 118 Pour désactiver un ensemble d'éléments, positionner l'attribut au niveau d'une div ou fieldset

12 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" " " " "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", " " et "textarea" 119

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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 à

25 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

26 Exercice Exo 05 Créer le formulaire de création d'une vidéo : 133