HTML

1
HTML

• Form, Map, Applet

2
FORM

• With forms you can put a survey on your page to
  see what people think.
• You can use forms as an order form for your site,
  or just as a questionnaire to see what people
  think of you pages.
• Regardless of why you use them, forms may just be
  the trick you need to get the feedback you
  desire.

3
FORM

• FORM element
• METHOD attribute indicates the way the Web server
  will organize and send you form output
• Web server Machine that processes browser
  requests
• METHOD post in a form that causes changes to
  server data
• METHOD get in a form that does not cause any
  changes in server data
• Form data sent to server as an environment
  variable
• Processed by scripts
• ACTION attribute
• Path to a script (a CGI script written in Perl, C
  or other languages)

4
FORM-ENCODING

• You can specify an encoding type with ENCTYPE,
  the default of "application/x-www-form-urlencoded"
  is most widely supported.
• An alternative is "text/plain", which is
  typically used in combination when the ACTION
  attribute points to a mailto URL.
• If a browser supports both, the contents of the
  form is sent in plain text to the indicated
  recipient.

5
FORM-ENCODING

• The form field names and values are escaped
  space characters are replaced by ' ', and then
  reserved characters are escaped as per URL
  that is, non-alphanumeric characters are replaced
  by 'HH', a percent sign and two hexadecimal
  digits representing the ASCII code of the
  character. Line breaks, as in multi-line text
  field values, are represented as CR LF pairs,
  i.e. '0D0A'.
• The fields are listed in the order they appear in
  the document with the name separated from the
  value by '' and the pairs separated from each
  other by ''. Fields with null values may be
  omitted. In particular, unselected radio buttons
  and checkboxes should not appear in the encoded
  data, but hidden fields with VALUE attributes
  present should.

6
FORM

• GET The default, will send the form input in an
  URL.
• POST Sends the form in the body of the
  submission. You can send larger amounts of data,
  and that the URL of the form results doesn't show
  the encoded form.

7
FORM-GET

• If the processing of a form is has no lasting
  observable effect on the state of the world, then
  the form method should be 'GET'.
• Many database searches have no visible
  side-effects and make ideal applications of query
  forms.
• To process a form whose action URL is an HTTP URL
  and whose method is 'GET', the user agent starts
  with the action URL and appends a '?' and the
  form data set, in 'application/x-www-form-urlencod
  ed' format. The user agent then traverses the
  link to this URL just as if it were an anchor.

8
REQUEST OBJECT- QueryString (GET)
Retrieve information sent by the client using
HTTP Get method with an HTML form and data
appended to the URL when the page is
requested. QueryString is less capable than the
Form collection (limitation of about 2000
characters) http//www.mis.boun.edu.tr/egeli/asp/
query.asp?placemis

9
FORM-POST

• If the service associated with the processing of
  a form has side effects (for example,
  modification of a database or subscription to a
  service), the method should be 'POST'.
• To process a form whose action URL is an HTTP URL
  and whose method is 'POST', the user agent
  conducts an HTTP POST transaction using the
  action URL, and a message body of type
  'application/x-www-form-urlencoded' format. The
  user agent should display the response from the
  HTTP POST interaction just as it would display
  the response from an HTTP GET.

10
REQUEST OBJECT- Form (POST)

• User enters input into the fields of a form
• When form is submitted, data in each field is
  transferred to the server, and then to ASP
• Data is sent in the format
• name value
• name (attribute of ltINPUTgt)

11
FORM-POST GET

• The HTML specifications technically define the
  difference between "GET" and "POST" so that
  former means that form data is to be encoded (by
  a browser) into a URL while the latter means that
  the form data is to appear within a message body.
  
• "GET" is basically for just getting (retrieving)
  data whereas "POST" may involve anything, like
  storing or updating data, or ordering a product,
  or sending E-mail.

12
GET vs. POST

• GET can be used to retrieve any document, POST
  cannot
• GET and POST can be used to pass data to the
  object indicated by the URL
• When POST is used, the data is passed to the
  server in the body of the request message
• When GET is used, the data is included in the URL
  as argument string and needs to be parsed

13
ltFORMgt

• ltFORMgt is a container tag and holds the form
  elements.
• ltFORM method"post" name"views
• action"mailtox_at_full-moon.com"gt
• This command does 3 things
• Tells the browser a form has begun and will be
  called 'views'.
• "Post" is the method you want the results to be
  handled.
• You want the data posted to an e-mail address.
  Note that there are no spaces between 'mailto'
  and the e-mail address you specify.

14
ltTEXTAREAgt

• TEXTAREA element
• Inserts a scrollable text box into FORM
• ROWS and COLS attributes specify the number of
  character rows and columns
• ltTEXTAREA
• NAME"I_think" ROWS6 COLS30gt
• lt/TEXTAREAgt
• ROWS Specifies the height of textarea box as
  rows.
• COLS Specifies the width of textarea box as
  characters.

15
ltINPUT TYPETEXTgt

• Tells the browser the name, type and size of the
  input box.
• ltINPUT TYPE"text"
• NAME"My_name" SIZE"30"gt
• NAME Defines the name of the form.
• SIZE Defines the width of the form by specifying
  the number of characters.

16
ltINPUTgt

• INPUT element
• Attributes
• TYPE (required)
• Hidden inputs always have TYPE hidden
• Defines the usage of the INPUT element
• TYPE text inserts a one-line text box
• NAME provides a unique identification for INPUT
  element
• VALUE indicates the value that the INPUT element
  sends to the server upon submission
• SIZE
• For TYPE text, specifies the width of the
  text input, measured in characters
• MAXLENGTH
• For TYPE text, specifies the maximum number
  of characters that the text input will accept

17
ltINPUTgt

• INPUT element (cont.)
• Include textual identifier adjacent to INPUT
  element
• 2 types of INPUT elements that should be inserted
  into every form
• TYPE submit inserts a button that submits
  data to the server
• VALUE attribute changes the text displayed on the
  button (default is Submit)
• TYPE reset inserts a button that clears all
  entries the user entered into the form
• VALUE attribute changes the text displayed on the
  button (default is Reset)

18
ltINPUTgt SUBMIT AND RESET

• At the end of the forms page buttons can be
  inserted that either submit or reset the form.
• ltINPUT TYPE"submit"gt
• ltINPUT TYPE"reset" VALUE"Clear"gt
• VALUE Specifies the text to be displayed on the
  button.

19
ltINPUT TYPEIMAGEgt

• Specifies an image resource to display, and
  allows input of two form fields the x and y
  coordinate of a pixel chosen from the image.
• Implies TYPESUBMIT' processing that is, when a
  pixel is chosen, the form as a whole is
  submitted.
• The SRC attribute is required
• the ALIGN is optional
• Choose a point on the map
• ltINPUT TYPE"IMAGE"
• NAME"map SRC"foo.gif"gt

20
ltINPUT TYPEPASSWORDgt

• INPUT element
• TYPE password
• Inserts a text box where data displayed as
  asterisks
• Actual data submitted to server

21
ltINPUT TYPEHIDDENgt

• An INPUT element with TYPEHIDDEN' represents a
  hidden field.The user does not interact with this
  field instead, the VALUE attribute specifies the
  value of the field. The NAME and VALUE attributes
  are required.
• ltINPUT TYPEhidden NAMEcontext
• VALUE"l2k3j4l2k3j4l2k3j4lk23"gt

22
ltINPUT TYPECHECKBOXgt

• As opposed to Radio Buttons, check boxes can have
  more than 1 option selected. So, while you might
  ask what computer brand a reader prefers using
  radio buttons, you would ask what peripherals a
  reader has hooked up with checkboxes and present
  a list of choices.
• ltINPUT TYPE"checkbox"
• NAME"peripherals" VALUE"mouse"gt

23
ltINPUT TYPECHECKBOXgt

• Creates a checkbox
• Used individually or in groups
• Each checkbox in a group should have same NAME
• Make sure that the checkboxes within a group have
  different VALUE attribute values
• Otherwise, browser will cannot distinguish
  between them
• CHECKED attribute checks boxes initially

24
ltINPUT TYPERADIOgt

• When type radio is used the form will let only 1
  button to be selected. Tthe name will be the same
  regardless with the value differing per your
  suggestion.
• ltINPUT TYPE"radio" NAME"Letter"
• VALUE"A"gt A
• ltINPUT TYPE"radio" NAME"Letter"
• VALUE"B"gt B
• VALUE Defines the value to be returned by the
  form action.

25
ltINPUT TYPERADIOgt

• Radio buttons similar in function and usage to
  checkboxes
• Only one radio button in a group can be selected
• CHECKED attribute indicates which radio button is
  selected initially

26
ltSELECTgt

• A pop-up box is a text box that displays one
  option of several possibilities. An Arrow is
  displayed next to the box. When the user clicks
  on the arrow, the pop-up box opens and displays
  all of the possible options that are available.
• SELECT Start of the pop-up box
• SIZE Defines how many options will show before
  you have clicked on the pop-up box.
• OPTION SELECTED Notes the option that will be
  initially displayed in the box.
• OPTION Notes the item that can be selected.

27
ltSELECTgt

• ltSELECT
• NAME"Web_Use" SIZE"1"gt
• ltOPTION SELECTEDgt
• Surfing
• ltOPTIONgt
• Playing Games
• ltOPTIONgt
• Chatting
• lt/SELECTgt

28
ltSELECTgt

• SELECT element
• Places a selectable list of items inside FORM
• Include NAME attribute
• Add an item to list
• Insert an OPTION element in the
  ltSELECTgtlt/SELECTgt tags
• Closing OPTION tag optional
• SELECTED attribute applies a default selection to
  list
• Change the number of list options visible
• Including the SIZE x attribute inside the
  ltSELECTgt tag
• x number of options visible

29
FORM-EXAMPLE-1

• ltFORM method"POST"
• action"mailtoegeli_at_boun.edu.tr"gt
• ltpgtYour Name nbsp nbsp
• ltinput type"text" name"NAME"
  size"20"gt lt/pgt
• ltpgtYour Surname
• ltinput type"text" name"SURNAME"
  size"20"gt lt/pgt
• ltpgt ltinput type"submit" value"Post"gt
• ltinput type"reset" value"Reset"gt lt/pgt
• lt/FORMgt

30
FORM-EXAMPLE-1
31
FORM-EXAMPLE-1

• When post method is used to send the form as a
  mail message, this form is posted from Microsoft
  Internet Explorer as an attachment.
•  
• File Name
• POSTDATA.ATT
• File Type
• Text file (Notepad)
• Content
• NAMEBirgulSURNAMEEgeli

32
EXAMPLE-2
33
FORM-EXAMPLE-2

• ltFORM method"post" name"formex"
• action"mailtoegeli_at_boun.edu.tr"gt
• Name
• ltINPUT Type"text" name"Name" size"30"gt
• ltbrgt
• Surname
• ltINPUT Type"text" name"Surname" size"30"gt
• ltbrgt

34
FORM-EXAMPLE-2

• Password
• ltINPUT Type"password" name"Password" size"6"
  maxlength6gt
• ltbrgt
• ltINPUT Type"hidden" name"Usercode" ltbrgt
• lt! Can be used to pass parameters --gt
• Address
• ltTEXTAREA name"Address" rows3 cols30gt
  lt/TEXTAREAgt
• ltbrgt

35
FORM-EXAMPLE-2

• Your favorite home pet ltbrgt
• ltINPUT type"radio" name"pet" value"Cat"
  checkedgt Cat
• ltbrgt
• ltINPUT type"radio" name"pet" value"Dog"gt Dog
• ltbrgt
• ltINPUT type"radio" name"pet" value"Bird"gt Bird
• ltbrgt

36
FORM-EXAMPLE-2

• Interestsltbrgt
• ltINPUT type"checkbox" name"interest1"
  value"Read"gt Reading
• ltbrgt
• ltINPUT type"checkbox" name"interest2"
  value"Swim"gt Swimming
• ltbrgt
• ltINPUT type"checkbox" name"interest3"
  value"Music"gt Music
• ltbrgt

37
FORM-EXAMPLE-2

• Job preference
• ltSELECT Name"jobpref" size"1"gt
• ltOPTION SELECTEDgt Teaching
• ltOPTIONgt Research
• ltOPTIONgt Management
• lt/SELECTgt
• ltbrgt

38
FORM-EXAMPLE-2

• Multiple Select Interest (select with
  ctrlclick)
• ltSELECT Name"minterest" size"3" multiplegt
• ltOPTION SELECTEDgt Reading
• ltOPTIONgt Swimming
• ltOPTIONgt Music
• lt/SELECTgt

39
FORM-EXAMPLE-2

• ltINPUT TYPE"image" src"logo.jpg"gt
• ltbrgt
• ltINPUT TYPE"submit" value"Submit"gt
• ltbrgt
• ltINPUT TYPE"reset" value"Reset"gt

40
EXAMPLE-2
41
FORM-EXAMPLE-2

• NameBirgul
• SurnameEgeli
• Passwordmis371
• Usercode
• AddressBoF0aziE7iDCniversitesi
• petCat
• interest1Read
• jobprefTeaching
• minterestReading
• minterestMusic

42
FORM-EXAMPLE-3

• The URL specified in the ACTION attribute does
  not have to be a CGI script, although you can get
  pretty weird results if you try to feed data to a
  document which isn't a CGI script. A popular
  reason to do this is to get a "button" which when
  pressed takes you to a new page.
