Scribd
Upload
43 views39 pages

CSE1041 - Web - 1 - Revampedweek3

Frames allow dividing an HTML page into multiple independently scrollable sections. A frameset document defines the layout of frames using <frameset> and <frame> tags. Forms allow collecting user input on a web page using various input elements like text, password, submit buttons. Form data is sent to a server using GET or POST methods. Fieldset groups related form controls and adds visual organization to forms.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views39 pages

CSE1041 - Web - 1 - Revampedweek3

Frames allow dividing an HTML page into multiple independently scrollable sections. A frameset document defines the layout of frames using <frameset> and <frame> tags. Forms allow collecting user input on a web page using various input elements like text, password, submit buttons. Form data is sent to a server using GET or POST methods. Fieldset groups related form controls and adds visual organization to forms.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

CSE1041 Web 1

Week 3
HTML (Frames & Forms)

1
Frames (1)
• At their simplest level, frames provide multiple
separately scrollable areas within one user window.

• The different panes in applications such as Windows


Explorer can be manipulated separately from other
panes. The same is true for documents utilizing
frames.

• Frames require a separate document to define the


frame layout as well as individual documents to
actually occupy the frames

2
Frames (2)
• A frameset is created like any other HTML document except that its content is
limited to frame-related tags. The following skeletal code is an example of a
frameset document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN“


"http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
...
</head>
<frameset attributes>
<frame attributes></frame>
<frame attributes></frame>
...
</frameset>
</html>

3
Frame specific tags
• The document uses the frameset DTD. The frameset DTD is
essentially the same as the transitional DTD except for the
addition of the frame-specific tags (and replacement of the
<body> tag)

• There is NO body element. Instead, the <frameset> tag


provides the next level container under <html>

• The <frame> tags, nestled inside the <frameset> tag, define


the content for the frames and various properties of the
frame itself.

• Other than the <frameset> and <head> sections, there is no


other content in the document.
4
Frameset
• The frameset tag (<frameset>) defines the layout of the frames in the document. It
does so by specifying whether the frames should be laid out in columns or rows
and what each column’swidth should be.

• The frameset tag has the following format:


• <frameset cols|rows = "column_or_row_size(s)">

• The column or row sizes can be specified as percentages of the user agent
window; pixels; or an asterisk (*), which enables the user agent to assign the size.

• In the last case, the user agent typically splits the remaining space across the
columns or rows that specify * as their width.

• In any case, the resulting frameset will occupy the entire user agent window. The
number of entries of the cols or rows attribute also defines how many frames will
be used — each entry needs a corresponding <frame> tag within the <frameset>
tag.

5
Frameset Example
– <!-- Two columns, 25% of the window, the other 75% of the window -->
• <frameset cols = "25%, 75%">

– <!-- Two columns, 25% of the window, the other 75% of the window -->
• <frameset cols = "25%, *">

– <!-- Three rows, the first 50% of the window, the other two 25% of the window each -->
• <frameset rows = "50%, *, *">

– <!-- Two rows, the first 100 pixels high, the second is the size of the remaining window
space -->
• <frameset rows = "100px, 200px">

• In the above frameset example, the second row is defined at 200px. However, if
the user agent’s window is larger than 300 pixels high (the total of the rows
defined), the second row will be expanded to fill the space.

6
Frame Tag
• The frame tag (<frame>) is responsible for defining properties of each
frame.

• It has the following minimal syntax:


• <frame name="name_of_frame" src="url_of_content"></frame>

• The name attribute gives the frame a unique name that can be referenced
by URLs, scripts, and so on to control the frame’s contents.

• The src attribute is used to specify the URL of the content the frame
should display.

• Using only these two attributes results in a frame with minimal margins,
no borders, and automatic scroll bars.

7
8
Tips on Frame
• When using images in a frame, consider setting the margins to zero so the graphic
fills the frame entirely without superfluous white space.

• The frameborder attribute controls whether or not the bounding border of the
frame is visible.

