tutorial 7 creating forms. objectives session 7.1 – create an html form – insert fields for text...

Tutorial 7

Creating Forms

New Perspectives on Microsoft Expression Web 3.0 2

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


Objectives

– Insert advanced command buttons– Create a way to upload a file– Organize and style form elements


Visual OverviewForm Controls


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


How Data is Collectedand 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



• 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



• Creating the Form– A form begins with a start <form> tag– Form Fields• Areas on the form where users provide the data

requested–Field Name–Field Value–Prompting text



• 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 <p> and </p>

tags



• Use CSS• Create an HTML data table



• 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



– Every form must have a name



• 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



• 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



– Use Text Box Properties dialog box to set unique characteristics• Text box name• Width• Password



• 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



• Each button needs to have label text that the user can see



• 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


Visual OverviewForm Controls



• 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



– Use the Drop-Down Box Property dialog box to add additional choices



• 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



• 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



• 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



– Command buttons are also called push buttons– Text that appears on each button can be changed

but cannot be styled



• Creating an Advanced Button– It is a Command button that can be styled– Uses the HTML <button> element– Image can also be used as a button– Use the Advanced Button Properties dialog box to

change button type and button text



• 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



• 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



• 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

tutorial 7 creating forms. objectives session 7.1 – create an html form – insert fields for text...

Documents