Utiliser toutes les options des formulaires HTML5 avec le Framework BootStrap 3

Découvrez la suite du cours précédent sur les formulaires avec le framework BootStrap 3.

Apprenez à utiliser quelques unes de meilleures options paramétrables de BootStrap 3 sur les formulaires.

Tout est dans la formation ci-dessous.

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

Utiliser toutes les options des formulaires HTML5 avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur développement facile donc dans le cours précédent vous avez appris à utiliser, à créer des formulaires avec le framework BootStrap 3, et bien là, on va aller un peu plus loin pour découvrir des options avancées, des options supplémentaires avec les formulaires et donc bien évidemment avec des classes CSS, avec les possibilités offerte par le Framework BootStrap 3.

Les formulaires

Donc BootStrap 3 supporte énormément d’éléments HTML 5, je vous en ai mis une panoplie. Dans la vidéo précédente, vous avez découvert les champs, emails, text, password et il y en a d’autre datetime, date, url, search, color, etc. Vous pouvez bien évidemment les utiliser pour créer vos champs de formulaire avec BootStrap 3. Pour les champs textarea, BootStrap 3 permet de créer des formulaires alignés, et adaptés en fonction de la largeur du périphérique bien évidemment toujours en utilisant les div enfin les classe row dans une div et col-xs, xd, ld, tout ça pour définir le nombre de colonnes que vous allez utiliser sur les 12 colonnes de votre grille. Vous pouvez afficher des cases à cocher, des boutons radios, tout ça avec les feuilles de style moderne de BootStrap 3. Donc ça donne un rendu assez sympa. Vous avez l’utilisation des classes chexkbox-inline et radio-inlinde c’est pour afficher tous les éléments sur la même ligne ou alors les uns sur les autres, c’est à vous de choisir, donc vous intégrez ou non cette classe CSS suivant le rendu visuel que vous souhaitez. Vous avez également les listes déroulantes, vous pouvez créer des listes déroulantes avec la classe form-control donc vraiment tous les champs de formulaire sont présents avec le framework BootStrap 3. Vous pouvez créer un champ de recherche comme Google, donc votre champ de recherche, le bouton juste à côté avec la classe input-group-btn et vous pouvez grouper plusieurs éléments d’un formulaire inclure du texte, un bouton, une case à cocher. Par exemple, vous avez une case à cocher, du texte là, du texte là, un bouton là, vous pouvez grouper tous les éléments dans un menu. Il suffit d’utiliser les classes input-group, input-group-btn, input-group-addon, et vous pouvez même créer un champ recherche avec un menu déroulant. Vous recherchez des cours sur développement facile, vous tapez langage objet et vous avez un menu déroulant rechercher, vous choisissez la catégorie donc langages objet en PHP, ça va rechercher automatiquement tous les cours dans la catégorie PHP.

Les formulaires – les options

Je vais vous montrer ça, à travers un exemple de code source très visuel. Vous pouvez utiliser les options supplémentaires avec les éléments d’un formulaire pour mettre des champs obligatoires, afficher des messages informatifs à l’utilisateur, toutes ces options supplémentaires dans les formulaires mettent beaucoup plus d’interactivité avec l’utilisateur.

Exemple d’application

