Comment empêcher le redimensionnement d’un textarea ?

Le langage CSS permet le redimensionnement d’un textarea à vous et à l’utilisateur. Mais qu’en est-il si vous voulez empêcher les utilisateurs de le redimensionner ? Eh bien le CSS le prévoit aussi !

Ceci grâce à une propriété. Exemple :

textarea {
 resize : none;
}

Vous pouvez également choisir d’autoriser les utilisateurs à redimensionner votre élément uniquement horizontalement ou verticalement en utilisant les valeurs « vertical » ou « horizontal » de la propriété resize :</p><br /><br /> <pre><code class= »lang-css »><br /><br /> .vertical {<br /><br /> resize : vertical;<br /><br /> }<br /><br /> .horizontal {<br /><br /> resize : horizontal;<br /><br /> }<br /><br /> </code></pre><br /><br /> <p><div class='code-block code-block-8' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <div class="section_freelances background_freelances"> <section class="bg-blue"> <img src="https://www.codeur.com/tuto/wp-content/themes/breek/assets/images/transparent.gif" data-lazy="true" data-src="https://www.codeur.com/tuto/wp-content/uploads/2020/06/ico-users.png" class="section_freelances_img" width="380" height="127"> </section> <div class="container" style="padding: 0 20px;"> <p class="text white"> Trouvez le meilleur développeur web sur Codeur.com </p> <div class="epcl-shortcode epcl-columns"> <div class="epcl-shortcode epcl-col grid-33"> <i class="epcl-icon fa fa-clock-o"></i> <p>Vos premiers devis en 15 minutes</p> </div> <div class="epcl-shortcode epcl-col grid-33"> <i class="epcl-icon fa fa-thumbs-up"></i> <p>Gratuit et sans obligation</p> </div> <div class="epcl-shortcode epcl-col grid-33"> <i class="epcl-icon fa fa-users"></i> <p>Déjà plus de 75 000 clients</p> </div> </div> <a class="epcl-shortcode epcl-button regular flat section_freelance_btn" href="https://www.codeur.com/developpeur/web" onclick="_paq.push(['trackEvent', 'Tuto vers MeTa', 'BlogURL', 'Tuto Ban Article']);"> Trouver un freelance </a> </div> </div></div> </p><br /><br /> <p>Ensuite, vous pouvez contrôler sa largeur et sa hauteur via les attributs <code>cols</code> et <code>rows</code>, comme ceci :</p><br /><br /> <pre><code class= »lang-html »><br /><br /> <textarea name= »test » id= »test » cols= »30″ rows= »10″></textarea><br /><br /> </code></pre><br /><br /> <p>Cela fonctionne aussi avec les attributs <code>width</code> et <code>height</code>.</p><br /><br /> <p>Il peut être très utile d’empêcher le redimensionnement, notamment lorsque l’on souhaite conserver un certain design. Cependant, de manière générale, il vaut mieux laisser le contrôle à l’utilisateur : c’est une question de confort d’utilisation !</p><br /><br /> <p>Si vous avez du mal avec la notion de redimensionnement d’un textarea, n’hésitez pas à demander à un freelance sur <a href= »https://www.codeur.com/ »>Codeur.com</a> !</p><br /><br />

En fonction du contexte de votre page, l’une ou l’autre des solutions peut-être préférable.

Un simple formulaire de contact ou une demande de devis ne nécessite pas nécessairement à l’internaute de redimensionner le textarea.

À l’inverse, un formulaire pour une demande de SAV peut demander beaucoup de rédaction de la part de l’internaute. Dans ce cas, il faut lui laisser la possibilité de redimensionner le textarea car la relecture de son message en sera simplifiée et sa satisfaction dans l’expérience de la prise en charge de son SAV sera meilleure.

Si vous rencontrez des difficultés pour personnaliser vos formulaires et que vous souhaitez vous faire aider d’un freelance expert en HTML / CSS, déposez une annonce sur Codeur.com et vous recevrez des propositions de freelances pour vous accompagner dans votre projet.