Wednesday, 9 January 2013

Javascript validation for registration form

<html>
<head>
<title>REGISTRATION</title>
<style>
.margin
{
margin-top:100px;
margin-bottom:100px;
margin-left:150px;
margin-left:150px;
}
</style>
<script type="text/javascript">
function validate()
{
if(document.getElementById('name').value=='')
{
alert("please enter a name");
document.getElementById('name').focus();
return false;
}
if(document.getElementById('username').value=='')
{
alert("please enter a username");
document.getElementById('username').focus();
return false;
}
if(document.getElementById('password').value=='')
{
alert("please enter a password");
document.getElementById('password').focus();
return false;
}
if(document.getElementById('email').value=='')
{
alert("please enter a email");
document.getElementById('email').focus();
return false;
}
if(document.getElementById('address').value=='')
{
alert("please enter a address");
document.getElementById('address').focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action="login.html"method="post" onsubmit="return validate()";>
<table width="50%"border="1">
<tr>
<td>
<table width="50%" border="0" align="center" class="margin">
<tr>
<td colspan="2" align="center">REGISTRATION</td>
</tr>
<tr>
<td>NAME:</td>
<td><input type="text" name="name" id="name" size="20"></td>
</tr>
<tr>
<td>USERNAME:</td>
<td><input type="text" name="username" id="username" size="20"></td>
</tr>
<tr>
<td>PASSWORD:</td>
<td><input type="text" name="password" id="password" size="20"></td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text" name="email" id="email" size="20"></td>
</tr>
<tr>
<td>ADDRESS:</td>
<td valign="top"><textarea rows="10" cols="20" name="address" id="address"></textarea></td>
</tr>
<tr>
<td align="center"><input type="submit" name="submit" id="submit"value="register"></td>

 </tr>
</form>
</table>
</table>
</body>
</html>
Posted by at No comments:

Monday, 7 January 2013

Javascript validation for Email Address

Javascript is used for validating the Email address. The syntax is as follows:
<html>
<head>
<script language = "Javascript">
/**
 * DHTML email validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
 */

 function echeck(str) {

 var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
  alert("Invalid E-mail ID")
  return false
}

 if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
  alert("Invalid E-mail ID")
  return false
}

 if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
   alert("Invalid E-mail ID")
   return false
}

 if (str.indexOf(at,(lat+1))!=-1){
   alert("Invalid E-mail ID")
   return false
}

 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
   alert("Invalid E-mail ID")
   return false
}

 if (str.indexOf(dot,(lat+2))==-1){
   alert("Invalid E-mail ID")
   return false
}

