Basics of XHTML Form Controls

Introduction
This is part 15 of my series XHTML Basics. In this part of the series I talk about XHTML Form Controls. If you do not know the meaning of XHTML Form Controls, then read part 14, which is the previous part of the series.

Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.

Input Controls
A group of XHTML Form Controls can be classified as INPUT Controls. INPUT is the tag or element name. Common Input controls are the Text Input, Password, Check Box, Radio Button and the Hidden Input Control elements. If you do not know what these mean, then read the previous part (part 14).

The Select Control
You can have a short one-column drop-down menu on your web page. Imagine that you want a one-column drop-down menu of list of fruits (pear, peach, apple, banana, pineapple). You use the SELECT element for this. In tag format, the SELECT element is:

The start tag can have attributes. The start and end tags are required. Tag name is always in lower case.

Each Form control must have a name attribute. Each control should have a value (content from user); however, if you do not include the value attribute, the browser will still associate the current value to the control. The value attribute is normally used when you have an initial value (see previous part of the series).

The OPTION Element
In other for the SELECT element to hold the items of the menu, it needs what is called the OPTION element. Each OPTION element holds one item of the menu. In tag format, the OPTION element is:

item

The start tag can have attributes. The start and end tags are required. Tag name is always in lower case.

So our menu of fruits would be,

pear
peach
apple
banana
pineapple

Try the following code to see how the select element looks like at the browser:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

pear
peach
apple
banana
pineapple

You should have seen the Select Control at the browser. The item that appears first in the code (option) is the single item that appears in the Select Control, when the list is not opened. We say, this is the item that is pre-selected. If you click the drop down button of the menu, you should see the list of items.

If you do not want the first item to be pre-selected, you can determine which of the other items will be pre-selected. To do this you use what us called a Boolean attribute. A Boolean attribute is an attribute that does not have a value. We saw an example (checked) in the previous part of the series. The one to use here is, selected. You put this attribute in the start tag of the corresponding OPTION element. The following code will show, apple, first when the list is not opened:

pear
peach
apple
banana
pineapple

You can fit this code segment into the preceding code and try.

Whether the pre-selected value was determined by you or not, when you click the drop down button of the SELECT element, a list appears. You select any item from the list by clicking it. After clicking the item, the list disappears and the selected item (now the current value) appears as the single element of the SELECT control.

Selecting Multiple Elements
The way the SELECT element has been described above, only one item can be selected at a time, and the SELECT element, by default, only shows the current (selected) value. Note: the pre-selected value is the initial value, which is displayed as the web page is shown for the first time. There is a Boolean attribute called, multiple. If you add this attribute to the start tag of the SELECT element (not an OPTION element), the SELECT element will always be displaying many of the items of the list. You can then select different items by pressing down the CTRL Key, on the keyboard, while you click the different items of the your choice. Try the following code and select more than one value:

pear
peach
apple
banana
pineapple

If the list (menu) is too long, a vertical scroll bar will appear on the right of the list. You can use the scroll bar to scroll up and down to see all the items. You can however determine the number of rows of the list that will be displayed. To do this you use the size attribute in the start tag of the SELECT element. The value of the size attribute is an integer, which is equal to the number of rows displayed. The following code illustrates this:

pear
peach
apple
banana
pineapple

The Text Area Control
You may want to send a sentence, a paragraph or paragraphs with a Form to the server. The TEXTAREA element is used for this. The TEXTAREA element is like a Text Input element that can accept many lines of text. As you type into the TEXTAREA element, when you reach the right end of the TEXTAREA, the words wrap into the next line. Whenever you press the Enter Key, the I-bar goes to the next line.

In the simplest form, the tags for the Text Area element is:

The text the user types at the browser goes as content for the TEXAREA element. Now this content is the value of the TEXTAREA element. If you want an initial value for the TEXTAREA element, type text as content for the TEXAREA tags, as follows:

Text of the user goes here.

Remember, the initial value is what comes with the web page. The current value is what the user types. For the Text Input or Text Area element, the user has the privilege to add text to the initial value or replace it. Try the following code to appreciate what is going on first before you continue.

Text of the user goes here.

