Brief Overview of Web Forms

L. G. PiperBunker Hill Community College

23 March 2011

CMT111-01/M1—23March2011 — 2

Collecting Data with Forms

Forms provide interaction with site visitor– set properties of

page to suit visitor

– collect data from visitor

• e.g. name, address, etc. for contact

• e.g. items and quantities to be purchased

• search terms to find articles on site

Example: My on-line contact form that some of you all use to email me

CMT111-01/M1—23March2011 — 3

Form Basics

All form objects are wrapped inside <form>…</form> tag pair– attributes inside the <form> tag tell how to process the form

• id

• action—what to do with form data, e.g. send it to a php page for processing

• method—the means to send the data to where it is processed– get—through the browser (used by Google searches)

• data appended to a URL as ascii data (not secure)• less secure and amount of data are limited to ~8K

– post—a more secure way to send data to your web server• sends id/value data for each form object in form of associative array to

target of the action, inside an encrypted binary file

Example—opening tag of contact form:<form id="contact" action="./ContactThanks.php" method="post" enctype="multipart/form-data" onsubmit="return validateContact();" >

CMT111-01/M1—23March2011 — 4

Key Features of Contact Form

Text field—enter (or display) a line of text

Text area field—enter multiple lines of text

form buttons—”submit” and “reset” most common

field set—organize the inputs into groups to make form easier to understand.

label—can label form inputs to make them easier to understand

Can also pre-fill in some fields to make them easier to understand

CMT111-01/M1—23March2011 — 5

Sketch of Web Form(illustrating the most import form objects)

Text field—enter a line of text

check boxes—choose or not choose, any or all

radio buttons—can choose only one

list box—choose a single item from a drop-down list

form buttons—”submit” and “reset” most common

Text area field—enter multiple lines of text

CMT111-01/M1—23March2011 — 6

Web Form for Tutorial 6

radio buttons—can choose only one

list box—choose a single item from a drop-down list

check box—choose or not choose, any or all (only one here)

CMT111-01/M1—23March2011 — 7

<input> Form Object

<input> is most common form object attributes select the <input> type

– type=“text”—a box for entering a line of text– type=“radio”—radio buttons: select just one member of a group– type=“checkbox”—check boxes: select any or all members in group– type=“button”

• type=“submit” and type=“reset” are special-purpose buttons

– and some others (file, hidden, password, …)

other important attributes– name and/or id [need to associate a name so data can be sent]– value

• set the initial text, check, … in the element• changes get processed when form submitted

– javascript calls• onfocus=“someScript();”• onclick=“someScript();”• onsubmit=“someScript();”• etc.

CMT111-01/M1—23March2011 — 8

Additional Form Features

Selection lists, option lists, or drop-down menus– wrap <select> tag set around a number of <option> tag sets

Organize groups of form objects by wrapping in <fieldset> tags

Form-object labels – provide extra information– larger click target

Add behaviors (snippets of javascript) to form objects – form validation– change web page content/presentation

Most forms are processed via server-side scripts after clicking submit button