Jump to content

creating FORM using HTML

vigneshnayak

By vigneshnayak
in HTML/XHTML

 Share

Recommended Posts

vigneshnayak Newbie

vigneshnayak

Posted
Posted

1) i want to create 1 registration form contains login name,password,email,phone number.

2) once u submit the form data, login page should have to come, it contains loogin name and password.

3)login page should accept only previously register name n password.

4) for this you need to use only HTMl and javascript (no php,no asp.net, no database, any other language).

 

here is my sample code. but in this code it will not store register data in array, login page will accept any data. please help out of this.

 

1. Register.html

<html>

<head>

<script language="javascript">

function validateForm()

{

var loginname=document.forms["RForm"]["Lname"].value;

if (loginname==null || loginname=="")

{

alert("please Enter Login Name ");

return false;

}

var password=document.forms["RForm"]["Pass"].value;

if (password==null || password=="")

{

alert("please Enter password");

return false;

}

var phone=document.forms["RForm"]["phone"].value;

if (phone==null || phone=="")

{

alert("please Enter phone number ");

return false;

}

var email=document.forms["RForm"]["Email"].value;

if (email==null || email=="")

{

alert("please Enter Email");

return false;

}

else

{

var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;

if(email.match(mailformat))

{

document.RForm.Email.focus();

return true;

}

else

{

alert("You have entered an invalid email address!");

document.RForm.Email.focus();

return false;

}

}

}

</script>

</head>

<body bgcolor=#E67373>

<form method="post" name="RForm" action="login.html" onSubmit="return validateForm();" >

<table bgcolor=#FFCCFF width="40%" >

<p><h2>REGISTRATION PAGE</h2></p>

<tr>

<td width="30%">Login Name:<br/></td>

<td><input name="Lname" type="text" ></td>

</tr>

<tr>

<td width="30%">Password:<br/></td>

<td><input name="Pass" type="password" ></td>

</tr>

<tr>

<td width="30%">phone :<br/></td>

<td><input name="phone" type="text" ></td>

</tr>

<tr>

<td width="30%">Email :<br/></td>

<td><input name="Email" type="text" ></td>

</tr>

<tr>

<td ><input type="submit" value="submit" > </td>

</tr>

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

 

 

2. Login.html

<html>

<script>

function validate(){

var username=document.form.user.value;

var password=document.form.pass.value;

if(username==""){

alert("Enter Username!");

return false;

}

if(password==""){

alert("Enter Password!");

return false;

}

return true;

}

var name=array[0];

var name=array[1];

if(name==document.getElementById("user").innerHTML && name==document.getElementById("pass").innerHTML)

{

return true;

}

else

{

alert("Username and password is not correct");

return false;

}

</script>

<BODY bgcolor=#CCFF66 >

<form name="form" method="post" action="question.html" onsubmit="javascript:return validate();">

<table bgcolor=#CCFF66>

<tr><td>Username:</td><td><input type="text" name="user"></td></tr>

<tr><td>Password:</td><td><input type="password" name="pass"></td></tr>

<tr><td></td><td><input type="submit" value="Login" onload ="document.loaction.href=('q.html');"></td></tr>

</table></form></BODY></html>

 

 

3. Question.html

<html><head><title></title>

<script language="JavaScript">

function validateForm() {

var select = document.getElementsByTagName('input');

for (var i=0; i<select.length; i++) {

if (select.type == 'radio' && select.checked) {

document.getElementById('trigger').style.display="block";

} }} </script> </head>

<body bgcolor=#B2FFFF>

<form name="quiz">

1. What does TPS stands for.</br>

<input type="radio" name="q1" value="technology port software">technology port software</br>

<input type="radio" name="q1" value="technology port solution">technology port solution</br>

<input type="radio" name="q1" value="technology port service">technology port service</br>

<input type="radio" name="q1" value="telephone port software">telephone port software</br>

<p>

2. The 'Black flag' signifies</br>

<input type="radio" name="q2" value="revolution/danger">revolution/danger</br>

<input type="radio" name="q2" value="peace">peace</br>

<input type="radio" name="q2" value="truce">truce</br>

<input type="radio" name="q2" value="protest">protest</br>

<p>

3. In which season do we need more fat?</br>

<input type="radio" name="q3" value="Rainy season">Rainy season</br>

<input type="radio" name="q3" value="Winter">Winter</br>

<input type="radio" name="q3" value="Spring">Spring</br>

<input type="radio" name="q3" value="Summer">Summer</br>

<p>

4. India has largest deposits of ____ in the world.</br>

<input type="radio" name="q4" value="gold">gold</br>

<input type="radio" name="q4" value="copper">copper</br>

<input type="radio" name="q4" value="mica">mica</br>

<input type="radio" name="q4" value="None of the above">None of the above</br>

<p>

<input type="button" value="Get answers" onClick="validateForm();">

<textarea id="trigger" style="display:none;" name="solutions" rows="5" cols="50">

CORRECT ANSWERS:

1.technology port software

2.protest

3.Winter

4.mica

</textarea>

<p>find more interview questions at <a href="http://www.indiabix.com/hr-interview/questions-and-answers/" target="_blank">India BIX</a>.</p>

</form>

</body></html>

 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Without server-side language such as php or database, you can't process form data, you can't store securely.Javascript is viewable non secure coding you might as well display username and password on page itself, its basically used to make a user experience more user friendly, and used for special effects, valdation of form data using js is just for user friendly experience also, you should not rely on it at all, but have server-side validation by default, as javscript CAN BE DISABLED.

  • Like 1
Link to comment
Share on other sites
vigneshnayak Newbie

vigneshnayak

Posted
  • Author
Posted

