Comment créer des formulaires avec le Framework BootStrap 3

Apprenez à créer des formulaires avec le framework BootStrap 3

Paramétrez la taille, la hauteur, et l’orientation horizontale ou verticale de votre formulaire.

Tout est dans la formation ci-dessous

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment créer des formulaires avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur développement facile.

Dans un nouveau cours consacrée au Framework BootStrap 3, dans lequel vous allez apprendre à créer des formulaires, donc vous connaissez les formulaires avec HTML 5, il y a pas mal de possibilités. Avec BootStrap 3 il suffit d’utiliser toujours des classe CSS associé à certains éléments pour créer vos formulaires un peu ergonomiques avec un visuel très sympa pour vos utilisateurs.

Les formulaires

Donc vous avez deux types de formulaires, les formulaires horizontaux ou les formulaires verticaux. Donc formulaires horizontaux, tous les champs sont sur la même ligne forcément, alors que d’habitude, en règle générale on fait des formulaires verticaux avec les champs les uns à la suite des autres. Donc il suffit d’utiliser la classe form-inline avec la balise form pour créer votre formulaire. Et pour créer un formulaire vertical, il suffit d’utiliser la classe form-vertical.  On va voir les deux types de formulaire, à la fin du cours avec un exemple très visuel.

Taille des éléments des formulaires

BootStrap 3  permet de générer tous les éléments des formulaires pour qu’ils soient compatibles sur la majorité des navigateurs et également sur les périphériques de bureau et les périphériques mobiles. Avec toujours le concept de grille c’est très important, c’est vraiment la base essentielle à maîtriser avec le framework BootStrap 3, c’est le concept de grilles, il y a 2 cours pour vous aider à comprendre ce concept. Vous allez pouvoir, avec ce concept de grille définir la taille des formulaires, sur un ordinateur de bureau la page elle est grande comme ça, le formulaire il fera cette taille, sur une tablette, elle est grande comme ça, le formulaire fera cette taille, sur un smartphone, il est grand comme ça, il fera la largeur du smartphone le formulaire, tout simplement. Donc vous avez une div avec l’attribut row, puis une div avec l’attribut col-xs-12 … ça vous connaissez, je repasse assez vite, c’est le nombre de colonnes sur un smartphone, 12 colones, on prend toute la largeur sur une tablette on prend la moitié alors que sur un écran d’ordinateur de bureau, il est grand comme ça, on va prendre que 4 sur 12. Et ensuite dans la div, vous mettez vos éléments de formulaire.

Hauteur des éléments des formulaires

Vous pouvez créer des éléments de formulaire plus ou moins grand en utilisant des classes input-lg pour une hauteur de 45 pixels, input-sm pour une hauteur de 30 pixels  et par défaut c’est une hauteur de 34 pixels. Donc vous avez large 45 pixels, small 30 pixels et par défaut 34 pixels. Vous pouvez bien évidemment activer/désactiver un ou plusieurs éléments d’un formulaire comme pour les boutons il suffit d’utiliser l’attribut disable. Et pour désactiver un groupe d’élément d’un formulaire vous utilisez l’attribut disable au niveau du fieldset. Vous mettez soit l’attribut disable au niveau du champs input de l’élément quoi, soit au niveau du fieldset qui regroupe plusieurs éléments ça va tout désactiver d’un seul coup.

Exemple d’application

On voit ça ensemble avec un exemple de code source. Alors comment ça marche concrètement ?

Toujours row notre système de grille, là j’ai fait simple, j’ai pas page défini une xs, médium périphériques donc pour les ordinateurs de bureau, ça prend 9 lignes pour le formulaire, tout simplement. Donc le but c’est vous montré le formulaire. Alors vous avez un formulaire horizontal donc les champs les uns à côté des autres et en dessous un formulaire vertical avec les champs les uns en dessous des autres. Donc le formulaire horizontal, donc je vais le noter « formulaire horizontal » donc les champs sont les uns à côté des autres comme vous avez vu ici en fonction de la taille de l’écran évidemment. Et avec un formulaire vertical donc y’a la balise ici form-vertical, les champs sont les uns au-dessus des autres, avec toujours le bouton de validation. Donc, très simple, vous utilisez des classes CSS pour la mise en forme de votre formulaire avec des options de contrôle « Veuillez saisir une adresse e-mail valide ». Donc type de contrôle pour une adresse mail. Ensuite vous pouvez définir la taille des champs de votre formulaire par exemple, là, en fonction, ici je l’ai mis, la taille du champ input votre prénom et en fonction de la taille de l’écran donc ordinateur de bureau on passe sur une tablette, on passe sur un smartphone, si ça agrandit, tablettes, ordinateur de bureau. Donc là on va se mettre sur un smartphone. Ensuite, donc que vous avez input-sm c’est la hauteur des éléments, large, une hauteur plus haute, une hauteur plus petite, la hauteur par défaut, et vous pouvez désactiver avec le champ disable qui doit être quelque part le champ disable donc c’est la ville elle est la et on a mis le champs disable, et c’est pas un email, c’est du texte tout simplement, de toute façon il est désactivé donc ça ne pose pas de soucis  input-txt ça c’est le copier-coller. Donc champs désactiver ou sinon niveau du … là vous l’avez mis au niveau du champ input disable donc désactiver mais vous pouvez très bien mettre au niveau de tout un formulaire un entier qui comprend le bouton, un champ e-mails, un champ texte et désactivé entièrement, donc très, très, simple de faire de formulaire avec le framework BootStrap 3.

Votre plan d’actions !

Maintenant c’est à vous de jouer et vous trouverez le code source sous ce cours vidéo donc vous pouvez bien évidemment le réutiliser dans vos applications Web ça vous fait un modèle qui fonctionne. Si vous avez des questions posez-les sous cette vidéo et maintenant je vous invite à consulter la deuxième vidéo donc à la fin de cette vidéo, il y a un lien qui apparait, il suffira de cliquer sur ce lien donc sur cette vidéo et vous allez  dans la deuxième vidéo apprendre à utiliser en profondeur le framework BootStrap 3, HTML 5, CSS 3. Vous allez tout savoir dans la deuxième vidéo. Donc va on se retrouve dans la deuxième vidéo je vous dis à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de formulaire BootStrap 3

le code source commenté pour créer des formulaires avec le framework BootStrap 3

Partagez vos formulaires BootStrap 3

Utilisez la zone commentaire pour partager vos implémentations de formulaires avec BootStrap 3