• ltFORM ACTION"http//www.mis.boun.edu.tr
• METHODGETgt
• ltINPUT TYPEsubmit
• NAMEfoo
• VALUE"Go to destination"gt
• lt/FORMgt

43
MAP

• A client-side image map is an image map that is
  run by the browser rather than a CGI. What
  happens is you will provide all the information
  required to run the map in your HTML document.
• First the image needs to be prepared. Then the
  hot spot coordinates are specified.

44
MAP

• Image maps
• Designate certain sections of an image as
  hotspots
• Use hotspots as anchors for linking
• All elements of image map inside ltMAPgtlt/MAPgt
  tags
• ltMAPgt tag requires NAME attribute
• Ex. ltMAP NAME picturegt
• Hotspots designated with AREA element
• AREA attributes
• HREF sets the target for the link on that spot
• SHAPE and COORDS set the characteristics of the
  AREA
• ALT provides alternate textual description

45
MAP

• AREA element (continued)
• SHAPE rect
• Causes rectangular hotspot to be drawn around the
  coordinates given in the COORDS attribute
• COORDS - pairs of numbers corresponding to the x
  and y axes
• x axis extends horizontally from upper-left
  corner
• y axis extends vertically from upper-left corner
• Ex. ltAREA HREF form.html SHAPE rect
  COORDS 3, 122, 73, 143 ALT Go to the
  formgt
• Rectangular hotspot with upper-left corner of
  rectangle at (3, 122) and lower-right corner at
  (73, 143)

46
MAP

• AREA element (continued)
• SHAPE poly
• Causes a hotspot to be created around specified
  coordinates
• Ex. ltAREA HREF mailtodeitel_at_deitel.com SHAPE
  poly COORDS 28, 22, 24, 68, 46, 114, 84,
  111, 99, 56, 86, 13 ALT Email the
  Deitelsgt
• SHAPE circle
• Creates a circular hotspot
• Coordinates of center of circle and radius of
  circle, in pixels
• Ex. ltAREA HREF mailtodeitel_at_deitel.com SHAPE
  circle COORDS 146, 66, 42 ALT Email
  the Deitelsgt

47
MAP

• To use the image map with an IMG element
• Insert the USEMAP name attribute into the
  IMG element
• name - value of the NAME attribute in the MAP
  element
• Ex. ltIMG SRC "deitel.gif" WIDTH "200"
  HEIGHT"144" BORDER"1" ALT "Harvey and Paul
  Deitel" USEMAP "picture"gt

48
MAP

• ltIMG SRC"turkeym.gif" HEIGHT100 WIDTH100
• BORDER1 ISMAP USEMAP"Turkey"gt
• ISMAP stands alone. It tells the browser that
  this is an image map. Basically, the browser is
  being told that the image is active, but rather
  to read the map instead of activating the image.
• USEMAP tells the browser where to find the map
  coordinates. Notice the format is that of a page
  jump. The browser is being told where on the page
  to look for the map coordinates. In this case the
  coordinates are on a section of the HTML document
  marked "monkarea". Please notice the mark! You
  need that.

49
MAP

• ltMAP NAME"Turkey"gt
• You first denote that the following are the
  coordinates for the map. You do that with MAP
  NAME.
• mark is not used here. The browser jumps to
  this part of the page to read coordinates rather
  than going to a CGI.

50
MAP

• ltAREA SHAPEPOLY
• COORDS"40,40,40,110,160,110,160,40
• HREF"istanbul.gif"gt
• lt/MAPgt
•  
• AREA denotes that this is a new section of the
  map.
• SHAPE denoted the shape you used.
• HREF denotes the URL this section points to.
• /MAP wraps up the whole deal.

51
MAP

• ltAREA SHAPEPOLY
• COORDS"40,40,40,110,160,110,160,40
• HREF"istanbul.gif"gt
•  
• RECT (4 COORDINATES or 2 VERTEX)
• CIRCLE (CENTER COORDINATE, RADIUS)
• POLY (ANY NUMBER OF COORDINATES)

52
APPLET

• Applets are mall programs written in Java that
  can be executed by the browser.
• ltAPPLETgt tag is used to add an applet to a web
  page.
• CLASS extension file is the source file to be
  used by the browser.
• ltPARAMgt tag is used to set the programmer
  specified parameters.

53
APPLET

• ltAPPLET CODEx.class
• NAMEmycolors
• VSPACE20
• WIDTH400 HEIGHT50gt
• ltPARAM NAMEbgcol VALUERedgt
• (PARAMparameters passed to object)
• (VALUEvalue associated with param)
• lt/APPLETgt