Introduction: HTML Username and Password

This instructable is about how to make a username(s) with a password for a sign in form. (or really for whatever you want to do with it).

What you need:

Simple typing program (Notepad is preferred)

A computer

A brain

That's it!

Step 1: The Code:

<html>

<head>

<script>

function Login(form) { username = new Array("username goes here"); password = new Array("password goes here"); page = "Name of html file to open when you push log in goes here" + ".html"; if (form.username.value == username[0] && form.password.value == password[0] || form.username.value == username[1] && form.password.value == password[1] ||

form.username.value == username[2] && form.password.value == password[2] || form.username.value == username[3] && form.password.value == password[3] ||

form.username.value == username[4] && form.password.value == password[4] || form.username.value == username[5] && form.password.value == password[5] ||

form.username.value == username[6] && form.password.value == password[6] || form.username.value == username[7] && form.password.value == password[7] ||

form.username.value == username[8] && form.password.value == password[8] || form.username.value == username[9] && form.password.value == password[9]) { self.location.href = page; } else { alert("Either the username or password you entered is incorrect.\nPlease try again."); form.username.focus(); } return true; }

</script> </head> <body bgcolor="#eeeeee"> <form> <br> <center> <h5>Username: <input type="text" name="username" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';"

onBlur="this.style.background = '#bfbfbf';"> <br> Password: <input type="password" name="password" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';"

onBlur="this.style.background = '#bfbfbf';"> <br> <input type="button" value="Login" onClick="Login(this.form);" style="background:#bfbfbf;color:#000000;border-color:#212121;" onMouseOver="this.style.color =

'#404040';" onMouseOut="this.style.color = '#000000';" onFocusr="this.style.color = '#404040';" onBlur="this.style.color = '#000000';"></h5> </center> </form> </body> </html>

Step 2: The Outcome

Try it! The username is "instructables", and the password is gogoguy. When you push "login", it should take you to google.com.

http://drive-html-viewer.pansy.at/?state=%7B%22ids...

Comments

author
gogoguy made it! (author)2014-10-06

to open the link, right click it and then push "go to http://drive-html-viewer.pansy.at/?state=%7B%22ids%22:%5B%220B1QDlKbOmLfiSGZnQUx2cmRfSTA%22%5D,%22action%22:%22open%22,%22userId%22:%22111715455346247284542%22%7D" when you do that, and log in, it might not work because i'm using google drive to host the link. but don't worry, all you have to do is copy and paste the code into notepad, and then save it as "whatever.html".

author
JaydenCliffeFarmer made it! (author)2017-07-16

Hey im using this in a HTML and it only works up to u10 and p10 What have i done wrong and how do i fix it????

<head>

<script>

