how to prompt password manager for username and password? - html

I have a html form for register user, what attribute should I put to prompt password manager (google/lastpass/onepass/etc) that the email address will be used as username upon submit?
<form>
<input type='text' placeholder='email address'><br>
<input type='text' placeholder='first name'><br>
<input type='text' placeholder='last name'><br>
<input type='text' placeholder='postcode'><br>
<input type='password' placeholder='password'><br>
<input type='password' placeholder='password again'><br>
<button type='submit'>register</button>
</form>

Most password managers use the name attribute for this purpose.
You need to provide one anyway so that the control can be successful and the data submitted to the server.

Related

Specify input for password manager autofill

I have a form with multiple inputs, but when autofilling, the password manager always enters data in the first input above the password. Can I tell it to enter data in a specific input?
Code example:
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="text" />
<input placeholder="Your password" type="password"/>
Chrome might think that your email and text inputs are the same, so it auto fills both of them. So, we are going to put an irrelevant "type" on one of the inputs.
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="url" />
<input placeholder="Your password" type="password"/>
We set the email type to email, fb id to url, and password type to password.
Finally found a solution!!!! If you add an onChange event to the field that is above the password field and accepts automatic login fill, it will fill data in the field specified in js. Here is code example:
HTML:
<input placeholder="Your email" id="userEmail" type="email" />
<input placeholder="You fb id" id="fbId" type="text" />
<input placeholder="Your password" type="password" />
JS:
const fbId = document.querySelector("#fbId");
fbId.onChange = () => {
document.querySelector("#userEmail").value = fbId.value;
};
Result:

Unable to submit form to freecodecamp mock url

I'm unable to submit the form
I've checked my code thoroughly for hours and looked at posts on freecodecamp forums but it seems to me I still cannot submit the form and I can't pinpoint the problem.
<form action="https://www.freecodecamp.org/email-submit" id="form">
<div class="email-box">
<label for="email">Email: </label>
<input type="email" id="email" name="email" placeholder="Enter your email here.." required>
</div>
<div id="submit-box">
<input type="submit" id="submit" name="submit">
</div>
</form>
When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered (and that it posted successfully)
The error states:
AssertionError: The #email input should have a name attribute : expected false to equal true
So, add name attribute:
<input type="email" placeholder="Enter email address"id="email" name="email" required><br>
For any help check here.

Hide form input fields from URL

I've got a login form with two input fields: username and password.
<form method="get" action="../Main/Index">
<p>
<input type="text" name="username" value="" placeholder="username" maxlength="30"></p>
<p>
<input type="password" name="password" value="" placeholder="password" maxlength="25"></p>
<p class="submit">
<input type="submit" name="commit" value="Enter">
</p>
</form>
Once the user submits the form, his username and password are shown in the browser's URL textbox, something like this:
http://localhost:53997/Main/Index?username=zm&password=123456789&commit=Enter
I don't want his username and password to be on display.
How can I do this?
the problem is that youre using form method = "get" when you should be using form method = "post" instead.
this explains it:
http://msdn.microsoft.com/en-us/library/ee784233(v=cs.20).aspx

Form not taking action

I have a problem with a form. It is not sending any action (page not even refreshing on click). If I copy the form in another document locally it has no problem, all working well, mail message being sent. Here is the code of the form:
<form method='post' name='ContactForm' id='contactForm' action='contact_main.php'>
<p>Your name:</p>
<input type="text" class="input-box" name="user-name" placeholder="Please enter your name.">
<p>Email address:</p>
<input type="text" class="input-box" name="user-email" placeholder="Please enter your email address.">
<p>Subject:</p>
<input type="text" class="input-box" name="user-subject" placeholder="Purpose of this message.">
<p class="right-message-box">Message:</p>
<textarea class="input-box right-message-box message-box" name="user-message" placeholder="Your message."></textarea>
<button type='submit' class='myinputbtn' name='submitf' id="submitf">Send your message</button>
<div id='message_post'></div>
<input type="hidden" name="contact">
</form>
Clicking the submit button results in... nothing!
Please let me know if I need to edit my question before downrating. Thanks!
Use
<input type="submit" ...
instead of a button (which is used with Javascript, not for form submitting)

Chrome browser saving form inputs- what names/IDs used and why only some saved?

I have a page on my site with two forms, one for log in and one for registering.
LOG IN-
<form name="login" id="login" method="post" action="php/login.php">
Email: <input id="email" name="email" type="text">
Password:<input id="password" name="password" type="password">
</form>
REGISTER-
<form id="register" name="register" method="post" action="php/register.php">
Email: <input id="r_email" name="r_email" type="text">
Confirm Email: <input id="r_email_confirm" name="r_email_confirm" type="text">
Password: <input id="r_password" name="r_password" type="password">
Confirm Password:<input id="r_password_confirm" name="r_password_confirm" type="password">
</form>
When I've tested it, Chrome is saving the log in form's email and password (id email and password) and the register form's confirm email and password (id r_email_confirm and r_password).
Any ideas why it is saving these values?
Seems it's been an issue in Chrome:
http://productforums.google.com/forum/#!topic/chrome/f6zhGC8lVw4
It's been recommended to use
<form autocomplete="off"...
for the time being, which is a bit annoying.