SSD1: Introduction to Information Systems Unit 1: Using the Web Shen Zhidong [email protected] ISS,...

SSD1: Introduction to Information SystemsSSD1: Introduction to Information Systems

Unit 1: Using the WebUnit 1: Using the Web

Shen [email protected]

ISS, Wuhan University

1.3 Introduction to HTML 1.3 Introduction to HTML Forms and ServletsForms and Servlets

22

1.3 Introduction to HTML 1.3 Introduction to HTML Forms and ServletsForms and Servlets

Dynamic Web PageDynamic Web Page

FormForm

ServletsServlets

66

The FORM ElementsThe FORM Elements

The The FORMFORM element is a container element that element is a container element that creates a special area on an HTML page known creates a special area on an HTML page known as a as a formform.. FORMFORM （表单）（表单） INPUTINPUT

TextText

LABELLABEL

BUTTONBUTTON

TEXTAREATEXTAREA

77

Form ElementForm Element

FORMFORM

<FORM element attributes > form content ... </FORM>

<FORM action='http://example.com/servlts/myprog<FORM action='http://example.com/servlts/myprog' method='post'>' method='post'> form content ...form content ... </FORM></FORM>

Provides the name of the program that will process the form data

has only two valid options—post and get

action, method, enctype, accept……

88

Form ControlsForm Controls （表单控件）（表单控件）

99

Form ControlsForm ControlsButtonButton Three types of buttons: Three types of buttons: submit buttons, reset buttons, submit buttons, reset buttons,

and push buttonand push button

CheckboxCheckbox Checkbox controls allow users to toggle them “on” and Checkbox controls allow users to toggle them “on” and

“off”“off”

Radio buttonsRadio buttons A radio button group is created by assigning all of the A radio button group is created by assigning all of the

radio buttons that are to be in the group the same control radio buttons that are to be in the group the same control name. name.

LabelLabel Label controls are used to specify label text for form Label controls are used to specify label text for form

controls.controls.

1010

Form ControlsForm Controls

MenuMenu allow users to choose from set of predetermined allow users to choose from set of predetermined

options. options. Three types: single-option drop-down lists, scrollable-Three types: single-option drop-down lists, scrollable-

option list, and grouped-option drop-down list. option list, and grouped-option drop-down list.

Text input controlsText input controls allow users to input text.allow users to input text. Three types: one for single-line input, one for multiple-Three types: one for single-line input, one for multiple-

line input, and one for text that should not be displayed line input, and one for text that should not be displayed

as it is being typed.as it is being typed.

1111


1212


File selectFile select File select controls allow users to browse to files, select File select controls allow users to browse to files, select

files, and submit the contents of a file or files with a files, and submit the contents of a file or files with a form. form.

1414


Image ControlsImage Controls Image controls are submit buttonsImage controls are submit buttons

1515


Each control has a Each control has a control namecontrol name, which is , which is designated by its designated by its namename attribute. attribute. All controls can have both All controls can have both an initial valuean initial value and a and a current valuecurrent value..

When a form is submitted for processing, the When a form is submitted for processing, the controls that have values have their names and controls that have values have their names and values combined into values combined into name-value pairsname-value pairs,, which which are then submitted to a server with the form are then submitted to a server with the form

1616


All controls submitted with a form, are All controls submitted with a form, are known as known as successful controlssuccessful controls; controls ; controls that remain undefined are not considered that remain undefined are not considered successful controls, and are not sent to a successful controls, and are not sent to a server. server.

Form Controls (Cont)Form Controls (Cont)

rendered rendered controlcontrol

sourcesource

<input type='text' name='txtline'> <input type='text' name='txtline'>

<input name='txtline2'> <input name='txtline2'>

<input name='txtline3' type='text' value=‘defaul<input name='txtline3' type='text' value=‘default value‘ size='120' maxlength='200'> t value‘ size='120' maxlength='200'>

<input name='withoutdefault' type='password' s<input name='withoutdefault' type='password' s

ize='8' maxlength='8'>ize='8' maxlength='8'>

• Text & Password

1818


• CheckBoxCheckBox

checkbox types must include a value attribute.

1919

Form Controls (Cont)Form Controls (Cont)• Radio radiobox types must include a value attribute.

2020


Checkbox & Radio Checkbox & Radio bothboth must include a must include a valuevalue attribute.attribute.

Radio buttons differ from checkboxes Radio buttons differ from checkboxes Radio buttons are commonly used in groups in which Radio buttons are commonly used in groups in which

only one button can be selected at a time.only one button can be selected at a time. INPUTINPUT controls of type controls of type radioradio are made into a group by are made into a group by

