Jump to content

creating FORM using HTML


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...