Strange form behavior

Forms allow users to submit unique content to a website or to complete a task on it. They are important touchpoints that affect the user's perception of the site, which is why they need to work in a correct and expected way. This is not always obvious and with the rush to complete a website, they might not receive the attention they deserve. This, on its own, makes websites vulnerable to attacks and can demotivate webmasters to continue to support user-generated content.

Here I will share my observations of strange form behavior that might stand in the way of how users interact with a website.

Chrome sends a form even by disabled submit button

When a submit button is disabled on a website, most browsers will do nothing when the user presses the Enter key. Not Chrome. As someone noted on StackOverflow, the input is send no matter if the button was disabled or if it doesn't have an event handler attached. So to make things work in Chrome, we must attach the submit event to the form and return false. In my case, I checked if the button was disabled and then returned false. This way I disable form submission in Chrome only if the button has been disabled dynamically by the rest of the script, which I feel is a minor intervention.

Selections and mouse motion

The direction to which users might move their mouse on a website form is often overlooked, but the design must consider it too. To illustrate why, I will use two examples — one fake and one real.

Populating first and last name in closely located input fields

Lets say we have two input fields for the user's first and last names [1]. I enter my first and last name [2], but then notice that I pressed accidentally R instead of K [3]. So I decide to correct that “rusty”(Rost in German) name as it doesn't sound good. Moving to next field in the form (whatever it might be about) made me also lose the focus, so I decide that it will be faster to select the whole text and then press the right arrow key to come to the first letter of my last name. So I click on the input field and start dragging to the left, but then I accidentally release the mouse key just before the incorrect letter [4]. At that point it would have been better to press an arrow key, but since everything should happen without thinking and in the millisecond range, I decide to try again. Because my first selection was too short, I'm already impatient and choose on my second try to extend it a bit, just-in-case. Instead of starting the selection far away from the end letter, I insist to start the new selection exactly where the existing one disappears [5]. Due to my imperfect hand-mouse coordination, I end up clicking a couple of pixels to the left of the rightmost position of the current selection. Because the browser doesn't give me any feedback on mousedown over a selection (only while dragging), I decide it is time to move fast to the left. This time I extend the imaginary selection a bit and release the mouse button at a position 1px inside the input field used for my first name. Then I notice that not only I haven't selected the content in the last field, but actually appended the correct part of it to my first name. The result [6] shows that what started as a simple mistyped letter can quickly ruin the content of nearly located input field. If you know of a way for people to avoid this on their websites, I'll be glad to hear.

My second example is actually the search form on the Amazon page. Here is how it currently looks. I populated the search field with random letters, it could have been anything I search for. Eventually, I want to delete these letters, as they are nonsense.

Text selection on the Amazon website - step 1

So I start selecting from right to left and continue until all letters are selected.

step2

Because I don't care too much where my cursor goes when the whole selection is there, I move my mouse slightly to the bottom and release the left button.

ste3

Surprise! My text selection is no longer there. And this is what could have happened:

step4

Now, lets return to the above picture and imagine the label “Search” wasn't there. I'm not sure if that was previously the case, but I remember the time when there wasn't that much space between the search field and what is now the black box “Shop in department”. As a result, my selections were almost always completely ignored and I was forced to use Ctrl+A to select the whole text. Because of this discomfort, I decided to describe this case here.

bit.ly/11zo8wZ