HTML Username and Password

98,988

39

23

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

Tech Contest

Participated in the
Tech Contest

DIY University Contest

Participated in the
DIY University Contest

Be the First to Share

    Recommendations

    • Puzzles Speed Challenge

      Puzzles Speed Challenge
    • "Can't Touch This" Family Contest

      "Can't Touch This" Family Contest
    • CNC Contest 2020

      CNC Contest 2020

    23 Discussions

    1
    gogoguy
    gogoguy

    5 years ago on Introduction

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

    0
    mrek556
    mrek556

    Reply 12 months ago

    not what i asked

    0
    hcps-wassermah
    hcps-wassermah

    Question 6 weeks ago

    When I did this and pasted it in a coding browser, when I clicked the link it said that my link refused to respond. Do you know if this was a problem with the code or with my wifi?

    0
    mrek556
    mrek556

    Question 12 months ago

    how do i change the password username and where it takes you

    0
    hcps-wassermah
    hcps-wassermah

    Answer 6 weeks ago

    You change where it has the quotation marks at the top and the parentheses around it to what you want.

    0
    ben.c.allen99
    ben.c.allen99

    1 year ago

    To anyone considering this as a solution for a production website:
    This is NOT secure! Do not do it! If you are looking for educational reasons here is education for you: This does not protect the page you "login" to access, you can browse that page without authenticating. Client side credentials are never a good solution. The server should always handle logins.
    Just don't do this please.

    0
    gogoguy
    gogoguy

    Reply 2 months ago

    Haha, I'm coming back here six years later, as a 17 year old, and am laughing at myself for making this. You are absolutely correct, client side authentication should never ever be used; it's ridiculously simple to bypass.

    0
    1850224
    1850224

    4 years ago

    How do you add multiple usernames and passwords?

    0
    ryharpe18
    ryharpe18

    Reply 1 year ago

    on this line of code { username = new Array("username goes here"); and this line password = new Array("password here"); do this { username = new Array("mike","steve","bob"); password = new Array("iscool","ha","atlantia"); add more speech marks and comas in between

    0
    JamesG320
    JamesG320

    Reply 3 years ago

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

    0
    Dalton2218
    Dalton2218

    Reply 3 years ago

    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?

    0
    JamesG320
    JamesG320

    Reply 3 years ago

    Can I see your code.

    0
    Dalton2218
    Dalton2218

    Reply 3 years ago

    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>

    0
    CodyD32
    CodyD32

    3 years ago

    what do u save it as?

    0
    superspyn
    superspyn

    Reply 2 years ago

    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

    0
    wallymoto
    wallymoto

    2 years ago

    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.

    0
    SimonC78
    SimonC78

    2 years ago

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

    0
    s_mile
    s_mile

    3 years ago

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

    0
    JaydenCliffeFarmer
    JaydenCliffeFarmer

    3 years ago

    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>

    0
    SankethG
    SankethG

    4 years ago on Introduction

    nice it worked supremely

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

    i'll show this to all my friends