microsoft frontpage 2003 illustrated complete creating a form

Microsoft FrontPage 2003 Microsoft FrontPage 2003 Illustrated CompleteIllustrated Complete

Creating a FormCreating a Form

2Creating a Form Unit G

Understand formsUnderstand forms Open a Web page that contains a Open a Web page that contains a

formform Add a text box and a text areaAdd a text box and a text area Add a drop-down boxAdd a drop-down box

ObjectivesObjectives


ObjectivesObjectives

Add an option button groupAdd an option button group Add a check boxAdd a check box Set form propertiesSet form properties Create a search formCreate a search form


Creating a FormCreating a Form

Forms provide a way for your site’s Forms provide a way for your site’s visitors to supply information or visitors to supply information or answer questionsanswer questions

After completing a form, the visitor After completing a form, the visitor submits itsubmits it

Submitted forms are sent to a Web Submitted forms are sent to a Web server, where the data is processed server, where the data is processed and storedand stored


Understanding FormsUnderstanding Forms

A A form form in a Web page is similar to a paper in a Web page is similar to a paper form that you might use to register for a form that you might use to register for a class, apply for a job, or order a productclass, apply for a job, or order a product

A A form fieldform field is a data-entry field in a form, is a data-entry field in a form, such as a text box or an option buttonsuch as a text box or an option button

A A form handlerform handler is a program that collects is a program that collects and processes the data contained in a and processes the data contained in a formform


Understanding Forms (cont.)Understanding Forms (cont.)

The collection of data entered into the The collection of data entered into the form by the user and processed by a form by the user and processed by a server is the server is the form’s resultsform’s results

A form handler might store a form’s results A form handler might store a form’s results in a file, an HTML document, or in a in a file, an HTML document, or in a database, or send the results to an e-mail database, or send the results to an e-mail addressaddress

The server usually sends a confirmation The server usually sends a confirmation page to the user via the browser from page to the user via the browser from which the form was submittedwhich the form was submitted



A A confirmation page confirmation page might include a copy might include a copy of the form results so the user can verify of the form results so the user can verify its accuracy; other times it might only send its accuracy; other times it might only send a message indicating that the server a message indicating that the server received the formreceived the form


Understanding Forms (cont.)Understanding Forms (cont.) A confirmation pageA confirmation page



A A form componentform component is a container that is a container that stores all the form’s fields and other form stores all the form’s fields and other form content and identifies the part of the Web content and identifies the part of the Web page that the server will processpage that the server will process

You can create a variety of forms using You can create a variety of forms using FrontPage form templates and a wizardFrontPage form templates and a wizard



Web page Web page containing a containing a form form componentcomponent


Opening a Web Page That Opening a Web Page That Contains a FormContains a Form If you use a template or wizard to create a If you use a template or wizard to create a

form, the new page that you create will form, the new page that you create will contain content and form fields that you contain content and form fields that you can edit and format to match your needscan edit and format to match your needs

If you create a form from scratch by If you create a form from scratch by inserting a form component using the inserting a form component using the Form command on the Insert menu, it’s up Form command on the Insert menu, it’s up to you to enter and insert all of the form’s to you to enter and insert all of the form’s fields and contentfields and content


Adding a Text Box and a Text Adding a Text Box and a Text AreaArea

A A text boxtext box accepts a single line of typed accepts a single line of typed informationinformation

The initial width of a text box is 20 The initial width of a text box is 20 characterscharacters

A A text areatext area, also called a , also called a scrolling text boxscrolling text box, , has the same characteristics as a text box, has the same characteristics as a text box, except that it accepts multiple lines of dataexcept that it accepts multiple lines of data

The initial size of a text area is 20 The initial size of a text area is 20 characters wide and two lines highcharacters wide and two lines high


Adding a Text Box and a Text Adding a Text Box and a Text Area (cont.)Area (cont.) Text Box Properties dialog boxText Box Properties dialog box


Adding a Drop-Down BoxAdding a Drop-Down Box

A A drop-down box drop-down box organizes choices in a listorganizes choices in a list A user can select the desired choice by clicking A user can select the desired choice by clicking

the list arrow that appears on the form field, then the list arrow that appears on the form field, then scrolling the choices as necessary and clicking scrolling the choices as necessary and clicking the desired choice in the listthe desired choice in the list

You can set the form field to display one or more You can set the form field to display one or more choices or to accept one or more selections choices or to accept one or more selections


Adding a Drop-Down Box (cont.)Adding a Drop-Down Box (cont.)

Drop-Down Box Properties dialog box Drop-Down Box Properties dialog box


Adding an Option Button GroupAdding an Option Button Group

An An option button, option button, also called aalso called a radio radio button, button, usually appears in a group with usually appears in a group with other option buttons in a formother option buttons in a form

