contact@bootstrap-top-design.com

Les outils de contrôle de formulaire bootstrap

outils de contrôle de formulaire bootstrap

Ce blog est soutenu par vous : nos fidèles lecteurs. Lorsque vous achetez en cliquant sur les liens sponsorisés de notre site, nous percevons des commissions d’affiliation. Les gains perçus contribuent au développement du blog. Merci pour votre soutien 🙂

Annonce

Faciliter la navigation aux utilisateurs contribue au succès de toute application web.

Ainsi, il existe des composants UI populaires et bien appréciés par les utilisateurs qui ne devraient pas manquer sur les applications web.

Dans ce tutoriel, vous allez voir des composants UI bootstrap qui permettent aux utilisateurs de contrôler un formulaire Bootstrap, faire des choix, sélectionner des options, activer ou désactiver des éléments, ajouter ou supprimer des éléments.  

Le plus important, vous apprendrez comment réaliser ces outils de contrôle de formulaire bootstrap.

Les quatre outils de contrôle de formulaire Bootstrap

CHAMP DE TYPE RANGE

Ce widget permet à un utilisateur de spécifier une valeur numérique en faisant déplacer un curseur. Découvrons comment intégrer cet outil de contrôle d’un formulaire bootstrap dans un projet.

Nous avons besoin des balises label et l’input de type range. Pour le champ input, nous lui attribuerons la classe ‘.custom-range’.

Pour rattacher notre label au champ, son attribut ‘for’ aura pour valeur, celle de l’identifiant du champ.

Code :

<label for="rangeBootstrap">Widget range stylisé avec bootstrap</label>
<input type="range" class="custom-range" id="rangeBootstrap">

Capture 

widget range bootstrap : outils de contrôle de formulaire bootstrap

CHECKBOXES (CASES À COCHER)

Les cases à cocher sur l’interface graphique d’une application permettent aux utilisateurs de faire un ou plusieurs choix entre les options possibles. Le style par défaut prévu par HTML pour ce widget est moins attrayant.

Nous allons le rendre plus attrayant avec Bootstrap.

Primo, nous allons regrouper le ‘champ input de type checkbox’ et le ‘label’ dans une balise ‘div’.

Secundo, nous allons attribuer les classes correspondantes aux différents éléments.

  • Le conteneur principal prendra les classes ‘custom-control’ et ‘custom-checkbox’.
  • L’input lui aura la classe ‘custom-control-input’
  • Et le label, la classe ‘custom-control-label’

Code :

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="checkboxBootstrap">
  <label class="custom-control-label" for="checkboxBootstrap">Cochez cette case</label>
</div>

Capture

checkbox bootstrap : outils de contrôle de formulaire bootstrap

RADIOBUTTONS (BOUTON D’OPTION)

Cet outil de contrôle de formulaire bootstrap comme les cases à cocher permet aussi de faire un choix parmi un ensemble prédéfini d’options. Mais celui-ci ne permet de choisir qu’une seule option.

Pour la réaliser à l’aide de bootstrap. Il faut ensemble toutes les options dans un conteneur.

Le champ de type radio de chaque option prend la classe ‘custom-control-input’. Son label prend la classe ‘custom-control-label’.

Le conteneur principal prend les classes ‘custom-control’ et ‘custom-radio’.

Code :

<div class="custom-control custom-radio">
  <input type="radio" id="choix1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="choix1">Choix 1</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id=" choix2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="choix1">Choix 2</label>
</div>

Capture

radiobutton bootstrap : outils de contrôle de formulaire bootstrap

SWITCHE(INTERRUPTEUR)

Le nom de cet élément UI donne une brève idée sur le rôle qui joue. C’est un contrôleur d’interface graphique qui permet d’activer et de désactiver un élément. Les concepteurs se sont inspirés d’un interrupteur d’éclairage pour réaliser ce widget.

Pour le réaliser avec bootstrap, nous allons nous servir d’un champ de type checkbox.

Nous allons regrouper le champ et un label dans un conteneur auquel nous attribuerons les classes ‘custom-control’ et ‘custom-switch’.

Le champ lui-même portera la classe ‘custom-control-input’, et le label la classe ‘custom-control-label’.

Code :

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switchBtn">
  <label class="custom-control-label" for="switchBtn">Interrupteur Bootstrap</label>
</div>

Capture

switch bootstrap : outils de contrôle de formulaire bootstrap

Autres tutoriels disponibles sur le blog 

·        Créer un formulaire Bootstrap facilement en 2 simples étapes

·        Comment réaliser simplement un bootstrap datepicker

·        Comment réaliser facilement un menu à onglets avec Bootstrap (tab bar bootstrap, et menu à pills)

·        Réaliser simplement une barre de navigation bootstrap

Annonce

Laisser un commentaire