Scribd
Upload
13 views

IP - Lecture 3, 4,5 Chapter-2

Uploaded by

fereja dawud
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
13 views

IP - Lecture 3, 4,5 Chapter-2

Uploaded by

fereja dawud
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/ 63

HTML LISTS

Types of Lists
 There are a number of tags for building lists.
 Serves the purpose of improving the readability of the text.
 Depending on the way the list items are displayed, lists
may be divided into three types:
 Unordered list(unnumbered list)- This will list
items using plain bullets (there is no special order
between items)
 list of examples, names, components…
 Ordered list (numbered list)- This will use
different schemes of numbers to list your items.
 Items occur in a particular order, such as step-by-
step instructions or driving directions
 Definition list- This arranges your items in the
same way as they are arranged in a dictionary
1
UNORDERED LIST
 Used to display a set of related items that appear in no
particular order.
◦ Each item is indented with a preceding bullet symbol.
 Specified using the tag:
<UL> ……… </UL>
 The individual items in the list are specified using the <LI> tag.
 Attributes:
type = disc | circle | square (not supported in HTML 5)
style=“list-style-type: disk|circle|square” (HTML 5)
 The <LI> items can contain multiple paragraphs, specified using
<P>.
 Example:
<UL>
<LI> <p> First item of the list</p></li>
<LI> <p>Second item of the list</p></li>
<LI> <p>Third item of the list</p></li> 2
</UL>
EXAMPLE 1
<!DOCTYPE html>
<html>
<head><title> Bulleted list 1 </title></head>
<body>
<h2> The flowers I like: </h2>
<h3>
<UL>
<LI> Rose </LI>
<LI> Lotus </LI>
<LI> Daffodil </LI>
<LI> Marigold </LI>
</UL>
</h3>
</body> 3
</html>
EXAMPLE 2
<!DOCTYPE html>
<html>
<head><title> Bulleted list 2 </title></head>
<body >
<h2> The flowers I like: </h2>
<h3>
<UL style="list-style-type:square">
<li> Rose</li>
<li> Lotus</li>
<li> Daffodil</li>
<li> Marigold</li>
</UL>
</h3>
4
</body>
</html>
ORDERED LIST(NUMBERED LIST)

 Numbered or ordered lists are used when the sequence


of the items is important.
 Specified using the tag:
<OL> ……… </OL>
 The individual items in the list are specified using the
<LI> tag.
 Example:
<OL>
<LI> This is number one </LI>
<LI> This is number two </LI>
<LI> This is number three </LI>
</OL> 5
…CONT
 The list items are numbered sequentially as
1,2,3…
 Attributes:
type = 1 | A | a | I | i
 Specifies the style of numbering.
 1,2,3,… or A,B,C,… or a,b,c,… or I,II,III, or

i,ii,iii,…

6
EXAMPLE 1
<!DOCTYPE html>
<html>
<head><title> Numbered list 1 </title></head>
<body>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil </LI>
<LI> Put in noodles and masala </LI>
<LI> Wait for 2 minutes </LI>
<LI> Serve in a plate </LI>
</OL>
</h3>
7
</body>
</html>
EXAMPLE 2
<!DOCTYPE html>
<html>
<head><title> Numbered list 2 </title></head>
<body>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =A>
<LI> Put some water to boil </LI>
<LI> Put in noodles and masala </LI>
<LI> Wait for 2 minutes </LI>
<LI> Serve in a plate </LI>
</OL>
</h3> 8
</body>
</html>
EXAMPLE 3
<!DOCTYPE html>
<html>
<head><title> Numbered list 3 </title></head>
<body>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =I>
<LI> Put some water to boil </LI>
<LI> Put in noodles and masala </LI>
<LI type=1> Wait for 2 minutes </LI>
<LI> Serve in a plate </LI>
</OL>
</h3> 9
</body>
</html>
DESCRIPTION LIST( HTML 4-DEFINITION
LIST)

 Displays a list of terms, with description of each


term
 Specified using the tag:
<DL> ……… </DL>
 Each definition comprises of a definition term
(<DT>) and a definition description (<DD>).
 Web browsers format each definition on a new
line and indent it.
 The definition list is the ideal way to present a
glossary, list of terms, or other name/value list
10
EXAMPLE 1

