CS101 Introduction to Computing Lecture 12 Interactive Forms (Web Development Lecture 4)

1
CS101 Introduction to ComputingLecture
12Interactive Forms (Web Development Lecture 4)
2
Focus of the last lecture was on HTML Lists
Tables

• We learnt how to extend our Web pages by adding a
  few more tags
• Specifically, we discussed various types of lists
  that can be added to a Web page un-ordered,
  ordered and definition lists
• And also, about tables about various tags used
  in a table and their associated attributes

3
Todays Lecture

• We will try to understand the utility of forms on
  Web pages
• We will find out about the various components
  that are used in a form
• We will become able to build a simple,
  interactive form

4
Interactive Forms (1)

• Without forms, a Web site is read-only it
  just provides information to the user
• Forms enable the user to provide information to
  the Web site. For example, the user can
• Perform searches on Web site
• Give comments
• Ask for info that is not available on the Website
• Place order for goods and services

5
Interactive Forms (2)

• Can be simple or very complex
• Can fill a whole page or just a single line
• Can contain a single element or many
• Are always placed between the ltBODYgt and lt/BODYgt
  tags of a Web page

6
Interactive Forms (3)

• Are GUI-based
• May contain
• Text fields
• Check boxes
• Buttons
• Scrollable lists

7
A SimpleExampleofInteractiveForms
8
Code for that Example

• ltHTMLgt
• ltHEADgt
• ltTITLEgtSend Email to melt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtSend Email to melt/H1gt
• Code for the instructions
• Code for the form
• lt/BODYgt
• lt/HTMLgt

9
A SimpleExampleofInteractiveForms
10
Code for the Instructions

• ltPgtTo send an eMail message to melt/Pgt
• ltOLgt
• ltLIgtType your eMail address in the
  quotFromquot fieldlt/LIgt
• ltLIgtType a short message in the
  quotMessagequot fieldlt/LIgt
• ltLIgtPress the quotSend eMail to mequot
  buttonlt/LIgt
• lt/OLgt

11
A SimpleExampleofInteractiveForms
12
Code for the Form

• ltFORM name"sendEmail" method"post"
  action"sendMailScriptURL"gt
• Elements of the form
• lt/FORMgt

13

• ltFORM name"sendEmail" method"post"
  action"sendMailScriptURL"gt
• Elements of the form
• lt/FORMgt

name Name given to the form method Forms can
be submitted through two alternate methods GET
POST action Specifies the URL that is
accessed when the form is being submitted
14
Server-Side Scripts

• Are programs that reside on Web servers
• Receive info that a user enters in a form
• Process that info and take appropriate action
• Examples
• CGI scripts on Unix servers
• ASP scripts on Windows servers

15
A SimpleExampleofInteractiveForms
16
Elements of the Form (1)

• ltPgtFrom ltINPUT type"text" namesender"
  size"50"gtlt/Pgt
• ltPgtMessage ltINPUT type"text" name"message"
  size"50"gtlt/Pgt

17
A SimpleExampleofInteractiveForms
18
Elements of the Form (2)

• ltPgtltINPUT type"hidden" name"receiver"
  value"altaf_at_vu.edu.pk"gtlt/Pgt
• ltPgtltINPUT type"hidden" namesubject
  valueeMail from the formgtlt/Pgt
• ltPgtltINPUT type"submit name"sendEmail"
  value"Send eMail to me"gtlt/Pgt

19
A SimpleExampleofInteractiveForms
20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
ltTEXTAREA namemessage cols38 rows6gtlt
/TEXTAREAgt
24

• ltFORM name"sendEmail" method"post"
  actionsendMailScriptURL"gt
• lttablegtlttrgt
• lttdgtFrom lt/tdgt
• lttdgtltINPUT type"text" name"sender"
  size"50"gtlt/tdgt
• lt/trgtlttrgt
• lttdgtTo lt/tdgt
• lttdgtltINPUT type"text" name"receiver"
  size"50"gtlt/tdgt
• lt/trgtlttrgt
• lttdgtSubject lt/tdgt
• lttdgtltINPUT type"text" name"subject"
  size"50"gtlt/tdgt
• lt/trgtlttrgt
• lttd valign"top"gtMessage lt/tdgt
• lttdgtltTEXTAREA name"message"
  cols"38"rows"6"gt lt/TEXTAREAgtlt/tdgt
• lt/trgtlttrgt
• lttd colspan"2" align"right"gt
• ltINPUT type"submit" name"sendEmail"
  value"Send eMail"gt
• lt/tdgt
• lt/trgtlt/tablegt
• lt/FORMgt

25
(No Transcript)
26
ltINPUT typetext namesender size50
valueyour eMail address goes heregt
27
Review of the Tags Used in Forms
28

• ltFORM
• namenameOfTheForm
• methodget or post
• actionURL
• gt
• Elements of the form
• lt/FORMgt

29
Single-Line Text Input Field

• ltINPUT typetext
• namefieldName
• sizewidthInCharacters
• maxlengthlimitInCharacters
• valueinitialDefaultValuegt

30
Hidden Input

• ltINPUT typehidden namefieldName value
  valuegt

31
Submit Button Input

• ltINPUT typesubmit namebuttonName value
  displayedTextgt

32
Multi-Line Text Input Area

• ltTEXTAREA nameareaName colswidthInCharacter
  s rowsnumberOfLinesgt