if (str.indexOf(" ")!=-1){
   alert("Invalid E-mail ID")
   return false
}

   return true
}

 function ValidateForm(){
var emailID=document.frmSample.txtEmail

if ((emailID.value==null)||(emailID.value=="")){
alert("Please Enter your Email ID")
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
 }
</script>
</head>
<body>
<form name="frmSample" method="post" action="#" onSubmit="return ValidateForm()">
                <p>Enter an Email Address : 
                  <input type="text" name="txtEmail">
                </p>
                <p> 
                  <input type="submit" name="Submit" value="Submit">
                </p>
              </form>
 </body>
 </html>
Posted by at No comments:

Saturday, 5 January 2013

How to use javascript events in HTML

Javascript has mainly two events that can be used in HTML. They are as follows:

1. onclick Event: The onclick event occurs when the user clicks on an element. The example is as follows:

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
id.innerHTML="Ooooopsss!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

2. onMouseout Event: The onmouseout event occurs when a user moves the mouse pointer out of an element. The example is as follows:

<html>
<head>
<script type="text/javascript">
<!--
function popup(){
alert("Hello World!")}
//-->
</script>
</head>
<body>
<input type="button" value="Click Me!" onclick="popup()"><br/>
<a href="#" onmouseover="" onMouseout="popup()">Hover Me!</a>
</body>
</html>

Posted by at No comments:

Thursday, 3 January 2013

How we can register a form

Step1:


First of all we have to make a simple form in HTML by giving Name, Username, Password, Email, Address and next button. The syntax of simple form is as follows:
<html>
<head>
<title>REGISTRATION</title>
<style>
.margin
{
margin-top:100px;
margin-bottom:100px;
margin-left:150px;
margin-left:150px;
}
</style>
</head>
<body>

<form name="registration"action="login.html"method="post">
<table width="50%"border="1">
<tr>
<td>
<table width="50%" border="0" align="center" class="margin">
<tr>
<td colspan="2" align="center">REGISTRATION</td>
</tr>
<tr>
<td>NAME:</td>
<td><input type="text"name="name"size="20"></td>
</tr>
<tr>
<td>USERNAME:</td>
<td><input type="text"name="USERNAME"size="20"></td>
</tr>
<tr>
<td>PASSWORD:</td>
<td><input type="text"name="PASSWORD"size="20"></td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text"name="email"size="20"></td>
</tr>
<tr>
<td>ADDRESS:</td>
<td valign="top"><textarea rows="10"cols="20"name="content"></textarea></td>
</tr>
<tr>
<td align="center"><input type="submit"name="submit"value="next"></td>

</tr>
</form>
</table>
</table>
</body>
</html>

Step2:

The next step is to make a new page by giving the details whether the person who is filling the form is married or unmarried. His education and the city to which the person belongs to. And at last we have to make a button by giving the button name as register. The example is as follows:

<html>
<head>
<title>REGISTRATION</title>
<style>
.margin
{
margin-top:100px;
margin-bottom:100px;
margin-left:150px;
margin-left:150px;
}
</style>
</head>
<body>

<form name="registration"action="next.html"method="post">
<table width="50%"border="1">
<tr>
<td>
<table width="50%" border="0" align="center" class="margin">
<tr>
<td colspan="2" align="center">REGISTRATION</td>
</tr>
<tr>
<td>Status:</td>
<td><input type="radio"name="status"value="married">married<br>
<input type="radio"name="status"value="unmarried" CHECKED>unmarried</td>
</tr>
<tr>
<td>Education:</td>
<td><input type="checkbox"name="courses"value="MCA">MCA<br>
<input type="checkbox"name="courses"value="BCA">BCA<br>
<input type="checkbox"name="courses"value="B.tech">B.tech<br>
<input type="checkbox"name="courses"value="M.tech">M.tech</td>
</tr>
<tr>
<td>City:</td>
<td><select name="city">
<option value="please select">please select</option>
<option value="Rajpura">Rajpura</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Patiala">Patiala</option>
<option value="Ambala">Ambala</option>
<option value="Mohali">Mohali</option>
<option value="Delhi">Delhi</option>
</td>
</tr>
<td align="center"><input type="submit"name="submit"value="register"></td>

</tr>
</form>
</table>
</table>
</body>
</html>

Step3:

The last step is to make a new page in which I have written that Thanks for Registration!!!. The example is as follows:

<html>
<body>
<h1 align="center">Thanks for Registration!!!</h1>
</body>
</html> 

Posted by at No comments:

Wednesday, 2 January 2013

How to make registration forms using HTML

<html>
<head>
<title>REGISTRATION</title>
<style>
.margin
{
margin-top:100px;
margin-bottom:100px;
margin-left:150px;
margin-left:150px;
}
</style>
</head>
<body>
<form name="registration"action="login.html"method="post">
<table width="50%"border="1">
<tr>
<td>
<table width="50%" border="0" align="center" class="margin">
<tr>
<td colspan="2" align="center">REGISTRATION</td>
</tr>
<tr>
<td>NAME:</td>
<td><input type="text"name="name"size="20"></td>
</tr>
<tr>
<td>USERNAME:</td>
<td><input type="text"name="USERNAME"size="20"></td>
</tr>
<tr>
<td>PASSWORD:</td>
<td><input type="text"name="PASSWORD"size="20"></td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text"name="email"size="20"></td>
</tr>
<tr>
<td>ADDRESS:</td>
<td valign="top"><textarea rows"6"cols="20"name="content"></textarea></td>
</tr>
<tr>
<td><input type="button"name="register"value="register"></td>
</tr>
</form>
</table>
</table>
</body>
</html>
Posted by at No comments:
Subscribe to: Posts (Atom)