Thursday, 12 December 2013

HTML: Forms, Validation, Image Gallery

Code for the homepage
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>

 <script src="scripts/jquery-1.9.1.min.js"></script>
<script>
 $(document).ready(function(){
  $("#reg_show").click(function(){
    $("#sign_up").slideToggle("slow");
  });
});

 function open_fp()
{
window.open("forgotpass.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=550, height=180");
}
</script>

 </head>
<body>
<div id="container">
<h1>Safari Tour</h1>
<hr/>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
<li><a href="register.html" title="For New User">Register</a></li>
</ul>
<hr/>
<form name="SignIn" id="signin" action="login.html" method="get">
<h2>Sign In  </h2>
<img src="images/user.png" width="100" height="100" id="user_logo"/>
<table>
<tr>
<td><label for="Email">Email ID</label></td>
<td><input type="email" name="Email_SignIn" placeholder="someone@example.com" size="30" required/></td>
</tr>
<tr>
<td><label for="PassWord">Password</label></td>
<td><input type="password" name="Password_SignIn" placeholder="Password" size="30" required/></td>
<tr>
<td></td>
<td><a href="" onclick="open_fp()">Forgot Password?</a></td>
</tr>
</tr>
<tr>
<td><input type="reset" value="Reset"/></td>
<td><input type="submit" value="Sign In"/></td>
</tr>
<tr><td colspan="2"><label for="NewUser">New User!!<label><a href="register.html"> Register Here!!</a></td></tr>
</table>
</form>
</div>
</body>
</html>
2. Log In page Code 
<html>
<head>
<title>Welcome New Guy</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>

 <script src="scripts/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
   $("#offers").slideToggle("slow");
  });
});

 function showd(){
var fname = document.getElementById("car1").value;
alert("You have selected "+ fname + "for your Ride \n GOOD LUCK!!");
}
</script>

 </head>
<body>
<div id="container">
<h1>Safari Tour</h1>
<hr/>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
<li><a href="register.html" title="For New User">Register</a></li>
</ul>
<hr/>
<div id="container">
<p>Visit Our Exciting offer for new Customers.<div id="flip"><a href="#" id=>OFFERS</a>
<div id="offers">
Get a free ride on booking of 3person for a week.<a href="">Grab It!!</a><br/><br/><br/>
Get a 50% ride on booking of 2person for a week.<a href="">Grab It!!</a>
</div>
</p></div>
<form name="carform" onsubmit="showd();">
Book your Ride
<select id="car1">
<option value="New">Select Car</option>
<optgroup label="Audi">
<option value="A4">A4</option>
<option value="A8">A8</option>
<option value="R8">R8</option>
</optgroup>
<optgroup label="Maruti">
<option value="Maruti 800">800</option>
<option value="VAN">VAN</option>
<option value="SX4">SX4</option>
</optgroup>
</select>
<input type="submit" value="Book"/>
</form>
</div>
</body>

</html>
3. Register Page Code
<html>
<head>
<title>Register</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>

 <script src="scripts/jquery-1.9.1.min.js"></script>
<script>
function validate()
{
if(document.SignUp.tnc.checked==false)
{
alert("Please Agree the Terms and Conditions");
return false
}
else
return true
}
</script>

 </head>
<body>
<div id="container">
<h1>Safari Tour</h1>
<hr/>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
<li><a href="register.html" title="For New User">Register</a></li>
</ul>
<hr/>
<div id="sign_up">
<h2>New User!! Register Here...</h2>
<form name="SignUp" action="new_welcome.html" method="get" id="signup" onsubmit="return validate();">
<table>
<tr>
<td><label for="Name">Enter your Name</label></td>
<td><input type="text" name="FullName" placeholder="Eg: Alan Blen" size="30" required/></td>
</tr>
<tr>
<td><label for="Email">Enter your Email</label></td>
<td><input type="email" name="Email" placeholder="Eg: someone@example.com" size="30" required/></td>
</tr>
<tr>
<td><label for="PassWord">Enter Password</label></td>
<td><input type="password" name="Password" placeholder="Password" size="30" required/></td>
</tr>
<tr>
<td><label for="ConfirmPassWord">Confirm Password</label></td>
<td><input type="password" name="ConfirmPassword" placeholder="Confirm Password" size="30" required/></td>
</tr>
<tr>
<td><label for="Gender">Select Gender</label></td>
<td><input type="radio" name="gender" value="Male"/><label for="optmale">Male</label>
<input type="radio" name="gender" value="Female"/><label for="optfemale">Female</label>
</td>
</tr>
<tr>
<td><label for="DOB">Date of Birth</label></td>
<td>
<select name="Year">
<option value="0">Month</option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
<input type="text" name="day" id="day" size="3" placeholder="Days">
<input type="text" name="Year" size="5" placeholder="Year"/>
</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="validation" name="tnc" id="tnc"/><label for="chk_tnc">I accept the Terms and Conditions</label></td>
</tr>
<tr>
<td><input type="submit" value="Sign Up"/></td>
<td><input type="reset" value="Reset"/></td>
</tr>
</table>
</form>
</div>
</body>

