FormsA Way for the User to Interact

Copyright © 2000-2004 newMANIC Inc. All rights reserved

5 Uses for forms:

►To fill out information for a database►To send an email to the web site

personnel►To allow a user to login to a secure site►Web site Navigation►Searching a Web Site for content

Entering Entering Information in a in a DatabaseDatabase

With a form, information about you, or what you want is stored in a database

A database can be used to store purchasing information, etc.

Examples:►Ordering a book online►Working with your online bank account

To Send To Send An EmailA form is used to send information to the

owner of a website. The information entered into the form is transported into the body of an email, usually by Server-Side script, such as ASP, PHP or Perl.

Examples:►A feedback form►A guest book►An order form

To Login to a secure site

►When you login to a website, the login and password fields, along with the “submit” button are also a form.

Examples:►A site where you have a membership►A login to an online email account►The document you type into on your

online email

Web Site Navigation

Many navigation elements on web pages are really forms

►If you see a “submit” button, you are likely using a form

►If you see a “drop down” box, (to select options) that can be a form

►A developer can decide to use a form to create buttons dynamically

A Search Form

►Forms can be used to search all pages of a site, or to search the information in a database for content

►The form is then used to help filter out, or to highlight the type of information for which the user is searching

Elements on the FormElements on the Form

►On each form, there are elements or “controls” that allow the user to type in information, or to select items from a menu.

►These controls can work together as a form “set” to send as much data as the developer wishes.

►When data has been input, the user will “submit” the form to a special script that will process the form. This is sometimes called a form “handler”.

Form Creation Creation

All forms start and end with special tags, similar to other HTML tags

The two tags that must go at the beginning and end of a form are:

<form>

</form>

Minimum Form Elements Form Elements

►Besides the “Form” tag, there are 2 major elements that must be included in a form:

►1) There must be a “target” or a place to send the form information for processing (form handler)

►2) There must be a “submit” button or mechanism for sending the data

►Most form elements are “paired” meaning that the information has a name followed by a value in this format: name=“value”

Targeting Forms Forms

Forms must target the script that will handle the form, the keyword for this is ACTION

Form “handling” is the process of taking the raw data and conforming it to the needs of the database, email or other device where the data you enter will be delivered

For a script called “myhandler.php” you will add:

<form action=“aformhandlergoeshere.php”>

Transmission Methods Methods

There are 2 main ways to send the data, they are called POST and GET.

GET will send the data via the “Query String” which is visible in a long URL. Since the data is more visible, it can be less secure.

A link with a Query String can look like:http://www.mysite.asp?id=1&color=blue

What you see after the ? Is the query string.

GET & the Query StringGET & the Query String

The query string is important to web programming. When you see a long URL that includes a question mark, data is being passed from page to page.

The data can be split up, and read by Server Side script. From our last example:

http://www.mysite.asp?id=1&color=blueThe Id number is 1 and the color is blue

Sending data via POSTSending data via POST

►Sending data via the other method, POST, is slightly more secure then using GET

►The POST method has one more important feature, data sent in this manner can use “spaces” and other ASCII characters that cause problems with the GET method, and the query string

Using Using POST or GET in a form or GET in a form

The POST or GET method are entered into the first tag of the form. If no method is specified, the GET method is used.

►Example:<form action=“aformhandler.php”

method=“post”>Remember: Neither Post or Get is “secure”

unless the server is set up to be secure

Using MailTo as a Target MailTo as a Target

►For a quick and dirty form handler, you can target your email in the form tag

►This is NOT supported by all browsers►A special line of text is necessary to

encode the data properly in this case:

<form action="mailto:me@mysite.com" method=“post" enctype="text/plain">

The SUBMIT button SUBMIT button

To be able to send a form, usually a SUBMIT button is used

►A SUBMIT button will send the form data to the form handling script when it is clicked.

►A SUBMIT button is usually added to the bottom of the form, just below the closing tag:

<input type=“submit” /></form>

Input Types Types

Note that on our SUBMIT button, we had some other code, specifying an input type:

<input type=“submit” />