AA group name group name identifies a related set of identifies a related set of option buttonsoption buttons

Within a group of option buttons, a user Within a group of option buttons, a user can select only one option button at a time can select only one option button at a time - selecting an option button deselects - selecting an option button deselects another selected option buttonanother selected option button


Adding an Option Button Group Adding an Option Button Group (cont.)(cont.) Like other form fields, an option button is Like other form fields, an option button is

given an initial name until you rename itgiven an initial name until you rename it An option button is also given a value, An option button is also given a value,

which indicates what to store in the results which indicates what to store in the results file when the button is selectedfile when the button is selected

Option buttons are useful when you need Option buttons are useful when you need to limit the form’s users to one of a few to limit the form’s users to one of a few mutually exclusive choicesmutually exclusive choices


Adding an Option Button Group Adding an Option Button Group (cont.)(cont.) Option Button Properties dialog boxOption Button Properties dialog box


Adding a Check BoxAdding a Check Box

A A check box check box lets users indicate a yes/no response lets users indicate a yes/no response to a single question or statementto a single question or statement

You can also use check boxes in groups so users You can also use check boxes in groups so users can indicate a yes/no response to a group of can indicate a yes/no response to a group of related questions or statements that appear in a related questions or statements that appear in a listlist

Selecting one check box in a check box group Selecting one check box in a check box group doesn’t deselect another check boxdoesn’t deselect another check box

You can use check boxes when you want a user You can use check boxes when you want a user to select from a group of one or more to select from a group of one or more independent and nonexclusive choicesindependent and nonexclusive choices


Adding a Check Box (cont.)Adding a Check Box (cont.)

Check Box Properties dialog boxCheck Box Properties dialog box


Setting Form PropertiesSetting Form Properties

After creating a form component in a Web page, After creating a form component in a Web page, you need to set its properties so it will store the you need to set its properties so it will store the form results in the format that you needform results in the format that you need

You can store the form results in a(n):You can store the form results in a(n):– Text fileText file– HTML documentHTML document– DatabaseDatabase– Using a script that you createUsing a script that you create


Setting Form Properties (cont.)Setting Form Properties (cont.)

Form Properties dialog boxForm Properties dialog box


Creating a Search FormCreating a Search Form

A search form contains a component A search form contains a component that searches the Web site for text that that searches the Web site for text that the user specifiesthe user specifies

The default settings for a search form The default settings for a search form create a single text box into which create a single text box into which users can type their search text, along users can type their search text, along with two push buttons that let users with two push buttons that let users submit the form (start the search) and submit the form (start the search) and clear the text boxclear the text box


Creating a Search Form (cont.)Creating a Search Form (cont.)

When you submit a search form to a When you submit a search form to a server, the server searches the Web server, the server searches the Web site for matching entries and displays a site for matching entries and displays a revised page that includes the search revised page that includes the search component and a result tablecomponent and a result table


Creating a Search Form (cont.)Creating a Search Form (cont.)

Search form added to a Web pageSearch form added to a Web page


SummarySummary

A form is a Web page that you use to A form is a Web page that you use to submit informationsubmit information

A form field is a data-entry field in a A form field is a data-entry field in a formform

A form handler is a program that A form handler is a program that collects and processes the data collects and processes the data contained in a formcontained in a form


SummarySummary

If you use a template or wizard to create a If you use a template or wizard to create a form, the new page that you create will form, the new page that you create will contain content and form fields that you can contain content and form fields that you can edit and formatedit and format

If you create a form from scratch, it’s up to If you create a form from scratch, it’s up to you to enter and insert all the form’s fields you to enter and insert all the form’s fields and contentand content

In either case, you must enter text that helps In either case, you must enter text that helps users enter data in the form, create the form users enter data in the form, create the form fields that will collect data, and specify a fields that will collect data, and specify a form handler to process the resultsform handler to process the results


SummarySummary

You can add a text box, which You can add a text box, which accepts a single line of typed accepts a single line of typed informationinformation

You can add a text area, which You can add a text area, which scrolls if a user enters more data scrolls if a user enters more data than the text area can displaythan the text area can display

You can add a drop-down box, which You can add a drop-down box, which organizes choices in a listorganizes choices in a list


SummarySummary

You can add option buttons, which You can add option buttons, which allow users to select only one optionallow users to select only one option

You can add check boxes, which You can add check boxes, which allow users to indicate a yes/no allow users to indicate a yes/no response to a single question or response to a single question or statement or a group of questions or statement or a group of questions or statementsstatements


SummarySummary

After creating a form, you must set its After creating a form, you must set its propertiesproperties

You can create search formsYou can create search forms

microsoft frontpage 2003 illustrated complete creating a form

Documents

form results

form fields

form content

form command

form componentopening

paper form

text areaa text box

scrolling text box