Set credentials for Password Manager to use

37 Views Asked by At

Im trying to create a install screen for a CMS, where I need the credantials of the User and the Database. I won't to obfuscate the User and the Database password with input="password". But then the Password Manager of the Browser (Firefox in my case) wants to save the Username of the database.

This is my code:

<form class="contentContainer stack" action="" name="install" method="post" enctype="multipart/form-data">
            <h1>Installation</h1>

            <fieldset class="form-inner stack">
                <h2>Database</h2>
                <p>Enter credentials for MYSQL/MariaDB database</p>

                <div class="fraction">
                    <div class="formField">
                        <label for="db-hostname">Hostname</label>
                        <input type="text" id="db-hostname" name="db_hostname" value="localhost" placeholder="localhost" required
                            autofocus />
                    </div>

                    <div class="formField">
                        <label for="db-name">Database</label>
                        <input type="text" id="db-name" name="db_name" value="" required />
                    </div>
                </div>

                <div class="fraction">
                    <div class="formField">
                        <label for="db-uname">Database Username</label>
                        <input type="text" id="db-uname" name="db_uname" value="" required autocomplete="off" />
                    </div>
                
                    <div class="formField">
                        <label for="db-password">Database Password</label>
                        <input type="password" id="db-password" name="db_password" value="" required autocomplete="off" />
                    </div>
                </div>
            </fieldset>

            <fieldset class="form-inner stack">
                <h2>Admin User</h2>
                <p>Set the required login credentials for the Admin</p>

                <div class="fraction">
                    <div class="formField">
                        <label for="username">Username</label>
                        <input type="text" id="username" name="username" value="" required autocomplete="on" />
                    </div>

                    <div class="formField">
                        <label for="password">Password</label>
                        <input type="password" id="password" name="password" value="" title="Needs at least 8 characters" required minlength="8" autocomplete="on" />
                    </div>
                </div>

                <div class="fraction">
                    <div class="formField">
                        <label for="name">Real Name</label>
                        <input type="text" id="name" name="name" value="" required />
                    </div>

                    <div class="formField">
                        <label for="email">E-Mail Address</label>
                        <input type="email" id="email" name="email" value="" required />
                    </div>
                </div>
            </fieldset>

            <div class="formField form-field--submit">
                <button class="button" type="submit">Install</button>
            </div>
        </form>

Edit: To clarify: with the code above the Browsers Pasword Manager will try to save the last input with type="password" as the password but the database username (name="db_uname") as the user name. I would like to be able to tell the Browser which input to use as the Username and the Password that should be saved.

0

There are 0 best solutions below