Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Working with the Textarea Element for Multi-line Input | HTML Forms and User Input
Ultimate HTML

book
Working with the Textarea Element for Multi-line Input

The <textarea> element is a powerful tool for creating a multi-line text input field on a web page. It allows users to input and submit more significant amounts of text than the <input> element, which is limited to a single line of text.

html
<textarea></textarea>

The <textarea> element consists of an opening <textarea> tag and a closing </textarea> tag. Any text placed between these tags will serve as the default value for the text area.

Attributes

name: specifies the name of the text area, which is used to identify the field when the form is submitted.

html
<textarea name="feedback"></textarea>

rows and cols: determine the number of visible rows and columns of the text area, respectively. They allow us to specify the width and height of the text area.

html
<textarea name="feedback" rows="3" cols="30"></textarea>

placeholder: provides a short hint to the user about the expected information in the text area. It is displayed as a temporary placeholder until the user starts typing.

html
<textarea name="feedback" placeholder="Leave your opinion"></textarea>

maxlength: specifies the maximum number of characters that can be entered in the text area. It helps enforce character limits or restrictions.

html
<textarea name="feedback" maxlength="200"></textarea>

readonly: readonly attribute, when added to the <textarea> element, makes the field read-only, preventing users from modifying the text. It is useful when displaying pre-filled or non-editable content.

html
<textarea name="feedback" readonly>This content is read only.</textarea>

Example

html

index.html

copy
<form onsubmit="return false">
<label for="name">Name</label>
<input type="text" id="name" />

<label for="feedback">Feedback</label>
<textarea name="feedback" id="feedback" rows="3" placeholder="Leave your opinion"></textarea>

<button type="submit">Submit</button>
</form>

1. Which input type is used for selecting a date?

2. Which attribute is used to set the maximum number of characters allowed in a text input field?

3. Which element is used to create a multi-line input field?

4. Which attribute is used to set the initial value of an input field?

question mark

Which input type is used for selecting a date?

Select the correct answer

question mark

Which attribute is used to set the maximum number of characters allowed in a text input field?

Select the correct answer

question mark

Which element is used to create a multi-line input field?

Select the correct answer

question mark

Which attribute is used to set the initial value of an input field?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 7

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

We use cookies to make your experience better!
some-alt