<!DOCTYPE html>
<html>
<head><title>HTML Definition List</title></head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
</body> 11

</html>
EXAMPLE 2
<html>
<head><title> Definition list 1 </title></head>
<body >
<h2> Some important protocols: </h2>
<h3><DL>
<DT> TCP</DT>
<DD> Transmission Control
Protocol</DD>
<DT> UDP</DT>
<DD> User Datagram Protocol</DD>
<DT> IP</DT>
<DD> Internet Protocol</DD>
</DL></h3> 12
</body>
</html>
NESTING OF LISTS

 Any list can be nested within another list.


 When unnumbered lists are nested, the

browser automatically uses a different bullet


symbol for each level.
 When numbered lists are nested, by default,

every level is numbered using the arabic


numerals (1, 2, 3, …).

13
EXAMPLE 1
<html><head><title> List Nesting 1 </title></head>
<body>
<H3> My favorite languages are:
<UL>
<LI> Java </LI>
<UL>
<LI> object-oriented </LI>
<LI> platform independent </LI>
<LI> can be embedded within HTML </LI>
</UL>
<LI> Perl </LI>
<UL>
<LI> a scripting language </LI>
<LI> powerful string handling capabilities </LI>
<LI> widely used for writing CGI scripts </LI>
</UL>
</UL> </H3> 14
</body></html>
EXAMPLE 2
<html><head><title> List Nesting 2 </title></head>
<body>
<H3> My favorite programming languages are:
<OL>
<LI> Java </LI>
<UL>
<LI> object-oriented</LI>
<LI> platform independent</LI>
<LI> can be embedded within HTML</LI>
</UL>
<LI> Perl </LI>
<OL>
<LI> a scripting language</LI>
<LI> powerful string handling capabilities</LI>
<LI> widely used for writing CGI scripts</LI>
</OL> 15
</OL> </H3>
</body></html>
HORIZONTAL LIST
Lists can be styled to be aligned horizontally by
using simple CSS
Example
<!DOCTYPE html>
<html><head>
<style>
ul#menu li { display:inline; }
</style></head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML|</li>
<li>CSS|</li>
<li>JavaScript|</li>
<li>PHP</li>
</ul> 16
</body>
</html>
SPECIFYING HYPERLINKS
Hyperlinks
 Chief power of HTML comes from its ability to
link text and/or image to another document or
section of a document.
 A webpage can contain various links that take
you directly to other pages and even specific
parts of a given page.
 These links are called hyperlinks.
 Browser by default highlights the hyperlinks
with color and/or underline.
 Hyperlinks allow visitors to navigate between
Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using 17
text or images available on a webpage.
…CONT
 Specified using the anchor tag:
<A> ……. </A>
 Attribute: HREF- specifies the path of the resource
to be linked.
Syntax: <a href="url">link text</a>
 Anchors can be used to go to a particular section in a
document.
 Within the same (or different) document.
 Example:
 <A href=“face.jpg”> portrait </A>
 <a href=“www.google.com”> search </a>

 <a href="mailto:[email protected]">Link
text</a> 18

 <a href=“slides/ch5.pdf”> download pdf </a>


HTML LINKS TARGET ATTRIBUTE
Note: Mailto link is a type of HTML link that activates the default
mail client on the computer for sending an e-mail. (Eg. Microsoft
outlook)
 The target attribute specifies where to open the
linked document. (not supported in HTML 5)
Eg.
<a href="http://www.w3schools.com/" target="_blank">Visi
t W3Schools!</a>
 This example will open the linked document in a new
browser window or in a new tab:
 _blank: Opens the linked document in a new window
or tab
 _self : Opens the linked document in the same frame
19
as it was clicked (this is default)
RELATIVE VERSUS ABSOLUTE URLS
Relative URL

 Provides a link to another document relative to the


location of the current document.
 Commonly used when referring to documents residing
on the same web site.
 Examples:
<a href=“NEWS/news.html”> Visit daily news</a>
 means that the document is one folder down from the html
document that called for it. This can go on down as many layers
as necessary.
<a href=“../NEWS/football.html”> Football news</a>
 means that the document is in one folder up from the html
document that called for it. 20

 These kind of links are called relative links.


