Les outils de contrôle de formulaire bootstrap

Table des matières

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

LA SUITE APRÈS CETTE PUBLICITÉ

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’.

LA SUITE APRÈS CETTE PUBLICITÉ

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