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.