英文:
How to get default text input value from one HTML to other HTML form
问题
我正在进行基本的登录。在一个HTML文件中，我有用户输入电子邮件ID文本框，一旦点击发送OTP按钮，将重定向到下一个HTML页面，其中包含电子邮件和OTP字段。在电子邮件字段中，用户在第一个HTML页面中输入的内容应自动填入第二个HTML电子邮件输入字段文本框中。
以下是我的第一个HTML页面：
<!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>
和我的重定向（第二个HTML页面）：
<!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>
我是HTML新手。
英文:
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.
答案1
得分: 0
以下是翻译好的部分：
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, add this:
<script>
window.onload = () => {
document.getElementById("mail").value = localStorage.getItem("mail");
}
</script>
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论