Guillaume Duverger - Développement & Graphisme - Blog

Choix multiples input HTML

Démonstration de l'utilisation des input de type checkbox et radio HTML pour réaliser des choix multiples :

Code :

<input name="choix1" id="un" type="radio">
<label for="un">
<svg width="58" height="58" viewBox="0 0 58 57">
<circle fill="none" stroke=#ddd stroke-width=3 cx="29" cy="29" r="10"/>
<circle fill="purple" cx="29" cy="29" r="5"/>
</svg>choix1 
</label>
<input name="choix1" type=radio id="deux">
<label for="deux">
<svg width="58" height="58" viewBox="0 0 58 57">
<circle fill="none" stroke=#ddd stroke-width=3 cx="29" cy="29" r="10"/>
<circle fill="purple" cx="29" cy="29" r="5"/>
</svg>choix2
</label>
<input name="choix1" type=radio id="trois">
<label for="trois">
<svg width="58" height="58" viewBox="0 0 58 57">
<circle fill="none" stroke=#ddd stroke-width=3 cx="29" cy="29" r="10"/>
<circle fill="purple" cx="29" cy="29" r="5"/>
</svg>choix3
</label>


<input name="choix2" id="quatre" type="checkbox">
<label for="quatre">
<svg width="58" height="58" viewBox="0 0 58 57">
<rect fill="none" stroke=#ddd width="29" height="29" x="13" y="13"/>
<path fill="purple" d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z"/>
</svg>choix1 
</label>	
<input name="choix1" type="checkbox" id="cinq">
<label for="cinq">
<svg width="58" height="58" viewBox="0 0 58 57">
<rect fill="none" stroke=#ddd width="29" height="29" x="13" y="13"/>
<path fill="purple" d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z"/>
</svg>choix2
</label>
<input name="choix1" type="checkbox" id="six">
<label for="six">
<svg width="58" height="58" viewBox="0 0 58 57">
<rect fill="none" stroke=#ddd width="29" height="29" x="13" y="13"/>
<path fill="purple" d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z"/>
</svg>choix3
</label>

Dans les plus courants des cas, vous aurez plusieurs cases ou boutons à gérer. Comme l'élève assidu que vous êtes, vous avez certainement observé le code de l'exemple ci-dessus et vous avez remarqué, à juste titre, plusieurs particularités :

• - Nous avons utilisé l'attribut name sur l'élément input.
• - Chaque élément label est lié avec l'élément input via un identifiant (attribut id).
• - Nous avons placé du code SVG (couplé avec CSS) pour styliser les cases et boutons. Mais nous n'aborderons pas ce dernier point puisqu'il s'agit seulement de l'esthétique et non pas de la structure HTML.

Revenons donc sur les deux premiers points. Imaginons que vous proposiez un sondage à vos visiteurs avec une question quelconque en laissant trois possibilités de réponse (vous utiliserez à cet effet des boutons de type radio). Celles-ci seront donc reliées entre elles.

C'est là que l'attribut name entre en jeu. Il va permettre de relier les input via la même valeur. Dans notre exemple, nous avons nommé chaque bouton radio avec la valeur "choix1" (vous pouvez mettre la valeur que vous souhaitez). Si vous ne le faîtes pas, il y aura forcément un comportement inattendu.

Le second élément essentiel pour notre hypothétique sondage est la présence de l'élément label dans lequel nous avons ajouté l'attribut for. La valeur doit être la même que l'identifiant renseigné dans l'input qui s'y rattache. Dans le cas contraire, il n'y aura aucune intéraction. En clair, vous ne pourrez pas cocher le bouton.

Généralement, que ce soit pour les cases ou les boutons, on présente une option déjà sélectionnée avec l'attribut checked, ne serait-ce que pour montrer à l'utilisateur qu'il est possible de faire une sélection. A contrario, vous avez la possibilité de désactiver une case ou un bouton avec l'attribut disabled.