A Simple HTML Login page using JavaScript

Updated rajesanthu 0 Tallied Votes 137K Views Share

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

iConqueror commented: good stuff +0
almostbob commented: if BS were music this would be mozart's 40 in G -3
<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>
sachin bhosale 0 Newbie Poster

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

rizvihaider72 2 Newbie Poster

Good for begginers
__________________

iConqueror commented: agreed +0
rmlalchan 0 Newbie Poster

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

yeminhtet 0 Newbie Poster

really thank u

riahc3 50 Â Team Colleague

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

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

vgkarthi 0 Newbie Poster

Good for begginers

F-3000 0 Newbie Poster

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.

MidiMagic 579 Nearly a Senior Poster

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

F-3000 commented: A point I should have mentioned in my reply. +0
dados 0 Newbie Poster

huhhh.. then is not secure...

jtutuncumacias 0 Newbie Poster

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?

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster

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.

iConqueror commented: agreed +0
Andrew_5 0 Newbie Poster

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.

topdude155 0 Newbie Poster
<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>
harpriya.gill.7 0 Newbie Poster

thnx... i felt it really helpful as m jus a beginner

Sud4U 0 Newbie Poster

suppose if we have a login screen on domain.com and we redirect the page to domain.com/dashboard after login. Here domain.com/dashboard can still be accessed if the visitor puts that in browser directly.
Any solution for that.
Further the password would be still visible from the source code.

almostbob 866 Retired: passive income ROCKS

Sud, the op is long gone, its three years old

the code, was garbage then, is garbage now

Clientside is not where login is managed,
thats a server function

every blog or cms includes user management, from wordpress up down and sideways, to custom written applications

JorgeM commented: garbage is exactly what i was thinking. This example shouldnt even be used for testing purposes. People...do not create login forms with a javascript authentication scheme. No! +12
scrat@1 -3 Newbie Poster

how can i add email in place of username ????

diafol commented: read the posts -3
mattster 195 Practically a Master Poster Featured Poster

^ Read what they are saying: this is garbage, start looking at a server-side language.

satish.muktawar -3 Newbie Poster

heir am tring to write username and password but still it is not accepting why?

diafol commented: read the posts -3
james sipha -12 Newbie Poster

help me to create a page that compare login username and the password values
and allow access if the username and the password matches

diafol commented: read the posts -3
piers 8 Junior Poster in Training

Could you imagine how quick that code would be to hack? I think for anyone interested in doing a secure login pop over to the php forum and ask about setting up sha-256 or gnupg encryption for sending login information to a database. It isn't exactly beginner stuff but definitely secure.

Member Avatar for diafol
diafol

Let's kill this thread. Please. The OP provided a very very bad piece of code that nobody in their right mind would contemplate using. This is not the thread to start providing new solutions ("login page using javascript") as they would be just as mad. If you want a login script search the server-side language forum of your choice (Java, PHP, ASP etc etc).

The next person that resurrects this thread without due reason will receive a neg rep because they failed to read the preceeding posts. Replying here will just float this useless thread to the top of the forum's latest thread list.
Just think...

Harmeet_1 -3 Newbie Poster

suppose if we have a login screen on domain.com and we redirect the page to domain.com/dashboard after login. Here domain.com/dashboard can still be accessed if the visitor puts that in browser directly.
Any solution for that.
Further the password would be still visible from the source code.

Can i get a solution for this asap....

diafol commented: Read the thread. -3
Jean_6 -4 Newbie Poster

Wow, thank you so much for making this so understandable and simple.

diafol commented: Read the thread -3
mattster commented: GROW A BRAIN. -1
AlvinV 0 Newbie Poster

Can i place this in a .js ?

DistantGalaxy 15 Newbie Poster

Not advisable. Did you read the thread?

asma.fayaz.77 -1 Newbie Poster

Have can the top code be extended for more than one username and password?

gentlemedia commented: read the post -1
satya keerthi 0 Newbie Poster

can any one pls tell me code that all the user names and passwords are maitained in a database instead of javascript..........
and whenever we enter a username it acces database and checks for validaion..
plz reply me.

Zayne commented: js can be used for this if only its used in electron its a bit more safe +0
gentlemedia 803 Master Poster

OMG... can someone please kill this thread??? :)

cereal commented: I would pay to see it closed +14
rproffitt commented: Wish threads would lock up as they age. +10
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.