{"id":4516,"date":"2015-05-26T12:15:47","date_gmt":"2015-05-26T09:15:47","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4516"},"modified":"2017-12-19T13:59:33","modified_gmt":"2017-12-19T11:59:33","slug":"html5-textarea-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/","title":{"rendered":"HTML5 Textarea Example"},"content":{"rendered":"<p>The focus of this example will be the <code>textarea<\/code> tag of HTML5.<\/p>\n<p>This tag defines a multiline text input control. The textarea can hold an unlimited number of characters and its size can be defined whether by rows and columns in html or more precisely by width and height in css.<\/p>\n<p>Some of the attributes we will see are new to HTML5 (i.e autofocus, required, placeholder etc) which enhance this tag&#8217;s usability.<\/p>\n<p>The textarea element is supported by most popular browsers like Chrome, IE, Firefox, Safari and Opera.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;tgm4cmEWcKUikZNn&#8217;]<\/p>\n<h2>1. Basic Setup and Application<\/h2>\n<p>First, go ahead and create e new html file with basix syntax inside:<\/p>\n<pre class=\"brush:xml\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;HTML5 Textarea Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;!-- STYLE  SECTION --&gt;\r\n&lt;style type=\"text\/css\"&gt;\r\n&lt;\/style&gt;\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n&lt;\/pre&gt;\r\n<\/pre>\n<p>To define a textarea, just start a new <code>textarea<\/code> tag and enter text inside like so:<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea&gt;This is the most basic textarea.&lt;\/textarea&gt;\r\n<\/pre>\n<p>You have created the following textarea:<\/p>\n<figure id=\"attachment_4528\" aria-describedby=\"caption-attachment-4528\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea1.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4528\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea1.jpg\" alt=\"Basic Textarea Tag Application\" width=\"820\" height=\"131\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea1-300x48.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4528\" class=\"wp-caption-text\">Basic Textarea Tag Application<\/figcaption><\/figure>\n<p><\/p>\n<h2>2. Variations of Textarea Attributes<\/h2>\n<p>Well, textarea has also attributes that can be assigned inside the tag, like any other html element:<\/p>\n<p>1. <code>autofocus<\/code> &#8211; tells the textarea to be in focus when the page loads<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea autofocus='autofocus'&gt;This is the most basic textarea.&lt;\/textarea&gt;\r\n<\/pre>\n<figure id=\"attachment_4534\" aria-describedby=\"caption-attachment-4534\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea2.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4534\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea2.jpg\" alt=\"Autofocus Attribute of Textarea\" width=\"820\" height=\"131\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea2-300x48.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4534\" class=\"wp-caption-text\">Autofocus Attribute of Textarea<\/figcaption><\/figure>\n<p>2. <code>cols<\/code> &#8211; specifies the visible width of a text area<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea cols='50'&gt;This is the most basic textarea.&lt;\/textarea&gt;\r\n<\/pre>\n<figure id=\"attachment_4536\" aria-describedby=\"caption-attachment-4536\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea3.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4536\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea3.jpg\" alt=\"Cols Attribute of Textarea\" width=\"820\" height=\"131\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea3-300x48.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4536\" class=\"wp-caption-text\">Cols Attribute of Textarea<\/figcaption><\/figure>\n<p>3. <code>disabled<\/code> &#8211; specifies a text area that should be disabled<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea disabled=\"disabled\"&gt;This is the most basic textarea.&lt;\/textarea&gt;\r\n<\/pre>\n<figure id=\"attachment_4538\" aria-describedby=\"caption-attachment-4538\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea4.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4538\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea4.jpg\" alt=\"Disabled Attribute of Textarea\" width=\"820\" height=\"131\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea4-300x48.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4538\" class=\"wp-caption-text\">Disabled Attribute of Textarea<\/figcaption><\/figure>\n<p>4. <code>maxlength<\/code> &#8211; specifies the maximum number of characters allowed in the textarea<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea maxlength=\"250\"&gt;This is the most basic textarea.&lt;\/textarea&gt;\r\n<\/pre>\n<p>No need for a view, it&#8217;s the same textarea just with a 250 input characters condition.<\/p>\n<p>5. <code>placeholder<\/code> &#8211; specifies a short sentencte or keyword as a hint on what the input should be filled with<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea placeholder=\"Write something here...\"&gt;&lt;\/textarea&gt;\r\n<\/pre>\n<figure id=\"attachment_4546\" aria-describedby=\"caption-attachment-4546\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea5.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4546\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea5.jpg\" alt=\"Placeholder Attribute of Textarea\" width=\"820\" height=\"131\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea5.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea5-300x48.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4546\" class=\"wp-caption-text\">Placeholder Attribute of Textarea<\/figcaption><\/figure>\n<p>6. <code>required<\/code> &#8211; specifies a required field, the fill of the textarea is a must<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea required=\"required\"&gt;This is the most basic textarea.&lt;\/textarea&gt;\r\n<\/pre>\n<p>No need for a view here, it is the same as the default view.<\/p>\n<p>7. <code>rows<\/code> &#8211; specifies the visible number of lines in a textarea<\/p>\n<pre class=\"brush:xml\">&lt;!-- HTML SECTION  --&gt;\r\n&lt;textarea rows=\"8\"&gt;This is the most basic textarea.&lt;\/textarea&gt;\r\n<\/pre>\n<p><\/p>\n<h2>3. Styling the Textarea<\/h2>\n<p>Styling a textarea will be an easy part and most times necessary on your website.<\/p>\n<h3>3.1 Size<\/h3>\n<p>In CSS, we can easily specify an initial and maximum width and height for the textarea.<\/p>\n<pre class=\"brush:css\">&lt;!-- STYLE  SECTION --&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n\r\n  textarea {\r\n  \twidth: 30em;    \/* the inital width of the textarea *\/\r\n  \theight: 10em;    \/* the inital height of the textarea *\/\r\n\r\n  \tmax-width: 40em;    \/* the maximum width of the textarea *\/\r\n  \tmax-height: 15em;    \/* the maximum height of the textarea *\/\r\n }\r\n &lt;\/style&gt;\r\n<\/pre>\n<p>Look at both cases:<\/p>\n<figure id=\"attachment_4558\" aria-describedby=\"caption-attachment-4558\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea7.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4558\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea7.jpg\" alt=\"Textarea CSS Size\" width=\"820\" height=\"485\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea7.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea7-300x177.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4558\" class=\"wp-caption-text\">Textarea CSS Size<\/figcaption><\/figure>\n<h3>3.2 Font &amp; Padding<\/h3>\n<p>You can have custom fonts inside the textarea. Look at the css below:<\/p>\n<pre class=\"brush:css\">&lt;!-- STYLE  SECTION --&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n\r\n  textarea {\r\n  \tpadding: 1em;   \/* space on all directions *\/\r\n\r\n  \tfont-family: \"Montserrat\", \"sans-serif\";\r\n  \tfont-size: 1em;\r\n }\r\n &lt;\/style&gt;\r\n<\/pre>\n<p>Notice, now the text is inside a placeholder.<\/p>\n<figure id=\"attachment_4560\" aria-describedby=\"caption-attachment-4560\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea8.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4560\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea8.jpg\" alt=\"Font and Padding Applied\" width=\"820\" height=\"331\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea8.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea8-300x121.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4560\" class=\"wp-caption-text\">Font and Padding Applied<\/figcaption><\/figure>\n<h3>3.2 Border<\/h3>\n<p>Custom borders can be applied to textarea elements like below:<\/p>\n<pre class=\"brush:css\">&lt;!-- STYLE  SECTION --&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n\r\n  textarea {\r\n  \tborder: 0.1em solid #ccc;\r\n  \tborder-radius: 0.5em;\r\n }\r\n &lt;\/style&gt;\r\n<\/pre>\n<figure id=\"attachment_4562\" aria-describedby=\"caption-attachment-4562\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea9.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4562\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea9.jpg\" alt=\"Styling the border of a Textarea\" width=\"820\" height=\"331\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea9.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea9-300x121.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4562\" class=\"wp-caption-text\">Styling the border of a Textarea<\/figcaption><\/figure>\n<h3>3.3 Background<\/h3>\n<p>Custom borders can be applied to textarea elements like below:<\/p>\n<pre class=\"brush:css\">&lt;!-- STYLE  SECTION --&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n\r\n  textarea {\r\n  \tbackground-color: #ffffe6;\r\n }\r\n &lt;\/style&gt;\r\n<\/pre>\n<figure id=\"attachment_4564\" aria-describedby=\"caption-attachment-4564\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea10.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4564\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea10.jpg\" alt=\"Background Applied to Textarea\" width=\"820\" height=\"331\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea10.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/textarea10-300x121.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4564\" class=\"wp-caption-text\">Background Applied to Textarea<\/figcaption><\/figure>\n<p><\/p>\n<h2>4. Conclusion<\/h2>\n<p>To conclude, we can say that it is pretty easy and comfortable to create and style a textarea element in HTML5 and CSS3.<\/p>\n<p>Do always remember to give the textarea a <code>name<\/code> when considering information that has to be submitted like so:<\/p>\n<pre class=\"brush:css\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;form action=\"\/post\"&gt;\r\n\t&lt;textarea name=\"message\" placeholder=\"Write your message here...\"&gt;&lt;\/textarea&gt;\r\n\t&lt;input type=\"submit\"&gt; &lt;!-- this represents the submit button --&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>The code above is an example of how you can have a textarea inside a form and submit it.<\/p>\n<p>Also, take advantage of the html attributes to achieve as much as you can without having to style it all in css.<\/p>\n<p>However, styling works just good for elements of html directly as well as when referred to classes.<\/p>\n<p><\/p>\n<h2>5. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/HTML5-Textarea.zip\"><strong>HTML5 Textarea<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The focus of this example will be the textarea tag of HTML5. This tag defines a multiline text input control. The textarea can hold an unlimited number of characters and its size can be defined whether by rows and columns in html or more precisely by width and height in css. Some of the attributes &hellip;<\/p>\n","protected":false},"author":75,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-4516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Textarea Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The focus of this example will be the textarea tag of HTML5. This tag defines a multiline text input control. The textarea can hold an unlimited number of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Textarea Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The focus of this example will be the textarea tag of HTML5. This tag defines a multiline text input control. The textarea can hold an unlimited number of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-26T09:15:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T11:59:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"HTML5 Textarea Example\",\"datePublished\":\"2015-05-26T09:15:47+00:00\",\"dateModified\":\"2017-12-19T11:59:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/\"},\"wordCount\":568,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/\",\"name\":\"HTML5 Textarea Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-05-26T09:15:47+00:00\",\"dateModified\":\"2017-12-19T11:59:33+00:00\",\"description\":\"The focus of this example will be the textarea tag of HTML5. This tag defines a multiline text input control. The textarea can hold an unlimited number of\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Textarea Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Textarea Example - Web Code Geeks - 2026","description":"The focus of this example will be the textarea tag of HTML5. This tag defines a multiline text input control. The textarea can hold an unlimited number of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Textarea Example - Web Code Geeks - 2026","og_description":"The focus of this example will be the textarea tag of HTML5. This tag defines a multiline text input control. The textarea can hold an unlimited number of","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-05-26T09:15:47+00:00","article_modified_time":"2017-12-19T11:59:33+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"HTML5 Textarea Example","datePublished":"2015-05-26T09:15:47+00:00","dateModified":"2017-12-19T11:59:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/"},"wordCount":568,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/","name":"HTML5 Textarea Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-05-26T09:15:47+00:00","dateModified":"2017-12-19T11:59:33+00:00","description":"The focus of this example will be the textarea tag of HTML5. This tag defines a multiline text input control. The textarea can hold an unlimited number of","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-textarea-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Textarea Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4516"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}