Forms A Way for the User to Interact Copyright © newMANIC Inc. All rights reserved

5 Uses for forms: ► To fill out information for a database ► To send an 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 in a Database Entering Information in a Database 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 A 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 , 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 account ► The document you type into on your online

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 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”.

Creation Form 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 Elements Minimum 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”

Forms Targeting 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, or other device where the data you enter will be delivered For a script called “myhandler.php” you will add:

Methods Transmission 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: What you see after the ? Is the query string.

GET & 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: The Id number is 1 and the color is blue

Sending 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 or GET in a form Using POST 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: Remember: Neither Post or Get is “secure” unless the server is set up to be secure

MailTo as a Target Using MailTo as a Target ► For a quick and dirty form handler, you can target your 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:

SUBMIT button The 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:

Types Input Types Note that on our SUBMIT button, we had some other code, specifying an input type: Many of the elements (parts) of the form will start with “input type” because it indicates what type of construct will accept data

Boxes Text 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

and Value Maxlength 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:

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:

A Form A Basic Form Enter First Name: Enter Last Name:

Buttons Radio 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:

and Values Names 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: Red: Or Blue:

Boxes Check Boxes Check 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? Soft Tacos Hard Tacos Bean Burritos

Option (Drop Downs) Option Menus (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 Select Option Menus and Select Option menus start with the keyword SELECT. They also include a closing tag, and must specify what the user sees inside the tag: Pine Oak

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”)

Value Examples Default Value Examples Here are examples of Radio buttons, Checkboxes and Option Menus each with one item pre-selected: Apples Oranges Bananas Pears apples oranges

Areas Text 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: I’m text inside the box! COLS and ROWS indicate the columns and rows the text area will display. WRAP allows the text box to scroll

Fields Hidden 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:

Fields Password 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)

the Form Resetting 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:

Reset and Submit Labeling 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:

Those the basics… Those are 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

Form Tester newMANIC 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// method=“post” /> Hit the “BACK” button on your browser, to try it again and again!!

2 To A Form 2 Parts 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.

Data Arrives The 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 , upload pictures to a server, update a database or perform other actions. ► Formhandlers can be created for a specific task, such as .

The form handler The newMANIC form handler To handle your forms, you can use a script that was created using ASP. To target the form:

hidden fields newMANIC 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:

“” Page “Referral” 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:

Your Enter Special Fields Have Your User Enter Special Fields If you have your user enter ‘Predefined’ Named textboxes, you will have special results come back to your Your Name: Your *if you use From you must also include JavaScript to sniff out if the user is putting in a valid address! You could try one like this: by Sandeep V. Tamhankar

Plug Shameless 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