What is the Correct HTML for Making a Text area?

 To make a correct HTML text area you should use a tag called “textarea“.  Textarea is one of the most important controls of the form tag. For example, if we want to get the address of an applicant we need to create a text area. If you want to get feedback or remarks or queries from users then you need to create text areas.

We cannot use an input tag for a Facebook post or comment box because the input tag can only fetch small data. We can’t say that a Facebook post or comment box users will only give small data that’s why we use text area. You can get large data given by users as input with text area tags.

Another important difference between the input box and textarea tag is that the input tag is a self-closing tag but the text area is not a self-closing tag. And text area will have content, The input we give in the text area tag is displayed as its content but the input contains no content. Text areas allow us to get multi-line text inputs. So, In this article, what is the correct HTML for making a text area? and How to create text area?

Syntax to creating textarea

<form> 
<p>Name:<br> <input type="text" name="name"></p> 
<p>Email:<br> <input type="text" name="Email"></p> 
<p>Comments:<br> 
<textarea name="comments"></textarea></p> 
</form>

Live Preview: [WP-Coder id=”4″]

How to create a text area

To add a text area you should use  “textarea” tag and the text area tag is a paired tag, so must and should add a closing text area tag. This tag is a special tag for users who can enter multiple lines of text and we can take this input. Since the text area is the main tag of the form tag, you should always use the text area inside the form tag.

How do I make a textarea not scalable

Syntax:

<textarea style="resize: none;"> Welcome</textarea>

If you don’t want users to change the size of your text area box, use the resize property in CSS and give it a value of none. If you give more text than the text area box size, your text area box will automatically create a scrollbar on the side.

Textarea Tag Main Attributes

1. Rows Attribute

<textarea rows=""10"></textarea>

Textarea allows us to control the height of the text area by using the “rows” attribute. You can specify how many rows should be displayed by default in the text area by using the “rows” attribute. For example, If you give 10 as the value in the rows attribute then the height of your text area box will increase to 10 rows.

2. Cols Attribute

<textarea cols="15"></textarea>

Similarly, you can mention columns of text area using the “cols” attribute. Cols control the width of the text area. For example, As with the rows attribute, if you give 15 as a value in the cols attribute then the width of your text area will increase default to 15 columns. You have the facility to increase and decrease the width and height graphically also. So, you can specify the width and height of the text area using the rows and cols attributes.

3. Wrap Attribute

<textarea wrap="off | virtual | physical"></textarea>

one more important attribute with respect to the text area is “wrap“. The wrap attribute is used to specify how the text should be displayed. It has three values: Off, Virtual, and Physical. I will tell you how to use those values ​​as an example.

Avoid using this OFF value as much as possible because If you use the “off” value, the entire text you type will appear as a single line. Your text will move to the next line only when you hit Enter key.

If you do not use this attribute or give the value “virtual” in the wrap attribute, by default your word will be wrapped and text will appear on the next line. Your text wrap depends on the column value you give.

If you want to send the information as it is in the text area then you should give value as “Physical” to the wrap attribute. Now, in this physical value, there is no problem in implementing word wrap. When you submit the form the text in the text area will be sent as it is, which means it is not sent in a single line. If any breaks or spaces are sent so, every word wrap points and information formatting you have done that information also sent to the processing form.

4. Readonly Attribute

<textarea readonly>Hello Everyone!</textarea>

The most important attribute in the text area is “readonly“. By using read-only, you can only read not write in the text area. And it is used to tell the user a piece of information. You do not need to provide any value for this attribute.

Conclusion

Hope you guys have understood, how we can create textarea in HTML and when we have to use textarea tag.