CONT..
Absolute URL

 Also called file path and full path, contains the root
directory and all other subdirectories that contain a
file or folder
 Necessary when linking to documents on another
servers.
 The complete path name of the document in the server
is specified.
 Example:
<a href=“www.bdu.edu.et/slides/Ip/paper5.pdf”> One of my
recent papers </a>
21
HTML ID ATTRIBUTE(LINKING TO SPECIFIC
SECTION)

 The id attribute can be used to create bookmarks


inside HTML documents.
 Internal hyperlinks can be used to jump to another
part of the same web page
 Two steps involved.
 Define an id section in a document.
<a id=“tennis”> <h2>About tennis</h2> </a>
 Provide a link to the id section.
<a href=“#tennis”> Information on Tennis </a>
<a href=“http://www.sunny.com/xyz.html #LAN”>
Local Area Networks </a>
 In Html 4 the name attribute is also possible
22
<a name=“tennis”> <h2>About tennis</h2> </a>
Example

<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
23
</body>
</html>
LOCAL HYPERLINKS
 When two pages are on the same directory you can
link from one to the other by using only the filename.
 A local link (link to the same web site) is specified
with a relative URL

<!DOCTYPE html>
<html>
<body>
<p>
<a href="html_images.html">HTML Images</a> is a link to a page on
this website.
</p>
<p>
<a href="http://www.w3.org/">W3C</a> is a link to a website on the
World Wide Web.
</p>
</body>
</html>
LOCAL HYPERLINKS
Pros:
• If you upload the whole directory on another
server, the links will still work.

Cons:
• If you copy a part of your web pages on a local
disk, the links may not work.
HYPERLINKS (EXAMPLE)

<html><head><title> Link to Other Sites


</title></head>
<body text=white bgcolor=blue link=red vlink=green>
My favorite search engines are:
<ol>
<li> <a href="http://www.google.com"> Google </a>
<li> <a href="http://www.yahoo.com"> Yahoo </a>
<li> <a href="http://www.altavista.com"> Altavista</a>
</ol>
<hr>
<address>
Mr. Ayele Kebede<BR> <BR>
<a href="mailto:[email protected]"> <img src="x.gif"
align=middle width="70" height="70"> </a>
</address>
26
</body></html>
HTML IMAGES AND OTHER DOCUMENTS
 In HTML, images are defined with the <img> tag.
 The <img> tag is empty, it contains attributes
only, and does not have a closing tag.
 Attributes of <IMG>:
 SRC: specifies the URL of the image file
 HEIGHT: height (in pixels) to be set aside for the image.
 WIDTH: width (in pixels) to be set aside for the image.
 ALT: specifies an alternate text for the image, if it cannot
be displayed.
 The value of the alt attribute should describe the
image in words
 Supported image formats:
 JPEG, GIF(allow animated images), PNG 28
…CONT
 The HEIGHT and WIDTH attributes tells the browser
to set aside appropriate space (in pixels) for the image
as it downloads the rest of the file.
 Some browsers stretch or shrink an image to fit into the
allotted space.
 Example:
<IMG SRC=xyz.gif>
<img src=“tiger.jpg “ height=“80” width=“150”>
 You can also use the style attribute to specify
the width and height of an image
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px">

28
EXAMPLE 1
<html>
<body>
<p>
<img src =xyz.gif align ="left" width="48"
height="48">A paragraph with an image. The
image will float to the left of this text.</p>
<p>
<img src =xyz.gif align ="right" width="48“
height="48">
A paragraph with an image. The image will float to
the right of this text. </p>
</body>
</html>
29
EXAMPLE 2
<html>
<body>
<img src= x.gif" width="20" height="20"> <p>
<img src= x.gif" width="45" height="45"> <p>
<img src= x.gif" width="70" height="70"> <p>
Resizing an image by changing the values in
the "height" and "width" attributes of the
img tag.
</body>
</html>

30
EXAMPLE 3
<html>
<body>
It is possible to use an image as a link. Click on
the image below to go to google.
<P>
<a href=“www.google.com"><img src=x.gif></a>
</body>
</html>

31
HTML TABLES
 Tables are made up of cells, arranged into rows.
 <table></table> marks the start and end of table contents
 <tr></tr> marks the start and end of each table row
 <td></td> marks the start and the end of the contents of a