assigning each control that is to be in the group the assigning each control that is to be in the group the

same value for its same value for its namename attribute. attribute.

2121


• File

Rendered Rendered control control

sourcesource <input name='selct-a-file' type='fil<input name='selct-a-file' type='file'> e'>


sourcesourcesource for the equivalent source for the equivalent button using the button using the BUTTON element BUTTON element

<input type='submit' name<input type='submit' name='subbtn'> ='subbtn'>

<BUTTON name='subbtn' val<BUTTON name='subbtn' value='submit' type='submit'>Subue='submit' type='submit'>Submit Query</BUTTON> mit Query</BUTTON>

<input name='subbtn2' <input name='subbtn2' type='submit' value='Submit type='submit' value='Submit Answer'> Answer'>

<BUTTON name='subbtn2' <BUTTON name='subbtn2' value='submit' value='submit' type='submit'>Submit type='submit'>Submit Answer</BUTTON> Answer</BUTTON>

Submi t Answer

提交查询内容

• SubmitSubmit


sourcesourcesource for the source for the equivalent button using equivalent button using the BUTTON element the BUTTON element

<input name='subbtn3' <input name='subbtn3' type='submit' value='Log type='submit' value='Log On'> On'>

<BUTTON name='subbtn3' <BUTTON name='subbtn3' value='LogOn' type='submivalue='LogOn' type='submit'>Log On</BUTTON> t'>Log On</BUTTON>

<input name='graphicsubbtn' <input name='graphicsubbtn' type='image' src='tools.gif' altype='image' src='tools.gif' alt='Submit Tools Information t='Submit Tools Information Form'> Form'>

<BUTTON name='graphics<BUTTON name='graphicsubbtn' type='submit'><IMG ubbtn' type='submit'><IMG src='tools.gif' alt='Submit Tsrc='tools.gif' alt='Submit Tools Information Form'></ools Information Form'></BUTTON> BUTTON>

Log On

• Submit(Cont)


sourcesource

<input name='resetbtn' type='reset'> <input name='resetbtn' type='reset'>

<input name='resetbtn2' type='reset' <input name='resetbtn2' type='reset' value='Reset Form'> value='Reset Form'>

Reset Form

• Reset

2525

Attributes of INPUTAttributes of INPUT

The The namename and and valuevalue attributes and a set of “ attributes and a set of “eventevent” a” attribute ttribute

Attributes dedicated to its function as an element— pAttributes dedicated to its function as an element— principally the rincipally the typetype attribute attribute

Attributes that limit a control's input (the Attributes that limit a control's input (the checkedchecked, , didisabledsabled, , readonly readonly, , sizesize, and , and maxlengthmaxlength attributes) attributes)

Attributes such as: the Attributes such as: the tabindex tabindex and and accesskeyaccesskey attrib attributes utes

2626

Attributes of ControlsAttributes of Controls

NameNameEach control has a name. Each control has a name. The control name allows the control to be referred to by other The control name allows the control to be referred to by other

client-side programming entities.client-side programming entities.

ValueValueall controls can have both all controls can have both anan initial valueinitial value and and a a current current

valuevalue. . The initial value is designated by value attribute. The initial value is designated by value attribute. A control’s initial value never changes. A control’s initial value never changes. The current value can be modified. The current value can be modified. Controls that have no initial values specified are considered Controls that have no initial values specified are considered

undefinedundefined when their current values have not been modified. when their current values have not been modified.

2727

Attributes of ControlsAttributes of Controls

typetypeControl what type of control is created.Control what type of control is created.Options for the Options for the typetype attribute include attribute include text, text,

password, checkbox, radio, file, hidden, submit, password, checkbox, radio, file, hidden, submit, image, reset, and button. image, reset, and button.

Rendered control Rendered control sourcesource

<LABEL><LABEL> WuhanWuhan <INPUT name=‘<INPUT name=‘citycity' ' type='checkbox' value='wtype='checkbox' value='wuhanuhan'>'> </LABEL></LABEL>

<LABEL for=‘han'> Wuhan </LABEL><LABEL for=‘han'> Wuhan </LABEL><input name=‘city' type='checkbox' value=‘w<input name=‘city' type='checkbox' value=‘wuhan' id='han'> uhan' id='han'>

• LabelLabel


sourcesource <TEXTAREA name='textarea' cols='4<TEXTAREA name='textarea' cols='40' rows='5'></TEXTAREA> 0' rows='5'></TEXTAREA>

• TEXTAREATEXTAREA

3030

Form Control AttributesForm Control Attributes