</html>
4. Gallery Page (showing slideshow)
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="colorbox.css" media="screen"/>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery.colorbox.js"></script>
<script>
 $(document).ready(function(){
     $(".col").colorbox({rel:'col', slideshow:true, current:false, width:"800px", height:"500px", transition:"fade"});
});
</script>

 </head>
<body>
<div id="container">
<h1>Safari Tour</h1>
<hr/>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
<li><a href="register.html" title="For New User">Register</a></li>
</ul>
<hr/>
<p>Start your Virtual Tour</p>
<a class="col" href="images/1.jpg" rel="collection"><img src="images/1.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/2.jpg" rel="collection"><img src="images/2.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/3.jpg" rel="collection"><img src="images/3.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/4.jpg" rel="collection"><img src="images/4.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/5.jpg" rel="collection"><img src="images/5.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/6.jpg" rel="collection"><img src="images/6.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/7.jpg" rel="collection"><img src="images/7.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/8.jpg" rel="collection"><img src="images/8.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/9.jpg" rel="collection"><img src="images/9.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/10.jpg" rel="collection"><img src="images/10.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/safari.jpg" rel="collection"><img src="images/safari.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/safari2.jpg" rel="collection"><img src="images/safari2.jpg" height="100px" width="100px"/></a>
<a class="col" href="images/safari1.jpg" rel="collection"><img src="images/safari1.jpg" height="100px" width="100px"/></a>
</div>
</body>

</html>
5. Logged In Page
<html>
<head>
<title>Logged In</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>

 <script src="scripts/jquery-1.9.1.min.js"></script>
<script>
function showd(){
var fname = document.getElementById("car1").value;
alert("You have selected "+ fname + "for your Ride \n GOOD LUCK!!");
}

 </script>

 </head>
<body>
<div id="container">
<h1>Safari Tour</h1>
<hr/>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
<li><a href="register.html" title="For New User">Register</a></li>
</ul>
<hr/>
<h1>Welcome </h1>
<form name="carform" onsubmit="showd();">
Book your Ride
<select id="car1">
<option value="New">Select Car</option>
<optgroup label="Audi">
<option value="A4">A4</option>
<option value="A8">A8</option>
<option value="R8">R8</option>
</optgroup>
<optgroup label="Maruti">
<option value="Maruti 800">800</option>
<option value="VAN">VAN</option>
<option value="SX4">SX4</option>
</optgroup>
</select>
<input type="submit" value="Book"/>
</form>
</div>
</body>

</html>
6. Contact Us Page Code
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>

 <script src="scripts/jquery-1.9.1.min.js"></script>
<script>
function show()
{
var fname = document.getElementById("fname").value; 
var email = document.getElementById("emailid").value; 
var message = document.getElementById("msg").value; 
confirm("You have entered:" + "\n Name : " + fname + "\n Email : " + email + "\n Message : "+ message + "\n\n Do you want the Feedback to send?");
}

 function changeColor(val)
{ 
 if((val.value=="")||(val.value==null))
{
val.style.background="pink";
}
else
{
val.style.background="#FFFFFF";
}
}
</script>

 </head>
