I have one form in the header of a website, and the same form in a side area (that slides out) in the same website. Is it possible to have autofocus on both input fields. When I do this, both won't show up the cursor, but when I only add it to one (the header form) it works fine. Any tips would be much appreciated.
Yes, but you need more than 2 forms in your page, and while one form is visible other one should be hidden.
E.g. User name and password are in 2 different forms. First you will enter username, check in DB whether Username is correct, then show the other form, and the password field will be visible.
Related
I've seen other questions asking how auto-fill works, but the answers all explain how to make it work, which is not what I want. I want to stop it from working. And I also realize that there are many questions out there asking that specific thing, but the answer is always to set autocomplete=off, which we all know is useless because browsers don't honour it.
And besides that, my question is a little bit different because what I'm really asking is how the browser decides which inputs to populate with what data, because I'm hoping with that knowledge I can prevent the problem I'm having.
Specifically the issue I'm having is that every time I open up my "change password" page, my search input is automatically being filled with the username. I'm trying to understand why it's doing that so that I can prevent it.
My input does not have a name or a label or an autocomplete attribute. It's just very simply as shown here. So in what universe does it make sense for a browser to find a field with the id "searchinput" and think that it makes sense to auto-fill it with a username?
<input type=text id=searchinput placeholder='Search'>
Also, on the change password page, the first of the two password fields is automatically filled in (presumably with the matching password but I can't see it because it's all circles). So why are these browsers auto-filling my search input with the username and how can I prevent it?
To explain a bit further what my code is doing: When the user selects "change password" from the menu, I load my change password page into a div (using jquery load) on the existing page and slide it down to cover most of the browser window (minus the header and menu), which means whatever page they're currently on is still there underneath, and that's also why my search input is still visible. The auto-fill happens as soon as I load my change password page.
In my particular case, the reason the input field was being auto-populated with the username is because Chrome auto-fills the first password field it finds (and you can't stop it), and then also auto-fills with the user name whatever input field comes before the password field in the DOM, regardless of what the name, id, or purpose of that field might be. In my case, it was the search input.
So to get around this I had to create another input just before the new password input and hide it out of view with absolute positioning so that Chrome will fill this useless field instead of my search input. Sigh.
<input type=text style='width:0px;position:absolute;right:-100px'>
I also added an "out of view" password field so that Chrome will auto-fill this field instead and not the first password field in my form.
<input type=password style='width:0px;position:absolute;right:-100px'>
I was wondering if someone can give me a general guideline or example for the following. I have created a form with several input box fields. When a user inputs something, the field highlights it orange. When a user goes to another field, the highlight goes away and the new box gets highlighted. When the user hits "save" button, the form gets saved. When the user hits "modify" button, it allows them to change the values in the fields. However, this time I would like to have the highlighted box stay highlighted on all the fields that have been changed (and obviously the fields that are not touched remain not highlighted). Is there anyway someone can send me a tutorial or create a quick example to demonstrate this? I am using Angular 1.5 and used Bootstrap to create a simple form.
Thank you
You Can use $touched property to know whether user clicked on that particular form field.
Ex:
custFrom.inputName.$touched
To know actual value modification use $dirty in the same way
Ex:
custFrom.inputName.$dirty
Please find working plunker
I am creating a page and the page has an editable data grid (I'm actually using jqgrid). The user can add, delete, and edit the rows of the grid. There are also some other form fields on this page such as text boxes and drop downs, but they are not part of the grid.
From a usability perspective which of the options do you think is best and why?
User manages the grid separately from the rest of the page. This means that there is a save button on the grid. So the user can save a grid row to the db without clicking the submit button. When the submit button gets clicked, the non-grid form fields get sent to the server.
user manages grid and other fields dependent upon each other. This is like an "Everything or nothing scenario." When you click the submit button, all of the form fields get submitted an saved the db along with the grid fields. If there is a validation error, nothing gets saved.
If there is a better way to handle this type of situation that I did not list, please let me know.
What I was thinking when I was in a similar situation, is how important it's that the user fills the other form fields. If they are optional and the grid is more important I would have the submit button in the grid but if I want the user to fill all the fields, the button should be at the end. In the case where the button saves the whole form, you can have a type of warning if the user skips some fields or you can have a deactivated button.
The second thing I thought was the height of the page. If the button hides 'above the fold' there is a high posibility that some users won't see it and the data won't be saved. So in that case, maybe you should have it in the grid. I would check analytics about screen resolutions.
I have two sites, both under the same domain.
I have set autocomplete="off" for a login field in one site (site 1), and not for another site (Site 2).
When I fill out the login field in Site 2, firefox asks me if I would like to remember them and I say yes.
I then return to Site 1 and select the down arrow in a login field that I have the autocomplete set to 'off'. It displays the login details I saved in Site 2. I don't want this.
Is there a way to prevent this happening?
Is the only option to set autocomplete="off" on all relevant fields in site 2 also?
Thanks
Do you have a "name" or "address" field in your form? In this case, Firefox might ignore the autocomplete attribute. See https://developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion#How_to_Turn_Off_the_Autocompletion_Feature
autocomplete is a non-standard attribute introduced by Internet Explorer anyway, so you shouldn't expect it to work everywhere. Personally, I don't like it since it should be up to the user to decide whether they want autocompletion or not.
Ok, I set the autocpomplete="off" on Site2's attributes, this made sure the user could not save them and they therefore never show up in site1 now...which is what I want.
Just to clarify - Setting autocomplete="off" simply prevents the browser from saving/remembering the values you entered, it does NOT prevent fields on your getting populated with values you may have saved from another another site that has not got autocomplete implemented on its ownfields.
Firefox always consider the previous field of a password field as the username field. Thus a possible fix for this is, put a input field between username and password in the login page of site1 and add style="display:none" for the input field. So that the FF will consider the hidden input field as the username field and as the display of the input field is none, the user cannot double click or press down arrow on the filed to get the usernames. This may work for you.
1st question is isit ok to have more than 1 form per page? i read dunno where that 1 page shld have only 1 form, true?
assuming you do login and register form in 1 page, i think there are 2 approaches
2 separate forms -> isit ok for form input[name] to be reused? eg. both login and register will have username & passwords field
1 form. use JS to hide confirmPassword field then at server side check if there is a confirmPassword is filled? upon typing this, this does not seem like a good idea...
1st question is isit ok to have more than 1 form per page?
Yes, it's ok.
isit ok for form input[name] to be reused? eg. both login and register will have username & passwords field
Yes, it's ok. You can place two inputs with the same name (in different forms). Only 'id' attribute must be unique. You should set different actions for form. For example, the first form will be <form action='login.php'>, the second - <form action='register.php'>
1 form. use JS to hide confirmPassword field then at server side check if there is a confirmPassword is filled? upon typing this, this does not seem like a good idea...
It's better to create input with type=hidden and place action type in it:
<input type='hidden' name='action' value='login'>
You can change value with Js.
Also you can create two submit buttons in one form:
<input type='submit' name='do_login' value='Login'>
<input type='submit' name='do_register' value='Register'>
If login button pressed, the server will receive 'do_login' argument. Else, it will receive 'do_register'.
You can have as many forms as you want on a page. There's no restriction, just think about whether it makes sense or not.
If you're going to have more than 1 form, it's fine to duplicate field names if they both do the same job. But they may or may not be posting to a different location, so make sure you either do that, or include a hidden field to differentiate which form was completed.
Don't use JS to hide fields, make the form work without JavaScript if possible then enhance it with JS later.
Here's a website I used to be the webmaster for, they have an intuitive (from the UI side, anyways) way of getting people to register or login in one page:
https://www.usacycling.org/myusac/index.php?pagename=login
Note that if you register (on the left) it takes you to another (larger) registration form that gathers more specific information. This allows a good quality registration information gathering mechanism while not overwhelming the user.
It's been a while, but I believe that this example was handled with two separate forms.