Easy Form Design

In this article, I show you how to code your own html submission forms. Maybe you are using a WYSIWYG web page design tool and you can't get your forms to work the way you want them to. Maybe you want to show a web page designer how you want your form to look, but you don't have time learn a bloated program. Maybe you hand code all your web pages in a simple text editor like I do. If any one of these describes your situation, this article is for you.

Before I get into the specifics of form design, I want to explain one very important thing. A form is static html code and therefore can't do much on its own. No matter how pretty your form looks, it needs another part, the active programming code part to do something with the information that the user enters into the form.

JavaScript is a programming language that can run on the client side (in the users browser) to do something with the form information. JavaScript is great for performing client side validation of the form information. But the only way client side JavaScript can get the information out of the form is to send it to the users email program.

To get the information out of the form and onto the server you need a language that can send the information to the servers Common Gateway Interface (CGI) or to the Web servers Application Program Interface (API). CGI programming is usually done with Perl script. API programming is usually done with ASP (Active Server Pages).

Before putting time into designing your form, first decide what you want to do with the information submitted by the form. If you only want to send the information to an email box, then it's very possible that you can write your own program to work with the form. At the end of this article, I will give you some tips to get you started with your program.

If you want to write the information to a file or a database, that will require some serious programming that is beyond the scope of this article. However, there is nothing wrong with designing a form the way you want it, and then handing it over to a programmer for active programming code part.

The Text Element

When you design a form, the html code for the entire form is placed between the <form> and </form> tags. Inside those tags, you might place a form "element"; for example, a text box. A text box would be coded with the html <input type="text">. Shown below is the html code for this simplest form.

Below is shown the result of how this code would appear on a web page.

The form tag usually contains two attributes. The action attribute specifies the name of the file containing the active programming code. The method attribute specifies how the information should be sent. The method can be either the "post" or "get" method. A form usually contains a Submit button element. When the user clicks on the Submit button, the action element is executed. Below is more complete form example.

When the form is submitted by clicking on the Submit button, the information in the form is sent to the server. If the form method is "post", the information is sent in HTTP format to the server. If the form method is "get", the information is sent in a query string attached to the URL. Below is the code for a form similar to that above, except here we have placed a name attribute in the text element and set the name attribute to "name".

Below is the result of how this code would appear on a web page. Except that I have modified the code for educational purposes. When you enter your name in the text box and click the "submit" button, a popup window will appear displaying a simulated query string.

The text box element can contain several other attributes. The most commonly used are size, maxlength, and value. The size attribute is the number of characters wide the text box should be. The maxlength attribute defines the maximum number of characters the user is allowed to enter into the text box. The value attribute is default text that is displayed in the text box. Below is an example of the use of these attributes.

The Textarea Element

A text box can be used for one-line input. The textarea element can contain multiple lines of text. The most commonly used attributes of the textarea element are cols, rows, and wrap. The cols attribute sets how many characters wide the textarea should be. The rows attribute sets how many characters high the textarea should be. The wrap attribute specifies that text entered into the textarea should break on words at the end of each line. Below is an example of a textarea element.

Below is the code for a form that contains a text box for the user to enter their name, and a textarea for the user to enter a comment.

<form method="get" action="program.asp">
Name: <input type="text"><br />
Comment:<br />
<textarea name="comment" cols="30" rows="3" wrap></textarea><br />
<input type="Submit">
</form>

Below is the result of how this code would appear on a web page. Enter your name and a comment in the form below and then click on the submit button to view how the query string would be formed.

You could put default text in the textarea by placing it between the <textarea></textarea> tags.

The Checkbox Element

A checkbox element enables users to select options. A check box element should have a name attribute, and the checked keywork if the check box is checked by default. Below is the code for a form that lets the user choose colors.

<form method="get" action="program.asp">
<input type="checkbox" name="Red" checked>Red<br />
<input type="checkbox" name="Green">Green<br />
<input type="checkbox" name="Blue">Blue<br />
<input type="Submit">
</form>

Below is the result of how this code would appear on a web page. Click on the check boxes in the form below and then click on the submit button to view how the query string would be formed.

The Radio Button Element

Radio button elements are used when you want to present the user with options from which only one can be chosen. Radio buttons should have name and value attributes. The name attribute should be the same for every member of a set of radio buttons. Use the checked keyword to set a radio button by default. Below is the code for a form that lets the user choose a only single color.