data cell
 A table row can also be divided into table headings with
the <th> tag.
 <caption></caption> formats text to appear as a table
caption
Example:
<table> Good Bad
<tr>
<td> Good </td><td> Bad </td> cute ugly
</tr>
<tr>
<td> Cute </td> <td> Ugly </td>
32
</tr>
</table>
THE TABLE TAGS

 <TABLE> …… </TABLE>
 Defines the beginning and the end of a table.
 Can have several attributes:
• bgcolor = #rrggbb or color name : background

color of the table


• rules = all | cols | rows | none : ways to
specify which border of the table need to be
displayed
<table rules="value">
• border = number : specify the border of the

table
• height = number, percentage 33

• Width = number, percentage


 Note- the "align", "bgcolor", "border", "cellpadding", "cellspacing",
"frame", "rules", "summary", and "width" attributes are not
supported in HTML5
 <CAPTION> …….. </CAPTION>
 Provides a caption for the table.
 Must immediately follow the “table” tag, and precede all
other tags.
 <TR> …….. </TR>
 Defines a row of cells within a table.
 Can have several attributes:
 bgcolor = #rrggbb or color name: not supported in html 5
 align = left | center | right | justify: not supported in html 5

 Note: All the layout attributes are removed in HTML5


 <TD> …….. </TD>
 Defines a table data cell. 34
 A table cell can contain any content, like an image, or even
another table.
 Can have several attributes:
 bgcolor = #rrggbb or color name
 colspan :specifies the number of columns the

current cell should span (default is 1).


 rowspan: Specify the number of rows that

needs to be span
 <TH> …….. </TH>
 Defines a table header cell.
 Browsers generally display the contents of the
header cells in bold, and centered.
 Same attributes as the <TD> tag.

35
EXAMPLE 1

 To make a cell span more than one column, use


the colspan attribute
<table>
<tr>
<td colspan=2> Hello </td> </tr>
<tr>
<td> Good </td> <td> Day </td>
</tr>
</table> Hello

Good Day 36
EXAMPLE 2

 To make a cell span more than one row,


use the rowspan attribute
<table>
<tr>
<td rowspan=2> Hello </td>
<td> Good </td>
</tr>
<tr> <td> Day </td> </tr>
</table>

Hello Good
37
Day
EXAMPLE 3

<table border=1>
<caption> Students Result </caption>
<tr> <th> Name </th> <th> Marks </th> </tr>
<tr> <td> Ayele</td> <td> 86</td> </tr>
<tr> <td> Kebede</td> <td> 65</td> </tr>
</table>

Students Result
Name marks
Ayele 86
Kebede 65

38
HTML FRAMES (IFRAME-HTML5)
 What are frames?
 A method for dividing the browser window into smaller
subwindows.
 Each subwindow displaying a different HTML document.
 An iframe is used to display a web page within a web
page
 Syntax: <iframe src="URL"></iframe> where
the src attribute specifies the URL (web address) of the
iframe page
 Uses the height and width attributes to specify the size.
<iframe src="demo_iframe.htm" width="200" height="200">
</iframe>
 The frameborder attribute specifies whether or not to display
a border around the iframe. Set the attribute value to "0" to 39
remove the border
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
HOW DOES A PAGE WITH IFRAME LOOK LIKE?

40
MERITS AND DEMERITS

 Merits:
 Allow parts of the page to remain stationary while
other parts scroll.
 They can unify resources that reside on separate web
servers.
Demerits:
 All browsers do not support frames.
 Documents nested in a frame is more difficult to
bookmark.
 Load on the server can be significantly increased, if
there are a large number of frames in the page.
 Frames are very difficult to handle for search
engines.
41
 <IFRAME> tag specifies an inline frame.
 An inline frame is used to embed another document
within the current HTML document.
 Attributes:
 frameborder = 1 | 0 : This attribute specifies
whether or not the borders of that frame are
shown (not supported in HTML 5)
• We can use CSS instead
<iframe src=“url” style=“border:none |5px solid
black></iframe>
 src = url : this attribute is used to give the file
name that should be loaded in the frame
 name = text :This attribute allows you to give a
