Introduction: What Are Multiple-Line Text Input Controls?

On many websites, users need to enter long text, not just a single line.
Examples include:

  • Feedback and comments

  • Address details

  • Messages and descriptions

  • Reviews and suggestions

For this purpose, HTML provides multiple-line text input controls, which allow users to type more than one line of text.

As a beginner, understanding this control is essential because it is widely used in contact forms, registration forms, and feedback systems.

What Is a Multiple-Line Text Input Control?

A multiple-line text input control allows users to enter large blocks of text across multiple lines.

In HTML, this is created using the:

 
<textarea> tag

👉 Unlike <input type="text">, <textarea> supports line breaks and paragraphs.

The <textarea> Tag in HTML

Basic Syntax

 
<textarea></textarea>

  • It is not self-closing

  • Text is written between opening and closing tags

Example 1: Simple Multiple-Line Text Input

<label>Message:</label><br>
<textarea></textarea>

👉 This creates a basic multi-line text box.

Setting Size: Rows and Columns

You can control the visible size of a textarea using:

  • rows → number of visible lines

  • cols → width of the text area

Example

 
<textarea rows="4" cols="40"></textarea>

Example 2: Feedback Text Area

<label>Feedback:</label><br>
<textarea rows="5" cols="50">
Enter your feedback here...
</textarea>

⚠️ Note: Text inside <textarea> appears as default content.

 

Using Placeholder Text (Recommended)

Instead of default text, use the placeholder attribute.

 
<textarea rows="5" cols="40" placeholder="Write your message here..."></textarea>

✅ Better user experience
✅ Text disappears when user starts typing

Important Attributes of <textarea>

1. name Attribute

Required for form submission.

 
<textarea name="message"></textarea>

2. required Attribute

Makes the field mandatory.

 
<textarea required></textarea>

3. maxlength Attribute

Limits number of characters.

 
<textarea maxlength="200"></textarea>

4. readonly vs disabled

 
<textarea readonly>This cannot be edited</textarea> <textarea disabled>This is disabled</textarea>
AttributeEditableSubmitted
readonly❌ No✅ Yes
disabled❌ No❌ No

Example 3: Complete Form with Multiple-Line Input

<form>
  <label>Your Address:</label><br>
  <textarea rows="4" cols="50" placeholder="Enter full address" required></textarea><br><br>

  <input type="submit" value="Submit">
</form>

Styling Multiple-Line Text Input Using CSS

 textarea {
width: 100%;
padding: 10px;
font-size: 14px;
}

👉 CSS helps improve appearance and usability.

Textarea vs Single-Line Text Input

Feature<input type="text"><textarea>
LinesSingle lineMultiple lines
Long text❌ No✅ Yes
Paragraphs❌ No✅ Yes
Use caseName, usernameFeedback, message

Real-World Use Cases

  • Contact forms
  •  Comment sections
  •  Address input
  • Feedback systems
  •  Support tickets

Common Beginner Mistakes

  • Using <input type="text"> for long text
  •  Forgetting name attribute
  • Placing placeholder text inside textarea incorrectly
  • Not setting size or styling
  • Not validating user input

Best Practices for Multiple-Line Text Input

  • Use <textarea> for long text
  • Always use placeholder instead of default text
  •  Set reasonable rows and maxlength
  •  Use labels for accessibility
  •  Validate input on server side

FAQs: Multiple-Line Text Input Controls

What tag is used for multiple-line text input in HTML?

The <textarea> tag.

Can textarea have a default value?

Yes, text placed between opening and closing tags is default.

Can I limit the number of characters?

Yes, using maxlength.

Is textarea resizable?

Yes, browsers allow resizing (can be controlled with CSS).

Can textarea be styled with CSS?

Yes, fully customizable using CSS.

elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.