Web Order Form - Real Estate Mortgage Flyer Flyers Create Form
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text...
-
Upload
michael-cunningham -
Category
Documents
-
view
222 -
download
0
Transcript of Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text...
![Page 1: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/1.jpg)
Tutorial 7
Creating Forms
![Page 2: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/2.jpg)
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
![Page 3: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/3.jpg)
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
![Page 4: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/4.jpg)
New Perspectives on Microsoft Expression Web 3.0 4
Visual OverviewForm Controls
![Page 5: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/5.jpg)
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
![Page 6: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/6.jpg)
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
![Page 7: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/7.jpg)
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
![Page 8: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/8.jpg)
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
![Page 9: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/9.jpg)
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
![Page 10: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/10.jpg)
New Perspectives on Microsoft Expression Web 3.0 10
How Data is Collectedand Processed
• Use CSS• Create an HTML data table
![Page 11: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/11.jpg)
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
![Page 12: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/12.jpg)
New Perspectives on Microsoft Expression Web 3.0 12
How Data is Collectedand Processed
![Page 13: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/13.jpg)
New Perspectives on Microsoft Expression Web 3.0 13
How Data is Collectedand Processed
– Every form must have a name
![Page 14: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/14.jpg)
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
![Page 15: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/15.jpg)
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
![Page 16: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/16.jpg)
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
![Page 17: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/17.jpg)
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
![Page 18: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/18.jpg)
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
![Page 19: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/19.jpg)
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
![Page 20: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/20.jpg)
New Perspectives on Microsoft Expression Web 3.0 20
How Data is Collectedand Processed
![Page 21: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/21.jpg)
New Perspectives on Microsoft Expression Web 3.0 21
Visual OverviewForm Controls
![Page 22: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/22.jpg)
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
![Page 23: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/23.jpg)
New Perspectives on Microsoft Expression Web 3.0 23
How Data is Collectedand Processed
![Page 24: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/24.jpg)
New Perspectives on Microsoft Expression Web 3.0 24
How Data is Collectedand Processed
![Page 25: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/25.jpg)
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
![Page 26: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/26.jpg)
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
![Page 27: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/27.jpg)
New Perspectives on Microsoft Expression Web 3.0 27
How Data is Collectedand Processed
![Page 28: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/28.jpg)
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
![Page 29: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/29.jpg)
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
![Page 30: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/30.jpg)
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
![Page 31: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/31.jpg)
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
![Page 32: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/32.jpg)
New Perspectives on Microsoft Expression Web 3.0 32
How Data is Collectedand Processed
![Page 33: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/33.jpg)
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
![Page 34: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/34.jpg)
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
![Page 35: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/35.jpg)
New Perspectives on Microsoft Expression Web 3.0 35
How Data is Collectedand Processed
![Page 36: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/36.jpg)
New Perspectives on Microsoft Expression Web 3.0 36
How Data is Collectedand Processed
![Page 37: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/37.jpg)
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
![Page 38: Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.](https://reader035.fdocuments.us/reader035/viewer/2022062304/56649ea35503460f94ba7fbf/html5/thumbnails/38.jpg)
New Perspectives on Microsoft Expression Web 3.0 38
How Data is Collectedand Processed