Lesson 6.3: Forms to Fill – Text Areas and Selects

In our last lesson we talked about the multi-purpose element input. In this lesson we’ll talk about the other two types of form elements we can use in our form: text areas and selects.

Text Areas

The text area element (<textarea>) is used to create a multiple line text input, also known as a text area. When looking at a text area and a text input, they usually look the same (except a text area has more lines, of course). However, their elements are a fair bit different.

The text area has two required attributes: cols and rows. The cols and rows attributes specify how many columns and rows the text area takes up. If you don’t apply any CSS to the text area, this allows you to apply a height and width to the element. However, most of the time you’ll want to style it with CSS, so these values aren’t that important as the text will fit the size, regardless of how many cols or rows it has. These are still required attributes so be sure to specify them.

Just a note, a column is equal to one character, sorta. With a monospace font (like those I use in the code boxes), that would be the case. However in most fonts it’s just an approximation. Usually it’d be calculated as 1 column equal to 1 em, which if you recall is the width of the capital M in the font being used.

Also, if you notice, I never said anything about a value attribute, like input. That’s because text areas don’t have a value attribute. Unlike their single-tagged cousin, text areas actually have an opening and closing tag. Any default text goes in between these two tags.

Here is an example text area:

<textarea cols="50" rows="10">
This is an example text area element with some default text.
</textarea>
<textarea cols="50" rows="1">
</textarea>

Live Example of Text Areas

Notice how the second one I only have one row specified, but it looks like (in most browsers) that there are two lines. This is kind of a default presentation to differentiate between text inputs and text areas. You can force it (with CSS) to look just like a text input, but this is usually not a good idea. Use the tool for the job: if you want one line, use a text input; if you want more, use a text area.

Select and Option Elements

Finally, the last form elements we are going to discuss are the select element and option element. You may not recognize the name, but I’m sure you recognize the element itself. It’s a drop-down list.

And much like a list, it has a parent element (the select element) and then a line element (the option element) and is constructed almost exactly like any other list (using select and option instead of unordered list/ordered list and line elements), as we discussed way back in the Say Something lesson.

The only real attribute that hasn’t been mentioned yet is the selected attribute of option. If you want to specify a default selection in a dropdown list that isn’t the first element, you can give it the attribute selected=”selected”, which will make it the selected item in the list. If you have more than one element with this attribute it will choose either the first or last element (depending on the browser). You should avoid at all costs having multiple elements with the selected attribute though.

One small difference concerning the use of the value attribute in option elements. Option elements have a value attribute, but they also have an opening and closing tag (like the line element). The text inside of the tags is what’s displayed to the user (like the text area attribute), but the value set in the value attribute is what is sent to the server when the form is submitted (and never seen by the user generally).

Here are some example selects:

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select>
<option value="KY">Kentucky</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="GA">Georgia</option>
</select>

Live Select/Option Example

And that’s just about it for forms, as far as HTML goes at least. There is still a lot that can be covered on forms, but those topics are for different sections. We’ll cover how to style the various form elements with CSS, how to control the form in special ways with Javascript, and how to actually do something with the input that the user gives you with PHP.