英文:
How do i make a login form redirect
问题
我是新手网页开发者，我创建了一个带有用户名和密码的登录表单，但我不知道如何在用户名和密码正确时将其重定向到新的HTML文件，就像这样：window.location="welcome.html"；有人可以帮忙吗？
HTML：对于这个，我确实使用了教程，但它没有告诉我如何设置用户名和密码系统。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="container">
<div class="curved-shape"></div>
<div class="form-box Login">
<h2>Login</h2>
<form action="#" method="post" id="login-form">
<div class="input-box">
<input type="text" id="username" name="username">
<label for="username">Username</label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="password" id="password" name="password">
<label for="password">Password</label>
<i class='bx bxs-lock-alt'></i>
</div>
<div class="input-box">
<button class="btn" type="submit">Login</button>
</div>
</form>
</div>
<div class="info-content Login">
<h2>WELCOME BACK!</h2>
<p>This is a site developed by Zechariah Echols!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS：
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: #fff;
}
/* ... （CSS的其余部分） */
我期望当用户名为“pugls”且密码为“PugWareX”时，它会将您重定向到一个新的HTML窗口。
英文:
Guys im new to web development and i made a login form with a username and a password but i dont know how to get it so when the password and the username are correct it takes u to a new html file like this window.location="welcome.html"; can somebody help.
Html: for this i did use a tutorial ik but it doesnt tell u how to setup the username and password system
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="container">
<div class="curved-shape"></div>
<div class="form-box Login">
<h2>Login</h2>
<form action="#">
<div class="input-box">
<input type="text">
<label for="">Username</label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="text" id="pswd">
<label for="">Password</label>
<i class='bx bxs-lock-alt'></i>
</div>
<div class="input-box">
<button class="btn" type="submit">Login</button>
</div>
</form>
</div>
<div class="info-content Login">
<h2>WELCOME BACK!</h2>
<p>This is a site developed by Zechariah Echols!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: #fff;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #25252b;
}
.container{
position: relative;
width: 750px;
height: 450px;
border: 2px solid #ff2770;
box-shadow: 0 0 25px #ff2770;
overflow: hidden;
}
.container .form-box{
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.form-box.Login{
left: 0%;
padding: 0 40px;
}
.form-box h2{
position: relative;
text-allign: center;
}
.form-box .input-box{
position: relative;
width: 100%;
height: 50px;
margin-top: 25px;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
font-weight: 600;
border-bottom: 2px solid #fff;
padding-right: 23px;
transition: .5s;
}
.input-box input:focus,
.input-box input:focus{
border-bottom: 2px solid #ff2770;
}
.input-box label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
transition: .5s;
}
.input-box input:focus ~ label,
.input-box input:focus ~ label{
top: -5px;
color: #ff2770;
}
.input-box i{
position: absolute;
top: 50%;
right: 0;
font-size: 18px;
transform: translateY(-50%);
transition: .5s;
}
.input-box input:focus ~ i,
.input-box input:focus ~ i{
top: -5px;
color: #ff2770;
}
.btn{
position: relative;
width: 100%;
height: 45px;
background: transparent;
border-radius: 40px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
border: 2px solid #ff2770;
overflow: hidden;
z-index: 1;
}
.btn::before{
content: "";
position: absolute;
height: 300%;
width: 100%;
background: linear-gradient(#25252b, #ff2770, #25252b, #ff2770);
top: -100%;
left: 0;
z-index: -1;
transition: .5s;
}
.btn:hover:before{
top: 0;
}
.info-content{
position: absolute;
top: 0;
height: 100%;
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
}
.info-content.Login{
right: 0;
text-align: right;
padding: 0 40px 60px 150px;
}
.info-content h2{
text-transform: uppercase;
font-size: 36px;
line-height: 1.3;
}
.info-content p{
font-size: 16px;
}
.container .curved-shape{
position: absolute;
right: 0;
top: -5px;
height: 600px;
width: 850px;
background: linear-gradient(45deg,#25252b,#ff2770);
transform: rotate(10deg) skewY(40deg);
transform-origin: bottom right;
}
I’m expecting it to take u to a new html window when the username is pugls and the password is PugWareX
答案1
得分: 0
以下是翻译好的部分：
首先，在您的 script.js 文件中进行以下更改：
首先，为了通过 JavaScript 轻松访问，给您的输入字段添加 id 属性：
<input type="text" id="usernameInput">
<input type="password" id="passwordInput">
然后，更新您的 JavaScript（script.js）以包括检查凭据和重定向的逻辑：
// 选择登录表单
const loginForm = document.querySelector('.form-box.Login form');
// 向表单添加提交事件监听器
loginForm.addEventListener('submit', function(event) {
event.preventDefault(); // 防止表单正常提交
// 从输入字段获取值
const username = document.getElementById('usernameInput').value;
const password = document.getElementById('passwordInput').value;
// 检查凭据是否正确
if (username === 'pugls' && password === 'PugWareX') {
// 重定向到欢迎页面
window.location.href = 'welcome.html';
} else {
alert('用户名或密码不正确，请重试。');
}
});
请注意，代码部分没有进行翻译，只提供了 HTML 和 JavaScript 代码的翻译。
英文:
You can modify your script.js file with the following changes:
First, give your inputs an id attribute for easy access through JavaScript:
<input type="text" id="usernameInput">
<input type="password" id="passwordInput">
Update your JavaScript (script.js) to include the logic for checking the credentials and redirecting:
// Select the login form
const loginForm = document.querySelector('.form-box.Login form');
// Add a submit event listener to the form
loginForm.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting normally
// Get the values from the input fields
const username = document.getElementById('usernameInput').value;
const password = document.getElementById('passwordInput').value;
// Check if the credentials are correct
if (username === 'pugls' && password === 'PugWareX') {
// Redirect to the welcome page
window.location.href = 'welcome.html';
} else {
alert('Incorrect username or password. Please try again.');
}
});
答案2
得分: -1
以下是您提供的代码的翻译：
const form = document.getElementById("myForm");
form.addEventListener("submit", handleSubmit);
function handleSubmit(event) {
event.preventDefault();
login();
}
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("pswd").value;
const labelElement = document.getElementById("erroe-msg");
if (username == "admin" && password == "1234") {
alert("1");
window.location = "welcome.html";
} else {
alert("2");
labelElement.textContent = "无效的用户名或密码";
}
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: #fff;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #25252b;
}
.container{
position: relative;
width: 750px;
height: 450px;
border: 2px solid #ff2770;
box-shadow: 0 0 25px #ff2770;
overflow: hidden;
}
.container .form-box{
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.form-box.Login{
left: 0%;
padding: 0 40px;
}
.form-box h2{
position: relative;
text-allign: center;
}
.form-box .input-box{
position: relative;
width: 100%;
height: 50px;
margin-top: 25px;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
font-weight: 600;
border-bottom: 2px solid #fff;
padding-right: 23px;
transition: .5s;
}
.input-box input:focus,
.input-box input:focus{
border-bottom: 2px solid #ff2770;
}
.input-box label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
transition: .5s;
}
.input-box input:focus ~ label,
.input-box input:focus ~ label{
top: -5px;
color: #ff2770;
}
.input-box i{
position: absolute;
top: 50%;
right: 0;
font-size: 18px;
transform: translateY(-50%);
transition: .5s;
}
.input-box input:focus ~ i,
.input-box input:focus ~ i{
top: -5px;
color: #ff2770;
}
.btn{
position: relative;
width: 100%;
height: 45px;
background: transparent;
border-radius: 40px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
border: 2px solid #ff2770;
overflow: hidden;
z-index: 1;
}
.btn::before{
content: "";
position: absolute;
height: 300%;
width: 100%;
background: linear-gradient(#25252b, #ff2770, #25252b, #ff2770);
top: -100%;
left: 0;
z-index: -1;
transition: .5s;
}
.btn:hover:before{
top: 0;
}
.info-content{
position: absolute;
top: 0;
height: 100%;
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
}
.info-content.Login{
right: 0;
text-align: right;
padding: 0 40px 60px 150px;
}
.info-content h2{
text-transform: uppercase;
font-size: 36px;
line-height: 1.3;
}
.info-content p{
font-size: 16px;
}
.container .curved-shape{
position: absolute;
right: 0;
top: -5px;
height: 600px;
width: 850px;
background: linear-gradient(45deg,#25252b,#ff2770);
transform: rotate(10deg) skewY(40deg);
transform-origin: bottom right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="container">
<div class="curved-shape"></div>
<div class="form-box Login">
<h2>登录</h2>
<form id="myForm">
<div class="input-box">
<input type="text" id="username">
<label for=""></label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="text" id="pswd">
<label for=""></label>
<i class='bx bxs-lock-alt'></i>
</div>
<div class="input-box">
<button class="btn" type="submit">登录</button>
</div>
</form>
<label id="erroe-msg"></label>
</div>
<div class="info-content Login">
<h2>欢迎回来！</h2>
<p>这是由Arunachalam开发的网站！</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
希望这可以帮助您！如果您有任何其他问题，请随时提问。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const form = document.getElementById("myForm");
form.addEventListener("submit", handleSubmit);
function handleSubmit(event) {
event.preventDefault();
login();
}
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("pswd").value;
const labelElement = document.getElementById("erroe-msg");
if (username == "admin" && password == "1234") {
alert("1");
window.location = "welcome.html";
} else {
alert("2");
labelElement.textContent = "Invalid username or password";
}
}
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: #fff;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #25252b;
}
.container{
position: relative;
width: 750px;
height: 450px;
border: 2px solid #ff2770;
box-shadow: 0 0 25px #ff2770;
overflow: hidden;
}
.container .form-box{
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.form-box.Login{
left: 0%;
padding: 0 40px;
}
.form-box h2{
position: relative;
text-allign: center;
}
.form-box .input-box{
position: relative;
width: 100%;
height: 50px;
margin-top: 25px;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
font-weight: 600;
border-bottom: 2px solid #fff;
padding-right: 23px;
transition: .5s;
}
.input-box input:focus,
.input-box input:focus{
border-bottom: 2px solid #ff2770;
}
.input-box label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
transition: .5s;
}
.input-box input:focus ~ label,
.input-box input:focus ~ label{
top: -5px;
color: #ff2770;
}
.input-box i{
position: absolute;
top: 50%;
right: 0;
font-size: 18px;
transform: translateY(-50%);
transition: .5s;
}
.input-box input:focus ~ i,
.input-box input:focus ~ i{
top: -5px;
color: #ff2770;
}
.btn{
position: relative;
width: 100%;
height: 45px;
background: transparent;
border-radius: 40px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
border: 2px solid #ff2770;
overflow: hidden;
z-index: 1;
}
.btn::before{
content: "";
position: absolute;
height: 300%;
width: 100%;
background: linear-gradient(#25252b, #ff2770, #25252b, #ff2770);
top: -100%;
left: 0;
z-index: -1;
transition: .5s;
}
.btn:hover:before{
top: 0;
}
.info-content{
position: absolute;
top: 0;
height: 100%;
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
}
.info-content.Login{
right: 0;
text-align: right;
padding: 0 40px 60px 150px;
}
.info-content h2{
text-transform: uppercase;
font-size: 36px;
line-height: 1.3;
}
.info-content p{
font-size: 16px;
}
.container .curved-shape{
position: absolute;
right: 0;
top: -5px;
height: 600px;
width: 850px;
background: linear-gradient(45deg,#25252b,#ff2770);
transform: rotate(10deg) skewY(40deg);
transform-origin: bottom right;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="container">
<div class="curved-shape"></div>
<div class="form-box Login">
<h2>Login</h2>
<form id="myForm">
<div class="input-box">
<input type="text" id="username">
<label for="">Username</label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="text" id="pswd">
<label for="">Password</label>
<i class='bx bxs-lock-alt'></i>
</div>
<div class="input-box">
<button class="btn" type="submit">Login</button>
</div>
</form>
<label id="erroe-msg"></label>
</div>
<div class="info-content Login">
<h2>WELCOME BACK!</h2>
<p>This is a site developed by Arunachalam!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论