<form method="get" action="program.asp">
<input type="radio" name="color" value="Red" checked>Red<br />
<input type="radio" name="color" value="Green" >Green<br />
<input type="radio" name="color" value="Blue" >Blue<br />
<input type="Submit">
</form>

Below is the result of how this code would appear on a web page. Click on the radio buttons in the form below and then click on the submit button to view how the query string would be formed.

The Select Element

A drop down list box from which users can select an option is created with a select element. All the drop down list options are placed between the <select> and </select> tags. Inside those tags, you place options by using the <option> and </option> tags. Place the text value of each option between the <option> and </option> tags. Below is example code for a form with a drop down list.

<form method="get" action="program.asp">
<select>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<input type="Submit">
</form>

To select an option in the drop down list by default, place the selected keyword inside its <option> tag. Use the size attribute of the </select> tag to define the number of options displayed in the box. Use the mulitiple keyword in the </select> tag to enable the user to select multiple options in the drop down list when they hold down the CTRL key or the SHIFT key while selecting. Below shows more complete code for the drop down list.

<form method="get" action="program.asp">
<select size=2 multiple>
<option selected>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<input type="Submit">
</form>

Below is the result of how this code would appear on a web page. Select some items in the drop down list in the form below and then click on the submit button to view how the query string would be formed.

The Button Element

To send the information in the form to the page specified by the action attribute of the <form> tag, we have been using a Submit button at the end of each form. Another input type is Reset. This creates a button that clears the form or sets it back to the defaults when clicked on.

If we set the input type attribute to just plain "button", we create a generic button. The value attribute of this input tag is then used to define the text label on the button. The JavaScript onClick event of the button can then be used to give the button functionality. Below is example code for a generic button.

The Hidden Element

Another type of form element, the "hidden" type, can contain information in the form that the user cannot see. The "hidden" type is very useful for passing data from one page to the next in a web application. For example, the element below could be used to store a page number.

Of course, in a single form you can use as many and any combination of the form elements described in this article. To make a tidy looking form, you could place the form elements within the cells of a table. It is perfectly safe to mix html table tags with form element tags, as long as the table tags don't end up inside an element tag or in a location where the table tags would be interpreted as the default text for a form element. It is also good practice to give each form element a unique name.

Getting the Information Out Of the Form

At the beginning of the article I mentioned that the form tag contains the method attribute which specifies how the information should be sent. The method can be either "post" or "get". The "post" method sends the form information in http format to the server. The information is not visible to the user. The "get" method sends the form information in a query string attached to the URL. A query string starts with the name of the web page that contains the code to process the form, followed by a "?", followed by the names and values of the elements in the form.

The "?" in the query string is followed by the name of the first element in the form, then the "=" character, then the value contained in that first element. Each additional element in the form is preceded by a "&" character. If a value contains spaces or other characters that have meaning in a URL, they are replaced with other characters. For example, a space is replaced with the "+" character, the "/" is replaced with the escape characters "%2F".

Understanding the format of the query string can useful when troubleshooting your form or the code that processes the form. You might want to set the form tags method attribute to "get" for troubleshooting, and then change it to "post" for production use. If you use the "get" method, the user can view the form information in the browsers URL. For example, if you use type="password" with the <input> tag, characters typed into the text box will show up as asterisks on the screen so that an onlooker can't see what is being typed. But form information sent using the "get" method will show up in plain text in the address bar of the browser. Hidden fields and password fields will be visible to the user and onlookers.

When you click the submit button on a form, there are several options as to what you can do with the information on the form.

1. Use it to create another web page.
2. Send it by email with the email program configured in the users browser.
3. Send it by email with the email program configured on the server.
4. Store the information in a text file or data base on the server.

Obviously, the first choise is of limited use except to provide feedback to the user. The second choice assumes that the user has a default email program configured in their browser. This is almost always the case. However, some people use only web based email and never configure an email program in their browser. You can learn more about sending form information by this method in the article "Submit Forms Without CGI".

The last choice in the list is the best option, but how to do it is beyond the scope of this article. I will explain that in a future article. In this article, I want to provide you with a few tips on how to send form information using the email program configured on your server.

