'Set credentials for Password Manager to use
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
