Sommaire

Les champs avec des boutons COMPOSANTS POUR LES BOUTONS:Champs et boutons

1. L’objectif

Nous allons étudier comment inclure des boutons dans des champs de formulaire. Nous allons inclure des boutons affichant des caractères (comme des devises, des précisions pour des paiements HT ou TTC), des cases à cocher, des boutons radio et des boutons déroulants.

2. Des informations à gauche et à droite

Vous pouvez ajouter des informations à gauche et/ou à droite des éléments des formulaires, sauf pour l’élément <select>. C’est la classe .input-group-addon dans un élément <span> qui va permettre cet affichage. Il suffit de placer l’élément <span class="input-group-addon"> avant (à gauche) ou après (à droite) l’élément voulu. Les deux éléments, <input> et <span> sont placés dans une boîte <div class="input-group">.

Dans ces exemples, nous plaçons un bouton inclus à gauche, à droite et des deux côtés.

Voici le code HTML :

<form role="form"> 
   <label for="ville">Prix en Dollar :</label> 
   <div class="input-group"> 
      <span class="input-group-addon">$</span> 
      <input id="ville" type="text" class="form-control">  ...