XHTML Basic Input Controls

XHTML Basics - Part 14

Introduction
This is part 14 of my series XHTML Basics. The XHTML Form has a similar purpose to paper Form you fill in offices. The XHTML Form is part of a web page. The XHTML Form has a button called the submit button. After finished filling the Form, you click the submit button. When you click the submit button, all the information, called the data set, entered into the Form is sent to a server. The server can be a web server, a mail server or some other server. At the server, there is a program that will process the data set.

There is an XHTML element called the FORM element that is used to create the XHTML Form. The URL (of which the address of the server is part) for the processing program at the server is the value of an attribute in the start tag of the FORM element.

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

The FORM Element
Let us look at the basics of the code of the FORM element. This is an example:

In this example, there is only the FORM start tag and the FORM end tag; there is no content in this Form. We shall look at what goes inside the FORM element below. There are two attributes in the start tag. The first one is called the action attribute. Its value is the URL of the program (file) at the server that will process the data set (complete form information) sent by the browser from the client. The left part of this URL is the address of the server having the program.

The second attribute in the start tag of the form element is called the method attribute. Its value is either the string, “post” or the string, “get”. With the “get” value you would see the data set text in the address bar of your browser when the form is sent. However, with the “post” value you never see the data set text at the address bar. The “post” value offers better security to your data. The “get” value also has the disadvantage that the amount of data that can be sent is limited. The tag and attribute names of the form element must be in lower case.

Let us now look at what goes inside the Form element.

Controls
The elements that go inside the FORM element are called Controls. We shall learn the basics of the common controls in this article. Each control should receive a bit of the data set information. Each of these controls can have an initial value; that is, as soon as the web page is loaded, the user sees the value on the web page. What the user types into the control is called the current value, which replaces the initial value.

The Text Input
The text input control allows you to type in text consisting of one word or a phrase. The following peace of code describes the element:

This is a single tag element. It begins with the tag name, input, in lower case. This is followed by the attribute, type. Actually, the input element can be used to create different types of elements, not only the one that receives text. You end up with different types of element by using different values for the type attribute. The value of the type attribute gives you the particular element. In the case here of the Text Input element, we want a control that will receive a line of text; so the value of the type element is, “text”. Every control should have a Name attribute with the corresponding value. Here, the Name attribute is, name, and the corresponding value is “firstName”. As a rule, the value of the Name attribute should begin with a letter and should not have a space.

In the above tag, you have the attribute called, value. You use this attribute to specify the initial data of the control. Imagine a set of users where most of their first name is “John”. In this case, the value attribute corresponding value would be,

value="John"

The particular user can over-type the initial value. What the user types (over-types) is
called the Current Value. After the user has typed the current value, the browser changes the value of the value attribute to the current value. In the above INPUT tag, the initial value is an empty string.

The size attribute, gives you the length of the Text Input control in terms of number of characters.

Note: with the exception of the Name attribute, the three other attributes are optional. So the following tag will still produce a text input element:

I advice you to always add at least, the type attribute.

Remember, all tag and attribute names are in lower case.

Password Control
You must have noticed that when you type your password into a computer, you do not see the password on the screen; you see small solid disks or asterisks or some special character to indicate the individual characters of your password. The XHTML password control is used to achieve this effect.

This password control is an Input element where the value of the type attribute is “password”. The following tag illustrates this:

As I said above, the INPUT element can take different type values, which result in different elements.

Well, try the following code to appreciate all what has been said so far:

There are two INPUT elements in the form: one for email (text) and one for a password. Type something into the INPUT elements at the browser.

All controls are inline elements. So in the code, the line break element is used to send the second control to the next line at the browser.

Check Box
A check box is a small square box. It can have a tick or be blank. If it is blank, when the user clicks into it, it displays a tick. If it has a tick, when the user clicks into it, the tick would be removed. When it has a tick we say it is checked. When it does not have a tick it is not checked. This is an example of a check box tag:

The check box is an INPUT element whose type value is “checkbox”. All controls should have a Name (attribute).

The check box is used in situations where the user has to indicate Yes or No; or anything that boils down to Yes or No. There are synonyms to Yes or No: you have True or False and On or Off; you will see other examples of this as you carry on with programming.

