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