Designing an XHTML Form

Introduction
This is part 16 of my series XHTML Basics. If you are new to XHTML coding, then I suggest you read the previous two parts before this one. The titles of the previous two parts are XHTML Basic Input Controls and Basics of XHTML Form Controls, respectively. In this part of the series, I talk about a simple layout of the Form Controls and how to send the Form content (data set) to its ultimate destination.

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.

Simple Layout
Note that in a Form, for each control, there should be a label element and the control itself. We saw in the previous chapter that when you put the labels and their corresponding controls in different lines, there is poor vertical alignment of the controls. Many users would want to see the labels in one vertical column and the controls in another vertical column. The best way to achieve this is to use an XHTML TABLE element. In the TABLE element, you put the labels in one column and the controls in another column. Your table should have at least two columns. Each label and its control would be in one row of the table. Try the following code to appreciate what I am saying.

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

Feedback Form
Fill the following Form and send.

Fields with * are required.

First Name*name="firstName" id="fn">
Last Namename="lastName" id="ln">
Sexid="se" value="male">
value="female">
Email*name="email" id="em">
Companyname="company" id="co" value="http://">
Streetname="street" id="st">
Cityname="street" id="ct">
Statename="State" id="sta">
Countryname="State" id="country">
Subjectname="Subject" id="sbjt">
Message*id="msg" rows="4" cols="40">Some possible initial text.
Cleartype="submit">Send

There are certain things to take note of. First of all, the TABLE element is in the FORM element. The Form element is a containing element. So it can take other XHTML elements. Each control has a name. When the Form is submitted, the name and the value of each control are sent. If a control does not have a name, then its value is not sent. I have not given a name to the Reset and Submit buttons, because their values do not need to be sent for the ordinary form. These two buttons have functions that they carry out, and normally do not send values. The Reset button resets the form to its downloaded (arrival) state. The Submit button sends the data set (name/value pairs) to the server. Do not confuse between the name of a control and its label. The name of a control is an attribute of the control. The Label is an element, which relates to a control.

Note: A control's name and ID can be the same thing, like in the Text Area control above.

Also note: the Reset button is in the first Table column and the Submit button is in the second Table column.

Start Tag of Form Element
Let us look at what is in the start tag of the Form element. You have the following:

action="http://www.mywebsite.com/file.exe" method="post"

There are two attributes of interest here: the action and the method attributes. The value of the action attribute is the URL of the executable program file that will receive the data set (complete Form information) at the server. Remember, the value of any control that does not have a name, is not sent by the browser.

The method attribute, can take the value, "get" or "post". With the "get" value, people can see the data set information attached to the URL (at the address bar of the browser); also the amount of information you can send with the "get" value is limited. The URL we are talking about in this article is the value of the action attribute. With the "post" value, people cannot see the data set information attached to the URL; that is the data set information is not attached to the URL as it is sent.