readonlyreadonly allow users to see the contents of a control allow users to see the contents of a control but not be able to change the contents. but not be able to change the contents.

tabindextabindex specify the order in which users can move specify the order in which users can move the cursor or focus from control to control on the forthe cursor or focus from control to control on the form using the TAB key. m using the TAB key.

alt alt attribute can be used to controls accessible to, saattribute can be used to controls accessible to, say, users who rely on text recognition software to read y, users who rely on text recognition software to read computer interfaces. computer interfaces.

3131

<form action="server/server" method="post"><form action="server/server" method="post"><input type="hidden" name="date" value="July, 2000"><input type="hidden" name="date" value="July, 2000"><label>Name:<label>Name:<input type="text" name="text1" value="Enter your Name"><br><input type="text" name="text1" value="Enter your Name"><br></label></label><label>Password:<label>Password:<input type="password" name="text1" value="blinky"><br><input type="password" name="text1" value="blinky"><br></label></label><input type="checkbox" name="genre" value="drama" checked>drama<input type="checkbox" name="genre" value="drama" checked>drama<input type="checkbox" name="genre" value="comedy" checked>comedy<input type="checkbox" name="genre" value="comedy" checked>comedy<input type="checkbox" name="genre" value="romance">romance<input type="checkbox" name="genre" value="romance">romance<input type="checkbox" name="genre" value="action">action<br><input type="checkbox" name="genre" value="action">action<br><input type="radio" name="price" value="lt4">under $4.00<input type="radio" name="price" value="lt4">under $4.00<input type="radio" name="price" value="4-6" checked>$4.00 to $6.00<input type="radio" name="price" value="4-6" checked>$4.00 to $6.00<input type="radio" name="price" value="6-8">$6.00 to $8.00<input type="radio" name="price" value="6-8">$6.00 to $8.00<input type="radio" name="price" value="gt8">over $8.00<br><input type="radio" name="price" value="gt8">over $8.00<br><textarea name="info" rows="10" cols="40"><textarea name="info" rows="10" cols="40">Please enter a list of all your top 5 favorite movies:Please enter a list of all your top 5 favorite movies:1.1.2.2.3.3.4.4.5.</textarea><br><br>5.</textarea><br><br><select name="view" size="2"><select name="view" size="2"><option>theater<option>theater<option>drive-in<option>drive-in<option>video/DVD<option>video/DVD<option>television<option>television</select><br></select><br><button name="senddata" type="submit">Submit Data</button><button name="senddata" type="submit">Submit Data</button><button name="cleardata" type="reset">Clear Data</button><button name="cleardata" type="reset">Clear Data</button></form></form>

3333

Brief Summary to HTML ControlsBrief Summary to HTML Controls

Elements:Elements:BUTTONBUTTONSELECTSELECTFILEDSETFILEDSET

Use the HTML resource sites on the WebUse the HTML resource sites on the Web W3C(World Wide Web Consortium )W3C(World Wide Web Consortium )http://wdvl.com/Authoring/HTML/4/Tags/forms.htmlhttp://wdvl.com/Authoring/HTML/4/Tags/forms.htmlhttp://wdvl.internet.com/Quadzilla/Tag_Ref/form.htmlhttp://wdvl.internet.com/Quadzilla/Tag_Ref/form.html…………

3434

Dynamic HTML ContentDynamic HTML Content

ServletsServlets

HTTP ConnectionsHTTP Connections

Server Push-Client PullServer Push-Client Pull

Refresh Refresh

3535

ServletsServlets

server-sideserver-side of the solution to dynamic content of the solution to dynamic content

Servlets Servlets are typically called from HTML forms (remeare typically called from HTML forms (remember the mber the actionaction attribute), and attribute), and form controlsform controls are the are the aagencygency through which input is created for servlets. through which input is created for servlets.

3636

ServletsServlets

Servlets are programs that run inside of complex softServlets are programs that run inside of complex software programs known as Web servers (hereafter referware programs known as Web servers (hereafter referred to as "servers"). red to as "servers").

It is the servers that run servlets, in order to construct It is the servers that run servlets, in order to construct dynamic responses to client requests. dynamic responses to client requests.

ClientClient ServerServer ServletServletrequest

run servlets to deal with the request f

rom client

return resultsReponse by results returned from s

ervlets

Client

Server

Servlet

A user using a Web browser sends a request to a server.

determines if the request is for a static HTML page or for an application, such as a servlet.

• Deal with the request.

responds by serving the appropriate page to the browser.

• get result from servlets

forwards the response on to the

client browser

• Loads and initializes the servlet.• passes the request on to the servlet.

3838

HTTP ConnectionsHTTP Connections