With browser vocabulary, when a check box is checked, we say it is in the On state. When it is not checked we say it is in the Off state. Synonyms for On/Off are Yes/No or True/False as mentioned above. In browser forums On/Off is common.

Without an initial value, the check box comes blank. The initial value results in a tick, since the check box can either have a tick or be blank (no tick). The initial value of the check box comes as an attribute without value. The above tag is modified to have the initial value as follows:

The attribute without value is, checked; it has to be in lower case. If you do not want an initial value, do not put the checked attribute. There is no equivalent attribute (or value) for the situation where the check box is not checked. So if you do not want the check box to be initially On (have a tick), simply omit the checked attribute.

Now in the above tag, there are two values: the first one is “banana” for the value attribute; the second one is, checked for the On/Off state attribute. Now, when you click the Form Submit button, if the check box has a tick as a result of the fact that the user clicked it or the checked box had it initially (checked), then the value “banana” will be sent to the server; if the check box does not have a tick when the Form is submitted, then the value “banana” will not be sent to the server. I hope you see the difference between the two values. As a rule, it is the value for “banana” that is called value. That for checked is called a Boolean attribute.

The INPUT element is a single tag element that can take different type values to result in different elements. We have seen three cases of this; there are other cases.

Remember, all XHTML tag and attribute names must be in lower case. Also remember that all Name attributes must start with a letter and should not have a space.

Try the following code where the first two check boxes are not initially On and the next two are initially On.

Click each of the check boxes to toggle its On/Off state at the browser; click each box several times.

Radio Button
When a user has to choose one option from several options, you the web site designer provides to him what is called, Radio Buttons. A radio button is a circle that can acquire a dot or be blank (not have a dot). The behavior of a radio button is similar to that of a check box. However, unlike the check box that can exist alone, a radio button exists with other radio buttons, so that the user can choose between different options. Radio buttons exists in groups. Only one option in a group can be chosen (clicked) at any time. Try the following code first before we continue with the explanation:

First Group

Second Group

There are two groups of radio buttons in the code. Radio Button elements of the same group have the same name. It is the common name that keeps a set of radio button as a group. In a group only one radio button can have a dot. The radio button is an INPUT button with the type value of, radio.

Only one radio button in a group can be checked. That is, only one radio button in a group can have a dot. You can set the initial value of only one radio button in a group. You use the attribute without value; this attribute is, checked. There is no equivalent attribute or value for Not Checked; so if you do not want the initial value to be checked, do not put any attribute for that purpose.

In the above code, the second group has the middle radio button checked. Try the above code again and click each radio button to toggle its display. Click each button several times. Note that only one radio button in a group can have the dot.

A radio button that has a dot (checked) is said to be in the On state. A radio button that does not have a dot is said to be in the Off state.

Check Boxes and Radio Buttons Revisited
When the Form is submitted (sent to server), only the value of the check box or radio button that has the On state is sent to the server. With check boxes, many of them can have the On state. However, with radio buttons, only one in a group can have the On state.

Hidden Input Control
When the Form is submitted, you might want the data set to go to an email box for somebody to read. You might not want the user (sender) of the Form to read this destination email address. You use the Hidden Input control for this purpose. The hidden input control is on the web page at the user’s browser. However, since this INPUT control is hidden, the user does not see it. You use the Hidden Input control for any other information that you hide from the user (but not from the destination).

An example is,

It is the program at the server that receives the data set of the Form that has the responsibility to send the data set to the email box.

Information sent to Server
The data set is all the information of the Form. Note: each control of the Form must have a name and a value. The value that matters is the current value. If the initial value is not changed during the user’s session, it becomes the current value. The data set consists of all the name/value pairs of the controls. This applies to all controls, not just INPUT controls. When the user clicks the form submit button, the data set (all of it) is sent to the server.

Conclusion
The INPUT element is one type of Form control; there are others. The INPUT element has a type attribute that makes it result effectively in different elements. Common IMPUT elements or INPUT controls are the Text Input, Password, Check Box, Radio button and the Hidden Input Control elements.

Note: you do not need to have only controls in the Form element. You can have other elements, such as Paragraphs, line break elements, plain text, etc.

In the next part of the series, we shall look at other Form controls.

Chrys