• If frameborder is set to 1, the border appears as a 3-D, stylized bar. However,


setting frameborder to 0 does not totally eradicate the border as expected.

• One, non-standards-compliant solution to remove the border entirely is to place


the attribute border="0" in the frameset tag.

• The scrolling attribute controls whether the frame will display scroll bars. The
default setting, auto, allows the user agent to decide.

• The frame tag also has a noresize attribute that, when set, will not allow a user to
modify the frame’s size. The default is to allow the user to resize the frame.

• Investigate parent.news.location.href

9
Frame Example

10
Frame Example – The codes
<html>
<head>
<title> Main </title>

</head>
<frameset rows="*,7%" BORDER=1 FRAMESPACING=0>
<frameset cols="20%,80%" BORDER=1 FRAMESPACING=0>

<frame src="links.html" name="menuframe" scrolling="yes"/>


<frame src="details.html" name="contentframe" scrolling="no" />
</frameset>
<frame src="copyleft.html" name="copyleftframe" scrolling="no"/>

<noframes>
Sorry, your browser does not handle frames!
</noframes>
</frameset>
</html>

11
Inline Frames
• Inline frames were conceived to enable smaller
pieces of content to be incorporated in scrollable
containers within a larger document.

• Although you can use regular framesets to create


individually scrolling regions, the layout is somewhat
hampered by the stringent row and column layout
design inherent in framesets.

• Inline frames are accomplished with the <iframe>


tag. This tag has the following format:
• <iframe src="url_of_content"></iframe>
12
13
Forms

14
Forms
• At first HTML was not designed to send data back to the server for
processing.

• Remedied by adding the <form> tag.

• Forms can be placed within any element capable of holding other


elements (paragraphs, tables, and so on).

• The <form> tag has the following minimum format:


• <form action="url_to_send_data" method="get/post">

• Note: The action attribute defines a URL where the data from the form
should be sent to be handled.
• The destination should be a script or other construct capable of correctly
interpreting and doing something useful with the data.

15
Sending data to server
• Two ways to send data to server:
• 1. HTTP GET (get)
– The HTTP GET protocol attaches data to the actual URL text to pass the data to
the destination specified in the action attribute
– E.g http://www.on-target-games.com/forms.cgi?id=45677&data=Taarna
– Id and data values are visible - insecure!

• 2. HTTP POST (post)


– The HTTP POST method passes data encoded in the HTTP data stream. As such, it is not
visible to a user and is therefore a more secure method to pass data

16
Form example (1)
<html>
<head><title>hello</title></head>
<body>
<form id=myform action=“process.php" method="get">
Name: <input type=text name="txtname“/>
Password: <input type=password name=“txtpass“/>
<input type=submit name=submit value=“login”>
<input type=reset name=reset>
</form>
</body>
</html>

17
Form example (2)
<html>
<head><title>hello</title></head>
<body>
<form id=myform action=“process.php" method=“post">
Name: <input type=text name="txtname“/>
Password: <input type=password name=“txtpass“/>
<input type=submit name=submit value=“login”>
<input type=reset name=reset>
</form>
</body>
</html>

18
• Difference between the id and name attributes of the form

• The id attribute is used primarily in client-side scripts (like JavaScript) to


uniquely identify and manipulate a control.

• The name attribute is used to uniquely reference a field value when a form
is passed to a form handler on the server side.

19
Form Elements - Button
• The button form control is an attempt at improving the humble "submit" button (input
type="submit"), which can only contain one line of text (the value attribute) and places
certain limitations on the possibilities for CSS styling.

20
Investigate Button Attributes
• Access key for button

• What happens when two buttons have the


same name? How do we differentiate them?

• What is the default behaviour of button if the


type is not specified?

21
22
Fieldset (2)
• The fieldset is a useful tool for organizing and
grouping related items within a form.

• It has the effect of creating a box around the


grouped items and showing a description to the right
of each item.

• Eg.

23
Input Tag

