Brief Overview of Web Forms L. G. Piper Bunker 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 me

CMT111-01/M1—23March2011 — 3 Form Basics  All form objects are wrapped inside … tag pair –attributes inside the 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:

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 Form Object  is most common form object  attributes select the 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 tag set around a number of tag sets  Organize groups of form objects by wrapping in 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