Request Information

Provide Information

HTTP Connection(request-response exchange )

A connection is opened

A connection is closed

3939

HTTP Connections (Cont)HTTP Connections (Cont)

User SessionsUser Sessions

Series of interactions a user has with a server to carry Series of interactions a user has with a server to carry out a user task.out a user task.

The user session begins when the user first accesses The user session begins when the user first accesses the server through an initial HTTP connection, and the the server through an initial HTTP connection, and the session ends when the user either completes or cancels session ends when the user either completes or cancels the task the task

4040

HTTP Connections (Cont)HTTP Connections (Cont)

A A cookiecookie is a piece of is a piece of data generated by a data generated by a web server and stored web server and stored on the browser's on the browser's computer for future computer for future reference. reference.

4141

Server Push–Client PullServer Push–Client Pull

Server PushServer PushControl of the client-server transaction is maintained Control of the client-server transaction is maintained

directly by the server. directly by the server. The HTTP connection is left open, and the server The HTTP connection is left open, and the server

sends data to the client any time it wants until either sends data to the client any time it wants until either the server signals the end of the transaction or the the server signals the end of the transaction or the transaction is interrupted by the client.transaction is interrupted by the client.

4242

Server Push–Client PullServer Push–Client Pull

Client PullClient PullRequests are generated automatically, without user actRequests are generated automatically, without user act

ion, at specified intervals. ion, at specified intervals. The HTTP connection life cycle follows the pattern tyThe HTTP connection life cycle follows the pattern ty

pical of client-server transactions initiated by user actipical of client-server transactions initiated by user action. on.

With client pull, HTTP response headers, whether genWith client pull, HTTP response headers, whether generated by an application like a servlet erated by an application like a servlet oror by HTML tag by HTML tags, direct the browser to retrieve either the same page os, direct the browser to retrieve either the same page or another page after a specified interval of time. r another page after a specified interval of time.

4343

RefreshRefresh

Server responses that servers send to clients usually Server responses that servers send to clients usually consist of the following parts:consist of the following parts:a status linea status lineone or more response headersone or more response headersa blank linea blank linean HTML document. an HTML document.

4444

Refresh (Cont)Refresh (Cont)

In client pull modelIn client pull modelWith the application-generated-response-header approacWith the application-generated-response-header approac

h to implementing client pull, the information directing th to implementing client pull, the information directing the client to retrieve a page at a specified interval is inserhe client to retrieve a page at a specified interval is inserted into the response as a header by an application, such ted into the response as a header by an application, such as a servlet. as a servlet.

Client pull can be implemented with information providClient pull can be implemented with information provided by an HTML document using the HTML ed by an HTML document using the HTML METAMETA ele element. ment.

4545

METAMETA

METAMETA element provides a means by which an author can element provides a means by which an author can specify information about an HTML document. specify information about an HTML document.

META elements are enclosed by <HEAD> and </HEAD>.META elements are enclosed by <HEAD> and </HEAD>.

When HTTP servers serve the document, they read its When HTTP servers serve the document, they read its METAMETA elements and create HTTP response headers for all elements and create HTTP response headers for all items defined by an items defined by an http-equivhttp-equiv attributes and assigned attributes and assigned values with accompanying values with accompanying contentcontent attributes. attributes.

4646

METAMETA

METAMETA element provides a means by which an element provides a means by which an author can specify information about an HTML author can specify information about an HTML document. document.

META elements are enclosed by <HEAD> and META elements are enclosed by <HEAD> and </HEAD>.</HEAD>.

META has two attributes:META has two attributes:namenamehttp-equivhttp-equiv

4747

META attribute--NameMETA attribute--Name

<meta name=‘parameter’ content=‘value’><meta name=‘parameter’ content=‘value’>

parametersparameters: : <meta name=“<meta name=“generatorgenerator" content="Microsoft FrontPage " content="Microsoft FrontPage

3.0">3.0"><meta name =‘<meta name =‘keywordskeywords’ content=‘science, education’>’ content=‘science, education’><meta name=‘<meta name=‘descriptiondescription’ content=‘This page is about ’ content=‘This page is about

Wuhan University. ’> Wuhan University. ’> <meta name=‘<meta name=‘robotsrobots’ content=‘none’ >’ content=‘none’ ><meta name=‘<meta name=‘authorauthor’ content = ‘[email protected]’>’ content = ‘[email protected]’>

4848

META attribute—http-equivMETA attribute—http-equiv

<meta <meta http-equiv http-equiv =‘parameter’ content=‘value’=‘parameter’ content=‘value’>>