Many of the elements (parts) of the form will start with “input type” because it indicates what type of construct will accept data

Text Boxes Boxes

By far the most common input type is the TEXT BOX

With a text box a user can type data to be sent via the form handler

With the SIZE attribute, we can specify how many characters across the slot will be

<input type=“text” size=“20” />

Maxlength and Value and Value

If we do not limit the length, a user can keep typing, even when he reaches the end of the text box

We limit the length by indicating MAXLENGTH in characters.

We can also enter a VALUE that will show up in the box, when the form is viewed:

<input type=“text” size=“20” maxlength=“30” value=“Enter info here” />

Name

The NAME of the form element is critical. Each form element is distinguished by the NAME we give it. In the formhandler, it specifies the kind of data we requested from the user

It is also keeps each element distinct from other form elements, to keep data separate:

<input type=“text” name=“haircolor” />

A A Basic Form Form

<form action=“myhandler.php” method=“post”>

Enter First Name:<input type=“text” name=“FirstName” />

<br />Enter Last Name:

<input type=“text” name=“LastName” /><br /><input type=“submit” /></form>

Radio Buttons Buttons

A radio button is a special form element.With it a user can select one item by

clicking on it. It is called radio, because only one button works at a time, like a car radio:

<input type=“radio” name=“colors” value=“red” />

<br /><input type=“radio” name=“colors” value=“blue”

/>

Names and Values and Values

Radio buttons work as a set. To keep the radio buttons together, they all have the same name.

Radio buttons do not allow typing, so you select the value that is chose, with the VALUE you input:

Pick a button:<br />Red:<input type=“radio” name=“colors” value=“red” /> <br />Or Blue: <input type=“radio” name=“colors” value=“blue” />

Check Boxes BoxesCheck boxes are very similar to radio buttons, but they

are the small squares that allow a user to select more than one item:

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

Option Option Menus (Drop Downs) (Drop Downs)

Another common form element is the Option Menu, or drop down.

These are when you click a box, and a list of items become visible to choose from

Option Menus use the name OPTION to identify the form element, instead of the usual INPUT type, which is one reason why they look so different

Option Menus Option Menus and Select Select

Option menus start with the keyword SELECT.

They also include a closing tag, and must specify what the user sees inside the tag:

<select name=“WoodType”> <option value=“Pine”>Pine</option> <option value=“Oak”>Oak</option></select>

Default Values

Radio buttons, Check Boxes and Option Menus can all have default values selected by you in advance

To do this, you enter a keyword. For Radio Buttons and Checkboxes, the keyword is CHECKED (XHTML: checked=“checked”)

For Menu options, the keyword is SELECTED (XHTML: selected=“selected”)

Default Value Examples Value ExamplesHere are examples of Radio buttons, Checkboxes and Option Menus each

with one item pre-selected:

<input type=“radio" name=“Fruit" value="apples“ checked=“checked” /> Apples<br /><input type=“radio" name=“Fruit" value="oranges” /> Oranges<br /><input type="checkbox" name=“MoreFruit" value=“bananas” checked=“checked” />Bananas<br /><input type="checkbox" name=“MoreFruit" value=“pears” /> Pears<br />

<select name=“EvenMorefruit"> <option value="apples“ selected=“selected”>apples</option> <option value="oranges">oranges</option></select>

Text Areas Areas

Text areas allow a user to type a great deal of data. They are similar to a text box, but look quite different in code:

<textarea name="body" cols="35" rows="4" wrap="virtual">I’m text inside the box!</textarea>

COLS and ROWS indicate the columns and rows the text area will display.

WRAP allows the text box to scroll

Hidden Fields Fields

If you want, you can send data along with the user’s input secretly with HIDDEN FIELDS

These are often used to send data like the time, the page that sent the data, and other info with what the user has input

These can be seen in the source code of a form page:

<input type=“hidden” name=“MyPage” value=“This is from my form page” />

Password Fields Fields

A PASSWORD field is very similar to a text box, only the data is hidden from sight on the screen, as the user types his password.

This does NOT encrypt the data: (Just hide it from shoulder surfers)

<input type=“password” name=“MyPassword” />

