Full Stack Developer Masters Program (66 Blogs) Become a Certified Professional

Everything You Need To Know About HTML Textarea

Published on Aug 09,2019 878 Views


This article will you an interesting and important topic that is HTML Textarea and in  the process help you explore it in detail. Following pointers will be covered in this article,

So let us get started with this HTML Textarea article,

Textarea In HTML

Whether it is a comment section or a description section in a webpage, text area is commonly used, wherein you can go ahead and post your suggestion or write any kind of text that the field is asking for. If you are planning to create or work with webpages, textarea is one of the foundational skills that you need to master.

We use <textarea> tag within a form to create a multiline text input. In textarea element, user can insert text over multiple rows. You have the privilege either to create a text area with unlimited number of characters or specify the size of the text area in terms of number of columns & rows.

Let’s learn how to create a textarea in HTML. 

Example

<!DOCTYPE html>
<html>
<head>
<title>Textarea HTML Example</title>
</head>
<body>
<form action = "/submit.php" method = "get">
User Feedback:
<br />
<textarea rows = "5" cols = "50" name = "feedback">
Feedback
</textarea>
<input type = "submit" value = "submit" />
</form>
</body>
</html>


Output
Output - HTML Textarea - Edureka

Text area can contain unlimited characters. The size of text area can be specified by the columns and rows attributes.

Moving on with this with this HTML Textarea article,

Attributes That Can Be Added To Textarea

There are various attributes that can be added to text area. Let’s look at the list.

  • cols: specifies the number of columns using which you can define the width of the textarea 
  • disabled: specifies the width of the textarea based on the number of visible character widths
  • name: assigns a name to the input control
  • readonly: sets the input control to read-only. User can not change the value. 
  • rows: specifies the number of rows using which you can define the height of the textarea. If there is more text, then users get scrollbar in the textarea. 

There are more attributes that are added with the arrival of HTML5.

Moving on with this with this HTML Textarea article,

HTML 5 Textarea Attributes

  • Autofocus: It specifies that a text area should be automatically get focused when the page is loaded.
  • Form: It specifies one or more forms the textarea belongs to.
  • Maxlength: It specifies the maximum number of characters allowed in the text area.
  • Placeholder: It specifies a short hint that describes the expected value of a textarea.
  • Required: It specifies that textarea must be filled out.
  • Wrap: It specifies that how the texts in the textarea are wrapped at the time of the submission of the form.

Moving on with this with this HTML Textarea article,

Sample Code

<!DOCTYPE html>
<html>
<head>
<title>Textarea HTML Example</title>
</head>
<body>
<form action = "/submit.php" method = "get">
User Feedback:
<br />
<textarea rows = "5" cols = "50" name = "feedback" autofocus='autofocus' >
Feedback
</textarea>
<textarea rows = "5" cols = "50" name = "feedback1" maxlength="250" placeholder="Write something here within 250 characters" >
Write something here within 250 characters
</textarea>
<textarea rows = "5" cols = "50" name = "feedback1" maxlength="250" required="required" >
</textarea>
<input type = "submit" value = "submit" />
</form>
</body>
</html>

Output
Output - HTML Textarea - Edureka

Now after executing the above snippets you would have understood how to create textarea in HTML using various attributes. I hope this blog is informative and added value to you.

This brings us to the end of this article on HTML Textarea. Now that you know what is HTML, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).

Got a question for us? Please mention it in the comments section of “What is HTML?” and we will get back to you.

Upcoming Batches For Full Stack Web Development Course
Course NameDateDetails
Full Stack Web Development Course

Class Starts on 21st December,2024

21st December

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

Everything You Need To Know About HTML Textarea

edureka.co