How does Google Chrome recognize a login form? - html

I faced an issue recently where Google Chrome offers to save username and password for a login form, but took a different field value than the username-field to store as username.
Does anyone know which criteria are used by chrome to determine the username and password in a login form?
My guess (but cannot find documentation to proof it):
take first text-field as username
take first password field as password

When a website developer creates a login form on their website, they usually add specific HTML tags to the form to identify it as a login form. When a user visits the website and clicks on the form, the browser recognizes the HTML tags and knows that the form is a login form. The browser may then offer to save the user's login information, so that the user doesn't have to enter it every time they visit the website.
Here is an example of a login form with HTML tags:
<form action="/login" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
In this example, the form tag specifies that this is a form, and the input tags with the type attribute set to "text" or "password" specify that this is a login form.

Related

What is the difference between method="post" and type="submit" (HTML)?

Are they completely different things? I don't really get forms yet and many of the guides I found online don't really use type="submit" so I thought I would ask.
method is a form attribute. It specifies the method for requesting the server. It has only two options, either GET or POST. Use GET if your form has not sensitive data, while use POST when you are trying to submit sensitive data like user login. You can refer for more information here: https://www.w3schools.com/tags/att_form_method.asp#:~:text=The%20method%20attribute%20specifies%20how,URL%20in%20name%2Fvalue%20pairs
type is the attribute for input which specifies what the input is gonna be. It's options are text, email, password, checkbox, submit and many more. The type submit tells the input to submit the form when the user clicks the input which has this type on it. Have a look at it https://www.w3schools.com/tags/att_input_type.asp.
Example:
<form action="to/the/action" method="POST">
<input type="text" placeholder="Enter user name" />
<input type="submit" value="submit your form" />
</form>
Here is the simple form which tells the browser to show an input of text telling the user to enter user name. The action is the path where you want to send the form data, while type=submit is defining that submit this form when user clicks me.

input field saved passwords on wrong input field

I have a few input fields on my website. There are few passwords saved for that website(Chrome Login Saved passwords). But the problem i am facing is that the email is appearing on the input field which is not for email i.e somewhere else on that same website. This is the input field code where i don't want chrome to autofill/autocomplete as it is not required here. I have tried autocomplete =off/false/new-password nothing worked.
<input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics" autocomplete="off">
When you click on the field above it shows the saved passwords for that website which is not required on this field.
I found the solution. The browser ignores autocomplete="off" unless it is in a form. Therefore, the code below removed the autofill suggestions.
<form autocomplete="off"><input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics"></form>
Google chrome ignores autocomplete="off" so you can try to make another input field above it to fool the browser
<input type="text" style="visibilty:hidden">
<input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics" autocomplete="off">
you can also read this answer

Remembering email and password

I have the following problem. When I remember email and password on chrome email fills the latest email field on the page, but not the right one. Here is the image:
This happens on a register page also: but it shouldn't be here.
How could this be solved?
If you wish to prevent users from having inputs automatically filled out based on previously entered values which the browser stored, you can use the autocomplete="off" parameter on the input.
Eg. <input type="password" id="foo" autocomplete="off" ...>

How to have a hidden form field appear with a form action of mailto?

I'm trying to make a form for a web design class. The form action HAS to be a mailto. The form also needs a hidden field that pops up after I hit the submit button. Everything looks nice so far, but after I upload my file to the school server, nothing happens after I click the submit button. I'm not to sure what's causing the problem. Here's my code:
<form action="mailto:email#example.com" method="GET" enctype="text/plain">
<fieldset>
<legend><strong>Vote Your Favorite Month(s)!</strong></legend> <br/>
<input type="checkbox" name="votemonth" value="Jan"> January |
<input type="checkbox" name="votemonth" value="Feb"> February |
<input type="checkbox" name="votemonth" value="Mar"> March <br/><br/>
<input type="hidden" name="success-link" value="thankyou.html">
<p><input type="submit" value="Submit"> <input type="reset" value="Restart"></p>
</fieldset>
</form>
I have the thankyou.html file in the same location of this file. I've tried changing up email addresses, using POST, taking out the enctype, changing the location of the hidden input type, but none of that changed anything.
Hidden fields work just like any other field.
The basic problem is that mailto: as a form action does not work well enough to use on the WWW. It only works if the visitor has an unlikely combination of compatible browser and default email client.
If you have that combination of software, then the data in the field will be included in the generated email.
Submitting a mailto: form will not cause the browser to load a new HTML document.

What defines a login form for the purposes of autocomplete?

I have a typical login form with username and password. When a user enters this information, their web browser will save the username and password for them (assuming their browser is configured to allow this). Suppose the username is "User01" and the password is "Password01".
Now suppose the user changes/resets their password to "Password02". The web browser doesn't recognize my password reset form as a login form, so it doesn't update/change/save the password in the user's web browser.
So when the user leaves my website and comes back at a later date, they come to my login page. They enter their username "User01" and it autocompletes the wrong password of "Password01" but the user doesn't know this because they just see ****. The user eventually locks their account then calls up our customer service to yell at us.
<form action="updatePassword.php" name="frmPasswordChange" method="POST">
<label>Old Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="oldPassword"></span>
<br />
<input type="hidden" name="username" value="User01">
<label>New Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="newPassword"></span>
<br />
<label>Re-enter New Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="newPasswordReEntered"></span>
<br />
<span class="buttonHolder">
<button type="submit" class="styledButton updateButton">Save Password</button>
</span>
</form>
I think that the way a browser handles inputs is largely from semantical reading of the login form. That is to say, if a text field is named "username" and a password field is named "password", that tends to carry over.
Problem in your case is that it sounds like you have two different pages through which one can login. It is a known issue/feature that web browsers associate login info on a page-to-page basis. For example, one of the sites I regularly login to stores different login credentials between the homepage and the forgot password page (with the "forgot password" page, somewhat ironically, having the correct credentials).
Until some sort of standard is developed that allows linking of forms by something like the ID attribute, I'm going to posit that there's not much you can do about this, apart from maybe doing a quick IP read and giving the username. But that would be stunningly bad practice.