name to a frame. It is used to indicate which
frame a document should be loaded into 42

 Width and Height


EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555"
height="200“ style=“border:none”>
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html> 43
LINKING TO AN IFRAMED DOCUMENT

 When a hyperlink is clicked, by default, the new


page is loaded into the same frame.
 We can load the linked page into a new frame
also.
 Assign a name to the targeted frame
<iframe src = “somepage.htm” name = “abc”>
 Specify this frame in a hyperlink:
<a href = “newpage.htm” target=“abc”> New page </a>
 The document newpage.htm will load into the
frame named “abc”(The initial content of the
iframe which is somepage.html will be replaced
by newpage.html)
44
Example

<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" name="iframe_a">
<p>Your browser does not support iframes.</p>
</iframe>
<a href="http://www.google.com"
target="iframe_a">Google Search</a>
<p><b>Note:</b> Because the target of the link
matches the name of the iframe, the link will open in
the iframe.</p>
</body>
45
</html>
HTML FORMS

 What is HTML FORM?

 A form basically contains boxes and buttons which is


mainly used to collect user input
 HTML Forms are required when you want to collect
some data from the site visitor.
 For example, during user registration you would
like to collect information such as name, email
address, credit card, etc.
 The back-end application like Php ,Asp or java will
perform required processing on the passed data
based on defined business logic inside the application.
46
Real-life examples
 Search engines

 On-line purchase of items

 Registration

 The form allows a user to fill up the blank entries and


send it back to the owner of the page.
 Called SUBMITTING the form

Syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>

47
Form Tags and Attributes

 There are different types of form controls /form


elements that you can use to collect data using
HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Clickable Buttons
 Submit and Reset Button

48
<FORM> …… </FORM> TAG

 This tag is used to bracket an HTML form.


 Includes attributes which specify where and how to
deliver filled-up information to the web server.
 Two main attributes:

 METHOD- the method specified determines how


form data is submitted to the server
 When the method is GET, it appends form-data into the
URL in name/value pairs
eg. registration.php?fname=ab &lname=sam
 With POST, form data appears within the message body
of the HTTP request.
 ACTION-action to be performed when a button clicked
49
 METHOD:
◦ Indicates how the information in the form will be sent to
the web server when the form is submitted.
◦ Two possible values:
 GET - Requests data from a specified resource
 concatenates all field names and values in a single large

string and append it to the URL


 supply additional data from the client (browser) to the

server in the message body


 Is the default method.

 POST - Submits data to be processed to a specified


resource
 appends form-data inside the body of the HTTP request

(data is not shown is in URL)


 POST is the preferred method because of string size
limitations in most systems. 50
 The length of a URL is limited (about 3000 characters) in
Get but it is unlimited in Post method
Get Post
Parameters remain in browser Parameters are not saved in
history because they are part of browser history.
the URL
Easier to hack for script kiddies More difficult to hack

GET is less secure compared to POST is a little safer than GET


