Name
Ali baba
Assignment
Intro to web
Submitted To
Sir gapampaf ali
Roll no
168
Question No 01
1 We are going to develop a home appliance’s web
portal; this website facilitates users to view and buy
different products. This website contain complete detail
and price of each product. To buy any product, user must
need to register first then he will be able to buy a
product. In current phase of this project, you need to
develop user registration form as follows.
1. Title of webpage “Registration Form | Student ID”
2. If a user registers already provide link of login page.
3. User Personal Details
4. Address
5. Paword
6. Newslssetter
7. Continue or Submit Button`
8. Hardcode values must be same as shown in output.
(Hint: Use CSS, Forms and Table, no need any database)
Answer
Page no 01
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body bgcolor="#000000">
<form action="#" name="Registration"
onsubmit="return(validate());">
<table cellpadding="8" width="80%" bgcolor="#0000FF"
align="center"
cellspacing="8">
<tr>
<td colspan=2>
<center><font size=8><b>Registration
Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname"
size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername"
id="fathername"
size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="sex" value="male"
size="10">Male
<input type="radio" name="sex" value="Female"
size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Gujranwala">Gujranwala</option>
<option value="Gujrat">Gujrat</option>
<option value="Lahore">Lahore</option>
<option value="Jehlum">Jehluum</option>
</select></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"
id="password" size="30"></td>
</tr>
<tr>
<td>Email Adress</td>
<td><input type="text" name="emailid" id="emailid"
size="30"></td>
</tr>
<tr>
<td>Mobile-No</td>
<td><input type="text" name="mobileno" id="mobileno"
size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit
Form" /></td>
<td><a
href="login.html"><button>Login</button></a></td>
</tr>
</table>
</form>
</body>
</html>
Page no 02
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title> Login Page </title>
<style>
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: black;
}
button {
background-color: #FFFFFF;
width: 100%;
color: orange;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid grey;
box-sizing: border-box;
}
button:hover {
opacity: 0.7;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
margin: 10px 5px;
}
.container {
padding: 25px;
background-color: blue;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Login Form </h1>
</center>
<label>Username : </label>
<input type="text" placeholder="Enter Username"
name="username" required>
<label>Password : </label>
<input type="password" placeholder="Enter
Password" name="password" required>
<button type="submit">Login</button>
<a href="title
Page.html"><button>Register Now</button>
</div>
</form>
</body>
</html>
Q2
<html>
<body>
<form action="/action_page.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="sid">Student ID:</label>
<input type="text" id="sid" name="sid"><br><br>
<label for="issue">Issue Type:</label>
<select name="type" id="Study">
<option value="worker">Worker</option>
</select>
<br>
<br>
<label for="issue">Discription:</label>
<textarea id="" name="" rows="4" cols="50">
</textarea>
<br>
<br>
<input type="submit" value="Submit">
<input type="submit" value="Clear">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="sid">Student ID:</label>
<input type="text" id="sid" name="sid"><br><br>
<label for="issue">Issue Type:</label>
<select name="type" id="Study">
<option value="worker">Worker</option>
</select>
<br>
<br>
<label for="issue">Discription:</label>
<textarea id="" name="" rows="4" cols="50">
</textarea>
<br>
<br>
<input type="submit" value="Submit">
<input type="submit" value="Clear">
</form>
</body>
</html>
Q3
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<style>
body{background-color:#CCCCCC;}
.final_txt{color:black; font-weight:bold; font-size:24px;
text-align:center; margin-bottom:60px;}
form{width:30%; float:left; margin-left:500px; margin-
bottom:50px;}
input{margin-top:20px; margin-left:10px; padding:10px
60px;}
label{font-size:16px; font-weight:bold;}
.cnic{margin-left:35px;}
.bttn{font-weight:bold; font-size:14px;}
.hello{float:right; width:20%; background-color:#F7F7F7;
margin-right:50px; margin-top:25px;}
li{list-style:none; margin-top:20px;}
.uni{font-weight:bolder; font-size:xx-large; text-
decoration:underline; padding-top:50px; text-
align:center;}
</style>
</head>
<body>
<header>
<p class="final_txt">Final Paper of Web System and
Technology (CS-305)</p>
</header>
<form>
<label style="margin-left:15px;">First
Name</label><input type="text" required/>
<label style="margin-left:15px;">Last
Name</label><input type="text" required/>
<label style="margin-left:50px;">CNIC</label><input
type="text" required/>
<label style="margin-left:60px;">AGE</label><input
type="date" required/>
<label style="margin-left:15px;">User
Name</label><input type="text" required/>
<label style="margin-left:20px;">Password
</label><input type="password" required/>
<label style="margin-
left:40px;">Gender</label><input type="radio"
required/>
<label>Male</label><input
type="radio"/><label>Female</label>
<input class="bttn" type="submit"
value="SUBMIT"/> <input class="bttn" type="reset"
value="RESET"/>
</form>
<div class="hello">
<ul>
<li>Home</li>
<li>Download</li>
<li>About</li>
<li>Blogs</li>
<li>Gallery</li>
<li>Contuct us</li>
</ul>
</div>
<div style="clear:both;">
<footer>
<hr/>
<p class="uni">UNIVERSITY OF GUJRAT</p>
</footer>
</div>
</body>
</html>
