Advanced Techniques </code> for Excellent Forms</h1> </div> </div> <div class="elementor-element elementor-element-df63e3 elementor-mobile-align-center elementor-widget elementor-widget-post-info" data-id="df63e3" data-element_type="widget" data-widget_type="post-info.default"> <div class="elementor-widget-container"> <ul class="elementor-inline-items elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-23248bb elementor-inline-item" itemprop="datePublished"> <a href="https://nelkodev.com/en/2024/02/18/"> <span class="elementor-icon-list-icon"> <i aria-hidden="true" class="far fa-calendar-alt"></i> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <time>February 18, 2024</time> </span> </a> </li> <li class="elementor-icon-list-item elementor-repeater-item-45e9418 elementor-inline-item" itemprop="commentCount"> <a href="https://nelkodev.com/en/blog/advanced-textarea-techniques-for-excellent-forms/#respond"> <span class="elementor-icon-list-icon"> <i aria-hidden="true" class="far fa-comment-dots"></i> </span> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-comments"> No Comments </span> </a> </li> </ul> </div> </div> <div class="elementor-element elementor-element-596c1596 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="596c1596" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-widget-container"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </section> <section class="elementor-section elementor-top-section elementor-element elementor-element-7bc3ca29 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7bc3ca29" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-260ec136" data-id="260ec136" data-element_type="column" data-settings="{"background_background":"classic"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-589da6a elementor-widget elementor-widget-theme-post-content" data-id="589da6a" data-element_type="widget" data-widget_type="theme-post-content.default"> <div class="elementor-widget-container"> <p>The element <code><textarea></code> in HTML is a fundamental tool when it comes to collecting comments, long text entries or personal information from users on a web page. But are you making the most of this element to improve the user experience on your forms? Let's dive into advanced techniques that can transform a simple text area into an integral and sophisticated part of your user interface.</p> <div id="ez-toc-container" class="ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction"> <div class="ez-toc-title-container"> <p class="ez-toc-title" style="cursor:inherit">Table of Contents</p> <span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #ffffff;color:#ffffff" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewbox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #ffffff;color:#ffffff" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewbox="0 0 24 24" version="1.2" baseprofile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div> <nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#Personalizacion_con_CSS" title="Customization with CSS">Customization with CSS</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#Control_de_Tamano_y_Expansibilidad" title="Size and Expandability Control">Size and Expandability Control</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#Validacion_y_Limitacion_de_Texto" title="Text Validation and Limitation">Text Validation and Limitation</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#Mejorando_la_Acessibilidad" title="Improving Accessibility">Improving Accessibility</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#Autoguardado_y_Recuperacion_de_Datos" title="Autosave and Data Recovery">Autosave and Data Recovery</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-6" href="#Integracion_con_Herramientas_de_Terceros" title="Integration with Third Party Tools">Integration with Third Party Tools</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-7" href="#Markdown_y" title="Markdown and<textarea>">Markdown and<textarea></a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-8" href="#Conclusion" title="Conclusion">Conclusion</a></li></ul></nav></div> <h2><span class="ez-toc-section" id="Personalizacion_con_CSS"></span>Customization with CSS<span class="ez-toc-section-end"></span></h2> <p>The first step to improve <code><textarea></code> is to customize its appearance with CSS. You can change the font, color, size and padding to fit your design perfectly. Here is a simple example of how to visually enhance a <code><textarea></code>:</p> <pre><code class=""language-css"">textarea { font-family: 'Helvetica', sans-serif; font-size: 16px; color: #333; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; /* Allows the user to resize vertically */ }</code></pre> <h2><span class="ez-toc-section" id="Control_de_Tamano_y_Expansibilidad"></span>Size and Expandability Control<span class="ez-toc-section-end"></span></h2> <p>By default, a <code><textarea></code> allows the user to resize it by dragging from a corner. However, you can control this function using the CSS property <code>resize</code>:</p> <pre><code class=""language-css"">textarea { resize: none; /* Disables resizing */ } /* or */ textarea { resize: horizontal; /* Allows only horizontal resizing */ }</code></pre> <p>We can go further and make the <code><textarea></code> automatically expand based on content using JavaScript. This improves usability by avoiding internal scroll bars and always showing all text to the user:</p> <pre><code class=""language-javascript"">const textarea = document.querySelector('textarea'); textarea.addEventListener('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; });</code></pre> <h2><span class="ez-toc-section" id="Validacion_y_Limitacion_de_Texto"></span>Text Validation and Limitation<span class="ez-toc-section-end"></span></h2> <p>Client-side validation is crucial to the user experience. You can set a limit on the number of characters allowed in a <code><textarea></code>, using the attribute <code>maxlength</code>:</p> <pre><code class=""language-html""><textarea>

Additionally, you can provide real-time feedback to show how many characters the user has available while typing. Here's a little script that takes care of that:

// Imagine you have a feedback element in your HTML with the ID feedback const feedback = document.getElementById('feedback'); textarea.addEventListener('input', function () { const maxLength = this.getAttribute('maxlength'); const currentLength = this.value.length; if (currentLength >= maxLength) { feedback.textContent = 'Has character limit reached.'; } else { feedback.textContent = `${maxLength - currentLength} remaining characters`;

Improving Accessibility

