在密码字段上方的下一页中显示输入的电子邮件

Question

我正在创建一个登录系统。我希望用户输入电子邮件，然后单击下一步。然后用户将被重定向到密码输入页面。我想将用户输入的电子邮件放在密码字段上方。

有人知道怎么做吗？

Answer 1

您可以使用表单来做到这一点，但实际上我们尽量不再使用表单。更现代的方法是使用 localStorage.

此外，您不能仅使用 HTML 和 CSS 来完成此操作。您还需要使用 javascript。

这是它可能如何工作的示例。

第一页：

<label for="emlInput">Email: </label>
<input type="email" id="emlInput" />
<button id="btnNext">Next</button>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const btnNext = document.getElementById('btnNext');
        btnNext.addEventListener("click", advancePage, false);
    });

    function advancePage() {
        const elEml = document.getElementById('emlInput');
        localStorage.setItem('eml', elEml.value);
        window.location.href = "t2.html";
    }
</script>

第 2 页

<div>
    <h2>Password For: <span id="emlSpan"></span></h2>
</div>
<label for="pwd">Password: </label>
<input type="password" id="pwd" />

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ls = localStorage.getItem('eml');
        const eml = document.getElementById('emlSpan');
        eml.innerText = ls;
    });
</script>