Mini Project Documentation
For
Online Passport Registration System
Prepared by
Clifton Danish J (200701052)
Chandini A (200701049)
Chittesh B (200701051)
ABSTRACT
The statement is the initial starting point for a project. Online passport registration system is used
in the effective dispatch of registration form to all of the citizens. This system adopts a
comprehensive approach to minimize the manual work and schedule resource time in an urgent
manner. The core of the system is to get this online registration form [with details such as name,
[Link]., etc..] filled by the applicants.
The Elements of identity are name, date-of-birth, sex and place of birth most often, most often
nationality and citizenship are congruent. A passport does not of itself entitle the passport holder
entry into another country, nor to consular protection while abroad or any other privileges it does.
However normally entitle the passport holder to return to his country that issued the passport.
Rights to consular protection arise from international agreements, and the right to return arises
from the laws of issuing country. An individual can register for a passport irrespective of his/her
age.
Program Codes:
Main Page Code :
<!DOCTYPE html>
<html>
<head>
<style>
.body{
background-color: cream;
background-image: url("[Link]");
background-repeat: no-repeat;
background-size: cover;
}
.h1{
text-align:center;
font-size: 30px;
padding: 30px;
text-align: center;
background: black;
color:goldenrod;
font-family:Rockwell;
border-radius:24px;
transform:0.25s;
}
.button {
background-color:black;
border: none;
color:white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 12px;}
.p1{align: left;}
.tdspace{
width: 50%;
}
.tdinstruction{
color:cyan;
}
.but{
text-align:center;
}
.mainTable{
width:100%;
}
</style>
</head>
<body class="body" >
<h1 class="h1">Passport Registration</h1>
<br><br>
<table class="mainTable" >
<tr>
<td align="center"><a href="[Link] class="button
button1">User Login</a></td>
<td class="tdinstruction" rowspan="4">
<h2 style="color:yellow">Instructions</h2>
<marquee width="60%" direction="up" height="100px" onmouseover="[Link]();"
onmouseout="[Link]();">
<p class="p"><h3>For applying passport registration is must<br><br>
After registration fill form<br><br>
After 5 days check for application status<br><br>
For any query contact to contact given below</h3></p>
</marquee>
</td>
<br><br>
<tr>
<td align="center"><a href="[Link]" class="button button1">Registration</a></td>
</tr>
</table>
<p align="right"><i><b>For More Information Click below</i></b></p>
<a style="float: right"
href="[Link] class="button
button1">More Info</a>
</body>
</html>
Login Page :
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script >
function validate()
{
var text=[Link]("user").value;
var x=/[a-z]/;
if([Link](text))
{
[Link]("id1").innerHTML="valid";
[Link]("id1").[Link]="hidden";
[Link]("id1").[Link]="green";
}
else{
[Link]("id1").innerHTML="Enter valid UserName";
[Link]("id1").[Link]="visible";
[Link]("id1").[Link]="red";
}
var text1=[Link]("pswd").value;
var x=/[a-z A-Z][0-9]/;
if([Link](text1))
{
[Link]("id2").innerHTML="valid";
[Link]("id2").[Link]="hidden";
[Link]("id2").[Link]="green";
}
else{
[Link]("id2").innerHTML="Enter valid Password";
[Link]("id2").[Link]="visible";
[Link]("id2").[Link]="red";
}
}
</script>
<style type="text/css">
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
border: 3px solid skyblue;
border-radius: 10px;
left: 50%;
transform: translate(-60%,-60%);
background: black;
text-align: center;
background: url("[Link]
[Link]");
background-repeat: no-repeat;
}
.box h1{
color: black;
text-shadow: 2px 2px 3px black;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],.box input[type="password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: black;
border-radius: 24px;
transform: 0.25s;
}
.box button[type="submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid green;
padding: 14px 40px;
outline: none;
color: black;
border-radius: 24px;
transform: 0.25s;
cursor: pointer;
}
.body{
background-image: url("[Link]");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body class="body">
<form onclick="validate()" action="[Link]
class="box" >
<h1>Login</h1>
<input id="user" type="text" placeholder="userName" maxlength="20">
<label id="id1" style="color: red;visibility: hidden;">Invalid UserName</label>
<input id="pswd" type="password" placeholder="password" maxlength="10">
<label id="id2" style="color: red;visibility: hidden;">Invalid Password</label>
<button id="submit" type="submit"">Login</button>
</form>
</html>
Registration Page :
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="C:/Users/danny/Desktop/Html/[Link]"/>
<script src="C:/Users/danny/Desktop/Html/[Link]"></script>
</head>
<body style="background-image: url('[Link]')">
<div class="container" >
<div class="main" >
<h2>Registration</h2>
<form id="form_id" method="post" name="myform">
<label id="id1"></label>
<input type="text" name="fn" id="fname" placeholder="First Name" maxlength="10"/>
<label id="id2"></label>
<input type="text" name="ln" id="lname" placeholder="Last Name " maxlength="10"/>
<label id="id3"></label>
<input type="text" name="email" id="emailid" placeholder="Email Id" maxlength="30"/>
<label id="id4"></label>
<input type="text" name="pn" id="phNo" placeholder="Phone Number" maxlength="10"/>
<label id="id5"></label>
<input type="password" name="pw" id="password" placeholder="Password" maxlength="20"/>
<input type="button" value="Submit" id="submit" onclick="validate()">
<tr><td align="center"><a href="[Link]" class="button button1" style="color: white">Sign
Up</a></td></tr>
</form>
</div>
</div>
</body>
</html>
Information Page Code :
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
.body{
color: black;
background-image: url("[Link]");
font-family:sans-serif;
padding: initial;
}
.h1{
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.h4{
border: 1px 200px 200px 200px solid black;
margin: 35px;
background-color: grey;
color: ivory;
text-align: center;
}
</style>
</head>
<body class="body">
<center><h1 class="h1" style="color: red">Passport Information</h1>
<h3 style="color: red">Application Form</h3>
</center>
<form>
<h4>Personal Detail</h4>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="" required>
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="" required>
<br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" value="" required>
<br><br>
<label for="mNo">Mobile No.</label>
<input type="text" id="mNO" name="mNo" value="" required>
<br><br>
<label for="aNo">Adhaar No.</label>
<input type="text" id="aNO" name="aNo" value="" required>
<br><br>
<label for="gender">Gender:</label>
<input type="checkbox" id="gender" name="m" value="Male">
<label for="m">Male</label>
<input type="checkbox" id="vehicle2" name="f" value="Female">
<label for="f">Female</label>
<br><br>
<input type="checkbox" id="isIndi" name="indi" value="i">
<label for="indi">Resident of India</label>
<input type="Save">
<br><br>
<hr>
<h4 class="h4">Resident Detail</h4>
<label for="addr">Address:</label>
<input type="text" id="addr" name="addr" value="">
<label for="pin">Pincode:</label>
<input type="text" id="pin" name="pin" value="">
<br><br>
<label for="state">State:</label>
<select id="state" name="state">
<option value="select">Select State</option>
<option value="MH">Maharshtra</option>
<option value="MP">Madhya Pradesh</option>
<option value="D">Delhi</option>
<option value="TN">Tamil Nadu</option>
<option value="AP">Andra Pradesh</option>
<option value="Ker">Kerla</option>
<option value="Guj">Gujarat</option>
</select>
<label for="city">City:</label>
<select id="city" name="city">
<option value="select">Select City</option>
<option value="Coimbatore">Coimbatore</option>
<option value="Chennai">Chennai</option>
<option value="Trichy">Trichy</option>
<option value="Salem">Salem</option>
<option value="Tirunelveli">Tirunelvel</option>
<option value="Tuitucorin">Tuitucorin</option>
<option value="Madurai">Madurai</option>
</select>
<hr>
<h4>Qualification Detail</h4>
<p>SSC detail</p>
<label for="Scc">School Name:</label>
<input type="text" id="ssc" name="ssc" value="">
<label for="per">Percentage:</label>
<input type="text" id="per" name="per" value="">
<label for="city">City:</label>
<select id="city" name="city">
<option value="select">Select City</option>
<option value="Nagpur">Nagpur</option>
<option value="Wardha">Wardha</option>
<option value="Pune">Pune</option>
<option value="Mumbai">Mumbai</option>
</select>
<label for="state">State:</label>
<select id="state" name="state">
<option value="select">Select State</option>
<option value="MH">Maharshtra</option>
<option value="MP">Madhya Pradesh</option>
<option value="D">Delhi</option>
<option value="H">Hariyana</option>
</select>
<br>
<p>Intermediate detail</p>
<label for="inter">College Name:</label>
<input type="text" id="inter" name="inter" value="">
<label for="per">Percentage:</label>
<input type="text" id="per" name="per" value="">
<label for="city">City:</label>
<select id="city" name="city">
<option value="select">Select City</option>
<option value="Nagpur">Nagpur</option>
<option value="Wardha">Wardha</option>
<option value="Pune">Pune</option>
<option value="Mumbai">Mumbai</option>
</select>
<label for="state">State:</label>
<select id="state" name="state">
<option value="select">Select State</option>
<option value="MH">Maharshtra</option>
<option value="MP">Madhya Pradesh</option>
<option value="D">Delhi</option>
<option value="H">Hariyana</option>
</select>
<br>
<p>Graduation detail</p>
<label for="grad">College Name:</label>
<input type="text" id="grad" name="grad" value="">
<label for="per">Percentage:</label>
<input type="text" id="per" name="per" value="">
<label for="city">City:</label>
<select id="city" name="city">
<option value="select">Select City</option>
<option value="Nagpur">Nagpur</option>
<option value="Wardha">Wardha</option>
<option value="Pune">Pune</option>
<option value="Mumbai">Mumbai</option>
</select>
<label for="state">State:</label>
<select id="state" name="state">
<option value="select">Select State</option>
<option value="MH">Maharshtra</option>
<option value="MP">Madhya Pradesh</option>
<option value="D">Delhi</option>
<option value="H">Hariyana</option>
</select>
<br><br>
<center><button type="submit" value="Save">Submit</button>
<button type="reset" value="Reset">Reset</button></center>
<br><br>
<hr>
<h4>Document:</h4>
<table>
<tr>
<td><label for="addp">Address Proof:</label></td>
<td><input type="file" id="addp" name="addp"></td>
</tr>
<tr>
<td><label for="bC">Birth Certificate:</label></td>
<td> <input type="file" id="bC" name="bC"></td>
<tr>
<tr>
<td><label for="aC">Adhaar Card:</label></td>
<td> <input type="file" id="aC" name="aC"></td>
<tr>
<td><label for="10m">10th Marksheet:</label></td>
<td><input type="file" id="10m" name="10m"></td>
</tr>
<tr>
<td><label for="interm">12th/Diploma Marksheet:</label></td>
<td><input type="file" id="interm" name="interm"></td>
</tr>
<tr>
<td><label for="gradm">Graduation Marksheet:</label></td>
<td><input type="file" id="gradm" name="gradm"></td>
</tr>
</table>
</form>
</body>
</html>
For Other Use :
1
var attempt = 3;
function validate(){
var text1=[Link]("fname").value;
var x1=/[a-z A-Z]/;
if([Link](text1))
{
[Link]("id1").innerHTML="valid";
[Link]("id1").[Link]="hidden";
[Link]("id1").[Link]="green";
var flag1=true;
}
else{
[Link]("id1").innerHTML="Enter this field";
[Link]("id1").[Link]="visible";
[Link]("id1").[Link]="red";
var flag1=false;
}
var text2=[Link]("lname").value;
var x2=/[a-z A-Z]/;
if([Link](text2))
{
[Link]("id2").innerHTML="valid";
[Link]("id2").[Link]="hidden";
[Link]("id2").[Link]="green";
var flag2=true;
}
else{
[Link]("id2").innerHTML="Enter this field";
[Link]("id2").[Link]="visible";
[Link]("id2").[Link]="red";
var flag2=false;
}
var text3=[Link]("emailid").value;
var x3=/^([a-z A-Z 0-9 \. -]+)@([a-z A-Z 0-9 -]+).([a-z]{2,10})$/;
if([Link](text3))
{
[Link]("id3").innerHTML="valid";
[Link]("id3").[Link]="hidden";
[Link]("id3").[Link]="green";
var flag3=true;
}
else{
[Link]("id3").innerHTML="Must be abc@[Link]";
[Link]("id3").[Link]="visible";
[Link]("id3").[Link]="red";
var flag3=false;
}
var text4=[Link]("phNo").value;
var x4=/^[7-9]\d{9}/;
if([Link](text4))
{
[Link]("id4").innerHTML="valid";
[Link]("id4").[Link]="hidden";
[Link]("id4").[Link]="green";
var flag4=true;
}
else{
[Link]("id4").innerHTML="Enter valid Phone Number";
[Link]("id4").[Link]="visible";
[Link]("id4").[Link]="red";
var flag4=false;
}
var text5=[Link]("pw").value;
var x5=/[a-z A-Z 0-9]/;
if([Link](text5))
{
[Link]("id5").innerHTML="valid";
[Link]("id5").[Link]="hidden";
[Link]("id5").[Link]="green";
var flag5=true;
}
else{
[Link]("id5").innerHTML="Enter valid Password";
[Link]("id5").[Link]="visible";
[Link]("id5").[Link]="red";
var flag5=false;
}
if(flag1==true && flag2==true && flag3==true && flag4==true && flag5==true){
[Link] = "C:/Users/danny/Desktop/Html/[Link]";
}
else{
alert("Fill All Detail");
}
}
2
var attempt = 3;
function validate(){
var text=[Link]("username").value;
var x=/[a-z]/;
if([Link](text))
{
[Link]("id1").innerHTML="valid";
[Link]("id1").[Link]="hidden";
[Link]("id1").[Link]="green";
var flag1=true;
}
else{
[Link]("id1").innerHTML="Enter valid UserName";
[Link]("id1").[Link]="visible";
[Link]("id1").[Link]="red";
var flag1=false;
}
var text1=[Link]("password").value;
var x=/[a-z A-Z][0-9]/;
if([Link](text1))
{
[Link]("id2").innerHTML="valid";
[Link]("id2").[Link]="hidden";
[Link]("id2").[Link]="green";
var flag2=true;
}
else{
[Link]("id2").innerHTML="Enter valid Password";
[Link]("id2").[Link]="visible";
[Link]("id2").[Link]="red";
var flag2=false;
}
if(flag1==true && flag2==true){
[Link] = "C:/Users/danny/Desktop/Html/[Link]";
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
[Link]("username").disabled = true;
[Link]("password").disabled = true;
[Link]("submit").disabled = true;
return false;
}
}
3
@import url([Link]
h2{
background-color: #FEFFED;
padding: 30px 35px;
text-align:center;
border-radius: 10px 10px 0 0;
color: black;
text-shadow: 2px 2px 3px rgb(255, 0, 0);
text-transform: uppercase;
font-weight: 500;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
[Link]{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
[Link]{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px;
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center{
font-size:32px;
}
.note{
color:rgb(255, 0, 0);
}
.valid{
color:green;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button]{
font-size: 16px;
background-color:black;
color:white;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=button]:hover{
background: linear-gradient(#e7c7bd 5%, #201801 100%);
}
SCREENSHOTS:
Page 1
Page 2
Page 3
Page 4
Explanation about the given screenshots :
At first , the following program will show the Home page of the given program (Page 1).
Then if we click the user login button , the login page will appear , we can give details to login
to it. If we click Registration button ,the registration page will appear to register. After that , it
ask about our details to apply for the passport . Then the registration is sucessful.
Thank You For the Registration