The HTML <textarea> tag is an essential element in a webpage that allows multi-line text input in web forms. This tutorial will walk you through its basic features, including how to use it in forms and style it with CSS. By the end of this tutorial, you'll be able to create and personalize text input fields for user feedback and other purposes.
What is the HTML <textarea> tag?
The HTML <textarea> tag creates a multi-line text input field for users to enter long text into a webpage. It is commonly used in web forms and is required to allow users to enter comments, feedback, or other information.
Basic Syntax
<textarea rows="4" cols="50">
Enter text here...
</textarea>
The rows and cols attributes set the number of visible text lines and the number of average-width characters on a single line, respectively. You can use these attributes to control the size of your textarea.
Creating a Basic Textarea
Here is an example of how to use the <textarea> tag in an HTML form:
<form action="/submit_form" method="POST">
<label for="comment">Leave a Comment:</label>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea>
<input type="submit" value="Submit">
</form>The HTML form in the example above contains a <textarea> that allows users to enter comments. With rows and cols attributes set to 4 and 50, respectively, the textarea displays four lines of text, with each line having the capacity to show up to 50 characters. Additionally, the name attribute of the textarea is set to "comment", which means that this particular input area will be recognized as a "comment" when the form is submitted.
Textarea Attributes
The following table provides a brief overview of the most relevant attributes that you can apply directly to the <textarea> tag:
| Attribute | Purpose | Example |
|---|---|---|
autocomplete
| Determine if the field has autocomplete on/off. | autocomplete="on"
|
autofocus
| Auto-focus the field when the page loads. | autofocus
|
cols
| Number of average-width characters on a single line. | cols="40"
|
dirname
| Set the text direction after submitting the form. | dirname="text-direction"
|
disabled
| Disable the <textarea> element.
| disabled
|
form
| Link the <textarea> to one or more forms.
| form="formID"
|
maxlength
| Set the maximum number of characters for the input. | maxlength="500"
|
minlength
| Set the minimum number of characters for the input. | minlength="10"
|
name
| Name of the <textarea> element (for server-side).
| name="message"
|
placeholder
| Display expected value hint before user input. | placeholder="Type your feedback here..."
|
readonly
| Make the <textarea> content uneditable.
| readonly
|
required
| <textarea> must be filled out before submitting.
| required
|
rows
| Define the number of visible text lines. | rows="5"
|
wrap
| Define how user text should wrap when a form is submitted. | wrap="soft"
|
Note: Some of these attributes may be self-closing or may not require a value (such as autofocus and disabled).
Styling the Textarea
The appearance of your <textarea> can be improved using CSS. For example, the following code will make your text area more attractive with padding, rounded corners, and a defined border:
textarea {
font-family: Arial, sans-serif;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}Conclusion
The HTML <textarea> tag is essential for multi-line input in web forms. Through this tutorial, you learned how to use and style it effectively. With the right attributes and CSS, you can create the <textarea> to improve the user experience, making web interactions smooth and engaging.