HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: textarea

The HTML <textarea> tag is used to create a multi-line text input field in a web page. It allows users to enter and edit multiple lines of text in a form. The <textarea> tag is a self-closing tag, which means it does not require a closing tag.

The <textarea> tag has several attributes that can be used to customize the appearance and behavior of the text input field. The most commonly used attributes are:

  • name: Specifies the name of the text input field.
  • rows: Specifies the number of rows (lines) of text that should be visible in the input field.
  • cols: Specifies the number of columns (characters) of text that should be visible in the input field.
  • placeholder: Specifies a short hint that describes the expected value of the input field.
  • readonly: Specifies that the input field is read-only and cannot be edited by the user.
  • disabled: Specifies that the input field is disabled and cannot be used by the user.

Here is an example of how to use the <textarea> tag:

<form>
  <label for="message">Enter your message:</label>
  <textarea id="message" name="message" rows="5" cols="30"></textarea>
</form>

In this example, we have created a form with a label and a <textarea> input field. The id and name attributes are set to "message", which is the name of the input field. The rows and cols attributes are set to 5 and 30, respectively, which means that the input field will display 5 rows and 30 columns of text. The </textarea> tag is left empty, which means that the input field will be initially empty.

Here are some additional examples of how to use the <textarea> tag with different attributes:

Example 1: Placeholder Attribute

<form>
  <label for="username">Enter your username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username">
  <br><br>
  <label for="password">Enter your password:</label>
  <input type="password" id="password" name="password" placeholder="Enter your password">
  <br><br>
  <label for="message">Enter your message:</label>
  <textarea id="message" name="message" rows="5" cols="30" placeholder="Enter your message"></textarea>
</form>

In this example, we have added the placeholder attribute to the <textarea> tag, which displays a short hint that describes the expected value of the input field. This can be useful for providing additional guidance to the user.

Example 2: Readonly Attribute

<form>
  <label for="message">Enter your message:</label>
  <textarea id="message" name="message" rows="5" cols="30" readonly>This input field is read-only.</textarea>
</form>

In this example, we have added the readonly attribute to the <textarea> tag, which makes the input field read-only and prevents the user from editing the text. This can be useful for displaying information that the user cannot change.

Example 3: Disabled Attribute

<form>
  <label for="message">Enter your message:</label>
  <textarea id="message" name="message" rows="5" cols="30" disabled></textarea>
</form>

In this example, we have added the disabled attribute to the <textarea> tag, which disables the input field and prevents the user from using it. This can be useful for temporarily disabling an input field while other parts of the form are being filled out.

Conclusion

The <textarea> tag is a versatile HTML tag that allows users to enter and edit multiple lines of text in a form. It has several attributes that can be used to customize the appearance and behavior of the input field, including the name, rows, cols, placeholder, readonly, and disabled attributes. By using the <textarea> tag, web developers can create more user-friendly and interactive forms that allow users to enter and edit text more easily.

References

Activity