HTML - Forms

In all the lessons of this tutorial thus far, you've learned how to write code that will display a Web page. Note the word "display." HTML really doesn't support any features that allow your Web pages to interact with your user audience. You have to use another coding language to interact with your HTML; like ASP, PHP or CGI. Even if you know one of those coding languages, your Web hosting provider (company that stores your Web site on a server to make it available online) has to have special "add-ons" for their server to support those languages. Don't panic though, you can have some interactivity without going through all that mess. If your Web hosting provider supports any of those coding languages, you can find free scripts by using search engines. Then you don't have to learn any more coding languages. Matt's Script Archive provides a free CGI Email Script that you can set up if your web hosting provider supports CGI. We'll be using this script as an example in this lesson, so you'll know just how to use it.

But, before you can email and the like, you must learn the one way HTML can interact with the user. HTML does this through forms. Because forms interact with the user by using other coding languages, this lesson will only cover the basic form tags that will enable you to send email. If you're an advanced author, you can see all the form tags, and any other tags, in the HTML Cheat Sheet.

A form is made up of several form objects; these include the text box, the text area, the submit button and the hidden field. When any of these objects are used together as a form, they must be inside a pair of form tags. <form></form> Here's the example of the email form:

<form action="http://www.marcuspohl.com/cgi-bin/FormMail.pl" method="post"> <input type="hidden" name="redirect" id="redirect" value="http://www.marcuspohl.com/html/forms.html" />

<p>To: (email address)<br /> <input type="text" name="recipient" id="recipient" size="30" /></p>

<p>From: (email address)<br /> <input type="text" name="email" id="email" size="30" /></p>

<p>Subject:<br /> <input type="text" name="subject" id="subject" size="30" /></p>

<p>Message:<br /> <textarea rows="10" cols="40" name="body" id="body"></textarea></p>

<p><input type="submit" value="Send" /></p> </form>

This would display as:

To: (email address)

From: (email address)

Subject:

Message:

There are only three tag sets that make up a basic form: <form></form>, <input /> and <textarea></textarea>. Let's start with the form tags.

The two main attributes of the form tags are method="" and action="". You will almost always include both of these attributes in the forms you create. The method="" attribute has only two values, "get" and "post". You will rarely come across a situation to use the "get" method, so always use method="post". The action="" attribute works just the same as a href="" and a src="", it just specifies the path and filename to the script (ASP, PHP, CGI, etc.) that the form uses to complete its operations. Use action="http://www.marcuspohl.com/cgi-bin/FormMail.pl" when making the email form in this lesson.

The most common tag found in forms is the <input /> tag. The input tag can perform a variety of functions based off of the type="" attribute. The types can be any of the following: text (text box), password (password field), checkbox (check box), radio (radio button), submit (submit button), reset (reset button), file (upload file field with browse button), hidden (hidden field), image (image) and button (generic button). The types used in this lesson are text, submit and hidden. The type(s) you use are dependent on how your script (ASP, PHP, CGI, etc.) is written. The input tag also uses the name="" and id="" attributes. Remember, these attributes must have the same values. Other helpful attributes are: value="", size="" and maxlength="". The value="" attribute let's you fill in text into the object on the form, just write the text you want into the attribute. The size="" and maxlength="" values are specified in number of characters (letters/numbers). Size controls how wide a textbox is and maxlength limits the number of characters the user can enter into the textbox.

The final tag set we'll cover is the <textarea></textarea>. The Text Area is really just a big text box. But, the Text Area has two required attributes, rows="" and columns="". They specify the number of rows and columns respectively, just pick a number as the value. The Text Area also uses the name="" and id="" attributes. The one of the ways the Text Area differs from a regular text box is that instead of filling in a value="" attribute to insert text into the object, you just place the text you want to insert between the two <textarea></textarea> tags. This area must not contain any HTML tags.

As a final example, here is the code for the way I recommend that you use Matt's CGI email script. Remember to keep all the names and ids the same as provided, otherwise the script will not work. Feel free to change the value="" attributes. Also, you need to specify (in the input tag "redirect") the address of the next page you want your user to go to after they submit the email form. If you want, you can just copy/paste this code for yourself! Have fun!

<form method="post" action="http://www.marcuspohl.com/cgi-bin/FormMail.pl"> <input type="hidden" name="recipient" id="recipient" value="your_email_here@somewhere.com" /> <input type="hidden" name="subject" id="subject" value="Make your own subject here" /> <input type="hidden" name="redirect" id="redirect" value="http://www.somewhere.com/thanks.html" />

<p><b>Your Email:</b><br /> <input type="text" name="email" id="email" size="30" /></p>

<p><b>Message/Request:</b><br /> <textarea rows="10" cols="40" name="body" id="body"></textarea></p>

<p><input type="submit" value="Send the Email!" /></p> </form>

This displays as:

Your Email:

Message/Request:

Practice

You're done! You can get additional information at the HTML Cheat Sheet or continue expanding your knowledge base with our basic Style Sheet Tutorial.

Featured Web Site

Internet Factoids