HTML Username and Password

73,878

37

16

Published

Introduction: HTML Username and Password

About: I like coding.

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...

Share

    Recommendations

    • Clocks Contest

      Clocks Contest
    • Creative Misuse Contest

      Creative Misuse Contest
    • Water Contest

      Water Contest

    16 Discussions

    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".

    Save it in notepad or another text editor (I prefer Notepad++) and save it ans an html document, the file extension is .html or .htm

    If you view the page source before attempting a login you can read the login and password credentials in plain text. Doesn't seem too secure to me.

    How do I get it to let me have multiple destinations, if that is even possible?

    0
    user
    s_mile

    11 months ago

    Is it possible to encrypt using HTML? is encrypt="sha1" valid?

    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>

    How do you add multiple usernames and passwords?

    4 replies

    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; }

    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?

    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>

    nice it worked supremely

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

    i'll show this to all my friends

    1 reply