HTML + CSSBoutons radio
Sondage avec résultats
Après le vote, chaque option devient une barre qui grandit jusqu'à son pourcentage.
Réglages
16px
1x
Code
<fieldset class="uv-rpl"><legend>Où passeras-tu tes vacances ?</legend><label style="--v:46%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Plage</span><span class="pc">46 %</span></label><label style="--v:31%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Montagne</span><span class="pc">31 %</span></label><label style="--v:17%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Ville</span><span class="pc">17 %</span></label><label style="--v:6%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">À la maison</span><span class="pc">6 %</span></label><p class="ft">1 284 votes</p></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Un sondage est plus amusant quand on voit le résultat tout de suite. Avant le vote, la carte affiche des options à contour ; après le choix, chaque ligne devient une barre qui grandit jusqu'à sa part, les pourcentages glissent en place, ton option reçoit une coche et une barre doucement colorée, et le total des votes apparaît en bas.
Les pourcentages se règlent par option avec une variable CSS, tu peux donc les remplir depuis ton backend. Il fonctionne sans JavaScript grâce à :has.