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.
Related
I'm implementing your average SSL secured payment form, and I've been able to get Chrome to consistently autofill stored credit card entries from a logged-in Google account. However, I haven't been able to find the magical series of bits and config to coerce it into prompting me to save new credit card entries.
Lets take a stripped down set of payment fields:
<form action="/someroute" method="post" id="pmntForm" autocomplete="on">
<h2>Auto Fill Test</h2>
<label for="nameoncard">Name on Card</label>
<input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
<label for="ccnumber">Credit Card Number</label>
<input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number" />
<label for="cc-exp-month">Expiration Month</label>
<input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
<label for="cc-exp-year">Expiration Year</label>
<input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc">
<input type="submit" value="Submit" name="submit">
</form>
This does exactly what I want for autofilling existing cards in my Chrome account:
However if I enter a full set of new payment data; I expect that by the time the user clicks submit - Chrome should prompt to save the data as a new credit card entry (ironically this image is from a post of someone wanting to disable this):
Here's a jsfiddle in react, but it should answer your question.
Jsfiddle
<form name="ccform" action="">
<input name="cc-number" placeholder="Card Number" autocomplete="cc-number" />
<input name="cc-csc" placeholder="Security Code (CVC)" autocomplete="cc-csc" />
<input name="cc-exp-month" placeholder="MM" autocomplete="cc-exp-month" />
<input name="cc-exp-year" placeholder="YYYY" autocomplete="cc-exp-year" />
</form>
Resources:
How to trigger Autofill in Google Chrome?
How does Chrome detect Credit Card fields?
Chrome credit card autofill not being triggered
html5rocks: requestAutocomplete - take my money, not my time
You could also use the chrome dev tools to checkout other websites who have a working autocomplete form such as these:
Airbnb
creditcard.js
I'll add more when I find some
Not the perfect answer, but hope it helps! I will update when I find the completely correct solution. :)
I am building a Bootstrap form and the email and password form elements show with pre-populated data from some other or some earlier form login on a different site. The Chrome browser is auto-populating the form elements.
Is there an HTML attribute of method in Bootstrap to force these form elements to null or empty on page load?
2015-10-29 -- here's the markup:
<form autocomplete="off" method="post" role="form">
<div class="form-group">
<input name="formSubmitted" type="hidden" value="1">
</div>
<div class="form-group">
<label for="username">Username</label>
<input autocomplete="off" autofocus="autofocus" class="form-control" id="username" name="username" required type="text">
</div>
<div class="form-group">
<label for="password">Password</label>
<input autocomplete="off" class="form-control" id="password" name="password" required type="password">
</div>
<button class="btn btn-default" type="submit">Login</button>
</form>
Use autocomplete="new-password"
Works a charm!
Use the autocomplete="off" attribute on the <form> or <input>.
from MDN:
autocomplete
This attribute indicates whether the value of the control can be
automatically completed by the browser.
off The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method;
the browser does not automatically complete the entry.
on The browser is allowed to automatically complete the value based on values that the user has entered during previous uses...
Also from MDN, see: How to Turn Off Form Autocompletion
Also see:
Chrome Browser Ignoring AutoComplete=Off
"AutoComplete=Off" not working on Google Chrome Browser
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
I am no expert in coding. As a matter of a fact this is my first true project in CSS. I created the page in Adobe Edge Reflow and exported CSS to dreamweaver. The problem I am running into is that I can't get my form to actually work. I want the form to send directly to my e-mail, in no specific format. Can anyone help me out?
<form method="post" novalidate>
<label id="formgroup">
<p id="text1">
Name*
</p>
<input id="textinput" type="text" value=" Your Name"></input>
</label>
<label id="formgroup1">
<p id="text2">
Company Name
</p>
<input id="textinput1" type="text" value=" Company Name"></input>
</label>
<label id="formgroup2">
<p id="text3">
Email*
</p>
<input id="textinput2" type="text" value=" email"></input>
</label>
<label id="formgroup3">
<p id="text4">
Message*
</p>
<input id="textinput3" type="text" value=" Your message"></input>
</label>
<input id="submit" type="submit" value="Send Message"></input>
<input type="hidden" name="recipient" value="xxx#gmail.com"> </form>
Your HTML markup seems fine for a simple form aimed to post the contents of a range of fields.
However, the HTML code (along with any CSS) will only enable you to determine the presentation/style of the form (i.e. how it looks).
Regarding the functionality of the application actually triggering an email with the form contents to an email address, this will require more code in a 'server-side' language such as PHP (HTML and CSS being 'client-side' languages).
Here is a good article that provides a tutorial on the subject: http://www.html-form-guide.com/php-form/php-form-tutorial.html
Your HTML markup is actually missing something, the "action" property, i.e.
Before:
<form method="post" novalidate>
After:
<form method="post" novalidate action="send-email.php">
As you might have guessed from looking at the above, this "action" property specifies the PHP script/file that triggers the email. And of course it is this file that you are currently missing.
Hope this helps.
i am bit confused about the code..This is login.php file..and action of the form is also in the same file.Can this happen? if,then same login form should open if user submit the form...i am making my website,where i want to use login/register form.
<form action="login.php" method="post" class="f-wrap-1">
<div class="req">
Not Registered?<br />
Forgot your Password?
</div>
<fieldset>
<h3>Member Login</h3>
<label for="firstname"><b>Username:</b>
<input id="username" name="username" type="text" class="f-name" autocomplete="on" tabindex="1" /><br />
</label>
<label for="password"><b>Password:</b>
<input id="password" name="password" type="password" class="f-name" autocomplete="off" tabindex="2" /><br />
</label>
<label for="code"><b>Security Code:</b>
<input id="code" name="code" type="text" class="f-name" autocomplete="off" tabindex="3" /><br />
</label>
<label for="code2"><b> </b>
<img src="image.php?" /><br />
</label>
<div class="f-submit-wrap">
<input type="submit" value="Submit" class="f-submit" tabindex="4" /><br />
</div>
</fieldset>
</form>
This is login.php file..and action of the form is also in the same file.Can this happen?
Yes
if,then same login form should open if user submit the form
Not necessarily. In a system like this, the form data will be processed by server side code. The logic will probably be something like:
If it is a GET request, send the browser the form.
Otherwise, if it is a POST request, then check the form data:
If it is valid login data, then: set a cookie to track the user and
tell the browser to get some other URL.
Otherwise, the login data is wrong: populate the form with an error message
and possibly default the values of the fields to the wrong data the user
entered, then send the form to the browser.
Populating the form with the invalid data doesn't make much sense in a login form like this one, but it more useful in (for example) a registration form.
Who wants to retype all their personal data again just because the username they wanted is not available or they missed a field?
It's possible to send form to same file but it's not in good style. You would have to check if post data is available and display proper view based on that.
Better way to do it is just change the action of the form to point to another file and in that file handle login logic.
<form action="file.php" method="post" class="f-wrap-1">
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.