1,105,578 Community Members

A Simple HTML Login page using JavaScript

Member Avatar
(rajesanthu)
Reputation Points: -5 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

The Code Given is for only beginners in HTML
1.The code implements a simple login form
2.It checks whether the password and usernames are matching or not
3.While you are using replace the predefined username and password that I'v given
that is replace "myuserid" and "mypswrd" with your own userid and password.
4.just copy the file and paste it in the notepad.
5.and save it with an extension of .html or .htm
6.select 'All Files' from the popupmenu shown at the bottom of notepad before saving.
7.Now you will get a document that has the symbol of internet explorer.
8.just open that file and if the computer ask for script activation press ok.
9.Now run your page
10.You can customize the page by applying CSS.
Try it....
It's Your friend,,,
Rajeesh.N.Santhu

<html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
  {
    window.open('target.html')/*opens the target page while Id & password matches*/
  }
 else
 {
   alert("Error Password or Username")/*displays error message*/
  }
}
</script>
</body>
</html>
Member Avatar
sachin bhosale
Newbie Poster
5 posts since Dec 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

well this is good worked but can you give example as we have to create switch case with something like goto..

Member Avatar
rizvihaider72
Newbie Poster
9 posts since Dec 2010
Reputation Points: 2 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Good for begginers
__________________

Member Avatar
rmlalchan
Newbie Poster
1 post since Feb 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Quick and simple. I like it. Be nice to add multiple user logins.

Member Avatar
yeminhtet
Newbie Poster
1 post since Feb 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

really thank u

Member Avatar
riahc3
 
1,404 posts since May 2008
Reputation Points: 45 [?]
Q&As Helped to Solve: 14 [?]
Skill Endorsements: 18 [?]
Team Colleague
 
0
 

But........really it has no point :S

More than login page, it shows how a if works.

Member Avatar
vgkarthi
Newbie Poster
9 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Good for begginers

Member Avatar
F-3000
Newbie Poster
15 posts since Jun 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

As a beginner's study-case, this is nice, thumbs up for that, but...

Where's the mention about that storing login-information in javascript is anything but secure? This stuff is useful only for a toy or studying how things work, and should never be actually used on a real web-page, and this should be clearly mentioned somewhere in the original post. If you think that "every people will realize things like that", you're so absolutely wrong.

@riahc3:
I've been working with javascript for years, but "this.form" inside input-element is new thing for me.

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
2
 

Anyone can read the javascript source code from the web page, and figure out the password.

Member Avatar
dados
Newbie Poster
11 posts since Feb 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

huhhh.. then is not secure...

Member Avatar
jtutuncumacias
Newbie Poster
1 post since Sep 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Is there a more secure way to do this? As mentioned before, one can open the page in inspect element and see the username and password. I was thinking a separate JavaScript file where multiple users can be saved and stored with less risk. Can anyone help me out?

Member Avatar
pritaeas
mod_pritaeas
11,314 posts since Jul 2006
Reputation Points: 1,420 [?]
Q&As Helped to Solve: 1,835 [?]
Skill Endorsements: 155 [?]
Moderator
Featured
Sponsor
 
1
 

I was thinking a separate JavaScript file where multiple users can be saved and stored with less risk.

Still the same problem that all files are readable. You'll need to use a server-side script to validate.

Member Avatar
Andrew_5
Newbie Poster
1 post since Oct 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

ANY clientside validation of users MUST be considered visible. In order to be secure, the connection must be encrypted (https) AND validation done on the server. For low value, low risk applications, https might be skipped, but clientside login validation is as safe as taping your house key to the outside of your door.

Member Avatar
topdude155
Newbie Poster
5 posts since Oct 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 
<script type = "text/javascript">

// Note: Like all Javascript password scripts, this is hopelessly insecure as the user can see 
//the valid usernames/passwords and the redirect url simply with View Source.  
// And the user can obtain another three tries simply by refreshing the page.  
//So do not use for anything serious!

var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;

var unArray = ["username1", "username2", "username3", "username4"];  // as many as you like - no comma after final entry
var pwArray = ["password1", "password2", "password3", "password4"];  // the corresponding passwords;

for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}

if (valid) {
alert ("Login was sucessfully processed.  You will be redirected to the members page now.");
window.location = "http://www.google.com";
return false;
}

var t = " tries";
if (count == 1) {t = " try"}

if (count >= 1) {
alert ("Invalid username and/or password.  You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}

else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}

}

</script>

<form name = "myform">
<p>ENTER USER NAME <input type="text" name="username"> ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick= "validate()">
</p>

</form>
You
Post:
Start New Discussion
Tags Related to this Article