Text Areas for Multi-Line Input
If you’ve ever filled out a contact form, written a comment, or posted a review online, you’ve likely used a text area. A text area is simply a box on a web page where users can type more than one line of text.
In this beginner-friendly guide, you’ll learn what a text area is, how to create one with basic HTML, and how to make it more useful and user-friendly. No previous coding experience is needed—just a bit of curiosity.
What is a Text Area?
On a website, you’ll often see two kinds of text fields:
- Single-line input: for short text like your name or email.
- Multi-line input (text area): for longer text like messages, comments, or descriptions.
In HTML, we create a multi-line input using the <textarea> element. This tells the browser to display a box where users can type several lines of text.
Your First Text Area
Let’s start with the simplest possible example.
Example 1: A Basic Text Area
Copy this code into a file called textarea-basic.html, then open it in your web browser (Chrome, Firefox, etc.).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Text Area Example</title>
</head>
<body>
<!-- Label describes what the text area is for -->
<label for="message">Your message:</label><br>
<!-- Basic multi-line text area -->
<textarea id="message" name="message"></textarea>
</body>
</html>
What’s happening here?
<label for="message">is the text that appears above or beside the box, telling the user what to type.for="message"connects the label to the text area with the matchingid="message".<textarea>...</textarea>creates the multi-line input box.
If you open this in your browser, you’ll see a plain text box. You can click inside it and start typing several lines.
Try it yourself: Add another label and text area pair (for example,
Your feedback:) to practice.
Controlling the Size of the Text Area
By default, the browser chooses a size for the text area, but you can control it using two attributes:
rows– how many lines tall it lookscols– how many characters wide it looks
Example 2: Setting Rows and Columns
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Area Size Example</title>
</head>
<body>
<label for="comment">Your comment:</label><br>
<!-- 5 lines tall, 40 characters wide -->
<textarea id="comment" name="comment" rows="5" cols="40"></textarea>
</body>
</html>
What’s happening here?
rows="5"makes the box taller (about 5 lines of text tall).cols="40"makes the box wider (about 40 characters across).
These numbers are visual hints, not exact limits on how much text can be typed. Users can usually keep typing and scroll inside the box.
Try it yourself: Change
rowsto10andcolsto60and refresh the page. Notice how the text area size changes.
Adding Placeholder Text and Default Content
Sometimes you want to give users a hint about what to write. That’s where placeholder text comes in. You can also add default text that appears in the box when the page loads.
Example 3: Placeholder and Default Value
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Area with Placeholder</title>
</head>
<body>
<label for="support-message">Describe your issue:</label><br>
<!-- Text area with placeholder and default text -->
<textarea
id="support-message"
name="support-message"
rows="6"
cols="50"
placeholder="Tell us what went wrong, when it happened, and any error messages you saw."
>I’m having trouble with...</textarea>
</body>
</html>
What’s happening here?
placeholder="..."shows light-gray hint text only when the box is empty.- The text between
<textarea>and</textarea>(I’m having trouble with...) is default content that appears when the page loads.
If the user deletes the default text, the placeholder still won’t show because placeholder only appears when the field is completely empty.
Try it yourself: Remove the default text inside
<textarea>...</textarea>and refresh. You’ll now see just the placeholder hint.
Making Text Areas Required and Read-Only
You can control how users interact with your text areas:
- Required: The user must fill it out before submitting a form.
- Read-only: The user can see the text but cannot change it.
Example 4: Required and Read-Only
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Required Text Area Example</title>
</head>
<body>
<form>
<!-- Required text area -->
<label for="bio">Short bio (required):</label><br>
<textarea
id="bio"
name="bio"
rows="4"
cols="50"
placeholder="Write a few sentences about yourself."
required
></textarea>
<br><br>
<!-- Read-only text area -->
<label for="terms">Terms (read-only):</label><br>
<textarea
id="terms"
name="terms"
rows="4"
cols="50"
readonly
>By using this site, you agree to follow our simple rules.
You cannot edit this text because it is read-only.</textarea>
<br><br>
<!-- Submit button to send the form -->
<button type="submit">Submit</button>
</form>
</body>
</html>
What’s happening here?
requiredon thebiotext area means the browser will prevent form submission unless the user types something.readonlyon thetermstext area means users can scroll and select the text, but not change it.- The
<form>element groups the fields together and allows them to be sent when the user clicks Submit.
Try it yourself: Open this file in your browser and click Submit without typing a bio. Your browser should show a message asking you to fill it in.
Styling Text Areas with Simple CSS
Text areas can look a bit plain. You can make them more inviting with a little CSS (Cascading Style Sheets), which is the language used to style web pages.
Don’t worry if you’re new to CSS—this is just a tiny taste.
Example 5: A Friendlier Text Area with CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Styled Text Area</title>
<style>
/* Style all textareas on the page */
textarea {
width: 100%; /* Make it fill the available width */
max-width: 500px; /* But not wider than 500px */
padding: 8px; /* Add space inside the box */
font-family: Arial, sans-serif;
font-size: 14px;
border: 1px solid #888;
border-radius: 4px; /* Slightly rounded corners */
box-sizing: border-box;
}
/* Change border color when user clicks into the box */
textarea:focus {
border-color: #007bff; /* Blue border */
outline: none; /* Remove default outline */
}
</style>
</head>
<body>
<label for="feedback">Your feedback:</label><br>
<textarea
id="feedback"
name="feedback"
rows="5"
placeholder="What did you like? What could be better?"
></textarea>
</body>
</html>
What’s happening here?
- The
<style>block in the<head>section contains CSS rules. textarea { ... }applies the styles to all text areas on the page.width: 100%makes the text area stretch across the container, andmax-width: 500pxstops it from getting too wide.textarea:focus { ... }changes the border when the user clicks inside, giving a nice visual cue.
Try it yourself: Change the
border-colorintextarea:focustoredorgreenand see how it looks.
Quick Recap and What’s Next
You’ve just learned how to:
- Create a basic text area for multi-line input using
<textarea> - Control its size with
rowsandcols - Add placeholder text and default content
- Make text areas required or read-only in a form
- Improve the look and feel with simple CSS styling
If this felt like a lot, that’s completely normal. Each time you experiment—changing a number, adding an attribute, or tweaking a style—you’re building real coding skills.
Next steps you can try:
- Create a full contact form with name, email, and a message text area.
- Add more CSS to change background colors or text colors.
- Search for "HTML textarea attributes" to discover even more options.
Keep experimenting, keep breaking things, and keep fixing them. Every tiny change you make is progress—soon, creating user-friendly multi-line input areas will feel completely natural.
