Les listes à puce

Dans un formulaire, une liste à puce permet de proposer plusieurs choix tout en n'autorisant qu'une seule réponse. Dans ce cours, vous allez découvrir comment afficher ces options, les regrouper, en présélectionner une et rendre le choix obligatoire.

À quoi sert une liste à puce ?

Dans la vie courante, on vous demande parfois de choisir une seule réponse parmi plusieurs propositions. Par exemple : votre taille de t-shirt, votre moyen de contact préféré ou le mode de livraison souhaité.

En HTML, ce type de choix se fait souvent avec ce qu'on appelle une liste à puce. Visuellement, cela ressemble à plusieurs petits ronds affichés les uns sous les autres.

Le principe est simple : plusieurs options sont proposées, mais l'utilisateur ne peut en sélectionner qu'une seule dans le même groupe.

						
							<form>
								<input type="radio" id="email" name="contact">
								<label for="email">Par e-mail</label>

								<input type="radio" id="telephone" name="contact">
								<label for="telephone">Par téléphone</label>
							</form>
						
					

Ici, les deux options vont ensemble. Si vous en cochez une, l'autre se décoche.

<input> de type radio

Techniquement, une liste à puce se crée avec plusieurs balises <input> dont le type vaut radio.

Chaque balise affiche un petit rond sélectionnable. C'est ce qui donne l'aspect de "puce" dans le formulaire.

À ce stade, vous pouvez déjà retenir une idée importante : une option = un input radio.

						
							<input type="radio">
							<input type="radio">
							<input type="radio">
						
					

Sans texte à côté, ces champs ne sont pas très utiles. On voit bien les puces, mais on ne sait pas ce qu'elles signifient encore.

Pour rendre chaque choix compréhensible, on ajoute simplement un <label> à côté de chaque puce.

						
							<input type="radio" id="debutant">
							<label for="debutant">Débutant</label><br>

							<input type="radio" id="intermediaire">
							<label for="intermediaire">Intermédiaire</label><br>

							<input type="radio" id="avance">
							<label for="avance">Avancé</label>
						
					

Avec des labels, chaque puce devient immédiatement compréhensible pour l'utilisateur.

Gérer plusieurs groupes de listes à puce dans un formulaire

Le vrai point clé des radios, c'est l'attribut name. Ce sont les radios qui portent le même nom qui appartiennent au même groupe.

Autrement dit, si plusieurs inputs radio ont name="livraison", alors l'utilisateur ne pourra choisir qu'une seule réponse dans ce groupe.

Si vous créez ensuite un autre groupe avec name="paiement", ce second groupe fonctionnera séparément. On pourra donc choisir une option de livraison et une option de paiement sans conflit.

						
							<form>
								<p>Livraison</p>
								<input type="radio" id="standard" name="livraison">
								<label for="standard">Standard</label>

								<input type="radio" id="express" name="livraison">
								<label for="express">Express</label>

								<p>Paiement</p>
								<input type="radio" id="carte" name="paiement">
								<label for="carte">Carte bancaire</label>

								<input type="radio" id="paypal" name="paiement">
								<label for="paypal">PayPal</label>
							</form>
						
					

Chaque groupe possède ici son propre attribut name.

Attention ! Si vous donnez le même name à toutes les radios du formulaire, elles formeront un seul grand groupe. L'utilisateur ne pourra alors sélectionner qu'une seule option pour tout le formulaire.

Présélectionner une option avec checked

Parfois, vous souhaitez qu'un choix soit déjà coché au chargement de la page. Pour cela, il suffit d'ajouter l'attribut checked sur l'option concernée.

Cela peut être utile si une réponse est la plus fréquente ou si vous voulez proposer une valeur par défaut.

						
							<input type="radio" id="oui" name="newsletter" checked>
							<label for="oui">Oui</label>

							<input type="radio" id="non" name="newsletter">
							<label for="non">Non</label>
						
					

L'option "Oui" est déjà active dès l'affichage du formulaire.

Attention ! Dans un même groupe radio, une seule option doit être cochée par défaut. Si vous mettez checked partout, le navigateur ne pourra de toute façon en garder qu'une seule comme sélection réelle.

Rendre un choix obligatoire avec required

Si l'utilisateur doit impérativement répondre à la question, vous pouvez ajouter l'attribut required sur une radio du groupe.

Le navigateur comprendra alors qu'au moins une option de ce groupe doit être choisie avant l'envoi du formulaire.

						
							<form>
								<p>Choisissez votre formule</p>
								<input type="radio" id="basic" name="formule" required>
								<label for="basic">Basic</label>

								<input type="radio" id="pro" name="formule">
								<label for="pro">Pro</label>
							</form>
						
					

En pratique, l'important est surtout que le groupe radio soit bien construit avec le même name. Une fois ce groupe en place, required permet d'imposer une réponse.

Vous savez maintenant créer une liste à puce complète : plusieurs radios, un nom de groupe cohérent, un label pour chaque option, un choix par défaut si besoin, et un caractère obligatoire quand la question l'exige.