Resetting the Form the Form

Another button can accompany the SUBMIT button at the bottom of the form, it is called the RESET button.

If a user wants to clear all the entries on the form, to start over, they click the reset button:

<input type=“reset” />

Labeling Reset and Submit Reset and Submit

Both RESET and SUBMIT can be called different things on the buttons, but will still function in their usual manner.

Both can be renamed by using the VALUE attribute:

<input type=“submit” value=“SEND it!” /><input type=“reset” value=“CLEAR it!” />

Those Those are the basics… the basics…

There is much more to learn about forms, but this is enough to get you started. For more fun with forms, research:

►Replacing SUBMIT with an IMAGE button►Setting a tab order with TABINDEX►Setting a form element to be viewed

only with READONLY

newMANIC Form Tester Form Tester

While you are testing your page, you can target it at a form tester we created

With it, you can see the NAME and VALUE pairs, as it would be sent

Practice with this, while you are building your form, to see if all the data comes across:

<form action=“http//www.newmanic.com/formtest.asp” method=“post” />

Hit the “BACK” button on your browser, to try it again and again!!

2 2 Parts To A Form To A Form►Forms can be thought of as having 2

parts.

►So far we have talked about the “visible” part of a form. It consists of “text boxes”, buttons and other form elements for the user to input information.

►The other part of the form is the “script” or “program” designed to process the input from the user. This is sometimes called a “Formhandler”.

Form Processing

►When a user clicks “Submit” on a form, the data entered is encoded into a single string of characters.

►The string of characters is sent from the visible form in a standard CGI format.

►CGI (Common Gateway Interface) is a protocol (set of instructions) for sending data over the web. It is not platform specific.

The Data Arrives Data Arrives

► The data is sent to the form handling script over the web, and the data conforms to the CGI standards.

► At the formhandler, the data is “parsed” or split up, into name and value pairs. This means the form element, and the info the user put in are joined in pairs, for example:

First Name: Steve

Formhandlers

►Formhandlers are programs usually written in Server-Side languages such as ASP,PHP or Perl.

►Formhandlers can be designed to send email, upload pictures to a server, update a database or perform other actions.

►Formhandlers can be created for a specific task, such as email.

The The newMANIC form handler form handler

To handle your forms, you can use a script that was created using ASP.

To target the form:

<form action=“http://www.newmanic.com/formhandler3.asp” method=“post”>

newMANIC hidden fields hidden fields

Special hidden fields allow you to better identify where your form came from, etc.

Get the syntax of the NAME element exactly correct, except put in your personal data. You can add other hidden fields if you wish:

<input type=“hidden” name=“ToFirst” value=“Your First Name” />

<input type=“hidden” name=“ToLast” value=“Your Last Name” />

<input type=“hidden” name=“Subject” value=“Your Subject name” />

<input type=“hidden” name=“ToEmail” value=“Your Email Address” />

<input type=“hidden” name=“Thanks” value=“Absolute path to my thank you page – the page the user gets after they’ve his SUBMIT” />

““Referral” Page” Page► When the user strikes the submit button, the

information is passed, but we need to acknowledge the user, and thank them for their input.

► A “Referral” is usually a simple page thanking the user, and possibly having a link back to the Web Site.

► On the newMANIC formhandler, you can designate a referral page:

<input type=“hidden” name=“Thanks” value=“http://edison.seattlecentral.org/~you/thankyoupage.html” />

Have Your Your User Enter Special Enter Special FieldsFields

If you have your user enter ‘Predefined’ Named textboxes, you will have special results come back to your email:

Your Name:<input type= “text” name=“FromName” />

Your Email:<input type= “text” name=“FromEmail” />

*if you use FromEmail you must also include JavaScript to sniff out if the user is putting in a valid email address! You could try one like this: http://javascript.internet.com/forms/email-address-validation.html by Sandeep V. Tamhankar

Shameless Plug Plug

►You are welcome to use the newMANIC Form Tester, and the Form Handler, for some time to come

►There are other sites that offer form handlers. Check the web!

►Stay tuned for further developments on the form handler