Or How does Firefox determine where the password/username goes?
If I change name, id, title, class of an input element Firefox keeps filling it with password or email.
If I understand Firefox's source code correctly, the browser first looks for password fields in forms. If form contains more than 3 password fields, the autofill function ignores that form.
After 1 to 3 password fields are found, the browser looks for login field. The browser does a backward search starting from first password field and assumes that the login field is the first found field of the type text or email or url or tel or number.
Next step depends if we check the forms on page load or when submitting the form.
If we check during page load and there is a login field and exactly ONE password field, the case is simple and the browser can fill out the form.
Other cases (form submit or more than 1 password field) do some “smart” logic to determine which password field contains new password and which one the old password, probably to update stored passwords). If you're interested in details, download the source code and open toolkit/components/passwordmgr/nsLoginManager.js file. Functions to check are _fillForm, _getFormFields and _getPasswordFields.
Just to summarize, Firefox doesn't need any ID, name or class attributes to guess which field is login or password. It just relies on types and the order of form fields.
I tried a simple solution that is working so far. Create 2 hidden fields and the browser will autofill those.
<input type="text" style="display: none">
<input type="password" style="display: none">
Looks like using a disabled input text between login and password inputs does the trick well :
<input type="text" disabled="disabled" style="display:none">
Are those the only two elements on the form? Firefox is likely storing the structure of the form (two input boxes, one flagged as normal, one flagged as password) and filling in saved information without respect to the ID of the input elements.
Try this: add an extra input element to the form and see what happens. Either Firefox will not fill in anything, or you'll find your name in the first field and the password field filled in, while the second input element is blank.
Related
I want to prevent user to write local characters (croatian - ĆČĐŠŽ) inside a input
<input type='text' pattern='[A-Z0-9]'>
but id doesn't work - local characters are written by typing.
And what is then the purpose of pattern attribute ?
Any help?
The pattern attribute work for form. It will check when the form is being submitted.
For validation when user typing, you need to make function for onChange event.
Update form #Anarion
onKeyUp/onKeyPress/onKeyDown because in some browsers onChange happens only on focus-out.
if you have
<button class="button yellow" type="submit"
name="button">Log in</button>
and you submit it, what gets posted to the server for the button which has a name but no value attribute?
The reason I ask is that I'm parsing HTML forms, and need to post the named values that send data to the server. I got the others covered, but wasn't sure about button.
According to the HTML Spec, a button's value is either determined by its value attribute or is an empty string. A button's value is only submitted with the form if the button has a name and is used to initiate form submission. If the button in your example is clicked, the resultant submission will be:
"button=" (quotes added)
Some browsers (mainly older IE versions) have incorrect implementations of this button behaviour that either set the value to the button's contents or submit all button values regardless of initiation source.
button does not get posted to server when the form is posted. Only input type's like text, password, select elements etc., which accepts user inputs will be posted to the server
Button never supplies value to form. It just provides a submit event that tells the browser to submit that form with all the input tags to the action attribute inside your form tag using the method attribute value. Button only provides the event and not the values.
There will be nothing posted to the server for buttons. When you click a button, it invokes the action of submit, that is all.
I tried it out by printing the request.POST in django.
This image shows a "Log in" button with no value but name="button", as asked
The console shows
< QueryDict: {u'csrfmiddlewaretoken': [u'9aAx..'], u'sensor': [u'sd1'], u'button':[u'']}>
So, in this case, the form is sent as a dictionary and for the buttons the key, value pair is "button" : " ". So, if you try to get value of this button with request.POST.get, you will get NULL.
So, the answer to your question is the form consolidates all the input values, which can be accessed with their 'name' including buttons. If no value is provided, it returns NULL.
Take a look at this login page, specifically, the form in the section labeled Returning Members. As you can verify by looking at the HTML or by digging with a tool such as Firebug, the actual form contains four tags: one each for the email address and password, an invisible input called "memberAlready" that contains the value "yes", and a submit button in the form an image. So far, perfectly generic.
However, if you inspect the form data at the point at which the form is submitted (using Tamper Data or its equivalent on another browser, you'll see that two additional form fields have been sneaked into the response: ACTION(loginCheckout).x and ACTION(loginCheckout).y.
They both have two-digit integer values, which suggests that they're only there to verify that the submitter is an actual web browser and not a robot. Presumably, they are related somehow to the submit button, which is defined as follows:
<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">
What's confusing to me is that these extra form fields appear even when JavaScript is disabled in the browser. So they presumably aren't just something inserted by an event handler somewhere.
Furthermore, if you submit the form programmatically (e.g., by running document.forms[1].submit() in the JavaScript console), the extra fields are not generated and the login attempt fails. That suggests to me that the insertion of the fields depends on something outside the basic HTML form submission mechanism. But what that "thing" could be if it's not JavaScript, I don't know.
Does anyone recognize this pattern or have a theory as to how the validation fields are inserted?
Take a look at the code you posted here:
<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">
Notice that this is an image input type which is used to submit the login form. The additional values that appear to be injected on submission are simply the x and y coordinates where the you clicked on the image to submit the form. They are not additional values which are injected by JavaScript on form submission, they are added by the browser itself.
Try clicking on different areas of the images and see the values change.
When you use JavaScript to submit the form, you do not click on the image, which is why the x and y values are not included on form submission.
Replacing the image for an <input type="submit" /> element will remove the x and y coordinates.
Hope that helps.
The X and Y values you are seeing are because the submit button is an an input type=image. They correspond to the X and Y locations within the image where the cursor was when the image was clicked. They're added by the browser itself, as the HTML specification requires it. Section 17.4.1 states that for an image input type
When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.
You'll note it only mentions the use of a pointing device. If you submit by using the keyboard the values won't be created.
My ASP.NET MVC 3 website has code on the server side that checks for the name of the submit button clicked to submit the form. The code works when I use the mouse to click the button, but when I use the Enter key, the form gets posted, but the request doesn't contain the name of the submit button.
Is there some attribute I can set on the submit button to get this to work for both clicking and using the Enter key?
Here is my HTML:
<div>Search:</div>
<form action="/Item/Search" method="post">
<input class="fulltextsearch" id="FTSearchText" name="FTSearchText" type="text" value="" />
<input type="submit" value="Go" name="FTSearchButton" />
</form>
</div>
On the server side, I have a custom model binder that uses the following code to determine if the user clicked the submit button.
// See if the value provider has the required prefix
var hasPrefix = bindingContext.ValueProvider.ContainsPrefix(bindingContext.ModelName);
var searchPrefix = (hasPrefix) ? bindingContext.ModelName + "." : string.Empty;
var searchButton = GetValue(bindingContext, searchPrefix, "FTSearchButton");
// If this value doesn't have value, the user didn't click the button so exit
if (string.IsNullOrEmpty(searchButton)) {
return null;
}
private static string GetValue(ModelBindingContext context, string prefix, string key) {
var result = context.ValueProvider.GetValue(prefix + key);
return result == null ? null : result.AttemptedValue;
}
Here is the problem I'm having with this. I have a page that displays a list of items. I have a 'search' textbox and a submit button in an HTML form. When the user enters text in the textbox and clicks the search button or uses the enter key, the page posts the form data via HTML GET, and returns the first eight records found. The page then displays page links for additional pages. The problems is that when the user clicks a page link, the form data is all blank, and my filter information is lost (the form isn't posted with the form value when using these links). So, I end up displaying a blank list of items (blank searches returns zero results) instead of paging the data.
By adding the check for the button name in my form data, I could determine whether or not to simply page the data, or do a new look up.
I wouldn't rely on this. There are plenty of documented bugs with this scenario. Just add a hidden field with name='submit'. That way it wouldn't be too hard to recode the backend.
<input type='hidden' name='submit' value='FTSearchButton'/>
So, I researched this last night and almost got somewhere. Then this morning, I really did get somewhere and here's where I ended up.
Apparently the W3C standards for form submission are pretty lax when describing the functionality as it relates to the Enter button and submitting forms. It seems they determined that
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
So that leaves a lot of wiggle room for the browser makers. Today, virtually all browsers support using the Enter key to submit a form, whether the form contains one or more single line text input boxes.
The problem I'm having is more or less unique to Internet Explorer, and only when the form contains one, single-line text input control. For whatever reason, Microsoft decided that when Internet Explorer submits a form like this, it doesn't include the submit button's name/value pair in the post body. However, it does include the button's name/value pair if the user clicks the submit button --or-- uses the Enter key, and the form contains more than one single-line text input control.
So, the only solution I can think of or find suggested is to add a second single-line text input to my form, and then set the the style to
visibility: hidden; display: none;
My form now has two single-line text input controls, so the form will post with the name/value pair in the form body, regardless of whether or not the user used the Enter key or clicked the submit button.
So, we have a workaround that was discovered by ASP.NET developers. It seems the key/value pair is required by ASP.NET web-forms to fire the click event, so this work around isn't something new, albeit not my favorite way to do things.
Basically i want a disable text field to show the value stored in a database but i don't want it to be editable by the user.
i've tried using disabled="disabled" but then it no longer POST to my form handler...
Any suggestions?
thanks
docu:
In this example, the INPUT element is
disabled. Therefore, it cannot receive
user input nor will its value be
submitted with the form.
why do you need the value? then try the readonly-attribute instead of disabled or go for another hiddenfield.
edit:
it's not fully clear to me, if you use asp.net, bu if so, you could just do
<form submitdisabledcontrols="true" runat="server">
you may give it a try :)
If you insist on using a disabled field, you can enable it during form submission by handling the form onsubmit event, where you will enable the field and submit the form.
A second option would be to use a readonly field which you may cleverly make look as disabled via CSS.
A third option would be to use a disabled and a hidden field. Rename your disabled field to something irrelevant and use the original field's name for the hidden one.
Take your pick.