- Read Tutorial
- Watch Guide Video
In this video, we're going to see how to create large text areas to take input from the user.
To implement this, we'll have to use a separate HTML tag called <textarea>
. This element is similar to a textbox but is much larger in size, and you can customize its length and width to match your design requirements.
Going back to our example, we'll use a text area to create a field for a message. Let's add a label and a text area.
Now, this <textarea>
tag can take a number of attributes, so we'll use name
, and something called rows
. This rows
attribute helps you to define the height of your text area. Let's say, you want to fit in 15 rows of content, then you set the value of rows
to 15, and this is how your text area will look.
As with rows
, there is something called cols
that helps you to define the width of your text area. Imagine an excel spreadsheet, and you'll be able to relate to rows
and cols
. One thing to note here is cols
work slightly different than rows
. Let's say, you put a value of 15 for your cols
attribute, this will effectively shrink the size of the text area, so a value of 100 would be better. In general, cols
value depends on the character length. if you want your text area to hold 100 characters, then that's what you should specify.
The code is:
<label for="message">Message:</label><br> <textarea name="message" rows="15" cols="100"></textarea><br>
So, this is a great way to create a text area, and customize it to meet your size requirements.
One more cool thing about text area is, you can go beyond the specified rows
value too. In our case, you can type content for more than 15 rows too. When you have more content, text area automatically creates a scroll bar, to make it easy for you to read through your content.
In this sense, rows
value is the content you can see without scrolling up or down.
This is also something you should keep in mind while designing your page. Also, another cool thing is modern browsers allow you to resize the text area in the browser. Simply drag and drop the text area to get the size you want, depending on the amount of text you want to type.
However, the look and feel may change from browser to browser.