Guide to Text Area HTML Field
This guide gives a step by step set of instructions for how to add HTML text area fields to a form, including an explanation on how to customize the size of text area fields.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

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.

medium

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.

large

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.