XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6

1

XP

Creating Web Page Creating Web Page FormsForms

Designing a Product Registration Designing a Product Registration FormForm

Tutorial 6

2

XPIntroducing Web FormsIntroducing Web Forms

Information flows from server to Information flows from server to browser - not a one-way street - browser - not a one-way street - information can be collected by information can be collected by browsers and sent to server for browsers and sent to server for processing - e-business, e-commerceprocessing - e-business, e-commerce

HTML form - enables browsers to HTML form - enables browsers to collect information from users - send collect information from users - send data to a designated server - invokes data to a designated server - invokes specified programming - CGI program specified programming - CGI program - process the data and provide a - process the data and provide a response to userresponse to user

3


Form basics - essential partsForm basics - essential parts Instruction to user of what information is Instruction to user of what information is

sought and how to fill out formsought and how to fill out form Blanks - input collection elementsBlanks - input collection elements Labels to clearly indicate the exact Labels to clearly indicate the exact

information neededinformation needed Button - submit completed form informationButton - submit completed form information HTTP query method to send form data to HTTP query method to send form data to

serverserver URL of server-side program to receive and URL of server-side program to receive and

process the collected form dataprocess the collected form data

4


Web formsWeb forms collect information from collect information from customers customers

Web forms include different Web forms include different control control elements, fields, field valueselements, fields, field values

including:including: Input boxesInput boxes Selection listsSelection lists Drop-down lists boxesDrop-down lists boxes Option buttons or radio buttonsOption buttons or radio buttons Check boxesCheck boxes Group boxesGroup boxes Text areasText areas Form buttonsForm buttons

5

XPForms and Server-Based Forms and Server-Based

ProgramsPrograms While HTML supports the creation of While HTML supports the creation of

forms, it does not include tools to forms, it does not include tools to process the informationprocess the information

The information can be processed The information can be processed through a program running on a Web through a program running on a Web serverserver

6

XPForms and Server-Based Forms and Server-Based

ProgramsPrograms Server-based programs are written in Server-based programs are written in

many languagesmany languages The earliest and most commonly used The earliest and most commonly used

are are Common Gateway Interface (CGI) Common Gateway Interface (CGI) scriptsscripts that are written in that are written in perlperl

Other popular languages include:Other popular languages include: AppleScriptAppleScript - PHP- PHP ASPASP - TCL- TCL ColdFusionColdFusion - the Unix shell- the Unix shell C/C++C/C++ - Visual Basic- Visual Basic

7

XPCreating the Form ElementCreating the Form Element

Forms are created using the form element, structured as follows:<form attributes>

elements</form>

Where attributes are the attributes that control how the form is processed and elements are elements places within the form.

8


•Form attributes usually tell the browser the location of the server-based program to be applied to the form’s data•Always specify an id or name for the form•Two attributes are available to identify the form: id and name - for maximum compatibility, the form element should include both attributes

9


The syntax of the id and name attributes are as follows:

<form name=“name” id=“id”>… </form>

Where name is the name of the form and id is the id of the form.

10

XPCreating Input BoxesCreating Input Boxes

The general syntax of input elements is The general syntax of input elements is as follows:as follows:<input type=“<input type=“typetype” name=“” name=“namename” id=“” id=“idid” />” />

Where Where typetype specifies the type of input field, specifies the type of input field,

and the name and id attributes provide theand the name and id attributes provide the

field’s name and id.field’s name and id.

11

XPCreating an input boxCreating an input box

To create an input box, use the To create an input box, use the following HTML code:following HTML code:<input name=“<input name=“namename” id=“” id=“idid” ” value=“value=“valuevalue” size=“” size=“valuevalue””maxlength=“maxlength=“valuevalue’ />’ />Where the name and id attributes identify the Where the name and id attributes identify the

field, the value attribute assigns the field’s field, the value attribute assigns the field’s default value, the size attribute defines the default value, the size attribute defines the width of the input box in characters, and the width of the input box in characters, and the maxlength attribute specifies the maximum maxlength attribute specifies the maximum number of characters that a user can enter number of characters that a user can enter into the field.into the field.

