Set credentials for Password Manager to use - html

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.

Related

HTML Form action="#"

I am taking a course and one of our projects is to create a form. Forgive me as I am a total newbie here.
The instructor is asking that the form action attribute="#" and the method="post"
When I use the # I just get an error
<form name="my-form" action='#' method='post'>
<fieldset>
<legend>Sign Up Here</legend>
<div class="form-box">
<label for="username">Username</label>
<input type="text" id="username" name="username" tabindex="1" placeholder="Username">
</div>
<div class="form-box">
<label for="email">Email</label>
<input type="email" id="email" name="email" tabindex="2" placeholder="Email" required>
</div>
<div class="form-box">
<label for="phone-number">Phone</label>
<input type="text" id="phone-number" name="phone-number" tabindex="3" placeholder="Phone" required>
</div>
<div class="form-box">
<label for="password">Password</label>
<input type="password" id="password" name="pass" tabindex="4" placeholder="Password" required>
</div>
<div id="message">
<h6>Password must contain the following:</h6>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<div class="form-box">
<label for="password-confirm">Confirm Password</label>
<input type="password" id="password-confirm" name="password-confirm" tabindex="5" placeholder="Confirm Password" required>
</div>
<div class="form-box">
<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" class="uploader button-upload">
</div>
<div class="form-box">
<button class="btn" id="btnSend" tabindex="6">Register</button>
</div>
</fieldset>
</form>
This page isn’t working If the problem continues, contact the site owner.HTTP ERROR 405
This is on google chrome.

html required only apply to one form

I have an html page with two forms, one for signup and one for login, i have made all fields required, but i want to make it so, the signup fields only are required, when you sign up, and the login fields only are required one you login.
Here is my code snippet:
<body>
<form name="register" action="FrontController" method="POST" style="border:1px solid #ccc">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Adresse</label>
<input type="text" placeholder="Skriv din adresse" name="adresse" required>
<label for="email"><b>Telefonnummer</b></label>
<input type="text" placeholder="Skriv dit telefonnummer" name="phonenr" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<div class="container">
<h1>Login</h1>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="submit" class="loginbtn" value="Submit">Login</button>
<button type="submit" class="signupbtn" value ="Submit">Login</button>
</div>
Is this in any way possible?
You are using both submit buttons under same form so that validation is required. Use different form for login and signup.
<form>
Login form
<input type="text" required>
<br>
<input type="submit" value="Login">
</form>
<form>
Register form
<input type="text" required>
<br>
<input type="submit" value="Register">
</form>
You need to use two separate forms to achieve what you want,
as the required property only applies to the current form.
Here is your HTML modified:
<body>
<div class="container">
<form name="register" action="FrontController" method="POST" style="border:1px solid #ccc">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Adresse</b></label>
<input type="text" placeholder="Skriv din adresse" name="adresse" required>
<label for="email"><b>Telefonnummer</b></label>
<input type="text" placeholder="Skriv dit telefonnummer" name="phonenr" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label><input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me</label>
<div class="clearfix">
<button type="submit" class="signupbtn" value="Submit">Sign-up</button>
</div>
</form>
</div>
<div class="container">
<form name="login" action="FrontController" method="POST" style="border:1px solid #ccc">
<h1>Login</h1>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<div class="clearfix">
<button type="submit" class="loginbtn" value="Submit">Login</button>
</div>
</form>
</div>
</body>
Hope it helps.

Moving some fields from the form to the right

So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.

HTML form validation - don't validate hidden text inputs

I have a form where the user has to choose between two modes, with two individual sets of inputs. Some inputs are required.
<form>
<div class="form-group">
<label>This or that?</label>
<div class="controls">
<label class="radio-inline">
<input type="radio" name="thisthat" value="this">
This
</label>
<label class="radio-inline">
<input type="radio" name="thisthat" value="that" checked>
That
</label>
</div>
</div>
<div class="this"> <!-- hidden as the page loads -->
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="This again" />
</div>
</div>
<div class="that">
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="That again" />
</div>
</div>
<button class="btn btn-info" type="submit">Submit</button>
</form>
Example on CodePen
When the user fills out one part of the form the submit is prevented because of the empty fields in the other part.
How can I disable the validation for the fields in the hidden part? Preferably without removing the required properties of the hidden inputs.
Is there a default way to do this?

HTML5 validation form with labels

I have a simple HTML5 form. but when I do a code validator (http://validator.w3.org/check) I get multiple errors
The for attribute of the label element must refer to a form control. What does this error mean? It is pointing to this line
<label id="name0" for="Name" style="width: 180px;">Name</label>
This is my current form
<div id="contact-add" title="Add New Contact" style="display: none;">
<div id="response-add"></div>
<form method="post" id="add-form">
<div class="label-input">
<label id="name0" for="Name" style="width: 180px;">Name</label>
<input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />
<input type="hidden" name="add_account_id" id="add_account_id" value="<?php echo $add_account_id; ?>" />
</div>
<div class="label-input">
<label id="title0" for="title" style="width: 180px;">Title (Optional)</label>
<input type="text" value="" name="title" placeholder="Enter title here..." />
</div>
<div class="label-input">
<label id="email0" for="email" style="width: 180px;">Email (Optional)</label>
<input type="text" value="" id="email" name="email" placeholder="Enter email address..." />
</div>
<div class="label-input">
<label id="phone0" for="phone" style="width: 180px;">Direct Number (Optional)</label>
<input type="text" value="" id="phone_number" name="phone_number" placeholder="Enter direct number..." />
</div>
<div class="label-input">
<label id="extention0" for="extention" style="width: 180px;">Extention (Optional)</label>
<input type="text" value="" id="phone_ext" name="phone_ext" placeholder="Enter extention number..." />
</div>
<div class="label-input">
<label id="shift0" for="shift" style="width: 180px;">Work Shift</label>
<?php echo generateWorkShiftMenu($db, 'work_shift', 'Day'); ?>
</div>
</form>
</div>
The for attribute of a label must be the id of a form control. i.e.
<label id="name0" for="fullname0" style="width: 180px;">Name</label>
<input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />