I have a form with HTML5 validation throughout - like this:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label>Name: <input type="text" name="Name" required></label>
<label>Address: <input type="text" name="Address" required></label>
<label>Zip: <input type="text" name="Zip" required></label>
<label>Message: <input type="text" name="Message"></label>
<input type="submit" name="Submit" value="Submit">
</form>
But I've noticed that some forms are coming in partially filled out. I checked server logs and it looks like these are coming from IE11 on Windows 10.
I've been trying to reproduce the behavior but so far the only way I've been able to bypass the HTML5 validation in IE11 is to use the Developer Tools to manually add the novalidate property directly to the form before clicking Submit. Are people really going to this length or is there some other browser setting that would be more commonplace?
The users in question are unlikely to be very advanced, but I could possibly imagine a corporate security policy setting somewhere disabling form validation.
Related
I maintain a login form that is reused across a variety of organizations. Each organization has a different set of required credentials. In some cases, only a single identifier is required. Essentially it's a user name or number, with no password. I realize this fact may strike many as odd, but let's leave that aside. It's a quirk of the domain I work in.
When the login form only contains a single input field I would still like browser's password management features to kick in and offer to save the entered value. I have tried setting autocomplete="username" on the input element as described here, but that does not seem to work.
Can this be done? Do any browsers support it? I can't find a clear answer in the documentation for Chrome, Firefox, or Safari. I can always implement it myself using a cookie and a "remember me" checkbox, but I would strongly prefer not to.
Include a hidden password input inside your form and set a non-empty value attribute such as "NULL" in the below example. Then the browser asks you for saving your credentials.
<form action="#" method="POST">
<input type="text" name="username" required>
<input type="password" name="password" value="NULL" hidden>
<input type="submit">
</form>
This is what I use:
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
You could try this make sure your code is some what similar...
I made some tests and figured out that it's possible to use the browser's login autocomplete also for a user only field.
You may use this code for the form and set the position for the password field only if you need to show only the username field (read more at the end of the post, it's needed for Firefox):
<?php
$passwordFieldPositionAway = '';
$hidePasswordField = false; // change this accordingly with your needs, e.g. for Firefox set it to true
if($hidePasswordField)
{
$passwordFieldPositionAway = " style='position:absolute;top:-1000px;'";
}
?>
<html>
<head>
</head>
<body>
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name="username" autocomplete="username" placeholder="Username">
<input name="userPassword" type="password" <?= $passwordFieldPositionAway; ?> placeholder="password" autocomplete="current-password" value="anyString">
<input type="submit" value="Sign In!">
</form>
</body>
</html>
Tests I done
First, I modified the form suggested here.
index.php:
<html>
<head>
</head>
<body>
<form id="login" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' type="password" placeholder='password' autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' style='visibility: hidden; display:none;' type="password" placeholder='password' autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>
</body>
</html>
login.php:
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
Chronium
Here are the steps I done with the Chronium browser:
At the first time I open the form, I insert my credentials:
The browser prompt the dialog to save the credentials:
The PHP page receives these values:
When I reopen the login page, the browser autofill both fields:
I make a login with different credentials:
When reopen the login page, Chronium auto-fills both fields with the latest login data:
About the second form, which have the password field hidden, the browser's behavior is the same as the first form:
and it prompt to save the login also for that form.
Firefox
Firefox behaves differently:
it prompt to save the login only if the password field:
isn't hidden (with no visibility:hidden nor display:none)
the password field contains at least 2 chars
It will auto-fill the field if there is only one login saved (in my case I had more logins), otherwise it leaves the selection to the user.
Therefore, to make the user-only login works on Firefox, you may show the password field and prefill it with any string you want. To hide it in Firefox you must position it outside of the user's visible area in the page:
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' type="password" style='position:absolute;top:-1000px;' placeholder='password' autocomplete="current-password" value="anyString">
<input type="submit" value="Sign In!">
</form>
Some info:
Chronium version: 77.0.3865.90 (Official Build) snap (a 64 bit)
Firefox version: 68.0.2 (64-bit)
Operative system: Ubuntu 18.04
I can find a lot of references even on StackOverflow that Chrome Auto-fill functionality should work if autocomplete="on".
However that does not seem to be the case with the latest Chrome I have here (60.0.3112.90). To be precise - default browser autocomplete works fine , but Auto-fill will ignore the field completely.
The code below won't work with Chrome Auto-fill:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="on" />
<input type="text" name="email" autocomplete="on" />
</form>
However, this will work without issues:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="given-name" />
<input type="text" name="email" autocomplete="email" />
</form>
You can easily test it here: https://jsfiddle.net/kw4yjpz4/
Screenshots:
Does it mean that all input fields now have to have autocomplete="[NAME]" for auto-fill to work? Is this a bug in the newest Chrome or intended behaviour?
I stumbled across this same issue and searching led me here... I moved on not finding an answer and finally stumbled across the answer to my cause of the issue, so I came back in case someone like me wanders through with the same issue (likely myself in 2 years when I've forgotten about it - hi, me!).
Turns out if the site does not have a valid SSL cert, Chrome Autofill does not work.
Try the following:
<!DOCTYPE html>
<html>
<body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
The above works as I want in Chrome when the site has a valid SSL cert. Saving locally and opening the .html results in Autofill not working.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.
And It contains only on|off Value for 'autocomplete' attribute.
In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu)
autocomplete works once you submit the data see
https://jsfiddle.net/0x31Loo1/#&togetherjs=CtJMLzM7AP
<form method="post" name="checkout" url="/" autocomplete="on">
<input type="text" name="given-name" />
<input type="text" name="email" />
<input type="submit">
</form>
I am trying to make a login form. But the text and password field of that form is not working properly. I have tested the code in all major browsers but different browser's giving different output. Firefox shows my password field is already filled, chrome shows both of the input fields are filled but IE shows it perfectly. I have already used "autocomplete" attribute. But it didn't change anything. Can anyone help me to get rid of this annoying problem? My html code-
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20">
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"><br><br>
<input type="submit" name="submit">
</form>
screen shots:- [firefox,chrome,IE]
In terms of chrome:
You've saved the username and password. It's prepopullated by chrome. That's why its showing that way.
Regarding firefox
I guess you've saved password here again. Because i've tested it in firefox and it's rendering properly. Else you've set the value attribute.
From settings, remove saved password for your page and try.
The HTML you have written is invalid and has unclosed elemens, your input fields should end with \> making your code look as follows:
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20"/>
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"/><br><br>
<input type="submit" name="submit"/>
</form>
Since you were not closing the input fields, your browser would automatically close them on your behalf, I would imagine that it has closed them after the <br> tags and therefore rendering them as the value of the input field.
I'm working on a page where I have 2 textboxes.
I want to send the user inputs for these 2 mailboxes to my email but my code doesn't seem to work. Is there anything I've missed?
<form method="post" action="mailto:youremail#youremail.com" >
First:<input type="text" name="First" size="12" maxlength="12" />
Last:<input type="text" name="Last" size="24" maxlength="24" />
<input type="submit" value="Send Email" />
</form>
Your code is correct, it does work for me. It probably doesn't work for you because you don't have an email client, or your browser turns off this feature for security (or something like that). I would recommend that you use a service to perform this action such as http://www.braveapps.com/emailfwd/ or http://allforms.mailjol.net/.
I have a form on a page that is shown via https:// as follows:
<form id="memberslogin_form" name="memberslogin_form">
<fieldset>
<legend>Login</legend>
<div>
<label for="membershipId">Membership number</label>
<input type="text" class="field" name="membershipId" id="membershipId""/>
</div>
<div>
<label for="memberPassword">Password</label>
<input size="18" type="password" class="field" maxlength="50" name="memberPassword" id="memberPassword" />
</div>
<div id="button_login">
<input type="button" value="Login" class="button" id="signin" name="signin"/>
</div>
</fieldset>
</form>
The form is uniquely named, as are the inputs.
However, successful logins do not cause the "membershipId" entries to be listed in the input recent entries \ history. This occurs in both FF3.6 and IE6+.
I believe the ability to store field history is browser-based via it's settings, but I cannot retain the input history over https:// forms?
Is this a typo in here only, or in actual page:
<input type="text" class="field" name="membershipId" id="membershipId""/>
See the extra ".
I don't know much about the mechanism of saving form value in FF, but all this time, my form input is saved even if it in https site.
Maybe you can try lastpass that can save a form input for later usage as well as the password securely.