More HTML

1
More HTML

• Frames and Forms

2
Frames

• Help to organize a Web site with multiple pages
• Divide a window into several panes
• To make all parts to work together a FRAMESET is
  to be established

3
Creating a Frameset

• A simple frameset divides a window into a few
  panes in rows or in columns
• The tag FRAMESET must have attribute ROWS or COLS
• The tag FRAMESET must be placed after HEAD part
  of an HTML document
• The tag FRAMESET replaces BODY part of HTML
  document.

4
Framesets in Rows

• The attributes specify the number of panes and
  their heights or widths in percentages, numbers
  of pixels, or variable depending on sizes of
  others
• ltFRAMESET ROWSa,b,dgt
• description of each frame
• lt/FRAMESETgt

5
Framesets in Columns

• ltFRAMESET COLSa,b,dgt
• description of each frame
• lt/FRAMESETgt
• a-30, b-20, d- 50
• Or
• a-3, b- 2, d-5

6
Frame Content

• To describe each frame in a frameset
• ltFRAME NAMEF1_Name SRCURLgt
• where NAME is used to display various HTML
  documents in the same pane.
• URL specifies an HTML document is to be
  displayed in the frame at the beginning

7
Targeting Links to a Frame

• To specify a frame name using attribute NAME in
  the FRAME tag
• In the document holding a link
• ltA HREFURL TARGETF_Namegt Label text lt/Agt

8
Nesting Frames

• Attributes ROWS and COLS allow to create very
  simple frames.
• Nesting frames appear when one of the frames in a
  frameset contains another frameset
• Using a file with a frameset

9
Creating a Nesting Frame

• Create a couple of simple framesets which will
  form a complicated frameset
• Instead of one frame substitute a description of
  another frameset
• Repeat steps 1 and 2 as many times as necessary

10
Example Nesting Frames

• ltFRAMESET COLS, 3gt
• ltFRAME NAMEMap SRCURL_Mapgt
• ltFRAMESET ROWS,2,gt
• ltFRAME NAMEBanner SRCURL_Bgt
• ltFRAME NAMEMain SRCURL_Mgt
• ltFRAME NAMEContacts SRCURL_Cgt
• lt/FRAMESETgt
• lt/FRAMESETgt

11
Forms

• Allow to collect data from visitors
• Two parts of a form
• Users interface containing control elements
  fields, labels, lists and buttons
• Processing script computer program which
  processes the data entered in the form

12
Common Gateway Interface

• Standardized way for data exchange between client
  and server
• Each control element has a name and a value
  associated with it
• CGI script
• Takes names and appropriate values into
  independent pairs
• Processes the pair

13
Passing Data

• Data is arranged into pairs namevalue and
  separated by
• Standard input stream for HTTP corresponds to the
  method POST
• Pairs form Query String and are added to the URL
  of CGI scrip corresponds to the method GET

14
Creating a Form

• Form tags are placed in the BODY of HTML document
• ltFORM METHODM_Name ACTIONURL gt
• control element descriptions
• lt/FORMgt,
• where M_Name POST or GET,
• URL URL of CGI script like
• http//www.site.com/cgi-bin/program.cgi

15
Sending Form Data via E-mail

• Change the FORM tag
• ltFORM METHODPOST ENCTYPEtext/plain
• ACTIONmailtoyou_at_site.comgt
• control element descriptions
• lt/FORMgt

16
Creating a Text Box

• Many control elements can be added using tag
  INPUT with various values for TYPE attribute
• To create a text box
• ltINPUT TYPEText NAMEname VALUEvalue
  SIZEngt
• Value - the data initially shown in the text box

17
Creating Text Areas

• Text areas are large portions of text
• ltTEXTAREA NAMEname ROWSn COLSm WRAPgt
  Default Text lt/TEXTAREAgt
• where n- the height of the text in rows,
• m- the width of the text in characters
• WRAP automatically wraps lines within margins

18
Creating Radio Buttons

• Radio buttons have 2 states on or off
• Can be incorporated into a group, then only 1
  button can be on at a time
• ltINPUT TYPEradio NAMESet_Name VALUEdata
  CHECKEDgtLabel Text,
• data will be sent to the server,
• Set_Name identifies the button set

19
Creating Checkboxes

• Allow to select multiple available options
• Have two states on or off
• Are linked by the name of their set
• ltINPUT TYPEcheckbox NAMESet_Name
  VALUEvalue CHECKEDgt Label text

20
Creating the Submit Button

• Almost each form must have a Submit button
• Does not need a name
• Default value Submit Query
• ltINPUT TYPEsubmit VALUElabelgt
• Label the text which appears on the button

21
Creating Reset Button

• Reset button allows to restore initial state of
  the form including default values
• To create a button
• ltINPUT TYPEreset Valuereset messagegt
• NameValue for reset button is only sent if Name
  is specify

22
Creating Menus

• Allow visitors to make a selection from lists or
  drop-down list boxes
• ltSELECT NAMEM_name SIZEn
• MULTIPLEgt
• ltOPTION VALUEvalue1 SELECTEDgt Text1
• ltOPTION VALUEvalue2 SELECTED gt Text2
• ..
• lt/SELECTgt
• SELECTED establishes default values

23
Attribute Multiple

• Use MULTIPLE to create menu as a list allowing to
  choose multiple options.
• Attribute SIZEn determines how many rows will
  be presented from the list.
• To create Drop-Down List Box menu, omit attribute
  MULTIPLE and specify attribute SIZE1

24
Hidden Fields

• Are invisible on the form
• Allow to transmit important internal data
• ltINPUT TYPEhidden NAMEF_name
• VALUEvalue
• The pair F_namevalue will be added to the
  Standard data stream or Query_String