12


Input types:Input types:type=“button”type=“button”

Displays a button that can be clicked to perform Displays a button that can be clicked to perform an action from a scriptan action from a script

type=“checkboxtype=“checkbox

Displays a check boxDisplays a check box

type=“file”type=“file”

Displays a browse button to locate and select a Displays a browse button to locate and select a filefile

type=“hidden”type=“hidden”

Creates a hidden field, not viewable on the formCreates a hidden field, not viewable on the form

13


Input types:Input types:type=“image”type=“image”

Displays an input image that can be clicked to Displays an input image that can be clicked to perform an action from a scriptperform an action from a script

type=“password”type=“password”

Displays an input box that hides text entered Displays an input box that hides text entered by the useby the use

type=“radio”type=“radio”

Displays an option buttonDisplays an option button

14


Input types:Input types:type-”reset”type-”reset”

Displays a button that resets the form when clickedDisplays a button that resets the form when clicked

type=“submit”type=“submit”

Displays a button that submits the form when clickedDisplays a button that submits the form when clicked

type=“text”type=“text”

Displays an input box that displays text entered by the Displays an input box that displays text entered by the useruser

15

XPSetting the Size of an Input Setting the Size of an Input

BoxBox By default, an input box displays at 20 By default, an input box displays at 20

characters of textcharacters of text To change the width of an input box, use the To change the width of an input box, use the

size attribute which is displayed as follows:size attribute which is displayed as follows:<input size=“<input size=“valuevalue” />” />

Where Where valuevalue is the size of the input box in characters. is the size of the input box in characters. Maximum length - limit number of characters - Maximum length - limit number of characters -

reduce chance of errors in inputreduce chance of errors in input Default value for field - save time and increase Default value for field - save time and increase

accuracyaccuracy

16

XPSetting the Size of an Input Setting the Size of an Input

BoxBox

17

XPCreating a Password FieldCreating a Password Field

A A password fieldpassword field is an input box where is an input box where characters typed by the user are characters typed by the user are displayed as bullets or asterisks to displayed as bullets or asterisks to protect private or sensitive information protect private or sensitive information on a Web siteon a Web site

The syntax for creating a Password field The syntax for creating a Password field is as follows:is as follows:<input type=“password” /><input type=“password” />

18

XPWorking with Form LabelsWorking with Form Labels

You can also expressly link a label with You can also expressly link a label with an associated text element for scripting an associated text element for scripting purposespurposes

The syntax for creating a form label is as The syntax for creating a form label is as follows:follows:<label for=“<label for=“idid”>label ”>label texttext</label></label>

Where Where idid is the value of the id attribute for a is the value of the id attribute for a field on the form, and field on the form, and label textlabel text is the text is the text of the label.of the label.

19

XPCreating a Selection ListCreating a Selection List

A A selection listselection list is a list box from which is a list box from which a user selects a particular value or set of a user selects a particular value or set of valuesvalues Selection lists are useful when there are a Selection lists are useful when there are a

fixed set of possible responses from the userfixed set of possible responses from the user You can create a selection list using the You can create a selection list using the

<select> tag<select> tag You can specify each individual selection You can specify each individual selection

item using the <option> tagitem using the <option> tag

20

XPModifying the Appearance of a Modifying the Appearance of a

Selection ListSelection List

You can change the number of options You can change the number of options displayed in the selection list by displayed in the selection list by modifying the size attribute. The syntax modifying the size attribute. The syntax is as follows:is as follows:<select size= “value”>… </select><select size= “value”>… </select>

Where Where valuevalue is the number of items that the is the number of items that the selection list displays in the form.selection list displays in the form.

21

XPModifying the Appearance of a Modifying the Appearance of a

Selection ListSelection List

22

XPMaking Multiple SelectionsMaking Multiple Selections

