Q1) You have been assigned a task to create a web page, sign in/up,
in the skyLight university website. The sign In/Up web page contains two forms, create an account and sign in.
The sign up form contains the Name, Password, and confirm paaword fields. Create an account form contains the name, password fields.
you need to implement functionality in the create an account form in such a way that users' details
are not stored locally if the browser is closed. However, if the browser is not closed, the users', details should be stored locally if the browser is
closed. however, if the browser is not closed, the users' details should be stored locally if the
browser is not closed. however if the browser is not closed, the users details should be
stored locally and the password gets automatically filled in the password field of the sign in form
when the user enters the name.the sign in/up web page is shown in the folllowing figure.
Ans1)
<html>
<link type="text/css" rel="stylesheet"href="ExternalStylesheet\homestylesheet.css'/>
<style>
th{
color:red;
}
#form2{
position:absolute;
top:50px;
left:400px;
width:320px;
height:200px;
border:3px solid red;
margin-left:190px;
}
#form2{
width:320px;
height:200px;
border:3px solid red;
margin-left:190px;
margin-right:50px;
}
button{
margin-left:80px;
color:white;
background-color:blue;
}
</style>
<SCRIPT>
function checksum()
{
if (!form1.username.value.match(/^[a-zA-Z]+$/)&& form1.username.value !="")
{
form1.username.value="";
form1.username.focus();
alert("please enter only alphabets in text");
}
}
function checkpassword()
{
if(form1.pass1.value!=form1.pass2.value)
{
alert("passwords entered do not match");
}
else
if(form1.pass1.value!=form1.pass2.value)
{
alert("Passwords entered do not match");
}
else
if(typeof (Storage)!=="unidentified"){
sessionStorage.userid= form1.username.value;
sessionStorage.passwrd = form1.pass1.value;
alert("Registered");
}
}
function login()
{
if(typeof(Storage)!=="underfined")
{
if (form2.username1.value==sessionStorageuserid){
form2.pass3.value=sessionStorage.passwrd;
}
}
}
function onsubmit()
{
if((form2.usrname1.value!="")&&(form2.pass3.value==sessionStorage.passwrd))
{
alert(Signed In");
}
else
{
alert("Password do not match");
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM id="form1" name="sign up" onsubmit="checkPassword()">
<TABLE>
<tr>
<th colspam="2">Create an Account</th>
</tr>
<tr>
<td>Name:</td><td><Input type="text" name="username" onkeyup="checkName();"required></td>
</tr>
<tr>
<td>Password:</td><td><Input type="password" name="pass1"required></td>
</tr>
<tr>
<td>Confirm Password:</td><td><Input type="password" name="pass2"required></td>
</tr>
<tr><td><BR><Button type="Submit"Register</td></tr>
</TABLE>
</FORM>
<FORM id="form2" name="Sign In" onsubmit="onSubmit();">
<TABLE>
<TR>
<TH colspan="2">Sign In</TH>
</TR>
<TR>
<TD>Name:</TD><TD><Input type="Text" name="username1" onkeyup="checkname();" onchange="login;" required></TD>
</TR>
<TR>
<TD>Password:</TD><TD><Input type="password" name name="pass3" required></TD>
</TR>
<TR><TD><BR><Button type="Submit">Sing In</TD></TR></TABLE>
</FORM>
</BODY></HTML>
in the skyLight university website. The sign In/Up web page contains two forms, create an account and sign in.
The sign up form contains the Name, Password, and confirm paaword fields. Create an account form contains the name, password fields.
you need to implement functionality in the create an account form in such a way that users' details
are not stored locally if the browser is closed. However, if the browser is not closed, the users', details should be stored locally if the browser is
closed. however, if the browser is not closed, the users' details should be stored locally if the
browser is not closed. however if the browser is not closed, the users details should be
stored locally and the password gets automatically filled in the password field of the sign in form
when the user enters the name.the sign in/up web page is shown in the folllowing figure.
Ans1)
<html>
<link type="text/css" rel="stylesheet"href="ExternalStylesheet\homestylesheet.css'/>
<style>
th{
color:red;
}
#form2{
position:absolute;
top:50px;
left:400px;
width:320px;
height:200px;
border:3px solid red;
margin-left:190px;
}
#form2{
width:320px;
height:200px;
border:3px solid red;
margin-left:190px;
margin-right:50px;
}
button{
margin-left:80px;
color:white;
background-color:blue;
}
</style>
<SCRIPT>
function checksum()
{
if (!form1.username.value.match(/^[a-zA-Z]+$/)&& form1.username.value !="")
{
form1.username.value="";
form1.username.focus();
alert("please enter only alphabets in text");
}
}
function checkpassword()
{
if(form1.pass1.value!=form1.pass2.value)
{
alert("passwords entered do not match");
}
else
if(form1.pass1.value!=form1.pass2.value)
{
alert("Passwords entered do not match");
}
else
if(typeof (Storage)!=="unidentified"){
sessionStorage.userid= form1.username.value;
sessionStorage.passwrd = form1.pass1.value;
alert("Registered");
}
}
function login()
{
if(typeof(Storage)!=="underfined")
{
if (form2.username1.value==sessionStorageuserid){
form2.pass3.value=sessionStorage.passwrd;
}
}
}
function onsubmit()
{
if((form2.usrname1.value!="")&&(form2.pass3.value==sessionStorage.passwrd))
{
alert(Signed In");
}
else
{
alert("Password do not match");
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM id="form1" name="sign up" onsubmit="checkPassword()">
<TABLE>
<tr>
<th colspam="2">Create an Account</th>
</tr>
<tr>
<td>Name:</td><td><Input type="text" name="username" onkeyup="checkName();"required></td>
</tr>
<tr>
<td>Password:</td><td><Input type="password" name="pass1"required></td>
</tr>
<tr>
<td>Confirm Password:</td><td><Input type="password" name="pass2"required></td>
</tr>
<tr><td><BR><Button type="Submit"Register</td></tr>
</TABLE>
</FORM>
<FORM id="form2" name="Sign In" onsubmit="onSubmit();">
<TABLE>
<TR>
<TH colspan="2">Sign In</TH>
</TR>
<TR>
<TD>Name:</TD><TD><Input type="Text" name="username1" onkeyup="checkname();" onchange="login;" required></TD>
</TR>
<TR>
<TD>Password:</TD><TD><Input type="password" name name="pass3" required></TD>
</TR>
<TR><TD><BR><Button type="Submit">Sing In</TD></TR></TABLE>
</FORM>
</BODY></HTML>
No comments:
Post a Comment