Data Collection

We've all filled out a form on the Web. Web forms can be found on Facebook, Twitter, email accounts like Google or Yahoo, surveys, FedEx or UPS tracking, Blackboard, etc. The HTML form serves only to collect the data. It does not perform any of the functions of a database program; organizing data, sorting data, or searching for and retrieving information.

We use HTML to create a form, but the form does not process any of the data. When we click the SUBMIT button on a form, the name/value pairs get sent to the form handler - software that runs on a Web server and processes the form. The form handler software processes the form and transfer data to a database on the server. The form handler runs a script on the Web server. Scripting languages are used to create scripts that process the data sent from the HTML form. Usually this information is stored in a database on the server. Common server-side scripting languages include Perl, ASP, PHP, and ColdFusion.

We only cover forms from the HTML side (client-side) in this course. Our CIS 209 - Advanced Web Development course covers client and server-side scripting. The CGI (Common Gateway Interface) is a standard for communicating with Web servers. When a form is submitted, the Web server takes over. This is the point where this class ends with forms, and our CIS 209 class begins. CIS 209 covers both client and server-side scripting using JavaScript, VBScript, ASP (Active Server Pages), PHP, and we'll use server-side scripting to connect to the database on the server.

A field represents a single kind of data in the database. For example, a field for FirstName could contain a person's first name, and a field for DateOfBirth could hold a person's birthdate.

The HTML form element serves as the container for all of the elements in a form. We use HTML code to create form controls, which are objects found in any window or dialog box - such as text boxes, radio buttons, check boxes, text areas, and submit and reset buttons.

Creating the Form

Every form begins with the start <form> tag and ends with the closing </form> tag, which must be within the <body></body> tags. Form fields are the areas on the form in which the user provides the data requested. The field name is a unique identifier given to each field. The field value is the data the user submits for a field. Users enter text data into each field in the form based on the prompting text, a description of the data we're requesting the user to enter - such as what is your first name?

Using Controls

A control is an object that can be inserted into a form to enable users to interact with the form. For example, a command button is a Windows control used to execute or reject a user action (OK or Cancel).

In order to align form controls on a Web page, we can use CSS to position them, or we can use an HTML table. Expression Web makes it very easy to add form controls to a Web page. We can double-click a control in the Toolbox panel, or drag the control from the Toolbox panel onto the form. The following table describes the form controls available in Expression Web.

Control Creates
Advanced button A button that can be styled
Drop-down box A drop-down list of choices (aka: list box)
Form A form in the editing window
Group box A box that places a border around a related group of form controls
Input (Button) A generic push button
Input (Checkbox) A check box
Input (File) A control that allows the user to submit a file along with the data in the form
Input (Hidden) A control that users can't see but which submits information with the form
Input (Image) A Submit button that appears as an image
Input (Password) A one-line text box that hides the text that is entered
Input (Radio) A radio button (aka: Option button)
Input (Reset) A button that clears the form
Input (Submit) A button that submits the form data to the form handler
Input (Text) A box in which users can enter a single line of alphanumeric input (text box)
Label A text label for a form field
Text Area A box for users to enter multiple lines of alphanumeric text