Add the multiple attribute to the select Add the multiple attribute to the select element to create multiple selectionselement to create multiple selections<select multiple=“multiple”>… </select><select multiple=“multiple”>… </select>

Working with option valuesWorking with option values Selected or highlighted item when initially Selected or highlighted item when initially

displayed displayed

23

XPWorking with Option GroupsWorking with Option Groups Use Use option groupsoption groups to organize selection lists into to organize selection lists into

distinct groups.distinct groups.

<select <select attributesattributes>><optgroup label=<optgroup label=“label1“label1”>”><option><option>itema1itema1</option></option><option><option>itema2itema2</option></option>

……<select <select attributesattributes>><optgroup label=<optgroup label=“label1“label1”>”><option><option>itema1itema1</option></option><option><option>itema2itema2</option></option>

……</optgroup></optgroup>

……</select></select>

24

XPCreating Option buttonsCreating Option buttons

Option Option buttonsbuttons, or , or radio buttonsradio buttons allow users to allow users to make make selections.selections. Unlike selection Unlike selection

lists, option buttons lists, option buttons only allow the user only allow the user to select one option to select one option at a time.at a time.

All option buttons belonging to the same field share a common name

Labels are matched to the id values of the option buttons

25

XPCreating a Field SetCreating a Field Set

HTML and XHML allow you to organize HTML and XHML allow you to organize option buttons into a group of fields option buttons into a group of fields called called field setsfield sets Most browsers place a Most browsers place a group boxgroup box around a around a

field set to indicate that the fields belong to field set to indicate that the fields belong to a common groupa common group

<fieldset><fieldset>

fieldsfields

</fieldset></fieldset>

Where Where fieldsfields are the individual fields within a set. are the individual fields within a set.

26


To create a field set, enclose the fields in To create a field set, enclose the fields in the following tags:the following tags:<fieldset><fieldset>fieldsfields

</fieldset></fieldset>

Where Where fieldsfields are the form fields in the field set. Field are the form fields in the field set. Field sets are sets are

usually displayed in a group boxusually displayed in a group box

27


To add a caption to a field set, add the To add a caption to a field set, add the following tag after the opening following tag after the opening <fieldset> tag:<fieldset> tag:<legend><legend>texttext</legend></legend>

Where Where texttext is the text of the field set caption. is the text of the field set caption.

28

XPCreating Check BoxesCreating Check Boxes

To create a check box, use:To create a check box, use:<input type=“checkbox” name=<input type=“checkbox” name=“name”“name” id= id=“id”“id”value=value=“value”“value” /> />

Where the Where the namename and and idid attributes identify the attributes identify the check box field and the value attribute check box field and the value attribute specifies the value sent to the server if the specifies the value sent to the server if the check box is selectedcheck box is selected

To specify that a check box be selected To specify that a check box be selected by default, use the checked attribute as by default, use the checked attribute as follows:follows:

<input type=“checkbox” checked=“checked<input type=“checkbox” checked=“checked”” /> />

oror<input type=“checkbox” checked /><input type=“checkbox” checked />

29

XPCreating a Text Area BoxCreating a Text Area Box

Text area boxes allow users to enter Text area boxes allow users to enter comments about the products they’ve comments about the products they’ve purchasedpurchased

An input box would be too small to An input box would be too small to accommodate the length of text for this accommodate the length of text for this useuse

30


To create a text area box, use the textarea To create a text area box, use the textarea element:element:

<textarea name=<textarea name=“name”“name” id= id=“id”“id” rows=rows=“value”“value” cols= cols=“value”“value”>>

default textdefault text

</textarea></textarea>

Where the rows and cols attributes define theWhere the rows and cols attributes define the

dimensions of the input box and the rows attribute dimensions of the input box and the rows attribute

indicates the number of lines in the input boxindicates the number of lines in the input box

31


32

XPWrap valuesWrap values

Wrap=“off” - displayed on single lineWrap=“off” - displayed on single line