Most web servers are Apache running on Linux. They usually have a Perl interpeter and the sendmail program configured. To send mail from your form, you need to place a file containing a Perl script in the cgi-bin directory of your web site. Then you need to change the file's attributes to make it executable. The command for this is:

chmod 755 file_name

If you don't have local access to the server, you will need to do this using Telnet or FTP. Many web hosts provide you with a "Control Panel" that lets you perform this function through your web browser. Below is an example of a Perl script used with an email form. The important thing is the first line, which must be the path to the Perl interpeter on your server. Also note the lines containing the path to the sendmail program on your server and the email address to send to.

#!/usr/local/bin/perl

print "Content-type:text/html\n\n";

# read input stream into scalar buffer
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});

# split string at & char and put parts in array
@pairs = split(/&/, $buffer);

foreach $pair (@pairs)
{
# split each array value at = char
($name, $value) = split(/=/, $pair);

# perform translation and substitution
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;

$FORM{$name} = $value;
}

# this is the location of your sendmail program
$mailprog = '/usr/sbin/sendmail';

# this is the email address to send to
$recipient = 'your_name@domain.com';

# this opens an output stream and pipes it to the sendmail program.
# If sendmail can't be found, it aborts by calling the dienice subroutine
open (MAIL, "|$mailprog -t") or &dienice("Can't access $mailprog!\n");

# print out the header for the mail message.
print MAIL "To: $recipient\n";

# Reply-to can be set to the email address of the sender, assuming you
# have actually defined a field in your form called 'email'.
print MAIL "Reply-to: $FORM{'email'} ($FORM{'name'})\n";

# print out a subject line so you know where the message came from
print MAIL "Subject: Mail Form Data\n\n";

# Two \n\n's end the header section.
# Anything you print after that will be part of the body of the email.

# print out the variables and values

foreach $key (keys(%FORM)) 
{
print MAIL "$key = $FORM{$key}\n";
}

# close the input stream.
close(MAIL);

# now print something to the HTML page, usually thanking the person
# for filling out the form, and giving them a link back to your homepage

print "Thank You";

sub dienice 
{
($errmsg) = @_;
print "Error";
exit;
}

Many web servers today are Microsoft's Internet Information Server running on Windows 2000. They run a VBScript that creates a "CDONTS.NewMail" object and uses methods of the object to send mail. To send mail from your form, you need to place a file containing a VBScript script in the cgi-bin folder of your web site. Usually the cgi-bin folder's attributes are already set to make the files it contains executable.

Below is an example of a VBScript file used with an email form. Note the line where you specify email address to send to.

<%
Dim objCDOMail, strName, strEmail, strComment

strName = Request.Form("name"))
strEmail = Request.Form("email"))
strBody = Request.Form("comment"))

' Create an instance of the NewMail object.
Set objCDOMail = Server.CreateObject("CDO.Message")

' Set the properties of the object
objCDOMail.From = strEmail
objCDOMail.To = "your_name@domain.com"
objCDOMail.Subject = strName
objCDOMail.Body = strBody

' Send the message
objCDOMail.Send
	
' Release the object 
Set objCDOMail = Nothing

Response.Write("Thank you")
%>

I admit that this information about how to send form information using the email program configured on your server is a bit sketchy. It is meant only to point you in the right direction. So many articles about how to design html forms leave out the most important part, how to get the information out of the form.

Writing the form information to a text file or data base on the server runs along the same lines as sending it by email, except in that case you have to deal with "file locking" to keep two different people from trying to update the same file or data base record at the same time.

Now you know how to code your own html submission forms. If that WYSIWYG web page design tool you are using can't create forms that work the way you want them to, now you can get in and debug the code directly. Or you can show a web page designer how you want your form to look by designing it in a simple text editor. In the next article I will show you how to verify the information on the form before permitting the user to submit the form.

Learn more at amazon.com

More HTML Code:
• HTML5 Header Element
• Checkbox Basics
• Easy Code to Add Bing Site Search to Your Website
• The HTML BODY tag
• Web Page Template
• Semantic (X)HTML: Markup with Meaning
• Set Form Controls Tab Order With tabindex Attribute
• Introduction to HTML
• Using col and colgroup to Apply Attributes to a Table Column
• Make an HTML Element Editable