Textarea and Select elements in Forms

Tweet

Textarea and Select are the other two elements other than input element, which is used within a form element. The textarea displays a bigger input box and the select gives you a drop-down list and let us see what and how to use it here.

Textarea element

<label>Comment:</label><br />
<textarea name="comment" rows="3" cols="25">Type something here...</textarea>

A textarea element is similar to the input element, except that textarea can contain and show multiple lines of text data.

Unlike the input element, textarea has an opening and closing tag. Any text in between the opening and closing tag makes up the initial value of the element but it is mostly avoided because the user have to delete the texts before entering their own. Then, the rows and cols attribute denote the size of the text area.

Select element

<select name="prologue">
<option value="1">Myth and Dream</option>
<option value="2">Tragedy and Comedy</option>
<option value="3" selected="selected">The Hero and the God</option>
<option value="4">The World Navel</option>
</select>

The select form fields present the user with a list, from which one or more options can be selected.

The set of texts for a drop-down lists is achieved using the option tag. You can give different values for each option element by using the value attribute inside the option tag. When the value attribute is present, its value will be sent instead of the option element's content. You can preselect the option value using the selected attribute inside the option tag.

<select name="part1">
<optgroup label="Chapter1">
     <option>The Call to Adventure</option>
     <option>Refusal of the Call</option>
     <option>Supernatural Aid</option>
     <option>The Crossing of the First Threshold</option>
     <option>The Belly of the Whale</option>
</optgroup>
<optgroup label="Chapter2">
     <option>The Road of Trials</option>
     <option>The Meeting with the Goddess</option>
     <option>Woman as the Temptress</option>
     <option>Atonement with the Father</option>
     <option>Apotheosis</option>
     <option>The Ultimate Boon</option>
</optgroup>
</select>

For longer lists with obvious grouping, you can use optgroup elements, which supply a heading within the list. This can be done using the label attribute.

<select name="part1" size="5" >
.... <!--some code missing-->
</select>

By default, select element will show one option at a time, but you can choose more than one option at a time by setting the size attribute.

<select name="part1" size="6" multiple="multiple">
.... <!--some code missing-->
</select>

Normally, the user can select one option out of a select list. You can allow multiple selections by using the multiple attribute. The user can access this option by holding down a Ctrl key, with a selection.