Tutorial 7 Creating Forms

Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons and check boxes Session 7.2 – Insert drop-down lists – Create methods for sending data and clearing forms 2New Perspectives on Microsoft Expression Web 3.0

Objectives – Insert advanced command buttons – Create a way to upload a file – Organize and style form elements New Perspectives on Microsoft Expression Web 3.03

Visual Overview Form Controls New Perspectives on Microsoft Expression Web 3.04

How Data is Collected and Processed The XHTML form serves only to collect data A form handler is necessary to process the data collected – A form handler is software that runs on a server or on the user’s computer and processes information entered into the form – Scripting languages are used to create scripts – Scripts (sets of programming instructions) transfer data to the form handler New Perspectives on Microsoft Expression Web 3.05

How Data is Collected and Processed Common scripting languages include – Perl – ASP – PHP – ColdFusion – JavaScript Web scripts often referred to as CGI scripts – Common Gateway Interface A standard for communicating with web servers New Perspectives on Microsoft Expression Web 3.06

How Data is Collected and Processed Data sent to a server is stored in a database – A database is an organized collection of data A field represents a single kind of data in a database The HTML form element serves as a container for all elements in a form – Check boxes – Radio buttons – Text boxes New Perspectives on Microsoft Expression Web 3.07

How Data is Collected and Processed Creating the Form – A form begins with a start tag – Form Fields Areas on the form where users provide the data requested – Field Name – Field Value – Prompting text New Perspectives on Microsoft Expression Web 3.08

How Data is Collected and Processed Using Controls – A control is an object inserted in a form which enables users to interact with the form – Command Button A Windows control used to execute or reject user action, i.e., OK and Cancel buttons – Designer decides how to align the form controls Enter form controls between the and tags New Perspectives on Microsoft Expression Web 3.09

How Data is Collected and Processed Use CSS Create an HTML data table New Perspectives on Microsoft Expression Web 3.010

How Data is Collected and Processed Creating a Form Element – Every form must begin with a form element – This element appears in the Editing window with a dashed outline around its border – Form Control tools are located in the Toolbox panel Collapse the Tags and ASP.NET Controls section of the Toolbox panel and close the Apply Styles panel Form must be created within the Form control New Perspectives on Microsoft Expression Web 3.011

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.012

How Data is Collected and Processed – Every form must have a name New Perspectives on Microsoft Expression Web 3.013

How Data is Collected and Processed Determining the Form Structure – Align form elements horizontally and vertically for easy reading – Create form elements using a table Gridlines for form elements Easy alignment Float table left or right – Create form elements using CSS New Perspectives on Microsoft Expression Web 3.014

How Data is Collected and Processed Creating a Text Field – Use when creating just one line of text – Holds alphanumeric data – Use text field when you want to collect individual pieces of data First name Last name Zip code New Perspectives on Microsoft Expression Web 3.015

How Data is Collected and Processed – Use Text Box Properties dialog box to set unique characteristics Text box name Width Password New Perspectives on Microsoft Expression Web 3.016

How Data is Collected and Processed Creating Radio Buttons – Used to select a single choice from several choices – Common to have one button pre-selected – Form can have several different groups of radio buttons Each group must have a unique name Each button must be assigned a value – A value is the data that is sent to the form handler New Perspectives on Microsoft Expression Web 3.017

How Data is Collected and Processed Each button needs to have label text that the user can see New Perspectives on Microsoft Expression Web 3.018

How Data is Collected and Processed Creating Check Boxes – Can select zero, one, or multiple items from a list – Assign the same group name to each group of check boxes – Assign a value to each check box that will be sent to the form handler – Assign a label to each check box New Perspectives on Microsoft Expression Web 3.019

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.020

Visual Overview Form Controls New Perspectives on Microsoft Expression Web 3.021

How Data is Collected and Processed Creating a Drop-Down Box – Displays only one choice at a time – Helps conserve screen space – Assign a name to the control – The default choice created by Expression Web is displayed Does not have a value Can be modified – Use the Drop-Down Box Properties dialog box New Perspectives on Microsoft Expression Web 3.022

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.023

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.024

How Data is Collected and Processed – Use the Drop-Down Box Property dialog box to add additional choices New Perspectives on Microsoft Expression Web 3.025

How Data is Collected and Processed Creating a Text Area – Allows user to enter multiple lines of text – Often used to gather comments/feedback from customers – Assign a name to the control – Set the height and width Default is 2 rows high and 20 columns wide New Perspectives on Microsoft Expression Web 3.026

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.027

How Data is Collected and Processed Inserting an Upload File Control – Allows user to send a file when the Submit button is clicked Displays a text box in which name of file can be entered New Perspectives on Microsoft Expression Web 3.028

How Data is Collected and Processed Creating Command Buttons – A Command Button is a Windows control – OK and Cancel buttons are often seen on Web pages OK – submits the data – In an HTML form the input type “Submit” is used to transmit data contained in the form Cancel – clears the form – The input type “Reset” is used to clear the form New Perspectives on Microsoft Expression Web 3.029

How Data is Collected and Processed – Command buttons are also called push buttons – Text that appears on each button can be changed but cannot be styled New Perspectives on Microsoft Expression Web 3.030

How Data is Collected and Processed New Perspectives on Microsoft Expression Web Creating an Advanced Button – It is a Command button that can be styled – Uses the HTML element – Image can also be used as a button – Use the Advanced Button Properties dialog box to change button type and button text

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.032

How Data is Collected and Processed Organizing Form Controls – Organize form controls so they appear in the browser in related groups Textboxes in one group Radio buttons and check boxes in another Command buttons in a third group – Two XHTML elements available to organize form controls Fieldset element – draws border around related groups New Perspectives on Microsoft Expression Web 3.033

How Data is Collected and Processed Legend element – provides a caption that appears as part of the border – Use the Group Box control on the Toolbox panel to create the fieldset and legend elements Both can be styled, which allows for greater variety and visual interest New Perspectives on Microsoft Expression Web 3.034

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.035

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.036

How Data is Collected and Processed Completing and Styling the Form – Use the Option Button Properties dialog box to edit a setting for a radio button – Remove the table borders – Create a style for the form element to change the font, the margins, and the width New Perspectives on Microsoft Expression Web 3.037

How Data is Collected and Processed New Perspectives on Microsoft Expression Web 3.038