You do not need the value attribute for the TEXTAREA element. The browser takes care of that for you, using the content of the TEXTAREA element. If you want an initial value with the TEXTAREA element, type what you want as content at the design level. You can determine how many rows and columns you want displayed, for the TEXTAREA element. The rows and columns are given in terms of number of characters. In the case of columns, the number is an approximation. Try the following code to illustrate this:

Text of the user goes here.

The attribute, rows, is used for the number of rows. The attribute, cols, is used for the number of columns. See the example in the above code. Since different characters generally have different widths for the same font, this column number is usually an approximation. However, the rows number quoted is not supposed to be an approximation.

Now, you can type text into the TEXTAREA that will take an area larger the space you have allocated for the TEXTAREA. The TEXTAREA always develops a vertical scroll bar, which allows you to do this, enabling the space for your TEXT AREA to be small.

Note: you do not need the value attribute for the TEXTAREA.

The start and end tags for the TEXTAREA element are required. Tag and attribute names are always in lower case. Remember, each control should have a name.

Button Controls
There are three types of Buttons for XHTML Forms. They are called the Reset Button, the Submit Button and the Push Button. You need the Reset and Push Buttons for the ordinary Form.

The Reset Button
As the user is filling the XHTML form, he can make a mistake. The purpose of the Reset button is to clear all the controls so that the user can start all over again. When the user clicks the Reset button, all the values of the controls are replaced by their initial values. In the case where there was no initial value, the control becomes blank. In the simplest form, the tags for your Reset Button are:

Clear

The name of the tag is, button, in lower case. End tags are required. There is a type attribute whose value most be "reset". The content of the button above is "Clear". This is what appears on the button at the browser. That is the only thing you can change in your own reset button. Use a word that will indicate to the user that he can erase (and reset) all what he has typed. The start tag can have a value attribute with a value, but that will not normally serve any purpose.

The Submit Button
After you have filled you Form and you are satisfied, you click the Submit button to send the data set (all form information) to the server. The function of the Submit button is to send the data set to the server. In the simplest form, the tags for your Submit Button are:

Send

The name of the tag is, button, in lower case. End tags are required. There is a type attribute whose value most be "submit". The content of the button above is "Send". This is what appears on the button at the browser. That is the only thing you can change in your own submit button. Use a word that will indicate to the user that clicking it will send the data set to the server. The start tag can have a value attribute with a value, but that will not normally serve any purpose.

A form should have a Reset and a Submit button.

Labels
Imagine that you have a form consisting of a Text Input control for the user's first name; another Text Input control for the user's last name; and another one for the user's email address. Try the following code to appreciate what I am saying:

Clear Send

If you have tried the above code, you would have realized that there is no way the user can know which input control is for the first name, which is for the last name, and which is for the email. The LABEL element is used for this purpose. The LABEL element allows the user to identify the purpose of a control with the presence of a word or phrase next to the control. In the simplest form, the syntax for the LABEL element is:

Label for element with ID

The tag name is, label and must be in lower case. Start and end tags are required. There is an attribute called the, for attribute. The value for this attribute is the element ID to which the LABEL element is referring. The content of the LABEL element is the word or phrase that identifies the corresponding control (element). This means when you use a LABEL you have to give the corresponding element an ID. The above code is revised with the use of labels as follows:

First Name

Last Name

Email

Clear Send

Try the above code.

The use of the LABEL element does not guarantee that the label will be next to its corresponding element. Normally, you can just type the identifier word or phrase next to the control without using a label. The advantage the LABEL element brings is that when you click the label the corresponding control will receive focus (I-bar). The LABEL element is an XHTML element, so you can place it anywhere you want. However, it is always good to place it next to the corresponding control.

Note that the Reset and Submit buttons as described above does not need the label element. This is because, on the Reset button, the user will see "Clear" and on the Submit button, the user will see "Send". To the user "Clear" means Reset and "Send" means Submit.

If you tried the above code, you would have noticed that controls are not vertically align. The best way to achieve vertical alignment for the above code, is to use a table element and put the labels in one column of the table and the controls in the next column of the table (see next part of the series for an example).

Well, let us take a break now and continue in the next part of the series. In the next part of the series we shall talk about a simple design of a web form.

Chrys