• initial default value
• lt/TEXTAREAgt

33
This was a review of the new tags (and associated
attributes) that we have used in todays
examplesThere are many more tags that can be
used in a formLet us take a look at a few
34
(No Transcript)
35
ltform name"login" method"post"
action"loginScript"gt lttablegtlttrgt
lttdgtUser Name lt/tdgt lttdgt ltinput
type"text" name"userName" size"10"gt
lt/tdgt lt/trgtlttrgt lttdgtPassword lt/tdgt
lttdgt ltinput type"password"
name"password" size"10"gt lt/tdgt
lt/trgtlttrgt lttd colspan"2" align"right"gt
ltinput type"submit" name"login"
value"Log me in"gt lt/tdgt
lt/trgtlt/tablegtlt/formgt
36
Password Input Field

• ltINPUT typepassword
• namefieldName
• sizewidthInCharacters
• maxlengthlimitInCharacters
• valueinitialDefaultValuegt

37
(No Transcript)
38
ltform name"login" method"post"
action"loginScript"gt lttablegtlttrgt
lttdgtUser Name lt/tdgt lttdgt ltinput
type"text" name"userName" size"10"gt
lt/tdgt lt/trgtlttrgt lttdgtPassword lt/tdgt
lttdgt ltinput type"password"
name"password" size"10"gt lt/tdgt
lt/trgtlttrgt lttd colspan"2"gt ltinput
type"checkbox" name"remember"
value"remember"gt Remember my
user name and passwordltbrgt lt/tdgt
lt/trgtlttrgt lttd colspan"2"gt ltinput
type"submit" name"login" value"Log me in"gt
lt/tdgt lt/trgtlt/tablegtlt/formgt
39
Checkbox Input Element

• ltINPUT typecheckbox
• namecheckboxName
• checked
• valuecheckedValuegt

40
Office
41
ltform name"login" method"post"
action"loginScript"gt lttablegtlttrgt
lttdgtUser Name lt/tdgt lttdgt ltinput
type"text" name"userName" size"10"gt
lt/tdgt lt/trgtlttrgt lttdgtPassword lt/tdgt
lttdgt ltinput type"password"
name"password" size"10"gt lt/tdgt
lt/trgtlttrgt lttd valign"top"gtLogging in
fromlt/tdgt lttdgt ltinput
type"radio" name"from" value"home"gt Homeltbrgt
ltinput type"radio" name"from"
value"office"gt Homeltbrgt ltinput
type"radio" name"from" value"university"
checkedgt University lt/tdgt lt/trgtlttrgt
lttd colspan"2" align"right"gt ltinput
type"submit" name"login" value"Log me in"gt
lt/tdgt lt/trgtlt/tablegtlt/formgt
42
Radio Button Input Element

• ltINPUT typeradio
• nameradioButtonName
• checked
• valueselectedValuegt

43
What is the difference between checkboxes and
radio buttons?
44
(No Transcript)
45
ltform name"login" method"post"
action"loginScript"gt lttablegtlttrgt
lttdgtUser Name lt/tdgt lttdgtltinput type"text"
name"userName" size"10"gtlt/tdgt lt/trgtlttrgt
lttdgtPassword lt/tdgt lttdgt ltinput
type"password" name"password" size"10"gt
lt/tdgt lt/trgtlttrgt lttd valign"top"gtLogging
in fromlt/tdgt lttdgt ltselect
size"2" name"from"gt ltoption value"home"gt
Home ltoption value"office"gt Office ltoption
value"university" selectedgt University
lt/selectgt lt/tdgt lt/trgtlttrgt lttd
colspan"2"gt ltinput type"submit"
name"login" value"Log me in"gt lt/tdgt
lt/trgtlt/tablegtlt/formgt
46
Select from a (Drop Down) List

• ltSELECT namelistName
• sizenumberOfDisplayedChoices
• multiple
• gt
• ltOPTION valuevalue1gt text1
• ltOPTION valuevalue2 selectedgt text2
• ltOPTION valuevalue3gt text2
• lt/SELECTgt

47
(No Transcript)
48
File Upload Input Element

• ltINPUT typefile
• namebuttonName
• valuenameOfSelectedFile
• enctypefileEncodingTypegt

49
ltform nameuploadForm methodpost actionu
ploadScript ltinput typefile nameupload
File enctypemultipart/form-data gt
ltinput typesubmit namesubmit valueUploa
d gtlt/formgt
50
Reset Button Input Element(Resets the contents
of a form to default values)

• ltINPUT typereset
• valuedispalyedTextgt

51
(No Transcript)
52
Assignment 4

• Create a simple Web page to provide electronic
  greeting message service on the Internet. Your
  Web page should contain
• The heading of the Web page
• Input fields to capture information (i.e. names
  and email addresses) about the sender and the
  receiver of the message
• List of the available greeting messages
• Button to send the card
• More info about this assignment is available on
  the CS101 Web page

53
Todays Lecture was the

• We looked at the utility of forms on Web pages
• We found out about the various components that
  are used in a form
• We became able to build a simple, interactive form

54
Next Web Dev LectureMore Complex Form

• Today we started our discussion on interactive
  forms
• During the next Web Dev Lecture we continue this
  discussion and learn ways of constructing more
  complex interactive forms
• We may also get our first taste of JavaScript
  during that lecture