function Login(form) { username = new Array("Jayden","Michael","u3","u4","u5","u6","u7","u8","u9","u10",”u11”,”u12”,”u13”,”u14”,”u15”,”u16”,”u17”,”u18”); password = new Array("123456","123456","p3","p4","p5","p6","p7","p8","p9","p10",”p11”,”p12”,”p13”,”p14”,”p15”,”p16”,”p17”,”p18”); page = "www.currumbinavenuechristmaslights.com" + ".html"; if (form.username.value == username[0] && form.password.value == password[0] || form.username.value == username[1] && form.password.value == password[1] ||

form.username.value == username[2] && form.password.value == password[2] || form.username.value == username[3] && form.password.value == password[3] ||

form.username.value == username[4] && form.password.value == password[4] || form.username.value == username[5] && form.password.value == password[5] ||

form.username.value == username[6] && form.password.value == password[6] || form.username.value == username[7] && form.password.value == password[7] ||

form.username.value == username[8] && form.password.value == password[8] || (form.username.value == username[9] && form.password.value == password[9] || form.username.value == username[10] && form.password.value == password[10] ||

form.username.value == username[11] && form.password.value == password[11] || form.username.value == username[12] && form.password.value == password[12] ||

form.username.value == username[13] && form.password.value == password[13] || form.username.value == username[14] && form.password.value == password[14] ||

form.username.value == username[15] && form.password.value == password[15] || form.username.value == username[16] && form.password.value == password[16] ||

form.username.value == username[17] && form.password.value == password[17] || form.username.value == username[18] && form.password.value == password[18]) { self.location.href = page; } else { alert("Either the username or password you entered is incorrect.\nPlease try again."); form.username.focus(); } return true; }

</script> </head> <body bgcolor="#eeeeee"> <form> <br> <center> <h5>Username: <input type="text" name="username" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';"

onBlur="this.style.background = '#bfbfbf';"> <br> Password: <input type="password" name="password" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';"

onBlur="this.style.background = '#bfbfbf';"> <br> <input type="button" value="Login" onClick="Login(this.form);" style="background:#bfbfbf;color:#000000;border-color:#212121;" onMouseOver="this.style.color =

'#404040';" onMouseOut="this.style.color = '#000000';" onFocusr="this.style.color = '#404040';" onBlur="this.style.color = '#000000';"></h5> </center> </form> </body> </html>

author
CodyD32 made it! (author)2017-03-02

what do u save it as?

author
1850224 made it! (author)2016-04-13

How do you add multiple usernames and passwords?

author
JamesG320 made it! (author)JamesG3202016-10-27

Re copy and paste the last function

function Login(form) { username = new Array("1"); password = new Array("2"); page = "Name of html file to open when you push log in goes here" + ".html"; if (form.username.value == username[0] && form.password.value == password[0] || form.username.value == username[1] && form.password.value == password[1] ||

form.username.value == username[2] && form.password.value == password[2] || form.username.value == username[3] && form.password.value == password[3] ||

form.username.value == username[4] && form.password.value == password[4] || form.username.value == username[5] && form.password.value == password[5] ||

form.username.value == username[6] && form.password.value == password[6] || form.username.value == username[7] && form.password.value == password[7] ||

form.username.value == username[8] && form.password.value == password[8] || form.username.value == username[9] && form.password.value == password[9]) { self.location.href = page; } else { alert("Either the username or password you entered is incorrect.\nPlease try again."); form.username.focus(); } return true; }

function Login(form) { username = new Array("3"); password = new Array("4"); page = "Name of html file to open when you push log in goes here" + ".html"; if (form.username.value == username[0] && form.password.value == password[0] || form.username.value == username[1] && form.password.value == password[1] ||

form.username.value == username[2] && form.password.value == password[2] || form.username.value == username[3] && form.password.value == password[3] ||

form.username.value == username[4] && form.password.value == password[4] || form.username.value == username[5] && form.password.value == password[5] ||

form.username.value == username[6] && form.password.value == password[6] || form.username.value == username[7] && form.password.value == password[7] ||

form.username.value == username[8] && form.password.value == password[8] || form.username.value == username[9] && form.password.value == password[9]) { self.location.href = page; } else { alert("Either the username or password you entered is incorrect.\nPlease try again."); form.username.focus(); } return true; }

author
Dalton2218 made it! (author)Dalton22182017-01-21

Now when I tried to use another user it wouldn't let me sign into both it would only let me sign into the bottom one. What would I do to be able to use all of them?

author
JamesG320 made it! (author)JamesG3202017-01-23

Can I see your code.

author
Dalton2218 made it! (author)Dalton22182017-01-29

Never mind I figured it out, but thank you. Also I had to change some of the coding.

Bolded what I had to do for it to work.

<html>

<head>

<script>

function Login(form) { username = new Array("u1","u2","u3"); password = new Array("p1","p2","p3"); page = "Name of html file to open when you push log in goes here" + ".html"; if (form.username.value == username[0] && form.password.value == password[0] || form.username.value == username[1] && form.password.value == password[1] ||

form.username.value == username[2] && form.password.value == password[2] || form.username.value == username[3] && form.password.value == password[3] ||

form.username.value == username[4] && form.password.value == password[4] || form.username.value == username[5] && form.password.value == password[5] ||

form.username.value == username[6] && form.password.value == password[6] || form.username.value == username[7] && form.password.value == password[7] ||

form.username.value == username[8] && form.password.value == password[8] || form.username.value == username[9] && form.password.value == password[9]) { self.location.href = page; } else { alert("Either the username or password you entered is incorrect.\nPlease try again."); form.username.focus(); } return true; }

</script> </head> <body bgcolor="#eeeeee"> <form> <br> <center> <h5>Username: <input type="text" name="username" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';"

onBlur="this.style.background = '#bfbfbf';"> <br> Password: <input type="password" name="password" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';"

onBlur="this.style.background = '#bfbfbf';"> <br> <input type="button" value="Login" onClick="Login(this.form);" style="background:#bfbfbf;color:#000000;border-color:#212121;" onMouseOver="this.style.color =

'#404040';" onMouseOut="this.style.color = '#000000';" onFocusr="this.style.color = '#404040';" onBlur="this.style.color = '#000000';"></h5> </center> </form> </body> </html>

author
SankethG made it! (author)2015-09-03

nice it worked supremely

i am a student of grade 8 studying in indian school dsm

i'll show this to all my friends

author
gogoguy made it! (author)gogoguy2015-10-25

Good!

author
yousefa3 made it! (author)2015-06-27

author
MsSweetSatisfaction made it! (author)2014-10-06

Hmmm interesting. Thanks for sharing!

author
gogoguy made it! (author)gogoguy2014-10-06

You're welcome! did it work?

About This Instructable

55,734views

37favorites

License:

Bio: I like coding.
More by gogoguy:The Bubbles of AwesomenessSweet Child o' Mine - SoloSweet Child of Mine
Add instructable to: