'How can I trigger Safari to save email and password at registration and autofill it when logging in again?

I'm currently working on my very first Flask web app, which includes an email form.

I would like to know what specific triggers Safari looks for in my code so that it

  1. Offers to save email and password after registration
  2. Autocompletes email and password, when using the login form.

My registration form makes safari suggests an email at the right place (hurray, don't know why though) and you can even have it create a safe password randomly. After registration there is no dialog though to offer to save the submitted data.

Registration.html

 <form method="POST" action="">
        <input id="csrf_token" name="csrf_token" type="hidden" value="Ijg2MTQ3MDViZmVlhNGiNDg5ZTY1ODczZjQyODJiNjMwMGUi.YlI1pw.4vZVCPQbwSb4-0jD2BpQ1U0">
        <fieldset>
            <div >
                <label class="form-control-label" for="username">Name</label>
                    <input  id="username" maxlength="20" minlength="2" name="username" required type="text" value="">
            </div>
            <div>
                <label for="email">Email:</label>
                    <input  id="email" name="email" required type="text" value="">
            </div>
            <div>
                <label for="password">Password:</label>
                    <input  id="password" name="password" required type="password" value="">
            </div>
            <div>
                <label  for="confirm_password">Confirm password:</label>
                    <input id="confirm_password" name="confirm_password" required type="password" value="">
            </div>
        </fieldset>
        <div>
            <input class="button" id="submit" name="submit" type="submit" value="Create Account">
        </div>
    </form>



My login form does not evoke any autocomplete feature. (Actually Safari even mistakes the email input for another password input for some reason)

Login.html

<form method="POST" action="">
    <input id="csrf_token" name="csrf_token" type="hidden" value="Ijg2MTQ3MDViZmVlNDFhNQwOTViNDg5ZTDczZjQyODJiNjMwMGUi.YlHp2w.8MT2N8Otm-1dZT0tVlivh8h4">
    <fieldset type=email>
        <div>
            <label for="email">Email: </label>
                <input id="email" name="email" required type="email" value="">
        </div>
        <div>
            <label for="password">Password: </label>
                <input id="password" name="password" required type="password" value="">
        </div>
    </fieldset>
    <div>
        <input id="submit" name="submit" type="submit" value="Log in">
    </div>
</form>

I've tried

autocomplete = "username"

as suggested everywhere and also tested setting all other attributes like name, title, placeholder and so on. Never worked.


What am I missing out?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source