Creating a Multiline Input Field on a Form

When you want the site visitor to enter several lines of text, insert a set of start and end text area tags (<textarea></textarea>) between the form’s start and end tags (<form></form>). For example, to insert the multiline text box shown below the first and last name fields, add the start and end text area tags (<textarea></textarea>) shown after the <input> tags in the following code that defines a form:

<form name="ExampleForm">

<p>First Name: <input type="text" name="FirstName" size="15"> Last Name: <input type="text" name="LastName" size="20"></p>

<p>Message: <textarea name="TextMessage" rows="5" cols="60">


<p>[Form RESET and SUBMIT pushbuttons go here]</p>


As was the case with the label next to the single-line text fields in the preceding example, the text (“Message:”) to the left of the multiline text field is not a part of the field’s <textarea> tag. A multiline text input tag does, however, have the following attributes:

rows: The number of rows of text you want the Web browser to display inside the multiline text box at once onscreen.

cols: The number of characters you want the text box to display on each line of the multiline text box.

id: Used to assign a name to the input field. You can use the value of the id attribute to work with the contents of the input field within a script embedded in the Web page HTML.

name: A name used to identify the input field. You can use the value of the name field to refer to the value in the input field within a script executed by the Web browser. The browser normally passes the field’s name along with the field’s contents to the Web server when the visitor clicks Submit.

The <textarea> tag in the current example tells the Web browser to place a multiline text box (named “TextMessage”) on a form named “ExampleForm”. Moreover, the Web browser is to display up to 5 rows of text with up to 60 characters per row onscreen at once.

When typing text into a multiline text box, the site visitor can enter any number of characters into the form element. However, at any one time, the Web browser will display only the number of characters given by multiplying the value of the <textarea> tag’s row attribute by the value of its cols attribute. Thus, in the current example, the Web browser will display up to 300 characters (5 rows×60 characters/row) of text onscreen in the text box.

The value of the row attribute in the <textarea> tag affects the height of the text box, and the value of the cols attribute in the tag affects the input field’s width. However, the combination of the rows and cols values determines only the size of the text area onscreen (and therefore, the number of characters the browser can display in the text box at the same time). The product of rows × cols does not limit the total number of characters the visitor can type into the field.

Unlike form elements that use an <input> tag with a type attribute set to the specific type of input the element is to accept, you use a set of start and end text area tags (<textarea></textarea>) to insert a multiline text input element on a form. Although you control the dimensions of the text area with attributes within the <textarea> tag, the tag has no value attribute you can use to specify a default, initial value. If you want the Web browser to display default text within the text area, specify the text you want between the start and end text area tags(<textarea></textarea>). For example, if you want to prompt the visitor to start a message entered into a text area with “Attention Customer Service:”, you might write the text area definition with the form HTML as follows:

<p>Message: <textarea name="TextMessage" rows="5" cols="60"> Attention Customer Service:</textarea></p>

Did you know?

Most providers forget that web hosting is, and always was, a service, not a product. You must be very carefull when you are searching for a reliable and an affordable company in order to host your new website.

Copyright © 2009 - 2015 All rights reserved unless otherwise stated.