Tutorial 7 Creating Forms
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
New Perspectives on Microsoft Expression Web 3.0 3
Objectives
– Insert advanced command buttons– Create a way to upload a file– Organize and style form elements
New Perspectives on Microsoft Expression Web 3.0 4
Visual OverviewForm Controls
New Perspectives on Microsoft Expression Web 3.0 5
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.0 6
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
New Perspectives on Microsoft Expression Web 3.0 7
How Data is Collectedand 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.0 8
How Data is Collectedand Processed
• 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
New Perspectives on Microsoft Expression Web 3.0 9
How Data is Collectedand 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 <p> and </p>
tags
New Perspectives on Microsoft Expression Web 3.0 10
How Data is Collectedand Processed
• Use CSS• Create an HTML data table
New Perspectives on Microsoft Expression Web 3.0 11
How Data is Collectedand 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.0 12
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 13
How Data is Collectedand Processed
– Every form must have a name
New Perspectives on Microsoft Expression Web 3.0 14
How Data is Collectedand 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.0 15
How Data is Collectedand 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.0 16
How Data is Collectedand Processed
– Use Text Box Properties dialog box to set unique characteristics• Text box name• Width• Password
New Perspectives on Microsoft Expression Web 3.0 17
How Data is Collectedand 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.0 18
How Data is Collectedand Processed
• Each button needs to have label text that the user can see
New Perspectives on Microsoft Expression Web 3.0 19
How Data is Collectedand 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.0 20
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 21
Visual OverviewForm Controls
New Perspectives on Microsoft Expression Web 3.0 22
How Data is Collectedand 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.0 23
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 24
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 25
How Data is Collectedand Processed
– Use the Drop-Down Box Property dialog box to add additional choices
New Perspectives on Microsoft Expression Web 3.0 26
How Data is Collectedand 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.0 27
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 28
How Data is Collectedand 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.0 29
How Data is Collectedand 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.0 30
How Data is Collectedand 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.0 31
How Data is Collectedand Processed
• 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
New Perspectives on Microsoft Expression Web 3.0 32
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 33
How Data is Collectedand 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.0 34
How Data is Collectedand 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.0 35
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 36
How Data is Collectedand Processed
New Perspectives on Microsoft Expression Web 3.0 37
How Data is Collectedand 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.0 38
How Data is Collectedand Processed