Please help with code for simple password field

**Nicole107** · 01-08-2017, 07:48 PM

Hi all,

I'm obviously not an expert. Can anyone please help me with html code to make a simple password field? I need it to redirect to one page if the password is correct and also redirect to a different page if the password is incorrect.

It doesn't have to be a very secure login. It's for a simple website form to submit an answer that is either right or wrong.

The following code is what I've been playing with and the redirect for the false password doesn't work. Also, it's a button with a popup prompt and I would actually prefer a text field to submit on keying enter.

If anyone can help me with either problem, I would so appreciate any help.

Code:

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function LogIn(){
password="mypassword";
password=prompt("Enter password:","");
password=password.toLowerCase();
if (password=="mypassword") { 
loggedin=true;
window.location="http://MyURLredirectRightPWD.html";
}
if (password==false) {
loggedin=false;
window.location="http://MyURLredirectWrongPWD.html";
}
}
</SCRIPT> 
<BODY>
<center>
<form><input type=button value="Enter Password" onClick="LogIn()"></form>
</center>
</body>
</html>

**coothead** · 01-09-2017, 12:01 AM

Hi there Nicole107,

and a warm welcome to these forums.

Bearing in mind that this a fun rather than a real secure login, try this...

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    text-align: center;
 }
#login {
    display: inline-block;
    padding: 1em;
    border: 0.06em solid #999;
    border-radius: 0.5em;
    background-color: #fff;
    box-shadow: inset 0 0 1em #999, 0.3em 0.3em 0.3em #999;   
 }
</style>

</head>
<body>

<form id="login" action="http://www.coothead.co.uk/images/"><!--this is for an incorrect password, or for those with JavaScript disabled -->
 <label for="pswd">Enter Password: </label>
 <input id="pswd" type="password" name="password">
 <input id="sbmt" type="submit" value="log in">
</form>

<script>
(function() {
   'use strict';
   document.getElementById('sbmt').addEventListener('click',
function(){
   if(document.getElementById('pswd').value.toLowerCase()==='mypassword'){
      document.getElementById('login').action='http://www.dynamicdrive.com/forums/'; /* this is for a correct password */
    }},false);
}());
</script>

</body>
</html>

coothead