On passe tout de suite avec un exemple de code source. Donc vous avez vos différents formulaires et on va voir ensemble ce qu’il est possible de faire. Le code JavaScript, ça fonctionne toujours avec jQuery. Par exemple ici on va saisir un mot de passe, voilà, et automatiquement ça met à jour donc quand utilisateur clique, presse sur des touches, au relâchement de la touche ça récupère le nombre de caractères saisis donc ici quatre. Si c’est inférieur à 8 on affiche un message en rouge avec la classe error, on ajoute une classe, on supprime l’ancienne classe et on ajoute une classe CSS error. Donc j’en saisi un peu plus avec une sécurité moyenne on enlève l’ancienne classe CSS, on ajoute la nouvelle classe CSS warning et sinon >10 on supprime l’ancienne classe CSS et on ajoute la classe CSS success. Bien évidemment c’est un algorithme très simple, après ce sera à vous de le compliquer est ce qu’il y a des majuscules, est-ce qu’il y a des minuscules, est-ce qu’il y a des caractères spéciaux et en fonction de vos critères, vous changerez la classe CSS pour avoir « mot de passe pas très sécurisé », « mot de passe avec une sécurité moyenne », « mot de passe avec une sécurité forte » et on peut même rajouter « mot de passe avec une sécurité très forte ». Donc si on regarde le champ, ici, votre mot de passe le label, l’input et un champ avec le message informatif, donc si on l’enlève, on aura un message informatif « votre passe doit comporter minimum huit caractères » avec un message d’aide pour l’utilisateur, donc ça c’est pour le champ mot de passe. Après je vous ai dit vous avez des messages informatifs, success, warning, has-error, email incorrect, votre  prénom, prénom validé, attention aux  actions, aux accents pardon, votre identifiant est correct. Et vous avez également le textarea, que je vous expliquais avant, alors il est où, donc le formulaire vertical, vos connaissances actuelles donc ça c’est le textarea tout simplement avec une adaptation automatique de la taille. Pourquoi à votre avis ? Pourquoi ? Ici 12 colonnes sur un périphérique mobile, sur une tablette la moitié 6 colonnes, sur un ordinateur de bureau 4 colonnes, donc 4 colonnes sur 12 après on va prendre la moitié avec une tablette, la moitié et la taille complète sur un smartphone. Les checkboxs affichés en horizontal, les unes à côté des autres ou des boutons radios les uns au-dessous des autres. Les cases a cocher inline, pensez bien à utiliser inline, les boutons radio les uns au- dessous des autres, la liste déroulante, tout simplement.  Donc la liste déroulante, elle est ici. Le bouton rechercher « C’est parti ! » donc toujours input-group avec form-control.  Les éléments beaucoup plus complexes où on combine une checkbox avec un texte et toujours possible de cocher donc on peut bien évidemment en mettre plusieurs checkbox, il n’y a aucun problème. La zone, l’éléments rechercher en choisissant une catégorie toujours, vous avez une liste ul li, vous allez tout le temps les utiliser, vous allez énormément les utiliser avec le framework BootStrap, de toute façon ça utilise toutes les balises HTML 5 et les anciens balise HTML avec toujours des classes CSS, donc dropdown-menu pour dire qu’il y a  un menu, un séparateur et après les href pour lancer la recherche. Bon vous connaissez, rechercher c’est placeholder, dans les cours HTML 5 dans la formation gratuite HTML 5, je vous explique comment créer des formulaires et utiliser toutes les possibilités de HTML 5, donc je vous renvoie à la formation gratuite sur HTML 5 donc allez sur développement facile sur n’importe quelle cours HTML 5, en dessous, il y a un formulaire vous renseigner votre prénom votre adresse mail et vous recevrez gratuitement la formation sur les nouveautés HTML 5. Ensuite à la vérification du mot de passe que je vous ai montré et qui fonctionne avec jQuery tout simplement.

Votre plan d’actions !

Maintenant c’est à vous de jouer, donc je pense que pour les formulaires, on a fait à peu près le tour, évidemment il y a énormément d’autres possibilités, donc en 2 cours je vous ai montré l’essentiel, ce que vous allez retrouver dans 90 % des cas sur les sites Internet donc les types de formulaire type. Donc vous retrouverez le code source sous ce cours vidéo. Bien évidemment vous pouvez me poser toutes les questions en rapport avec ce cours sous cette vidéo. Et maintenant je vous invite, à la fin de cette vidéo, il y a un lien qui va apparaître, la vidéo va se transformer en lien, il suffira de cliquer sur ce lien et vous serez redirigés dans la deuxième vidéo. Dans la deuxième vidéo je vous explique comment utiliser tout le potentiel de HTML 5, CSS 3, du framework BootStrap 3. Donc ensemble on va tout voir dans la deuxième vidéo donc je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

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

Le code source commenté pour créer des formulaires et en modifier les options avec le framework BootStrap 3

Partagez vos codes sources

Utilisez la zone commentaires, pour partager vos meilleurs exemples de formulaires avec BootStrap 3