Labels, Textareas

Labels

You can add labels to your form, and attach them to a specific text box or other form element. They are good when you have small elements like check boxes, as you can click on the label to select the check box.
To add a label a pair of LABEL tags are used:

<LABEL>Label Text Here</LABEL>

The text you want to go on the label goes between the two tags.
To attach a label to a particular form element the FOR attribute is used, followed by the ID of the form element you want to attach it to. For example, examine the code below:
<LABEL FOR="tb1">First Name: </LABEL>
<INPUT ID="tb1" TYPE="Text" Value="Enter your first name" NAME="textBox1">
In the code above, the LABEL is FOR a form element with the ID "tb1". Here's what it looks like in the

In the image above, we have clicked on the label. This highlights the text in the text box. A user can then just type a first name, without having to click inside of the text box. The label does this because it knows which text box it is "FOR".

TEXTAREA

If you want a bigger text box, for people to leave comments for example, then you can use the TEXTAREA tag.
Textarea doesn't use the INPUT tag. And you need an end Textarea tag, as well. After typing a space, you specify how big your Textarea is going to be. You do this with the ROWS and COLS attributes. The Height equates to Rows, and the Width to Cols (not Columns):

<TEXTAREA ROWS="7" COLS="30" NAME="TextArea1" ID="TA1">

</TEXTAREA>

If you want some default text to appear in the Textarea then you can type it between the two tags:
<TEXTAREA ROWS="7" COLS="30" NAME="TextArea1" ID="TA1">
Default text area
</TEXTAREA>
The text area above would then look like this in Firefox version 4 and later:

Notice the little triangle in the bottom right. Hold your mouse down over the triangle and you can drag to resize it. (Only Firefox has this, at the time of writing.)
You can also attach a label to the Textarea. You do it in exactly the same way as for text boxes:
<LABEL FOR="TA1">Comments:</LABEL>
<TEXTAREA ROWS="7" COLS="30" NAME="TextArea1" ID="TA1">
Default text area
</TEXTAREA>

Exercise
Add a Textarea to your own form. Apply some CSS styling to liven it up a little.

HTML5 adds some more attributes you can use with the TEXTAREA tag, and you'll see these shortly

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 8 (HTML forms)