Wrap=“soft” - wraps automatically Wrap=“soft” - wraps automatically to next row - CGI sent as single lineto next row - CGI sent as single line

Wrap=“hard” - wraps automatically Wrap=“hard” - wraps automatically to next row - CGI sent with line-to next row - CGI sent with line-wrapping informationwrapping information

33

XPWorking with Form ButtonsWorking with Form Buttons

Buttons are a type of control Buttons are a type of control element that performs an element that performs an actionaction

Types of buttons:Types of buttons: Command buttonCommand button Submit buttonSubmit button Reset buttonReset button File buttonFile button

34

XPCreating a Command buttonCreating a Command button

Command buttonsCommand buttons are created using the are created using the <input> tag:<input> tag:<input type=“button” value=<input type=“button” value=“text”“text” /> />

Submit buttonsSubmit buttons submit forms to the submit forms to the server for processing when clicked. Syntax server for processing when clicked. Syntax is as follows:is as follows:<input type=“submit” value=<input type=“submit” value=“text”“text” /> />

Reset buttonsReset buttons reset forms to their original reset forms to their original (default) values. Syntax is as follows:(default) values. Syntax is as follows:<input type=“reset” value=<input type=“reset” value=“text”“text” /> />

Creating submit and reset buttonsCreating submit and reset buttons Submit - submits form to server for processingSubmit - submits form to server for processing Reset - reset a form to original (default) valuesReset - reset a form to original (default) values

35

XPCompleted Registration FormCompleted Registration Form

36

XPDesigning a Command buttonDesigning a Command button

Use the button element for Use the button element for greater artistic control over the greater artistic control over the appearance of a buttonappearance of a button<button name=“<button name=“namename” id=“” id=“idid” ” value=“value=“valuevalue” type=“” type=“typetype”>”>contentcontent

</button></button>Where the Where the name name and and valuevalue attributes specify attributes specify

the name of the button and the value sent to a the name of the button and the value sent to a server-based program, the server-based program, the idid attribute attribute specifies the button’s id, the specifies the button’s id, the typetype attribute attribute specifies the button type, and the specifies the button type, and the contentcontent is is page content displayed within the button.page content displayed within the button.

37

XPCreating a File buttonCreating a File button File buttonsFile buttons are are

used to select files used to select files so that their so that their contents can be contents can be submitted for submitted for processing to a processing to a program.program.

The Web page then The Web page then only displays the only displays the file’s location, not file’s location, not the file’s contents.the file’s contents.

38

XPWorking with Image & Hidden Working with Image & Hidden

FieldsFields Image fields Image fields are used to submit a form are used to submit a form

when clicked on - coordinates where user when clicked on - coordinates where user clickedclicked

Hidden fieldsHidden fields are added to a form, but not are added to a form, but not displayed in the Web page. The syntax is as displayed in the Web page. The syntax is as follows:follows:<input type=“hidden” name=<input type=“hidden” name=“name”“name” id= id=“id”“id”

value=value=“value”“value” /> />

39

XPWorking with Form AttributesWorking with Form Attributes

After adding the elements to your form, After adding the elements to your form, you’ll need to specify where to send the you’ll need to specify where to send the form data and how to send it. Use the form data and how to send it. Use the following attributes:following attributes:

<form <form action=action=“url”“url”method=method=“type”“type”enctype=enctype=“type”“type”>… >… </form></form>

Where Where urlurl specifies the filename and location of the specifies the filename and location of the program that processes the form and the program that processes the form and the methodmethod attribute specifies how your Web browser sends attribute specifies how your Web browser sends data to the server. The data to the server. The enctypeenctype attribute specifies attribute specifies the format of the data stored in the form’s field.the format of the data stored in the form’s field.

40

XPWorking with Form AttributesWorking with Form Attributes

The method attribute can have one of two The method attribute can have one of two values:values: PostPost GetGet

The The getget method is the default; get appends method is the default; get appends the form data to the end of the URL specified the form data to the end of the URL specified in the action attributein the action attribute