Make sure that you </code> be accessible. This means using tags <code><label></code> to clearly associate the text area with its description. Additionally, it uses attributes like <code>aria-label</code> o <code>aria-describedby</code> to improve the description that screen readers will provide to visually impaired users.</p> <pre><code class=""language-html""><label for="user-bio">Biography:</label> <textarea id="user-bio" aria-describedby="bio-help"></textarea> <p id="bio-help">Write a short summary about yourself.</p></code></pre> <h2><span class="ez-toc-section" id="Autoguardado_y_Recuperacion_de_Datos"></span>Autosave and Data Recovery<span class="ez-toc-section-end"></span></h2> <p>A much appreciated advanced functionality is text auto-save. You could use the browser's Local Storage to save the entered text and retrieve it when the user returns to the page:</p> <pre><code class=""language-javascript"">const autoSave = function () { localStorage.setItem('text', textarea.value); }; textarea.addEventListener('input', autoSave); window.onload = function () { const savedText = localStorage.getItem('text'); if (savedText) { textarea.value = savedText; } };</code></pre> <h2><span class="ez-toc-section" id="Integracion_con_Herramientas_de_Terceros"></span>Integration with Third Party Tools<span class="ez-toc-section-end"></span></h2> <p>There are JavaScript libraries and plugins that can elevate your <code><textarea></code> to a whole new level. Editor.js, TinyMCE, and CKEditor are just a few examples that allow you to turn text areas into powerful WYSIWYG editors, with features like text formatting, image insertion, and much more.</p> <h2><span class="ez-toc-section" id="Markdown_y"></span>Markdown and <code><textarea></code><span class="ez-toc-section-end"></span></h2> <p>If your app requires users to enter content in Markdown, you can improve the user experience. <code><textarea></code> showing a preview of the rendered content. Use libraries like Marked.js to parse and display Markdown in real time as the user types.</p> <pre><code class=""language-html""><textarea id="markdown-content"></textarea> <div id="preview"></div> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script> textarea.addEventListener(&#039;input&#039;, function () { document.getElementById(&#039;preview&#039;).innerHTML = marked(this.value); }); </script></code></pre> <h2><span class="ez-toc-section" id="Conclusion"></span>Conclusion<span class="ez-toc-section-end"></span></h2> <p>The element <code><textarea></code> It can be much more than a simple text box. With these advanced techniques, you provide a better user experience, a more interactive interface, and make your forms more accessible and easier to use.</p> <p>Whether it's enhancing its appearance with CSS, controlling its size and resizing capabilities, implementing real-time validation, or integrating it with advanced text editing tools, you have the ability to make your text areas truly advanced.</p> <p>To learn more about web development and make your pages even more interactive and engaging, visit my blog at <a href="https://nelkodev.com/en/">NelkoDev</a> and do not hesitate to contact me through <a href="https://nelkodev.com/en/contact/">Contact NelkoDev</a> if you have questions or need help with your projects. Together we can take your forms to the next level!</p> </div> </div> <div class="elementor-element elementor-element-35c3803e elementor-share-buttons--skin-flat elementor-share-buttons--shape-rounded elementor-grid-4 elementor-grid-mobile-2 elementor-share-buttons--color-custom elementor-share-buttons--view-icon-text elementor-widget elementor-widget-share-buttons" data-id="35c3803e" data-element_type="widget" data-widget_type="share-buttons.default"> <div class="elementor-widget-container"> <div class="elementor-grid"> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_facebook" role="button" tabindex="0" aria-label="Share on facebook" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fab fa-facebook" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Facebook </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter" role="button" tabindex="0" aria-label="Share on twitter" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fab fa-twitter" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Twitter </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_email" role="button" tabindex="0" aria-label="Share on email" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fas fa-envelope" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Email </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_print" role="button" tabindex="0" aria-label="Share on print" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fas fa-print" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Print </span> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-3d9b9fee elementor-author-box--avatar-yes elementor-author-box--name-yes elementor-author-box--biography-yes elementor-author-box--link-no elementor-widget elementor-widget-author-box" data-id="3d9b9fee" data-element_type="widget" data-widget_type="author-box.default"> <div class="elementor-widget-container"> <div class="elementor-author-box"> <div class="elementor-author-box__avatar"> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Picture of NelkoDev" loading="lazy" data-src="https://secure.gravatar.com/avatar/4f004709043429b920c90afc7c3c4106?s=300&d=mm&r=g" decoding="async" class="lazyload" data-no-translation-alt=""><noscript><img src="https://secure.gravatar.com/avatar/4f004709043429b920c90afc7c3c4106?s=300&d=mm&r=g" alt="Picture of NelkoDev" loading="lazy" data-eio="l" data-no-translation-alt=""></noscript> </div> <div class="elementor-author-box__text"> <div > <div class="elementor-author-box__name"> NelkoDev </div> </div> <div class="elementor-author-box__bio"> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-b7ef0a1 elementor-widget elementor-widget-post-comments" data-id="b7ef0a1" data-element_type="widget" data-widget_type="post-comments.theme_comments"> <div class="elementor-widget-container"> <section id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/en/blog/advanced-textarea-techniques-for-excellent-forms/#respond" style="display:none;" data-no-translation="" data-trp-gettext="">Cancel reply</a></small></h2><form action="/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate data-trp-original-action="https://nelkodev.com/wp-comments-post.php"><p class="comment-notes"><span id="email-notes" data-no-translation="" data-trp-gettext="">Your email address will not be published.</span> <span class="required-field-message" data-no-translation="" data-trp-gettext="">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Name *