POST because data sent is part of because the parameters are not
the URL. So it's saved in browser stored in browser history or in
history and server logs in web server logs.
plaintext.
GET method should not be used POST method used when sending
when sending passwords or other passwords or other sensitive
sensitive information. information.
GET method is visible to everyone POST method variables are not
(it will be displayed in the displayed in the URL.
browser's address bar) and has
51
limits on the amount of
information to send.
 ACTION:
 Specifies the URL of a program on the origin server that
will be receiving the form’s inputs.
 Traditionally called Common Gateway Interface (CGI).
 The specified program executed on the server when the
form is submitted.
 Output sent back to the browser.
 Typical usage:
<FORM METHOD=“POST” ACTION=“news.php”>
……..
</FORM>
<form action="demo_form_action.php">
…………….
<input type="submit" value="Submit">
</form> 52
<INPUT> TAG

 The <input> element is the most important form


element.
 Several attributes are possible:
 TYPE- the type of the input
 NAME- name of the input

 SIZE- size of input in character

 MAXLENGTH- maximum number of characters in a given input

 VALUE- the value of the input

 SRC- image source used as input

 ALIGN- size of the input image

 E.t.c

 The <input> element has many variations, depending on


the type attribute.
53
 TYPE:
◦ Defines the kind of element that needs to be displayed in
the form.
 “TEXT” : defines a text box, which provides a single
line area for entering text.
 “RADIO” : radio button, used when a choice must be
made among several alternatives (clicking on one of
the buttons turns off all others in the same group).
 “CHECKBOX” : similar to the radio buttons, but each
box here can be selected independently of the others.
 “PASSWORD” : similar to text box, but characters are
not shown as they are typed.
 “HIDDEN” : used for output only; cannot be modified

(mainly used to refer to choices that have already been


made earlier).
54
 “IMAGE” : used for active maps. When the user clicks
on the image, the (x,y) co-ordinates are stored in
variables, and are returned for further processing.
 “SUBMIT” : creates a box labeled Submit; if clicked,
the form data are passed on to the designated CGI
script.
 “RESET”: creates a box labeled Reset; if clicked, clears
a form’s contents.
 Email: used for input fields that should contain an e-
mail address (availabel in HTML 5)
 HTML5 Input Types (Reading assignment)
 NAME: Specifies a name for the input field.
 SIZE: Defines the number of characters that can be
55
displayed in a TEXT box without scrolling.
 MAXLENGTH: Defines the maximum number of
characters a TEXT box can contain.
 VALUE:
◦ Used to submit a default value for a TEXT or HIDDEN
field.
◦ Can also be used for specifying the label of a button
(renaming “Submit”, for example).
 SRC:
◦ Provides a pointer to an image file, used for clickable
maps.
 ALIGN:
◦ Used for aligning image types.
◦ align="left|right|middle|top|bottom“ (not supported in
HTML 5)
◦ Use CSS like
56
<input type="image" src=“map.jpg" alt=“map" align="right"
width="48" height="48“ style="float:right">
<TEXTAREA> … </TEXTAREA> TAG

 Defines a multi-line text input control.


 Can be used to accommodate multiple text lines
in a box.
 Attributes are:
 NAME: specifies a name for a text area
 ROWS: number of lines of text that can fit into the
box. (the visible number of lines in a text area)
 COLS: width of the text area on the screen (the
visible width of a text area).
 Required: specifies that a text area is required/must
be filled out
 E.t.c
57
<SELECT> …. </SELECT> TAG
 Used to define a selectable list of elements (create a
drop-down list.)
◦ The list appears as a scrollable menu or a pop-up
menu (depends on browser).\
• Used along with the <OPTION> tag which define the
available options in the list.
 Attributes are:
◦ NAME: name of the drop down list.
◦ SIZE: specifies the number of option elements that will
be displayed at a time on the menu. (If actual number
exceeds SIZE, a scrollbar will appear).

58
…CONT
 MULTIPLE: specifies that multiple selections
from the list can be made.
<FORM ………….>
……..
Languages known:
<SELECT NAME=“lang” SIZE=3 MULTIPLE>
<OPTION> English
<OPTION> Amharic
<OPTION> Afan Oromo
<OPTION> Tigrigna
</SELECT>
</FORM>

59
GROUPING FORM DATA WITH <FIELDSET>
 The <fieldset> element groups related data in a
form.
 The <legend> element defines a caption for the
<fieldset> element.
 E.g
<form action=“registration.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" ><br>
Last name:<br><input type="text" name="lastname">
<br><br>
<input type="submit" value=“Register">
</fieldset>
</form> 60
EXAMPLE 1

<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>
<BODY background="bg.gif" LINK="#FF9900"
VLINK="#FF9900“ ALINK="#FF9900">
<CENTER><H3> Student Registration Form </H3>
</CENTER>

61
<FORM METHOD="POST" ACTION="registration.php">
<P> Name: <INPUT NAME="name" TYPE="TEXT"
SIZE="30" MAXLENGTH="50">
<P> Id_Number: <INPUT NAME="rollno" TYPE="TEXT"
SIZE="30">
<P> Password: <INPUT NAME="passw" type="password"
SIZE="30">
<P> Email: <INPUT NAME="email" TYPE="email"
SIZE="30">
<P> <INPUT TYPE="SUBMIT" Name="Submit">
<INPUT TYPE="RESET" Name="Reset">
</FORM> </BODY> </HTML>

62
READING ASSIGNMENT

Read in details about the


attributes of a Form and its
associated elements.

63

You might also like