Characters of the Name Attribute Value
The value of the name attribute of a control must begin with a letter (

Even thought the name value cannot have a space, name should be what the user can understand. If you want a space, for example, if you want "First Name" instead of "firstname" then you can replace the space with the hyphen or underscore. So you should have "First-Name" or "First_Name". The person reading the data set that is submitted will see "First-Name" or "First_Name" depending on what you typed. Well, what I have said here is what is in the HTML specification. Maybe your web system would allow spaces in the value of the name attribute. If you are a beginner, my advice is that you use the hyphen or underscore if you want a space.

The action attribute value
The action attribute value is the URL of the executable program file at the server that receives the data set. This file can either send the data set to an email box or to a database, or even save the data set in a file. Now, the ultimate destination (email, database or file) may be in the same server as this executable file or may be in a different server. In this part of the series we shall talk only about the case of sending a data set to an email box.

Requirements of the action value for Email
The program that receives the data set at the server can send the data set to an email box. This program will format the data set so that it will be presented to the ultimate user in a way similar to how it appeared at the form. The company hosting your web site will give you details about this executable program file. What does this program need from the web page designer, you? As a minimum it needs:

- the email address to which it has to send the email.
- the URL of a page it will send to the Form user to indicate that his message (data set) has been sent to its final destination.
- if the user does not fill any of the required fields (controls), this program needs the URL of an XHTML page it should send back to the user to indicate that he has to fill all the required fields.

Different types of this executable program file exist with different servers. Each requires you to code the above information in its own way. Here, I show you the most common way to code this in your Form. So let us see what the designer of the Form page has to code for the above three points.

For the first point, type the following anywhere between the start and end Form tags:

First of all know notice that this is a hidden Input element because the value of the type attribute is "hidden", and so even though it would be in the Form at the client browser, the user of the Form will not see it. The value of this hidden Input element is the mail to which the data set will be sent. The name of the hidden control is "recipient". The executable program file at the server has been coded to recognize this particular name. When it sees this name, it will take the value of the control as the email address to which it will send the form data set.

For the second point, type the following anywhere between the start and end Form tags:

Again, we have a hidden Input control. It will not be seen by the user, but it will be there at the browser. The name of the control is "redirect". The program at the server has been coded to recognize this. When it sees this, it knows the value of the control is the URL of a web page of the web site (a normal web site is a directory with sub directories that has all the related web pages that constitute a unit source of information) that it will send back to the user to indicate that his data set has been sent to the ultimate destination (email box). In the above tag, the name of this web page is, sent.htm. The content of this "sent" file could be something like this:

My Web Site Title
Thank You.
Your Message has been sent.

Try the above code. The user who sends the form needs to have some self-assurance that his message (data set) has been sent. The above is a good solution.

For the third point, type the following anywhere between the start and end Form tags:

Note: Form controls are called fields. Again, we have a hidden Input control. It will not be seen by the user, but it will be there at the browser. You need actually two hidden Input controls for this purpose (see below). The name of the control is "missing_fields_redirect". The program at the server has been coded to recognize this. When it sees this, it knows the value of the control is the URL of the web page in the web site that it will send back to the user to indicate that his data set has not been sent to the ultimate destination, because one or more required fields have not been filled. In the above tag, the name of this web page is, error.htm. The content of this "error" file can be something like this:

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

My Web Site Title
Error!
You must fill all the fields with *.

Try the above code. The program that receives the data set will check if all the required fields have been filled. If any has not been filled, it will not send the data set to the ultimate destination (email box). It will send instead, the error page to the user.

You need two Input Hidden controls for the third point. You have to type the following anywhere between the start and end tag of the Form element.

This control is a hidden Input control. The name is "required". The executable program file at the server has been coded to recognize this name. When it sees this name, it knows hat the corresponding value attribute has a list of comma-separated words. These words are the attribute names of the fields that are required (must be filled by the Form user).

So, there are three minimum points to take into consideration so far as sending the data set to an email box is concerned. There are however, 4 related hidden Input controls. Two of the hidden controls are for the third point above.

A web hosting company is a company the keeps your web pages of your web site so that Internet users can see it. These pages are related by hyperlinks on the pages. When you host your web site (web pages) ask the company hosting your web site to give you the documentation and URL of the executable program file. It is the URL that you use as the value for the action attribute in the Form element. The documentation will tell you precisely what you have to do concerning the features of the above three hidden Input controls.

You might need to also change something on this executable program file. The documentation will tell you what to do. In particular you might need to change (or give) the path or URL of what is called the sendmail program. This is the program that actually sends the mail to the receiver's email box.

That is it for this part of the series. It is the last part concerning XHTML Forms. One of the things some of you may be eager to know is how to upload files; this is a subject for a different article, out of this series; keep reading my blogs.

We are near the end of the series. You are almost ready to start designing web pages. In the next part I will talk about layout (arrangement of your web page).

See you then.

Chrys