HTML + CSSChamps
Zone de texte avec jauge
Une barre sous le texte se remplit à la saisie et devient rouge à l’approche de la limite.
Réglages
16px
1x
Code
<label class="uv-in2n"><textarea maxlength="80" rows="3" placeholder="Écrivez votre bio"></textarea><div class="ft"><span class="bar"><i></i></span><b class="ct">0/80</b></div></label>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 Champs
Où l’utiliser
Un compteur de caractères aide partout où la place est comptée : la bio d’un profil, le mot d’une carte cadeau, un avis court ou le texte d’une campagne SMS. La barre montre ce qui reste et vire au rouge avant la butée. Un textarea avec limite de caractères en HTML, CSS et un peu de JavaScript.
La démo autorise 80 caractères et prévient à 68. Si vous changez la limite, modifiez aussi le compteur, et laissez de la marge à l’alerte pour que l’on puisse finir sa phrase tranquillement.