CA4CRT13-WEB PROGRAMMING USING PHP

THEORY :3 HRS PER WEEK,LAB - 4 HRS

MODULE1
Introduction to web,WWW architecture,Fundamentals of
HTML,Text formatting tags,Marquee,Inserting
images,Links,Lists,Creating Tables,Frames,Working with form
elements.
-----------------------------------------------------------------------------
Internet
The internet is a global system of interconnected computer networks
that use the standard internet protocol suit(TCP/IP) to serve billions of
users world wide.It s a network that consists of millions of
private,public ,academic,business and government networks of local to
global scope,that are linked by a broad array of electronic,wireless and
optical networking technologies.The Internet carries a vast range of
information resources and services such as the interlinked hypertext
document of the world wide web(WWW) and the infrastructure to
support electronic mail.
Introduction to web
Web consists of billions of client server connected through wires and
wireless networks.The web clients make requests to web server,The
web server receives the request ,finds the resources and return the
response to the client.When a server answers a request it usually sends
some type of content to the client.The client uses web browser to send
request to the server.The server often sends response to the browser
with a set of instructions written in HTML(Hyper Text Markup
Language).All browsers know how to display HTML page to the client.

WWW

World Wide web was created by Timothy Berners Lee in 1989 at CERN
in Geneva.
WWW Operation
1.User enters the URL(http://www……. .com) of the webpage in the
address bar of the web browser.
2.Then browser requests the domain name server for the IP address
corresponding to www.------.com
3.After receiving IP address,browser sends the requests for web page to
the web server using HTTP protocol which specifies the way the
browser and web server communicates.
4.Then web server receives request using HTTP protocol and checks its
search for the requested web page.If found it returns it back to the web
browser and closes the HTTP connection.
5.Now the web browser receives the web page ,interprets it and displays
the contents of the web page in the web browsers window.

1
Web page
Web page is a document available on world wide web.Web pages are
stored on a web server and can be viewed using a web browser.A web
page can contain huge information including text,graphics,audio,video
and hyperlinks .These hyperlinks are the link to other web pages.
There are two types of web pages.They are
1.Static Web page
2.Dynamic Web Page

1.Static Web page : are also known as flat or stationary web page.They
are loaded on the clients browsers as exactly they are stored on the web
server.Such web pages contain only static information.User can only
read the information but can’t do any modification or interact with the
information.Static web pages are created using only HTML .Static web
pages are only used when the information is no more required to be
modified.
Eg: Printed brochure to customers
2.Dynamic Web page : This shows different information at different
points of time.It is possible to change a portion of a web page without
loading the entire web page.
Eg: News channels,Ecommerce Website etc.

2
 Difference
Static Web page Dynamic Web page

1.The content and layout of web page 1.The content and layout may
Is fixed. Change during run time.
2.Static web pages never use databases. 2.Databases is used to
generate dynamic content
3.Static web pages are easy to develop. through queries.
3.Dynamic web page
development requires
programming skills

Fundamentals of HTML
HTML stands for Hyper text Markup Language,and it is the most
widely used language to write web pages.
- Hypertext refers to the way in which web pages are linked together.
Thus the link available on a webpage is called hypertext
- As its name suggests,HTML is a markup Language which means you
use HTML to simply “MarkUp” a text document with tags that tell a
web browser how to structure it to display.
- TIM BERNERS LEE , scientist and academic ,was the primary author
of HTML.HTML is being widely used to format web pages with the
help of different tags available in HTML languages.
- To write HTML documenta and to prepare webpages ,the following
are essential.
- 1. Windows based computer systems with a text editor like notepad or
wordpad.

3
- 2.Internet Explorer 5.0 or any higher version.
- And now save the file with the .html extension.

Structure of HTML Document

A HTML file has two parts: Head part and Body Part
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>THIS IS DOCUMENT TITLE</TITLE> (Head Part)
</HEAD>
<BODY>
<H1>THIS IS A HEADING</H1> (Body Part)
<P>PARAGRAPH</P>
</BODY>
</HTML>

1.<!DOCTYPE> :The DOCTYPE declaration defines the document

type
2.<HTML> : The text between <html> and </html> describes the
web page
3.</HEAD> :The document head or head tag holds the control
information to be used by browsers and servers. The
head section is mainly used to
◼ Insert Style Sheet & Scripting code like Java Script
◼ insert title tag (most people use only title tag here).
◼ Insert information about the document like metadata
4.<BODY> :The text between <body> and </body> is the

4
visible page content
5.<h1>:The text between <h1> and </h1> is displayed as
a heading
6.<P> :The text between <p> and </p> is displayed as a
Paragraph
Four key concepts of HTML
1.Elements : All HTML pages are made up of elements .An element
consists of two tags namely an ‘opening tag ‘ and a ‘closing tag’. Eg:
<html> …….</html>
2.Tags : Every web page is a collection of tags.A tag is a keyword
enclosed in angular brackets(< > or </>)
eg;<html> …….</html>
The tag can be classified as
(i).Empty tag - Empty tag is a tag which contains only an opening tag
and there is no need for a closing tag.
Eg: <br>,<img>

(ii).Container Tag - Container tag is a tag which requires an opening tag

as well as a closing tag . eg: :<body> …..</body>.The container tags
are also known as paired tags.
3.Attributes and values - An attribute is used to define the
characteristics of an element and is placed inside the elements opening
tag.<tag attribute=“value”>
eg:<img height=”300” width=”200”>
4.Nesting : Nesting means arrangement of the elements in such a way
that there is no overlapping of elements.

5
<BODY> Element
The <body> element contains the entire content of a webpage .The
<body> tag defines the document's body.The <body> element contains
all the content of an HTML document,such as
text,hyperlinks,images,tables,lists etc. The following are the important
attributes of body tag:

Attribute Value Description

Alink color name Specifies the color of
the active links in the
document
background URL Specifies the
background image file
path.
bgcolor color name Specifies the
background color
link color name Specifies the color of
all the links in the
document
text color name Specifies the color of
the text in the
document
vlink color name Specifies the color of
the visited links in the
in the document

6
bgproperties fixed Your background to
be set in place and not
scroll.

Eg: <body bgcolor=”red” background=”bubble.gif” text=”blue”

Link=”green” vlink=”pink” alink=”black” bgproperties=”fixed”>

HTML Comments
HTML comment is like this
<!-- comment text -->
Text Formatting Tags

HTML formatting is a process of formatting text for better look and

feel.
1.<b> - contents inside this tag will be displayed in
bold
2.<i> - to display the contents in italics form
3.<strong> or <em> it is used to specify a text as
"important". Many browsers display <strong> as
bold and <em> as italics.
4.<big> - to show in big size
5.<small> - to show in small size
6.<sub> - to specify a text as subscript.Eg:24th November 2019
24^thNovember2019
7.<sup> - to specify a text as superscript

7
Eg:H2O
H₂O
8.<U> - to display the contents in underlined form
9.<strike> -to display the contents in striked form
10.Heading Tags
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

11.<p> - to display the contents in the paragraph form

12.<br/> - newline or line break. It is a self closing tag
as it does not have a separate end tag
13.The HTML <pre> element defines preformatted text.
14.HTML <mark> Element
The HTML <mark> element defines marked or
highlighted text
15.The HTML <del> element defines deleted
(removed) text
16.<font>
The <font> tag specifies the font face, font size,
and the font color of text.

8
Color attribute is used to specify color name
Face attribute is used to specify the font family
Size attribute is used specify the font size which
will be a number.
Eg : <font face="verdana" size=“3”
color="green">This is some text!</font>

17.The <marquee>
The <marquee> tag is a container tag of HTML that is implemented for
creating scrollable text or images within a web page from either left to
right or vice versa, or top to bottom or vice versa.

width provides the width or breadth of a marquee. For

example width="10" or width="20%"

height provides the height or length of a marquee. For

example height="20" or height="30%"

direction provides the direction or way in which your marquee

will allow you to scroll. The value of this attribute
can be: left, right, up or down

<marquee width="60%" direction="up" height="100px">

This is a sample scrolling text that has scrolls in the upper direction.
</marquee>

9
18.Drawing Horizontal Lines
<hr> tag is used to draw horizontal lines.It is an empty tag.The main
attributes are size,width and color.
eg:<hr width=”75%” size=”20%” color=”Red”>

eg:<html>
<body>
<b>HELLO</b><br>
<i>HELLO</i><br>
<strong>HELLO</strong><br>
<u>HELLO</u><br>
<big>HELLO</big><br>
<small>HELLO</small><br>
24^thNovember2019<br>
H₂O<br>
<strike>HELLO</strike><br>
<h1>HELLO</h1>
<h2>HELLO</h2>
<h3>HELLO</h3>
<h4>HELLO</h4>
<h5>HELLO</h5>
<h6>HELLO</h6>
<p>paragraph</p><br>
<mark>HELLO</mark><br>
<font face="verdana" size=“3”
color="green">hello</font><br>
<del>HELLO</del><br>

10
<marquee width="60%" direction="up" height="100px">
hello
</marquee><br>
<hr width=”75%” size=”20%” color=”Red”><br>
</body>
</html>

HTML Images

You can insert any image in your web page by using <img> tag. Following
is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of
attributes and it has no closing tag.

Example

11
To try following example, let's keep our HTML file test.htm and image file
test.png in the same directory −

<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>

You can use PNG, JPEG or GIF image file based on your comfort but make sure
you specify correct image file name in src attribute. Image name is always case
sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.
Setting width and height of Image: The width and height attributes are used to
specify the height and width of an image. The attribute values are specified in
pixels by default.
Example:
<!DOCTYPE html>
<html>

<head>
<title>Set Image Width and Height</title>
</head>

<body>

12
 <p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height =
"100"/>
</body>

</html>

HTML - Links

A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and a
user can click that part to reach to the linked document. Following is the simple syntax
to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.google.com" target = "_self">Google Search </a>
</body>

</html>
This will produce the following result, where you can click on the link generated to
reach to the home page of Google Search (in this example).

Click following link

13
Googlesearch

HTML - Lists
HTML offers web authors three ways for specifying lists of information. All lists
must contain one or more list elements. Lists may contain −
● <ul> − An unordered list. This will list items using plain bullets.
● <ol> − An ordered list. This will use different schemes of numbers to list
your items.
● <dl> − A definition list. This arranges your items in the same way as they
are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

14
</html>
This will produce the following result –

● Beetroot
● Ginger
● Potato
● Radish

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By
default, it is a disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example
Following is an example where we used <ul type = "square">
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

15
This will produce the following result −

▪ Beetroot
▪ Ginger
▪ Potato
▪ Radish

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then
an HTML ordered list will be used. This list is created by using <ol> tag. The
numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
This will produce the following result −

1. Beetroot

16
 2. Ginger
3. Potato
4. Radish

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you
like. By default, it is a number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
Following is an example where we used <ol type = "1">
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
This will produce the following result −

17
 1. Beetroot
2. Ginger
3. Potato
4. Radish
5.<!DOCTYPE html>
6.<html>
7.
8. <head>
9. <title>HTML Ordered List</title>
10. </head>
11.
12. <body>
13. <ol type = "a">
14. <li>Beetroot</li>
15. <li>Ginger</li>
16. <li>Potato</li>
17. <li>Radish</li>
18. </ol>
19. </body>
20.
21. </html>

a. Beetroot
b. Ginger
c. Potato
d. Radish

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of
numbering you need. Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.

18
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example
Following is an example where we used <ol type = "i" start = "4" >

<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
This will produce the following result −

iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

HTML Definition Lists

19
HTML and XHTML supports a list style which is called definition lists where
entries are listed like in a dictionary or encyclopedia. The definition list is the
ideal way to present a glossary, list of terms, or other name/value list.
Definition List makes use of the following three tags.

● <dl> − Defines the start of the list

● <dt> − A term
● <dd> − Term definition
● </dl> − Defines the end of the list
● <!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>
●
● </html>
● This will produce the following result −

HTML
This stands for Hyper Text Markup Language
HTTP

20
 This stands for HyperText Transfer Protocol

HTML <frame> tag

HTML <frame> tag define the particular area within an HTML file where
another HTML web page can be displayed.

A <frame> tag is used with <frameset>, and it divides a webpage into multiple
sections or frames, and each frame can contain different web pages.
< frame src = "URL" >

HTML <frameset> tag is used to contain the group of frames which can be
controlled and styled as a unit. The <frameset> element also specifies the
number of rows and columns in the frameset, and how much space they will
occupy in a frame.

<frameset cols=" ">............</frameset>

Example 1
Create Vertical frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="frame1.html" >
8. <frame src="frame2.html">
9. <frame src="frame3.html">

21
10. </frameset>
11. </html>

Example 2:
Create Horizontal frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset rows="30%, 40%, 30%">
7. <frame name="top" src="frame1.html" >
8. <frame name="main" src="frame2.html">
9. <frame name="bottom" src="frame3.html">
10. </frameset>
11. </html>

22
<!DOCTYPE html>
<html>

<head>
<title>Set Image Width and Height</title>
</head>

<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>

</html>

23
 HTML - Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables,
etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells. The elements under <td> are regular
and left aligned by default

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element in any row. Headings,
which are defined in <th> tag are centered and bold by default.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>

24
 </table>
</body>

</html>

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content within a cell.

!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

25
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.

Example

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1" bordercolor = "green" background =
"/images/test.png" >

<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>

26
 </tr>
</table>
</body>

</html>
This will produce the following result −

HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .

HTML Form Syntax

1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags

Tag Description

27
<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to
take input from user. We can apply different input filed to gather different information form
user. Following is the example to show the simple text input.

Example:
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as single line
textfield control.

28
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>

29
 Label Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user
friendly.

If you click on the label tag, it will focus on the text control

1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

30
 HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email address. You must
use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

HTML Password Field Control

The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

31
 Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>

32
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>

Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When user
clicks on submit button, then form get submit to the server.

Syntax:

1. <input type="submit" value="submit">

2. <form>
3. <label for="name">Enter name</label><br>
4. <input type="text" id="name" name="name"><br>
5. <label for="pass">Enter Password</label><br>
6. <input type="Password" id="pass" name="pass"><br>
7. <input type="submit" value="submit">
8. </form>

33
 HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:

1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>

34
 HTML Form Example
Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>

35
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29.</html>

36