Simple Rules For Web Forms

> 2 months ago

Filling
Filling A Form Can Sometimes Be Not A Pleasant Experience

Forms interactions. Even the most popular websites have some very basic problems with them: unable to submit by pressing enter, tab won't move the focus on the next field, and so on. The good news is that the fix is trivial.

The thing about forms is that they usually work as they supposed to until you add some ajax, JavaScript code and frameworks into the mix.

You'll see what I mean.

TL;DR:

  • Autofocus on the first input
  • Make sure your labels are clickable
  • Pressing enter should submit the form
  • Make sure tab moves focus into the next input field
  • Focus on the first invalid field on validation error
  • Any AJAX processing should be indicated

Autofocus on the first input

Reaching out for a mouse when you type is quite annoying. Putting the cursor into the first input of the form lets the user start typing right away.

Doing this is as simple as adding the autofocus attribute.

<form>
  <input placeholder="E-mail" type="email" autofocus />

  <input placeholder="Password" type="password" />

  <input type="submit" />
</form>

Note: If you don’t use the real labels ( I mean

The only exception to this rule is when your form reside somewhere closer to the bottom of the page. Whenever you put a focus on a field, browser scrolls down to that element automatically. Adding a focus might not be a good idea.

Make sure your labels are clickable

When a user clicks on a label, it should focus on the corresponding input. Clicking on checkbox label should check/uncheck the checkbox.

You don't even need to do anything. This is the default behavior. Just make sure to use real label elements with proper for attribute assignment.

Here's another catch. A user understands if something is clickable by how the cursor looks. Whenever one hovers over a label the cursor should change to "pointer". Here's a pretty trivial CSS snippet:

label {
  cursor: pointer;
}

Pressing enter should submit the form

When developers process the form with JavaScript they sometimes forget to actually use the form tag. A bunch of inputs might look like a form, but lacks some important features a real form gets by default. In this case, nothing's gonna happen when you press the enter inside a field.

Making it work is straightforward. Wrap inputs in a submittable form and make your AJAX interactions on form submit.

<form onsubmit="onSubmit">
  <!-- fields -->
</form>
function onSubmit(e) {
  e.preventDefault()
  // actually submit the form with AJAX
}

Bonus: Make pressing Esc clear the current field. This is the top class.

Make sure tab moves focus into next input field.

In a perfect scenario, you don't need a mouse to submit a form.

Start with the first field (focus is already there), then you enter values and press Tab to move from one field to another. Pressing tab will navigate you to the next element on the page.

Sometimes (depending on your markup) you might find that this is not the case, and the focus moves to some meaningless elements like links or images.

If that's the case you should use the tabindex attribute to explicitly set what elements (and in what particular order) should be focusable.

Also, while we are here, it's easy to see that input has focus because you have a cursor blinking inside it. Not so easy with dropdowns or submit buttons. Very often a submit button does receive a focus, but since there is no visual clue, it's not obvious whether it's any use in pressing enter.

There is of cause a special CSS selector for that:

button:focus {
  border: 1px solid blue;
}

Focus on the first invalid field on validation error

Submitting a form and getting some validations errors is a quite appalling experience all by itself. The primary goal at this stage is to help user fixing the errors as soon as possible. There should be a clear error message, and the invalid fields should be highlighted in red.

Not so obviously, it is a very good practice also to put a focus on the first invalid field so that a user can fix the input right away. As a bonus browser will also scroll the field into the view.

function onSubmitFail() {
  const field = document.querySelector('form .invalid')
  field.focus()
}

Any AJAX processing should be communicated to user

Here's the thing. If a user submits a form normally (without ajax), it is obvious that the form is loading because browsers will put some loading indicator near the address bar — another benefit of sticking to the simple means.

But on the other hand, when using ajax request, we will need to deal with the indicator ourselves.

We should explicitly tell the user: we took your data, now we're processing it, please wait. A simple spinner would do. But it is not magical, and it is easy to forget to put it.

Also, it's a good practice to disable the form while submitting. Forgetting to do so may lead to submitting the form several times (especially if the request takes time to finish).

So, there you go, 6 simple and natural principles for the best experience with your forms.

Weekend JavaScript

Get all the best JavaScript articles in your inbox every Friday. Plus occassional articles like this one. It's Free!
1096 have already joined.