show the inputed email in the next page above the password field in

问题

I am creatig a login system. I want the user to input the email and then click next. Then the user will be redirected to the password input page. I want to put he email that the user has typed above the password field.

Do someone know how to do it?

回答1:

You can use forms to do this, but really we try not to use forms anymore. A more modern way is to use localStorage.

Also, you cannot do this with just HTML and CSS. You need to use javascript also.

Here is an example of how it might work.

PAGE ONE:

<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>

PAGE2

<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>

来源：https://stackoverflow.com/questions/59521218/show-the-inputed-email-in-the-next-page-above-the-password-field-in