Creating multi-line text areas

If you want the user to enter more than one line of text, you can define a text area instead of using just a regular text field. If you are asking the user to enter lengthy text such as suggestions you just need to use a text area because an input box may not be sufficient for lengthy input. To define a text area, use the <textarea> tag; as an example:

<form>
Comments or suggestions: <textarea></textarea>
</form>

The output of that code is:

If you wanted to adjust the size of the text box, you add two additional attributes to the <textarea> tag:

  • rows — the rows attribute adjusts the visible height of the textarea. The rows attribute value should be entered as a number corresponding to the number of rows you want to be visible for the textarea.
  • cols — the cols attribute adjust the visible width of the textarea. The cols attribute value should be entered as a number corresponding to the number of columns you want to be visible for the textarea.

Note: because the sizes of these attributes depends on the character width setting on the browser, the actual size of the textarea may vary. If the character width becomes longer (as the user types the data) than the size of the text area, scrollbar(s) should appear automatically.

Let's define a text area of 3 rows (in other words, 3 lines) and 50 cols (in other words, 50 characters per line):

<form>
<textarea rows="3" cols="50"></textarea>
</form>

That will output: