Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to the Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents

This course was developed in much earlier days of the web and has been updated into Web Design Basics for iPad (same Dave, much better course!)
iPage Web Hosting -- Go Green for only $1.99/mo.
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


HTML Code MiniChapter 17: Adding Forms and the HTML mailto form

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

Adding HTML Forms

Forms are used to take input from a user at a web page. Generally, a form is used in conjunction with a CGI, PHP, or ASP script -- all three of these types of scripts require quite a bit of programming knowledge to use successfully. For your benefit, I have included brief descriptions of many form elements and a short tidbit on using a mailto (CGI-less) form if you feel you absolutely must have a form on your page.

If you have no interest in forms, feel free to skip this chapter.

Regardless of whether you use this knowledge immediately or not, it may be useful to you if you one day decide to learn a web programming language or are just viewing someone else's page that contains forms and want to understand it better.

A form opens with <form>, and closes with </form>. The opening <form> tag should contain an action attribute to a script (or e-mail address in the case of a mailto) and a method to post, either method="GET" or method="POST".

Data from a form with method="GET" is posted by appending the data to the end of the script URL, while data from a form with method="POST" is send as a separate packet to the HTTP server. (Basically, POST data is much less obvious to the visitor than GET data, because it is more out of sight. This does not mean that the visitor cannot view the data that will POST, because they can view the source of the form by using the View Source option of their web browser.)

All elements must be enclosed within the opening and closing <form> tags. This allows one page to have multiple independent forms.

HTML Forms: input TEXT and input SUBMIT

The two most basic elements of a form are the text input and the submit button. A text input looks like this:

<input type="text" name="mytextbox" size="10" maxlength="25">

name is a unique name, so you need to give each input a different name, otherwise your script may not recognize the data properly. A name is required.

size and maxlength are optional. size is the size of the box, and maxlength is the maximum number of characters or digits that can be typed into the box.

Here's what the box coded above looks like:

If you wanted the box to include data (to which the user could add, modify, or delete completely) add a value="your data" attribute. If we wanted a box to be displayed with My name is: we could use something like this:

<input type="text" name="yourname" value="My name is:">

Including the value, the text input box now looks like this:

If you are requesting a password, you can hide it from the screen by using type="password" instead of type="text". The other values can be the same.

The submit button looks like this:

<input type="submit" value="Submit Info!">

type="submit" tells the browser that this is a button, and value tells the browser what text should be displayed on the button.

(Notice how the type switched from text to submit. Many other form elements will be modified in this same fashion.)

Let's put this all together. He's a simple form (with no action, for display purposes only) that has an input box and a submit button.

<form method="post">
Visitor name: <input type="text" name="visitorname" size="10" maxlength="20"><br>
<input type="submit" value="Submit Info!">
</form>

And here's what it looks like:
Visitor name:

(Clicking this button will not do anything because there was no action in the opening form tag.)

HTML Forms: additional input types

Other important input types are checkbox, radio, image, and button.

A checkbox is self-explanatory. Here's an example:

Which fruits do you like?<br>
<input type="checkbox" name="fruit" value="apples"> Apples<br>
<input type="checkbox" name="fruit" value="oranges"> Oranges<br>
<input type="checkbox" name="fruit" value="bananas"> Bananas<br>

This question as a part of a form would appear like this:

Which fruits do you like?
Apples
Oranges
Bananas

If we thought most people liked apples, we could pre-select it by adding the word checked in the input.
(i.e. <input type="checkbox" name="apples" checked> Apples<br>)

Radio buttons are sets of circle-like selectors in which the user may only make one choice. If we wanted to ask for a user's favorite fruit (meaning only *one* favorite) we could do it like this:

Which fruit is your favorite?<br>
<input type="radio" name="fav" value="apples"> Apples<br>
<input type="radio" name="fav" value="oranges"> Oranges<br>
<input type="radio" name="fav" value="bananas"> Bananas<br>

This question as a part of a form would appear like this:

Which fruit is your favorite?
Apples
Oranges
Bananas

HTML Forms: graphical submit button, reset, buttons, hidden fields

Instead of using a regular button as a submit, you can use a .jpg or .gif you've created and placed on your host. The syntax is as follows:

<input type="image" src="graphic_URL" alt="Submit!">

So, if I had a graphic called submitbutton.gif I could use:

<input type="image" src="submitbutton.gif" alt="Submit!"> in place of a regular <input type="submit"> button.

If you were programming in JavaScript, you might find <input type="button"> useful. It creates buttons that do not submit the form, but rather can perform a JavaScript action.

If you wanted a button to reset (usually clear) a form, use <input type="reset" value="Clear Form">

If you wanted to include data in a form that could not be edited or seen (unless the source was viewed), you could use <input type="hidden" name="your_data_name" value="your_value">. For example, if you had two forms on two separate pages, one in a section of your site about coffee, and another in a section of your site about flowers, you could put:

<input type="hidden" name="section" value="coffee"> in the coffee section, and:

<input type="hidden" name="section" value="flowers"> in the flowers section so you could distinguish between forms submitted from each page.

HTML Forms: textarea and option/select

Two final parts of forms that are very important: the <textarea> and the <option>.

The <textarea> was used in the interactive feature of this tutorial. It allows the user to enter multiple lines of text or information. It has an opening and closing tag, unlike most form elements. A textarea has just a name, rows and cols (as in the amount of rows of text, and the number of columns of characters in each row.) You can also set wrap="virtual" if you don't want the text a user types to go outside the right side of the box.

Example of textarea:

<textarea name="body" cols="35" rows="4" wrap="virtual"></textarea>

Anything you include between the opening and closing textarea tags will appear in the textarea box.


The <select> element works a lot like a radio button, except in that it used a cool drop down box. It also has a closing tag, </select>. Choices for the drop down box are created by using <option> tags.

We could ask the favorite fruit question with a select (drop down) box like this:

<select name="fav">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>

Which fruit is your favorite?

You can include many of the elements together on a single form. Just have your opening form tag with an action and method, then at least one input box, and a submit button, and you're set! Finish off the form with a </form>.

The HTML mailto form

A mailto form is an undependable way for a web page to ask for information from a user without actually using a web script. Although I *do not* recommend using this type of form, I am including because I receive frequent requests for it. You should know immediately that this does not work in all web browsers (it *usually* works in Netscape).

A mailto form starts out the same way any other form starts out. Instead of specifying the location (URL) of a web script, it merely specifies an e-mail addrress, preceded by mailto:. It doesn't matter a whole lot whether you use GET or POST. If you want the resulting e-mail to be somewhat readable, you need to add enctype="text/plain". So, the basic opening tag would like something like this (if your e-mail address was tacoman@davesite.com):

<form action="mailto:tacoman@davesite.com" method="POST" enctype="text/plain">
</form>

This form is very silly. It doesn't even have any input boxes or a submit button. Let's add those, as well as a question or two about taco preferences. While we're at it, let's throw in an image instead of a regular submit button.

Code:

<form action="mailto:tacoman@davesite.com" method="POST" enctype="text/plain"><br>

Your first name: <input type="text" size="15" maxlength="25"><br>

<p>Do you like?<br>
<input type="checkbox" name="likes" value="soft"> Soft Tacos<br>
<input type="checkbox" name="likes" value="hard"> Hard Tacos<br>
<input type="checkbox" name="likes" value="bean"> Bean Burritos<br>

<p>What is your favorite taco sauce?<br>
<select name="favsauce">
<option value="mild">Mild</option>
<option value="medium">Medium</option>
<option value="hot">Hot</option>
</select>

<p><input type="image" src="submitbutton.gif" alt="Submit!">

</form>

Results:


Your first name:

Do you like?
Soft Tacos
Hard Tacos
Bean Burritos

What is your favorite taco sauce?

(Note: This form is disabled so clicking the button will result in an error!)

HTML Forms-related Resources

You will see a form that uses a CGI-script instead of mailto when you finish the tutorial. The feedback form uses CGI with Perl.

  • For the most detailed information on forms, please visit the W3C (choose HTML, then forms).
  • For information on Perl (a scripting language commonly used with CGI) visit perl.org.
  • For a quick primer on CGI, visit CGI101.com.
  • For information on PHP (commonly used in dynamic web pages, and easily connected with mySQL and other databases for awesome web sites) visit PHP.net.
Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.
Copyright © Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap17.shtml