Without server-side language such as php or database, you can't process form data, you can't store securely.Javascript is viewable non secure coding you might as well display username and password on page itself, its basically used to make a user experience more user friendly, and used for special effects, valdation of form data using js is just for user friendly experience also, you should not rely on it at all, but have server-side validation by default, as javscript CAN BE DISABLED.

i just want to login 1 time. My senior told me to use Array or Session(no database,php, or asp.net or any other). but i dont know how to use array/session for storing and retreiving purpose.

Link to comment
Share on other sites
vigneshnayak Newbie

vigneshnayak

Posted
  • Author
Posted (edited)

Sorry? you expect me to do your homework for you, well that's not going to happen.

noway sir, actually i have written PHP code. and its working too. but my senior not accepting PHP code. really i dont know how to use cookie/local storage, i mean where i have to declare .....check this PHP code sir, its working in WAMP server.

 

1.register page.

 

register.html

 

<html>
<head>
<script language="javascript">
function validateForm()
{
var loginname=document.forms["RForm"]["Lname"].value;
if (loginname==null || loginname=="")
{
alert("please Enter Login Name ");
return false;
}
var password=document.forms["RForm"]["Pass"].value;
if (password==null || password=="")
{
alert("please Enter password");
return false;
}
var phone=document.forms["RForm"]["phone"].value;
if (phone==null || phone=="")
{
alert("please Enter phone number ");
return false;
}
var email=document.forms["RForm"]["Email"].value;
if (email==null || email=="")
{
alert("please Enter Email");
return false;
}
else
{
var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(email.match(mailformat))
{
document.RForm.Email.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.RForm.Email.focus();
return false;
}
}
}
</script>
</head>
<body bgcolor=#E67373>
<form method="post" name="RForm" action="register.php" onSubmit="return validateForm();" >
<table bgcolor=#FFCCFF width="40%" >
<p><h2>REGISTRATION PAGE</h2></p>
<tr>
<td width="30%">Login Name:<br/></td>
<td><input name="Lname" type="text" ></td>
</tr>
<tr>
<td width="30%">Password:<br/></td>
<td><input name="Pass" type="password" ></td>
</tr>
<tr>
<td width="30%">phone :<br/></td>
<td><input name="phone" type="text" ></td>
</tr>
<tr>
<td width="30%">Email :<br/></td>
<td><input name="Email" type="text" ></td>
</tr>
<tr>
<td ><input type="submit" value="submit" > </td>
</tr>
</table>
</form>
</body>
</html>
2.PHP login page

login.php

 

<?php
$name = $_POST["Lname"];
$password = $_POST["Pass"];
//echo $name.$password;
?>
<html>
<script>
function validate(){
var username=document.form.user.value;
var password=document.form.pass.value;
if(username==""){
alert("Enter Username!");
return false;
}
if(password==""){
alert("Enter Password!");
return false;
}
if(username!="<?php echo $name; ?>"){
alert("Invalid Username!");
return false;
}
if(password!="<?php echo $password; ?>"){
alert("Invalid Password!");
return false;
}
return true;
}
</script>
<BODY bgcolor= #B2FFFF>
<form name="form" method="post" action="question.html" onsubmit="return validate();">
<table bgcolor=#CCFF66>
<tr><td>Username:</td><td><input type="text" name="user"></td></tr>
<tr><td>Password:</td><td><input type="password" name="pass"></td></tr>
<tr><td></td><td><input type="submit" value="Login" ></td></tr>
</table>
</form>
</BODY>
</html>
3.question page
<html><head><title></title>
<script language="JavaScript">
function validateForm() {
var select = document.getElementsByTagName('input');
for (var i=0; i<select.length; i++) {
if (select.type == 'radio' && select.checked) {
document.getElementById('trigger').style.display="block";
}
}
}
</script>
</head>
<body bgcolor=#B2FFFF>
<form name="quiz">
1. What does TPS stands for.</br>
<input type="radio" name="q1" value="technology port software">technology port software</br>
<input type="radio" name="q1" value="technology port solution">technology port solution</br>
<input type="radio" name="q1" value="technology port service">technology port service</br>
<input type="radio" name="q1" value="telephone port software">telephone port software</br>
<p>
2. The 'Black flag' signifies</br>
<input type="radio" name="q2" value="revolution/danger">revolution/danger</br>
<input type="radio" name="q2" value="peace">peace</br>
<input type="radio" name="q2" value="truce">truce</br>
<input type="radio" name="q2" value="protest">protest</br>
<p>
3. In which season do we need more fat?</br>
<input type="radio" name="q3" value="Rainy season">Rainy season</br>
<input type="radio" name="q3" value="Winter">Winter</br>
<input type="radio" name="q3" value="Spring">Spring</br>
<input type="radio" name="q3" value="Summer">Summer</br>
<p>
4. India has largest deposits of ____ in the world.</br>
<input type="radio" name="q4" value="gold">gold</br>
<input type="radio" name="q4" value="copper">copper</br>
<input type="radio" name="q4" value="mica">mica</br>
<input type="radio" name="q4" value="None of the above">None of the above</br>
<p>
<input type="button" value="Get answers" onClick="validateForm();">
<textarea id="trigger" style="display:none;" name="solutions" rows="5" cols="50">
CORRECT ANSWERS:
1.technology port software
2.protest
3.Winter
4.mica
</textarea>
<p>find more interview questions at <a href="http://www.indiabix.com/hr-interview/questions-and-answers/" target="_blank">India BIX</a>.</p>
</form>
</body></html>
(note- store all files in single folder, save that folder in C:>WAMP>www>your folder, open your browser localhost/foldername/register page.html)
Edited by vigneshnayak
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...