{"id":25034,"date":"2024-04-07T09:46:45","date_gmt":"2024-04-07T08:46:45","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-los-campos-textarea-en-html-implementacion-y-estilos-personalizados\/"},"modified":"2024-06-03T17:38:57","modified_gmt":"2024-06-03T16:38:57","slug":"domina-los-campos-textarea-en-html-implementacion-y-estilos-personalizados","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/","title":{"rendered":"Master Textarea Fields in HTML: Implementation and Custom Styles"},"content":{"rendered":"<p>Creating forms on the web is a fundamental part of the user-server interaction, and within these, the element <code>textarea<\/code> in HTML is an essential tool when we need users to enter multiple text, such as comments or messages. Next, we will see how to implement and aesthetically customize these fields so that they integrate harmoniously into our web pages.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<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>\n<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=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#%C2%BFQue_es_un_Campo_Textarea\" >What is a Textarea Field?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Implementacion_Basica_de_un_Textarea\" >Basic Implementation of a Textarea<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Personalizando_el_Aspecto_de_Textarea\" >Customizing the Appearance of Textarea<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Tamano_y_Margen\" >Size and Margin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Estilos_de_Borde_y_Esquinas_Redondeadas\" >Border Styles and Rounded Corners<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Controlando_la_Tipografia\" >Controlling Typography<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Agregando_un_Poco_de_Sombra\" >Adding a Little Shadow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Placeholder_y_Estilos_de_Foco\" >Placeholder and Focus Styles<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Desafios_Comunes_con_Textareas_y_Como_Solucionarlos\" >Common Challenges with Textareas and How to Solve Them<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Desbordamiento_de_Texto\" >Text Overflow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Consistencia_entre_Navegadores\" >Cross-Browser Consistency<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-textarea-fields-in-html-implementation-and-custom-styles\/#Conclusion_Integracion_del_Textarea_en_tu_Sitio_Web\" >Conclusion: Integration of Textarea into your Website<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_un_Campo_Textarea\"><\/span>What is a Textarea Field?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In HTML, a <code>textarea<\/code> is a control that allows the user to write text on multiple lines. Unlike a <code>input<\/code> guy <code>text<\/code>, which is limited to a single line, a <code>textarea<\/code> It is ideal for long texts. It is commonly used in forms to collect comments, messages, and any type of input that requires more space.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Implementacion_Basica_de_un_Textarea\"><\/span>Basic Implementation of a Textarea<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The implementation of a <code>textarea<\/code> It&#039;s pretty simple. To add one to your form, simply use the tag <code><textarea><\/code> as follows:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><form><label for=\"mensaje\">Your message:<\/label><textarea id=\"mensaje\" name=\"mensaje\" rows=\"4\" cols=\"50\"> Write your message here...<\/textarea><\/form><\/code><\/pre>\n<p>In the code above, <code>rows<\/code> y <code>cols<\/code> specify the size of the <code>textarea<\/code> in terms of lines and columns of text, respectively. It is also possible to omit these attributes and control the size using CSS.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Personalizando_el_Aspecto_de_Textarea\"><\/span>Customizing the Appearance of Textarea<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The customization of the <code>textarea<\/code> It can be done through CSS. We can change the size, border, background color, typography and more. We will use some basic CSS instructions to transform our <code>textarea<\/code> basic into an aesthetically pleasing and functional element.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Tamano_y_Margen\"><\/span>Size and Margin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To define a specific size that adapts to the design of our website, as well as a margin around the <code>textarea<\/code>, we will use properties like <code>width<\/code>, <code>height<\/code> y <code>margin<\/code>:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">textarea { width: 100%; height: 150px; margin-bottom: 20px; }<\/code><\/pre>\n<p>With these properties, the <code>textarea<\/code> It will occupy 100% of the width of its container and will be 150 pixels high, with a bottom margin of 20 pixels.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Estilos_de_Borde_y_Esquinas_Redondeadas\"><\/span>Border Styles and Rounded Corners<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To give our <code>textarea<\/code> For a more modern look, we can apply a border with rounded corners:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">textarea { border: 1px solid #ccc; border-radius: 5px; }<\/code><\/pre>\n<p>This setting gives the <code>textarea<\/code> a solid border with a light gray color and slightly rounded corners to soften its appearance.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Controlando_la_Tipografia\"><\/span>Controlling Typography<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It is essential to maintain the readability and style of the text within the <code>textarea<\/code>. We use CSS font properties for this:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">textarea { font-family: &#039;Arial&#039;, sans-serif; font-size: 16px; line-height: 1.5; color: #333; }<\/code><\/pre>\n<p>With these properties, the text inside the <code>textarea<\/code> It will be displayed with Arial font, a size of 16 pixels, a dark color for easier reading and a line spacing of 1.5, which improves the readability of long paragraphs.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Agregando_un_Poco_de_Sombra\"><\/span>Adding a Little Shadow<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For those who want to add more depth or highlight the <code>textarea<\/code>, shadows are an excellent option:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">textarea { box-shadow: 2px 2px 5px rgba(0,0,0,0.2); }<\/code><\/pre>\n<p>This subtle shadow gives the illusion of elevation of the <code>textarea<\/code> on the page, improving the user&#039;s visual perception.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Placeholder_y_Estilos_de_Foco\"><\/span>Placeholder and Focus Styles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>He <code>placeholder<\/code> is a guide text that is displayed when the <code>textarea<\/code> it is empty. With CSS, we can style this text and also change the appearance of the <code>textarea<\/code> when the user focuses on it, that is, when the cursor is inside the field to write.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">textarea::placeholder { color: #aaa; } textarea:focus { outline: none; border-color: #4A90E2; box-shadow: 0 0 5px -1px #4A90E2; }<\/code><\/pre>\n<p>This will make the <code>placeholder<\/code> has a light gray color and, when the <code>textarea<\/code> is in focus, it will remove the default outline and apply a light blue border and shadow color, clearly indicating to the user that they can start typing in that field.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Desafios_Comunes_con_Textareas_y_Como_Solucionarlos\"><\/span>Common Challenges with Textareas and How to Solve Them<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Some common challenges with using <code>textarea<\/code> They can include manipulating its size, handling text overflow, and consistency between different browsers. Here are some solutions:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Desbordamiento_de_Texto\"><\/span>Text Overflow<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If the content exceeds the size of the visible area of the <code>textarea<\/code>, scroll bars will be displayed. We can control this with the property <code>overflow<\/code>:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">textarea { overflow: self; }<\/code><\/pre>\n<p>With <code>car<\/code>, scroll bars will only appear when they are needed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Consistencia_entre_Navegadores\"><\/span>Cross-Browser Consistency<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Browsers often apply default styles to elements <code>textarea<\/code>, which can lead to a lack of consistency. To avoid this, it is advisable to explicitly establish all the styles that we want to apply, as we did in the previous examples, which can help minimize these differences.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion_Integracion_del_Textarea_en_tu_Sitio_Web\"><\/span>Conclusion: Integration of Textarea into your Website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The integration of a <code>textarea<\/code> On your website it&#039;s not just about how it works, but also how it&#039;s consistent with the overall aesthetic of your site. Visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> For more advice and if you need personalized help with your programming projects, do not hesitate to contact me through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>. With these tools, you will be equipped to create <code>textareas<\/code> that not only collect information, but are also a visual delight for users.<\/p>","protected":false},"excerpt":{"rendered":"<p>Crear formularios en la web es parte fundamental de la interacci\u00f3n usuario-servidor, y dentro de estos, el elemento textarea en HTML es una herramienta esencial cuando necesitamos que los usuarios ingresen texto m\u00faltiple, como comentarios o mensajes. A continuaci\u00f3n, veremos c\u00f3mo implementar y personalizar est\u00e9ticamente estos campos para que se integren arm\u00f3nicamente en nuestras p\u00e1ginas [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25035,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,821,1473,1035,475,1460,221,1084,1631],"class_list":["post-25034","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-campos","tag-domina","tag-estilos","tag-html","tag-implementacion","tag-los","tag-personalizados","tag-textarea"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=25034"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25034\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25035"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}