The The postpost method sends form data in a method sends form data in a separate data stream, allowing the Web separate data stream, allowing the Web server to receive the data through “standard server to receive the data through “standard input”input”

41

XPUsing the mailto ActionUsing the mailto Action

The mailto action accesses the user’s The mailto action accesses the user’s own e-mail program and uses it to mail own e-mail program and uses it to mail form information to a specified e-mail form information to a specified e-mail addressaddress By-passes the need for server-based programsBy-passes the need for server-based programs

The syntax is as follows:The syntax is as follows:<form action-<form action-mailto:mailto:e-mail_addresse-mail_address method=“post” method=“post”

enctype=“text/plain”> … </form>enctype=“text/plain”> … </form>

Where Where e-mail_addresse-mail_address is the e-mail address of the is the e-mail address of the recipient in the formrecipient in the form

42

XPSpecifying the Tab OrderSpecifying the Tab Order

Users typically navigate through a form with Users typically navigate through a form with the tab keythe tab key

You can specify an alternate tab order by You can specify an alternate tab order by adding the tabindex attribute to any control adding the tabindex attribute to any control element in your formelement in your form

The syntax is as follows:The syntax is as follows:<input name=“fname” tabindex=“1” /><input name=“fname” tabindex=“1” />

This syntax assigns the tab index number “1” to the fname This syntax assigns the tab index number “1” to the fname field from the field from the

registration formregistration form

43

XPSpecifying an Access KeySpecifying an Access Key

An An access keyaccess key is a single key typed with the is a single key typed with the Alt key (Windows) or Control key (Mac), in Alt key (Windows) or Control key (Mac), in order to jump to one of the control elements order to jump to one of the control elements in the formin the form

Create an access key by adding the Create an access key by adding the accesskey attribute to any control elementaccesskey attribute to any control element

Example of creating an access key for the Example of creating an access key for the lname field:lname field:

<input name=“lname” accesskey=“1” /><input name=“lname” accesskey=“1” />

44

XPTips for Creating Effective Tips for Creating Effective

FormsForms Label all control elements clearly and Label all control elements clearly and

conciselyconcisely Use horizontal lines, tables, and line breaks Use horizontal lines, tables, and line breaks

to separate topical groups from one anotherto separate topical groups from one another Use field sets to organize common groups Use field sets to organize common groups

of fields, especially option buttonsof fields, especially option buttons Use the tab order to ensure that users will Use the tab order to ensure that users will

move correctly from one field to anothermove correctly from one field to another

45


FormsForms Use option buttons, check boxes, and Use option buttons, check boxes, and

selection lists whenever possible to limit selection lists whenever possible to limit a user’s choice of entries, thus reducing a user’s choice of entries, thus reducing the chance of an erroneous data value. the chance of an erroneous data value. Use input boxes only when the field has Use input boxes only when the field has no predefined list of values.no predefined list of values.

Use selection lists for items with several Use selection lists for items with several possible options. Use option buttons for possible options. Use option buttons for items with few options. Use a check box items with few options. Use a check box for each item with only two possible for each item with only two possible values.values.

46


FormsForms Let users know the correct format for input Let users know the correct format for input

box text by inserting default text in the box text by inserting default text in the appropriate format (for example, insert the appropriate format (for example, insert the text string, “mm/dd/yyyy” in a Date input box text string, “mm/dd/yyyy” in a Date input box to indicate the format for inserting date to indicate the format for inserting date valuesvalues

Use password fields for sensitive or Use password fields for sensitive or confidential information (such as passwords)confidential information (such as passwords)

Because form elements differ between Because form elements differ between browsers, view your form on different browsers, view your form on different browsers and different browser versions to browsers and different browser versions to ensure that the form displays correctly in all ensure that the form displays correctly in all situationssituations

47

XP

•Assign #7•Case Problem#1, pg. 337-339 - print HTML code - subscrib.htm; •Case Problem #2, pg. 340-343, print HTML code - order.htm (due 2/27)

Documents

XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6