Web Dev Manual 5th IT final
Web Dev Manual 5th IT final
Web Development
(3151606)
V - Semester
Department of
Information Technology
Student Name:
Enrollment No:
Batch No:
CERTIFICATE
This is to certify
That the lab experiments entitled “WEB DEVELOPMENT (3151606)”
submitted by ………………………………………………….. towards the
partial fulfillment of the requirements for the completion of 5th semester
of Bachelor of Engineering in Information Technology . And this work is
carried out at Alpha college of Engineering and Technology, Khtaraj.
Date:
Place:
Sign Sign
Internal Guide Head of Department
INDEX
Sr.
Practical Title Signature
No.
Develop HTML page using HTML tags. Task Includes:-
- Headers
- Formatting and fonts
1
- Commenting code, color
- Hyperlink
- Lists
- Tables
Develop HTML page.
- Images
2 - Simple HTML forms design
- Create frame and frame sets
- Use of get and post method
CSS - Apply CSS in previously created HTML pages or you can
also create new pages.
- Background image
3
- Borders and boxes
- Colors and properties
- Margins and padding
- Positioning
- Screen Distribution using CSS
Java-script:-
1. Examples of JS(Form validation)
4 2. Examples of JS(Get day, month and year)
3. Examples of JS( Java-script Document Object)
Design static web-site using HTML, CSS, Java-script. (Lay-out
5 will be given at the time of practical)
XML, XSL, XSLT.
6 - Create page using XML. And then transform with XSLT
PHP:-
7 - Create php pages.
- Arrays
- Establish connection with the server
8 PHP Forms:-
Advance PHP:- Create a Program to upload the file
9 - Check if File Already Exists
- Limit File Size and Type
Web Development
Practical: 1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Practical 1</title>
</head>
<body>
<hr/>
<p>Welcome to Internet and World Wide Web programming and Web 2.0! And
welcome to a walkthrough of the Web 2.0 phenomenon from the technical, business
and social perspectives. We've worked hard to create what we hope you'll find
to be an informative, entertaining and challenging learning experience. As you
read this book, you may want to refer to www.deitel.com for updates and
additional information.
</p>
<hr/>
<pre>
To keep up to date with Internet and web programming developments, and the latest
information on Internet & World Wide Web How to Program, 4/e, at Deitel &
Associates,
please register for our free e-mail newsletter, the Deitel® Buzz Online, at
www.deitel.com/newsletter/subscribe.html
Please check out our growing list of Internet and web programming, and Internet
business Resource Centers a
www.deitel.com/resourcecenters.html
</pre>
<hr/>
<hr/>
<hr/>
<hr/>
<ul type="disc">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ul>
<ul type="square">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ul>
<ul type="circle">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ul>
<hr/>
<ol type="1">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ol>
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ol>
<ol type="A">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ol>
<ol type="i">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ol>
<ol type="I">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ol>
<hr/>
<ol type="1">
<ul type="circle">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ul><br />
<ul type="Disc">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ul><br />
<ul type="square">
<li>Information Technology</li>
<li>Electronics Communication</li>
<li>Computer Engineering</li>
<li>Mechanical Engineering</li>
<li>Electrical Engineering</li>
<li>Civil Engineering</li>
</ul>
</ol>
<hr/>
<tr align="center">
<td>Name</td>
<td>Marks</td>
</tr>
<tr>
<td>abc</td>
<td>85</td>
</tr>
<tr>
<td>def</td>
<td>75</td>
</tr>
<tr>
<td>ghi</td>
<td>95</td>
</tr>
<tr>
<td>xyz</td>
<td>80</td>
</tr>
</table>
<br />
<center>
<br/>
<tr align="center">
<td>Name</td>
<td>Marks</td>
</tr>
<tr>
<td>abc</td>
<td>85</td>
</tr>
<tr>
<td>def</td>
<td>75</td>
</tr>
<tr>
<td>ghi</td>
<td>95</td>
</tr>
<tr>
<td>xyz</td>
<td>80</td>
</tr>
</table>
</center>
<br/>
<tr align="center">
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
</tr>
</table>
<br/>
<tr align="center">
</tr>
<tr>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="#000000"> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#000000"> </td>
<td> </td>
<td bgcolor="#000000"> </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
OUTPUT
Practical: 2
Aim: Develop HTML page.
- Images
- Simple HTML forms design
- Create frame and frame sets
- Use of get and post method
<html>
<head>
</head>
<body>
<h1>Registration Form</h1>
<table>
<tr>
</tr>
<tr>
<td><label for="passid">Password:</label></td>
</tr>
<tr>
<td><label for="username">Name:</label></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select name="country">
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select>
</td>
</tr>
<tr>
</tr>
<tr>
<td><label for="email">Email:</label></td>
</tr>
<tr>
<td><label id="gender">Sex:</label></td>
</tr>
<tr>
<td><label>Language:</label></td>
<td>
</td>
</tr>
<tr>
<td><label for="desc">About:</label></td>
</tr>
<tr>
</tr>
</table>
</form>
</body>
</html>
For POST Method
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Practical 2</title>
</head>
</frameset>
</frameset>
<noframes><body>
</body>
</noframes>
Practical: 3
Aim: CSS: - Apply CSS in previously created HTML pages or you can also create new
pages.
- Background image
- Borders and boxes
- Colors and properties
- Margins and padding
- Positioning
- Screen Distribution using CSS
<head>
<title>Practical 4a</title>
<style type="text/css">
body
background-image:url("whitepattern1.jpg");
background-repeat:repeat;
h4.none{border-style:none}
h4.dotted{border-style:dotted}
h4.dashed{border-style:dashed}
h4.hidden{border-style:hidden}
h4.double{border-style:double}
h4.solid{border-style:solid}
h4.groove{border-style:groove}
h4.ridge{border-style:ridge}
h4.inset{border-style:inset}
h4.thickred
border-style:solid;
border-width:3px;
border-color:Red;
h4.thickblue
border-style:solid;
border-width:5px;
border-color:Blue;
h4.thickgreen
border-style:solid;
border-width:7px;
border-color:Green;
</style>
</head>
<body>
<br/>
</body>
</html>
<title>Practical 4b</title>
<style type="text/css">
p.method1
{border-style:solid;margin-top:80px; margin-bottom:60Px;margin-
left:30px; margin-right:70px;
padding-top:80px;
padding-bottom:60Px;
padding-left:30px;
padding-right:70px;
</style>
</head>
<body>
<h3>Neighbouring Text</h3>
<p class="method1">Text</p>
</body>
</html>
- Positioning
<html>
<head>
<title>Practical 4c</title>
</head>
<style>
.firstlayer
position:relative;
top:100px;
left:150px;
height:150px;
width:150px;
background-color:red;
.secondlayer
position:relative;
top:30px;
left:30px;
height:150px;
width:150px;
background-color:yellow;
.thirdlayer
position:relative;
top:30px;
left:30px;
height:150px;
width:150px;
background-color:green;
.forthlayer{
position:relative;
top:30px;
left:30px;
height:150px;
width:150px;
background-color:blue;
</style>
<body>
<div class="firstlayer">
<div class="secondlayer">
<div class="thirdlayer">
<div class="forthlayer">
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Practical 4d</title>
</head>
<style>
.header
background-color: green;
height: 15%;
width: 100%;
.menu
background-color: blue;
height: 5%;
width: 100%;
.sidemenu
background-color: red;
height: 80%;
width: 20%;
float: left;
.block
height: 100%;
width: 100%;
.blockorange
background-color: orange;
height: 40%;
width: 100%;
.blockyellow
background-color: yellow;
height: 40%;
width: 100%;
</style>
<body>
<div class="header">
</div>
<div class="menu">
</div>
<div class="sidemenu">
</div>
<div class="block">
<div class="blockorange">
</div>
<div class="blockyellow">
</div>
</div>
</body>
</html>
OUTPUT
Practical: 5
Aim: Java-script:-
1. Examples of JS(Form validation)
2. Examples of JS(Get day, month and year)
3. Examples of JS( Java-script Document Object)
1. Examples of JS(Form validation)
From Validation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="sample-registration-form-validation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
Use tab keys to move from one input field to the next.
<ul>
<li><label for="passid">Password:</label></li>
<li><label for="username">Name:</label></li>
<li><label for="address">Address:</label></li>
<li><label for="country">Country:</label></li>
<li>
<select name="country">
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select>
</li>
<li><label for="email">Email:</label></li>
<li><label id="gender">Sex:</label></li>
<li><label>Language:</label></li>
<li><label for="desc">About:</label></li>
</ul>
</form>
</body>
</html>
js-form-validation.css
h1 {
margin-left: 70px;
form li {
list-style: none;
margin-bottom: 5px;
form ul li label {
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-size: 14px;
float: left;
margin-bottom: 10px;
form textarea {
float: left;
width: 350px;
height: 150px;
[type="submit"] {
clear: left;
font-size: 18px;
}
p {
margin-left: 70px;
font-weight: bold;
sample-registration-form-validation.js
function formValidation() {
if (userid_validation(uid, 5, 12)) {
if (passid_validation(passid, 7, 12)) {
if (allLetter(uname)) {
if (alphanumeric(uadd)) {
if (countryselect(ucountry)) {
if (allnumeric(uzip)) {
if (ValidateEmail(uemail)) {
if (validsex(umsex, ufsex)) {
}
Alpha College of Engineering and Technology Department of Information Technology |
31
Web Development
return false;
uid.focus();
return false;
return true;
passid.focus();
return false;
return true;
function allLetter(uname) {
if (uname.value.match(letters)) {
return true;
else {
uname.focus();
return false;
function alphanumeric(uadd) {
if (uadd.value.match(letters)) {
return true;
else {
uadd.focus();
return false;
function countryselect(ucountry) {
if (ucountry.value == "Default") {
ucountry.focus();
return false;
else {
return true;
function allnumeric(uzip) {
if (uzip.value.match(numbers)) {
if(ziplength == 6)
return true;
else
return false;
else {
uzip.focus();
return false;
function ValidateEmail(uemail) {
if (uemail.value.match(mailformat)) {
return true;
else {
uemail.focus();
return false;
x = 0;
if (umsex.checked) {
x++;
} if (ufsex.checked) {
x++;
if (x == 0) {
alert('Select Male/Female');
umsex.focus();
return false;
else {
window.location.reload()
return true;
OUTPUT
<head>
</head>
<body>
<script type="text/javascript">
var dt = Date();
</script>
<br />
<h3>Returns the day of the month for the specified date according to local
time.</h3>
<script type="text/javascript">
</script>
<h3>Returns the day of the week for the specified date according to local
time.</h3>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
</body>
</html>
OUTPUT
<html>
<head>
<script type="text/javascript">
function incrementCurrent() {
current = parseInt(document.forms["noteForm"].total.value);
document.forms["noteForm"].total.value = current + 1;
</script>
</head><body>
<div id="mainDiv">
<form id="noteForm">
</form>
</div>
</body>
</html>
OUTPUT
Practical: 6
Aim: Design static web-site using HTML, CSS, Java-script. (Lay-out will be given at the
time of practical)
Business.html
<html>
<head>
<title>webpage</title>
</head>
</div>
<div class="fcontent"></div>
<div class="scontent"></div>
<div class="footer"></div>
<div class="emboselayer">
<div class="menu">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="Aboutus.asp">Aboutus</a></li>
<li><a href="Services.asp">Services</a></li>
<li><a href="Solutions.asp">Solutions</a></li>
<li><a href="Support.asp">Support</a></li>
<li><a href="Blog.asp">Blog</a></li>
<li><a href="Contacts.asp">Contacts</a></li>
</ul>
</div>
<div class="maincontent">
<div class="img3">
</div>
</div>
<div class="gridimages">
</div>
</div>
</body>
</html>
Business.css
.header
{
font-size: large;
height:20%;
width:100%;
background-image: url("margu/bgcolor.JPG");
}
.fcontent
{
height:50%;
width:100%;
}
.scontent
{
height:20%;
width:100%;
background-image: url("margu/bg-content.gif");
}
.footer
{
height:10%;
width:100%;
background-image: url("margu/bgcolor.JPG");
}
.logopos
{
position:absolute;
left:150px;
top:50px;
}
.emboselayer
{
height:420px;
width:1000px;
position:absolute;
left:150px;
top:115px;
}
.menu
{
height: 10%;
width:100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: gainsboro;
}
li {
float: left;
}
li a {
display: block;
color: midnightblue;
text-align: center;
padding: 12px;
text-decoration: none;
}
li a:hover {
background-color: black;
}
.maincontent
{
height: 60%;
width:100%;
}
.gridimages
{
width:100%;
height: 30%;
.img1
{
height:100%;
width:25%;
float:left;
}
.img2
{
height:100%;
width:50%;
float:left;
}
.pic1
{
position:absolute;
top:42px;
right:250px;
height:60%;
width:50%;
}
.img3
{
height:100%;
width:25%;
float:left;
}
.image1
{
height:50%;
width:100%;
}
.image2
{
height:50%;
width:100%;
}
.edit1
{
height:100%;
width:100%;
}
.edit2
{
height:100%;
width:100%;
}
.grid1
{
height: 100%;
width: 30%;
background-color: whitesmoke;
float: left;
}
.edit3
{
position: absolute;
top:74.5%;
left:2%;
}
.grid2
{
height: 100%;
width: 30%;
float: left;
background-color: gainsboro;
}
.edit4
{
position: absolute;
top:74.5%;
left:32%;
}
.grid3
{
height: 100%;
width: 40%;
background-color: gainsboro;
float: left;
}
.edit5
{
position: absolute;
top:74.5%;
left:62%;
}
.text
{padding-left: 40%;
padding-top: 4%;
font-size: 70%;
}
.text1
{
padding-left: 40%;
padding-top: 4%;
font-size:70%;
}
.text2
{
padding-left: 30%;
padding-top: 4%;
font-size: 70%;
Practical: 7
Aim: XML, XSL, XSLT.
- Create page using XML. And then transform with XSLT
Catalog.xml
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<genre>Computer</genre>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
with XML.</description>
</book>
<book id="bk102">
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
of the world.</description>
</book>
<book id="bk103">
<author>Corets, Eva</author>
<title>Maeve Ascendant</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-11-17</publish_date>
</book>
<book id="bk104">
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-03-10</publish_date>
Ascendant.</description>
</book>
<book id="bk105">
<author>Corets, Eva</author>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-09-10</publish_date>
Oberon's Legacy.</description>
</book>
<book id="bk106">
<author>Randall, Cynthia</author>
<title>Lover Birds</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-09-02</publish_date>
</book>
<book id="bk107">
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-11-02</publish_date>
</book>
<book id="bk108">
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<genre>Horror</genre>
<price>4.95</price>
<publish_date>2000-12-06</publish_date>
</book>
<book id="bk109">
<author>Kress, Peter</author>
<title>Paradox Lost</title>
<genre>Science Fiction</genre>
<price>6.95</price>
<publish_date>2000-11-02</publish_date>
of being quantum.</description>
</book>
<book id="bk110">
<author>O'Brien, Tim</author>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-09</publish_date>
</book>
<book id="bk111">
<author>O'Brien, Tim</author>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-01</publish_date>
</book>
<book id="bk112">
<author>Galos, Mike</author>
<genre>Computer</genre>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
looking at how Visual Basic, Visual C++, C#, and ASP+ are
environment.</description>
</book>
</catalog>
Design.xsl
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="2.0">
<xsl:template match="/">
<html>
<head>
</head>
<body>
<table border="1">
<tr bgcolor="#9acd32">
<th>Author</th>
<th>Title</th>
<th>Genration</th>
<th>Price</th>
<th>Publish_date</th>
<th>Description</th>
</tr>
<xsl:for-each select="catalog/book">
<tr>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Practical: 8
Aim: PHP:-
- Create php pages.
- Arrays
- Establish connection with the server
Arrays (Index, Associative, Associative Loop, Multidimensional Array )
<html>
<head>
<title>Indexed Array</title>
</head>
<body>
<?php
$cars=array("Volvo","BMW","Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
echo "<br/>Length of an Array is:";
echo count($cars);
?>
<?php
$cars=array("Volvo","BMW","Toyota");
$arrlength=count($cars);
echo "<br/>";
for($x=0;$x<$arrlength;$x++)
{
echo "<br>";
echo $cars[$x];
}
?>
</body>
</html>
OUTPUT:
<html>
<head>
<title>Associative Array along with loop</title>
</head>
<body>
<?php
$age=array("Peter"=>"35","Ben"=>"37","Joe"=>"43");
echo "Peter is " . $age['Peter'] . " years old.<br/>";
?>
<?php
$age=array("Peter"=>"35","Ben"=>"37","Joe"=>"43");
foreach($age as $x=>$x_value)
{
echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
print "<br><br>Example of array_merge<br>";
$first = array("a","b","c","d","e");
$second = array("1","2","3","4","5");
$third = array_merge($first,$second);
foreach($third as $val)
{
print "$val";
}
print "<br><br>Example of array_slice<br>";
$fourth = array_slice($first,2,3);
foreach($fourth as $val)
{
print "$val";
}?>
</body>
</html>
<html>
<head>
<title>Multidimensional Arrays</title>
</head>
<body>
<?php
$cars = array
(
array("Volvo",22,18),
array("BMW",15,13),
array("Saab",5,2),
array("Land Rover",17,15)
);
</body>
</html>
Output:
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// Close connection
mysqli_close($con);
?>
</body>
</html>
OUTPUT
Practical: 9
Aim: PHP Forms:-
Registrationform.html
<html>
<head>
<title>Registration Form (without Database)</title>
</head>
<body>
<form action="registrationvalue.php" method="post">
<table>
<tr>
<td><label for="userid">User id:</label></td>
<td><input type="text" name="userid" size="12" /></td>
</tr>
<tr>
<td><label for="passid">Password:</label></td>
<td><input type="password" name="passid" size="12" /></td>
</tr>
<tr>
<td><label for="username">Name:</label></td>
<td><input type="text" name="username" size="50" /></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input type="text" name="address" size="50" /></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select name="country">
<option selected="" value="Default">(Please select a
country)</option>
<option value="Australia">Australia</option>
<option value="Canada">Canada</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="USA">USA</option>
</select>
</td>
</tr>
<tr>
<td><label for="zip">ZIP Code:</label></td>
<td><input type="text" name="zip" /></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="text" name="email" size="50" /></td>
</tr>
<tr>
<td><label id="gender">Gender:</label></td>
<td><input type="radio" name="gender" value="Male"
/><span>Male</span><input type="radio" name="gender" value="Female"
/><span>Female</span></td>
</tr>
<tr>
<td><label for="desc">About:</label></td>
<td><textarea name="desc" id="desc"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit Details"
/></td>
</tr>
</table>
</form>
</body>
</html>
Registrationform.php
<?php
//receiving userid field value in $userID variable
$userid=$_POST["userid"];
<td><b>$zip</b></td>
</tr>
<tr>
<td>Email ID: </td>
<td><b>$email</b></td>
</tr>
<tr>
<td>Gender: </td>
<td><b>$gender</b></td>
</tr>
<tr>
<td>About: </td>
<td><b>$desc</b></td>
Practical: 10
Aim: Advance PHP:- Create a Program to upload the file
FileUpload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Form</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<h2>Upload File</h2>
<label for="fileSelect">Filename:</label>
<input type="file" name="photo" id="fileSelect"
<input type="submit" name="submit" value="Upload">
<br>
<br>
<input type="submit" value="Upload Image" name="submit">
<p><strong>Note:</strong> Only .jpg, .jpeg, .gif, .png formats allowed
to a max size of 5 MB.</p>
</form>
</body>
</html>
Upload.php
<?php
// Check if the form was submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Check if file was uploaded without errors
if(isset($_FILES["photo"]) && $_FILES["photo"]["error"] == 0){
$allowed = array("jpg" => "image/jpg", "jpeg" => "image/jpeg", "gif" =>
"image/gif", "png" => "image/png");
$filename = $_FILES["photo"]["name"];
$filetype = $_FILES["photo"]["type"];
Output: