I am trying to create a login page like facebook. Used html and javascript I managed to create login page with predefined username and password.If you type correct password then it will redirect to a new page. But if you type wrong password or username then it will show error message on the side of textbox like real facebook
my code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fakebook -Login</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="login">
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> Facebook </div>
<br>
<br>
<br>
<br>
<div class="loginbox radius">
<h2 style="color:#141823; text-align:center;">Log in to Facebook</h2>
<div class="loginboxinner radius">
<div class="loginheader">
</div>
<div class="loginform">
<form id="login" action="" method="post">
<p>
<input type="text" id="username" name="username" placeholder="Your Email" value="" class="radius" />
</p>
<p>
<input type="password" id="password" name="password" placeholder="Password" class="radius" />
</p>
<p>
<button class="radius title" onclick="check(this.form)" name="client_login">Log In</button>
</p>
<script language="javascript">
function check(form)
{
if(form.username.value == "rohit" && form.password.value == "password")
{
window.open('target.html')
}
else
{
document.getElementById("username").innerHTML = "wrong username"
}
}
</script>
<br>
<br>
forgot your password?</label></td>
| sign up for facebook</label></td>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the facebook error message
Related
I'm doing basic login. In one HTML file I have user input email id text box, once click on send otp button that will redirect to next HTML with email and otp fields. In email field what ever user gives input in first HTML page that should automatically get into second HTML email input field text box.
Here is my first HTML page
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Employee Login </title>
<link rel="stylesheet" href="{% static 'style.css' %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<center>
<h1> </h1>
<h2> </h2>
<h3> Employee Feedback Login</h3>
</center>
<div class="wrapper">
<div class="title-text">
<div class="title login">
Login
</div>
</div>
<div class="form-container">
<div class="form-inner">
<form action="" method="post" class="login">
{% csrf_token %}
<div class="field">
<input id = "Employee_Mail" type="text" placeholder="Email Address" name="Employee_Mail" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Send OTP" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
and my redirect (second HTML page):
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Employee Login </title>
<link rel="stylesheet" href="{% static 'style.css' %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<center>
<h1></h1>
<h2> </h2>
<h3> Employee Feedback Login</h3>
</center>
<div class="wrapper">
<div class="title-text">
<div class="title login">
Login
</div>
</div>
<div class="form-container">
<div class="form-inner">
<form action="validate/" method="post" class="Validate OTP">
{% csrf_token %}
<div class="field">
<input type="text" id= "mail" placeholder="Email Address" name="Employee_Mail" required>
</div>
<div class="field">
<input type="text" placeholder="Otp" name="otp" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Validate otp">
</div>
</form>
<script>
</script>
</div>
</div>
</div>
</body>
</html>
I'm new to HTML.
You can achieve several ways. you can do using front end side and also server side.
So, i am giving you in client side.
In client side have also many ways to achieve this (local storage,session storage, query params etc).
In First html page you can save email in local storage using javascript.
`
<script>
const form = document.getElementById('form');
const loginSubmit = (e) => {
const email = document.getElementById("Employee_Mail").value
localStorage.setItem('email', email)
}
form.addEventListener('submit', loginSubmit);
</script>`
In Second HTML page in add this
<script>
window.onload = () => {
document.getElementById("mail").value = localStorage.getItem("mail");
}
</script>
I create a form which allows to view the form information in a
different page for the user to view using "view" button and I want
a "edit" button to edit the same details of the form by redirecting
to the previous page. I tried using window.history.back(); it didn't
work.
html file Index.html - the form
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<form action="result.html" method="GET">
<h1>Send us an Enquiry?</h1>
<h3>Fill in the Details Below</h3>
<input type="text" id="name" name="name" placeholder="Enter Name" />
<input type="text" id="email" name="email" placeholder="Enter Email" />
<select name="subject" id="subject" value="Subject">Subject
<option value="Destinations">Destinations</option>
<option value="Pricing">Pricing</option>
<option value="Accommodation">Accommodation</option>
<option value="Other">Other</option>
</select>
<textarea id="details" name="details" placeholder="Enter Details"></textarea>
<input type="submit" class="btn" value="View" onclick="handleSubmit()" />
</form>
</div>
</body>
</html>
The page view the form details result.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="result.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<h1>
Form Details
</h1>
<h2>
Name: <span id="result-name" />
</h2>
<h2>Email: <span id="result-email" />
</h2>
<h2>
Subject: <span id="result-subject" />
</h2>
<h2>Details: <span id="result-details" />
</h2>
<div class="action-btn">
<div class="inner">
<form action="" method="GET">
<input class="btn" type="submit" value="Edit" onclick="returnBack()" />
</div>
</form>
<div class="inner">
<form onsubmit="sendEmail(); reset(); return false;">
<input class="btn-1" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The javascript file result.js
//call function using event listener
window.addEventListener('load',() => {
//create a const variable
const params = (new URL(document.location)).searchParams;
const name = params.get('name');
const email = params.get('email');
const subject = params.get('subject');
const details = params.get('details');
document.getElementById("result-name").innerHTML = name;
document.getElementById("result-email").innerHTML = email;
document.getElementById("result-subject").innerHTML = subject;
document.getElementById("result-details").innerHTML = details;
})
function returnBack(){
window.history.back();
}
I think the type="submit" in tag input is the problem. You should remove it and try again.
I created a login to my site. That you need to enter username and password:
All is working fine. But the problem is when i write in Hebrew (without clicking the login button) it immediately send an error.
Fiddle:
https://jsfiddle.net/L8ynedar/2/
HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<section class="container" id="overlay">
<div class="login" id="overlay">
<h1>Barometer Login</h1>
<form method="post" >
<p>
<input type="text" name="username" id="username" value="" placeholder="Username" required="required" >
</p>
<p>
<input type="password" name="password" id="password" value="" placeholder="Password" required="required" >
</p>
<p class="remember_me"> </p>
<p class="submit">
<input class="btn btn-primary" style="background-color:purple;" onClick="SignInFunction(this.value)" name="commit" value="Login">
</p>
</form>
</div>
</section>
JS Code:
function SignInFunction(val){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username=="Anna" && password=="123"){
document.getElementById("AftetLogin").style.display = "block";
document.getElementById("overlay").style.display = "none";
}
}
After a lot of debugging. I found that, no matter where i am writing in Hebrew There is a alert bug of javascript.
I have code like this:
...
header("Location: private.php");
die("Redirecting to: private.php");
}
else
{
print("Login Failed."); >>I WANT MOVE THIS IN DIV TAG<<
....
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header-main">Main Menu</div>
<div id="header"></div>
<div id="content">
<div class="table">
<div class="tr">
<div id="member" class="td" align="center">
<span class="member">Data</span>
</div>
<div class="vr"> </div>
<div id="login" class="td">
<div class="login-error"> **>>> HERE ERROR MESSAGE <<<** </div>
<div class="login-title">LogIn</div>
<form action="login.php" method="post">
<input type="text" name="username" value="<?php echo $submitted_username; ?>" placeholder="Username" autofocus/>
<br /><br />
<input type="password" name="password" value="" placeholder="Password"/>
<br /><br />
<input type="submit" value="Login" />
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
how can i fix this?
$errorMessage = null;
else{ ...
$errorMessage = "Login Failed.";
....
in html >>>
<?php if(!empty($errorMessage)) ?>
<div class="login-error"><?php echo $errorMessage;?></div>
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.