Step 14 – Forms

With the previous step we’ve used a link to e-mail someone. This link will open the default e-mailprogram your visitor uses. You can also send an e-mail using an online e-mail form.

Online forms can be used for various purposes. Forms always consist of two parts. The fields are created in HTML, but HTML can’t handle processing information. You’ll need to use scripting languages like CGI, PHP or ASP. Most ISP’s (Internet providers/hosts) offer the use of a default script to their clients, such as FormMail. You can best inform what option they offer you and which instructions are available.
You can use the “mailto:”-term to create a form, which we will do in this example. However, the default e-mailprogram could still get opened when clicking the submit button. The information already filled out can get lost completely in this process leaving your visitor to retype the message.

A form in pure HTML is done like this. We’re making a new HTML file called form.html.

<HTML>
<HEAD><TITLE>email form</TITLE></HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<CENTER>
<IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo”>
<H2>Send an e-mail</H2>
</CENTER>

<FORM ACTION=”mailto:info@noratol.nl” METHOD=”post” ENCTYPE=”text/plain”>
My name is: <BR>
<INPUT TYPE=”text” NAME=”name” SIZE=30>
<P>
I am:<BR>
<INPUT TYPE=”checkbox” NAME=”sex” VALUE=”man”> a man<BR>
<INPUT TYPE=”checkbox” NAME=”sex” VALUE=”woman”> a woman
<P>
My e-mail address is:<BR>
<INPUT TYPE=”text” NAME=”email” SIZE=30>
<P>
I think this site is:<BR>
<SELECT NAME=”rating”>
<OPTION VALUE=”great”>great
<OPTION VALUE=”alright”>alright
<OPTION VALUE= “terrible”>terrible
</SELECT>
<P>
My reaction:<BR>
<TEXTAREA COLS=10 ROWS=10 NAME=”reaction” WRAP=VIRTUAL>
</TEXTAREA>
<P>
<INPUT TYPE=”submit” VALUE=” send “>
<INPUT TYPE=”reset” VALUE=” reset “>
</FORM>

</BODY>
</HTML>

Step 14b – Starting a form:
In the form above I’ve used various options that the form tag offers you: small text fields, big textfields, a drop down menu, checkboxes and buttons. To start the form you use the FORM-tag. Anything between <FORM> and </FORM> will be seen as part of the form.

You can add an ACTION and a METHOD to the FORM-tag. These are required when combining forms with scripts (such as CGI). In the HTML version you use the “mailto:”-term that was introduced in Step 12 and place it with ACTION.

<FORM ACTION=”mailto:info@noratol.nl”>

ACTION requires a location (URL). This is the location the browser will look for when people press the submit button.

<FORM ACTION=”mailto:info@noratol.nl” METHOD=”post”>

With METHOD you set what should be done with the information. You can choose between POST or GET. Which one you need to use depends on how the information is received by the script that sends out the e-mail message. GET sends all the information as one long URL to the script. POST deals with the information behind the scenes (in the HTTP-headers to be precise).

When you use a PHP, ASP or CGI script to send e-mail your FORM tag could look like this:
<FORM ACTION=”FormMail.php” METHOD=”post”>
<FORM ACTION=”FormMail.asp” METHOD=”post”>
or
<FORM ACTION=”FormMail.pl” METHOD=”post”>
To set which type of information can be send through the form, we use the attribute ENCTYPE (type of encrypting)
<FORM ACTION=”mailto:info@noratol.nl” METHOD=”post” ENCTYPE=”text/plain”>
We only allow text input in our form, so we choose “text/plain”, but other possibilities are “multipart/form-data” and “application/x-www-form-urlencoded”. If you want to allow sending files in your form then you choose “multipart/form-data”. That’s a good to use in job application forms. The applicant could include their resume. The option “application/x-www-form-urlencoded” allows all kinds of data. When you don’t set any ENCTYPE at all, then this is the default setting,

When you combine HTML with languages like JavaScript you’ll notice that the FORM-tag can also include a name, for example: <FORM NAME=”form”>.
For the pure HTML this is not necessary.

Step 14c – textfield:
A small textfield can be made like this:

<INPUT TYPE=”text” NAME=”name” SIZE=30>

and

<INPUT TYPE=”text” NAME=”email” SIZE=30>

With the term INPUT you tell the browser that the visitor is to provide an action (usually provide input).
With TYPE you let the browser know which type of input field this is supposed to be. By setting it to “text” you let the browser know that the visitor can type something there.
Giving a textfield a NAME is necessary. The text you place between the quotes will show in the e-mail as a reference. Choose your names carefully as this is the only way you can trace what information the visitor is sending you. With SIZE you can change the width of the field. The height cannot be adjusted with HTML, but you can adjust it with CSS (Google it, if you want to find out how). If you want to use a higher field use TEXTAREA (Step 14e)

Step 14d – checkboxes:
To create a square shaped checkbox you use the following code:

<INPUT TYPE=”checkbox” NAME=”sex” VALUE=”man”> man<BR>
<INPUT TYPE=”checkbox” NAME=”sex” VALUE=”woman”> woman

Again you use the INPUT-tag, but this time you don’t want the visitor to type in information, you provide them a multiple choice to check. So TYPE is set to “Checkbox”. The text you place with NAME will again show in the e-mail alongside the VALUE of the checked box.

You can check more than one possibility with the TYPE set to CHECKBOX and as you usually can’t be a man and a woman you’d better choose the RADIO checkboxes instead. These are round and only 1 can be checked.

<INPUT TYPE=”radio” NAME=”sex” VALUE=”man”> man<BR>
<INPUT TYPE=”radio” NAME=”sex” VALUE=”woman”> woman

Step 14e – drop down menu:
To offer the visitor to choose from several options you can also use a drop down menu. Use NAME to make sure you know what people reacted to when you receive the e-mail and use VALUE to know which option was selected:

<SELECT NAME=”rating”>
<OPTION VALUE=”great”>great
<OPTION VALUE=”alright”>alright
<OPTION VALUE= “terrible”>terrible
</SELECT>

With the SELECT-tag you tell the browser that the information listed with <OPTION> can be selected. You can add as many OPTION-tags as you like between <SELECT> and </SELECT>.

Step 14f – Textarea:
Because a textfield offers little space you can also use the TEXTAREA-tag.

<TEXTAREA COLS=10 ROWS=10 NAME=”reaction” WRAP=VIRTUAL>
</TEXTAREA>

With this tag you tell the browser how many columns (COLS) and ROWS the textarea should have. Using WRAP is optional. Here you can choose whether the lines should be broken when they reach the end of the textarea. If you wouldn’t use this option the text will be shown in the browser as one long line. Using WRAP makes it easy to view and review for the visitor

Step 14g – buttons:
In online forms you can use buttons. One required button to a form is the submit button:

<INPUT TYPE=”submit” VALUE=” send “>

Whatever you write with VALUE will be the text showing on the button. This also sets the width of the button.

You can also provide an extra service to your visitor by adding a reset button to your form. This clears all the fields when clicked upon:

<INPUT TYPE=”reset” VALUE=” reset “>

In combination with languages such as JavaScript, you can use HTML buttons for different use. The code for this is:

<INPUT TYPE=”button” VALUE=” yes ” NAME=”yes”>
<INPUT TYPE=”button” VALUE=” no ” NAME=”no”>

By setting TYPE to “button” the options printed with VALUE are shows as buttons. These type of buttons will only work in combination with JavaScript codes. What’s been filled out with NAME usually corresponds with codes used in JavaScript.

Step 14h – image buttons:
By default you will always get grey buttons when you use “submit” or “reset”. To make it more lively you can make your submit button an image button:

<INPUT TYPE=”image” SRC=”send.jpg” NAME=”Send” VALUE=”Send”>

Setting TYPE to “image” tells the browser to look for an image. The location can be found with SRC. With NAME you write what’s supposed to happen when people click the image. In this case “Send” is enough. With VALUE you usually tell what text is supposed to show, but in this case the text will only show when the picture doensn’t work. Much like ALT from the IMG-tag (see step 12)

Stap 14i – send file in a form:
Finally, I want to provide you with additional information about form fields you can create to send files in a form. If you want to use this, you have to set the ENCTYPE of the form to “multipart/form-data”. Also, sending attachments has to be supported by the script you use that sends the mail. You need something like CGI, PHP and ASP to make this possible. HTML alone is not capable of doing this.

To create a field to send files, you can use the following code:
<INPUT TYPE=”file” NAME=”myfile”>
This code generates a form field and a “Browse” button. When the visitor clicks on this button they can browse on their own computer for the file they’d like to send.
With the attribute NAME you can set the name of the field.

Move on to Step 15

Bookmark the permalink.

Comments are closed