parametersparametersExpires(Expires( 网页的期限网页的期限 ))RefreshRefresh （刷新）（刷新）PragamPragam （禁止浏览器从本机缓存中调阅网页）（禁止浏览器从本机缓存中调阅网页）Set-CookieSet-Cookie （如果网页过期，删除相应的（如果网页过期，删除相应的 cookiecookie ））Window-TargetWindow-Target （显示窗口的样式）（显示窗口的样式）Content-TypeContent-Type （显示字符集的设定）（显示字符集的设定）Pics-labelPics-label （网页等级设定）（网页等级设定）

4949

Sample for METASample for META

5050

Redirect by METARedirect by META

Not all browsers support Not all browsers support http-equivhttp-equiv initiated initiated refresh. refresh. If you use this technique to redirect traffic to another If you use this technique to redirect traffic to another

page, be sure to include a link to the new page on the page, be sure to include a link to the new page on the page doing the redirect.page doing the redirect.

Some browsers, if they are busy when the time for Some browsers, if they are busy when the time for the redirect arrives, may fail to execute the redirect. the redirect arrives, may fail to execute the redirect. It is important to set the length of the interval long It is important to set the length of the interval long

enough to allow the page to load completely over the enough to allow the page to load completely over the slowest connection your users might be expected to use. slowest connection your users might be expected to use.

5151

Use Forms with ServletsUse Forms with Servlets

The process of sending forms to servers and then The process of sending forms to servers and then to servlets consists of four steps to servlets consists of four steps All successful controls are identified. All successful controls are identified. A form data set is built of control name—value pA form data set is built of control name—value p

airs. airs. The form data set is encoded. The form data set is encoded. The form data set is sent to a server addressed to The form data set is sent to a server addressed to

a servlet or other processing agent.a servlet or other processing agent.

5252

First StepFirst Step

This process begins with the activation of a form This process begins with the activation of a form submit button.submit button.The process identifies all successful controls—that is, The process identifies all successful controls—that is, all controls with current values that are valid for all controls with current values that are valid for submitting to a server. submitting to a server.

In general, these include all controls that have initial values set In general, these include all controls that have initial values set with their with their valuevalue attributes or have valid current values as a result attributes or have valid current values as a result of actions occurring after the form was loaded.of actions occurring after the form was loaded.

Exceptions to this are radio buttons and checkbox controls. To be Exceptions to this are radio buttons and checkbox controls. To be successful, radio buttons and checkbox controls must 1) be successful, radio buttons and checkbox controls must 1) be "checked" and 2) must have initial values that are assigned with "checked" and 2) must have initial values that are assigned with valuevalue attributes. attributes.

5353

Second & Third StepsSecond & Third Steps

Once all successful controls are identified, the Once all successful controls are identified, the browser builds the form data set. browser builds the form data set. This data set consists of the name-value pairs of all This data set consists of the name-value pairs of all

successful controls. successful controls.

Once this data set of name-value pairs is Once this data set of name-value pairs is assembled, the set is encoded and sent to a server, assembled, the set is encoded and sent to a server, addressed to a processing agent. addressed to a processing agent.

5454

Fourth StepFourth Step

The way the data set is sent to the server and the agent to wThe way the data set is sent to the server and the agent to which it is sent are determined by a hich it is sent are determined by a FORMFORM element's element's actionaction and and methodmethod attributes. attributes.

The The actionaction attribute identifies the agent (such as a servlet) b attribute identifies the agent (such as a servlet) by name and its location on the server, relative to the server's y name and its location on the server, relative to the server's root directory. root directory.

The The methodmethod attribute identifies the protocol by which the d attribute identifies the protocol by which the data set is to be sent.ata set is to be sent.

post post is used for transactions that involve large amounts of data or wis used for transactions that involve large amounts of data or when security is a requirement.hen security is a requirement.

get get is used for transactions that do not involve a large amount of datis used for transactions that do not involve a large amount of data and when security is not a requirement. a and when security is not a requirement.

5555

http://www.google.cn/search?sourceid=navclient&hl=zh-CN&ie=UTF-8&rlz=1T4GGIJ_zh-CNCN259CN259&q=%e6%ad%a6%e6%b1%89%e5%a4%a7%e5%ad%a6

5656

SummarySummary

Dynamic Web PageDynamic Web Page

FormFormForm ControlsForm Controls

ServletsServletsDynamic HTML ContentDynamic HTML Content

SSD1: Introduction to Information Systems Unit 1: Using the Web Shen Zhidong [email protected] ISS,...

Documents

Transcript of SSD1: Introduction to Information Systems Unit 1: Using the Web Shen Zhidong [email protected] ISS,...