The HTML <textarea> tag is used to create a multi-line text input field. It allows users to enter large amounts of text, such as comments, messages, or descriptions.
- Creates a text area that supports multiple lines of input.
- Commonly used in forms for comments, feedback, and messages.
- Supports attributes like rows, cols, placeholder, and readonly.
Syntax:
<textarea>....</textarea>- <textarea> and </textarea>: These are the opening and closing tags for the textarea element.
- rows="4": This specifies the number of visible text lines that the textarea will display.
- cols="50": This defines the width of the textarea, measured in characters. The number of columns determines how wide the text area is in terms of characters per line.
HTML textarea tag Attribute values
- autocomplete : autocomplete specifies whether the textarea field has autocomplete on or off.
- autofocus : autofocus specifies that the textarea field should automatically receive focus when the page loads.
- cols : cols defines how many average-width characters should fit on a single line.
- dirname : dirname sets the text direction of the textarea field after form submission.
- disabled : disabled specifies that the textarea element is disabled.
- form : form specifies one or more forms that the <textarea> element belongs to.
- maxlength : maxlength specifies the maximum number of characters allowed in the textarea.
- minlength : minlength defines the minimum number of characters required in the textarea.
- name : name specifies the name of the <textarea> element.
- placeholder : placeholder displays a short hint before the user enters data.
- readonly : readonly makes the textarea read-only, meaning the content cannot be edited.
- required : required specifies that the textarea field must be filled out before submitting the form.
- rows : rows defines the number of visible text lines in the textarea.
- wrap : wrap specifies how text should wrap in the textarea when the form is submitted.
Creating a Basic <textarea>
The <textarea> element in HTML is used to create a multi-line text input field. This allows users to enter larger amounts of text, such as comments, feedback, or other data that requires more space than a standard text input field.
<!--Driver Code Starts-->
<html>
<head></head>
<body>
<!--Driver Code Ends-->
<form>
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50">
</textarea><br>
<input type="submit" value="Submit">
</form>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- The label element is used to create a label for the textarea, improving accessibility.
- The rows and cols attributes define the size of the textarea.
- The id attribute links the <textarea> with the <label>.
Styling the <textarea>
Although the <textarea> element comes with default styling, you can customize its appearance using CSS.
<!--Driver Code Starts-->
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: #fff;
padding: 20px;
width: 100%;
max-width: 500px;
border-radius: 8px;
}
label {
font-size: 1.1em;
margin-bottom: 8px;
display: block;
}
textarea {
width: 100%;
padding: 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fafafa;
resize: vertical;
outline: none;
transition: border-color 0.3s ease;
}
textarea:focus {
border-color: #4CAF50;
background-color: #fff;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
cursor: pointer;
border-radius: 4px;
width: 100%;
margin-top: 10px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<!--Driver Code Ends-->
<body>
<form>
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback" rows="4" cols="50"
placeholder="Type your feedback here..."></textarea><br>
<input type="submit" value="Submit">
</form>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->