24
Input Tag attributes (1)
• accept=“MIME type”
– E.g <input type="file" name="picture" id="picture“
accept="image/jpeg"/>
• alt=“string”
• E.g <input type="image" src="submit.jpg“ alt="Submit your
details"/>
• checked=“checked”
– E.g <input type="checkbox" name="chknewsletter"
id="chknewsletter“ checked="checked"/>
• disabled="disabled“
– E.g <input type="checkbox" name="chknewsletter"
id="chknewsletter“ checked="checked" disabled="disabled"/>
• maxlength="number“
– E.g <input type="password" name="pin" id="pin" maxlength="4"
size="6"/>

25
Input Tag attributes (2)
• name="string“
– E.g <input type="password" name="pin" id="pin" maxlength="4"
size="6"/>
• readonly="readonly"
– E.g <input type="text" name="town" id="town" readonly="readonly"
value="Southampton"/>
• size="number"
– E.g <input type="password" name="pin" id="pin" maxlength="4"
size="6"/>
• src="uri"
– E.g <input type="image" src="submit.jpg" alt="Submit your details"/>
• tabindex="number"
– E.g <input type="password" name="pin" id="pin" tabindex="2"/>

26
Input type attribute

Investigate every type.


27
Inputs
<input type=‘text’ name="txtname“/>
<input type=‘password’ name=“pspwd“/>

Macroni <input type=‘checkbox’ value=“macaroni”


name=“cbmacroni“/>
Lasagna <input type=‘checkbox’ value=“lasagna”
name=“cblasagna“/>

Male<input type=‘radio’ value=“male” name=“rdgender “/


Female <input type=‘radio’ value=“female”
name=“rdgender“/> 28
Buttons
<input type=“submit” value=“register” name=“btnsubmit”/>

<input type=“image” src=”mymage.jpg” name=“btnsubmit”/>

<button>
<h1>Click Me</h1>
</button>

29
Using an image as a submit button
• <input type=image src="images/bicycle.gif"
value="Submit">

30
Label Tag

Investigate how can this help the visually impaired.


31
Select Tag

32
Select Tag- Example
<select name=“nationality”>
<option value=“mru”>Mauritian</option>
<option value=“fr”>French</option>
<option value=“br”>British</option>
<option value=“it”>Italian</option>
</select>

33
Attributes for Option tag
• disabled="disabled"
– E.g <option disabled="disabled">Cabbage</option>
• label="string"
– E.g <option label="Cabbage">Cabbage (local produce)</option>
• selected="selected"
– E.g <option selected="selected">Egg</option>
• value="value"
– E.g <option value="1">Cheese</option>
– <option value="2">Egg</option>
– <option value="3">Cabbage</option>
• tabindex="number"
– E.g <input type="password" name="pin" id="pin" tabindex="2"/>

34
New Elements – canvas
• This is the output of Select tag.

• Investigate this

35
Textarea tag(1)

36
Textarea tag(2)
<textarea name="txt_others" cols=40
rows=3></textarea>

• The cols attribute specifies the number of colums


(characters to be displayed in one row)
• The rows attribute specifies the number of rows
to be displayed
• Investigate how to give a default value to a
textarea
37
Putting all of it together : Write the codes
Heading 2

Form Data is to be Sent to processOrder.php

-------------------------------------Room1, Room 2, Room 3

soup.jpg
link to souping.html and loads in same tab
piz.bmp
link to pizzaing.html and loads in new tab
menus.jpg and links to http://www.pizzahut.mu
38
References
• [1] Steven M. Schafer, HTML, XHTML, and CSS Bible, 5th
Edition (Wiley Publishing, 2010)

• [2] Matt Kruse, SERVER SIDE INCLUDES,


http://www.mattkruse.com/info/ssi/, accessed 29
August 2010

• [3] Ian Lloyd, The Ultimate HTML Reference, (SitePoint


Pty Ltd, 2008)

• Some Credits to Mr. S.Jaunbuccus & Mr. R. Elaheebocus

39

You might also like