<body>
<div id="container">
<h1>Safari Tour</h1>
<hr/>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
<li><a href="register.html" title="For New User">Register</a></li>
</ul>
<hr/>
<h1></h1>
<form name="Feedback" id="feedback" onsubmit="show();">
<table>
<tr>
<td><label for="Name">Enter your Name</label></td>
<td><input id="fname" type="text" name="FullName" placeholder="Eg: Alan Blen" size="30" required onblur="changeColor(this)"/></td>
</tr>
<tr>
<td><label for="Email">Enter your Email</label></td>
<td><input id="emailid" type="email" name="Email" placeholder="Eg: someone@example.com" size="30" required onblur="changeColor(this)"/></td>
</tr>
<tr>
<td><label for="Message">Enter Message</label></td>
<td><textarea id="msg" rows="5" cols="30" onblur="changeColor(this)"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="SEND"/></td>
</tr>
</table>
</form>
</body>

</html>
7. Forgot Password Page 
7.1
<html>
<head>
<title>Forgot Password!!</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>

 <script src="scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
Forgot your Password...Enter your registered Email ID Password will be sent
<form action="sent.html" method="get" id="forgot">
<table>
<tr>
<td><label for="Email">Enter your Email</label></td>
<td><input type="email" name="Email" placeholder="Eg: someone@example.com" size="30" required/></td>
</tr>
<tr>
<td><input type="submit" value="Send"/></td>
</tr>
</table>
</form>
</body>

</html>
7.2
<html>
<head>
<title>Forgot Password!!</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
<script>
function closed(){
window.close();
}
</script>
<script src="scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
Password is sent to your Email ID. <br/>
<input type="button" value="CLOSE WINDOW" onclick="closed()"/>
</body>

</html>


Style Sheet File
#container{width:80%;margin: 0 auto;padding-left: 10px;padding-right: 10px;overflow: hidden;}
#signin input,#signin select,#signin textarea,#signin label,#forgot {font-family:Verdana;font-weight:normal; font-size:15px;color:#848484;}
#signup input,#signup select,#signup label{font-family:Verdana;font-weight:normal; font-size:15px;color:#848484;}

 textarea:hover,select:hover,input[type=text]:hover,input[type=password]:hover,input[type=email]:hover
{
border: 1px solid #b9b9b9;
border-top: 1px solid #FA58AC;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);  
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);  
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

 p{font-family: Verdana, Helvetica, sans-serif;font-size:15px;color:#848484}

 input[type=text],input[type=password],input[type=email],input[type=submit], input[type=reset],select
{
display: inline-block;  
height: 29px;
margin: 0;
padding: 0 8px; 
background: #E0ECF8;  
border: 1px solid #d9d9d9;  
border-top: 1px solid #c0c0c0;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
box-sizing: border-box;   
-webkit-border-radius: 1px;  
-moz-border-radius: 1px;  
border-radius:1px;
}
#offers{
border: 1px solid #c0c0c0;
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
box-sizing: border-box;   
-webkit-border-radius: 1px;  
-moz-border-radius: 1px;  
border-radius:1px;
background: #E0ECF8;
width:300px;
height:200px;
display:none;
font-family:Verdana;font-weight:normal; font-size:15px;color:#848484;
}

 input[type=text]:focus, textarea:focus,select:focus, input[type=password]:focus,input[type=email]:focus,input[type=submit]:focus
{
outline: none;
border: 1px solid #04B45F;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

 input[type=submit]:hover, input[type=reset]:hover
{
cursor:pointer;
}

 ul{list-style-type: none;overflow: hidden; margin: 0;padding: 0;}
            li{float:left;}
#container li a:link,#container li a:visited{display:inline-block;width:120px;color:#333333;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;font-family: Verdana, Helvetica, sans-serif;}
#container li a:hover,#container li a:active{text-decoration:underline;color: #333333;}

 h1,h2
{
color:#848484;
text-shadow: 5px 5px 5px silver;
font-family: calibri;
}

 #container a:link,#container a:visited{color:#333333;text-decoration:none;font-family: Verdana, Helvetica, sans-serif; font-size:12px;}
#container a:hover,#container a:active{text-decoration:underline;color: #333333;}

 #sign_up{}
#user_logo{position:absolute;top:200px;left:540px;}

Note: Download colorbox JQuery Library from this link
JQuery Color Box Library-Download
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)