Six Easily Fixable Web Form Issues

Forms interactions.

It's too easy to mess them up with JavaScript, AJAX, and modern frameworks. Being unable to submit with enter, or jump between the fields with tab is not fun. The good news is that the fix is usually trivial.

Lets have a look at some of the properties of a good form.

Here's a checklist:

• Put focus on the first type-able input
• Make sure your labels are clickable
• Pressing enter should submit the form
• Tab moves the focus into the next input field
• Focus on the first invalid field on validation error
• Background network calls (as any other asynchronous work) should be indicated in UI

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>

A second benefit is that on mobile browser will auto-scroll the form into the view.

You might not want to do this when you have multiple forms on one page (though having 2 forms one page is a questionable practice).

Note: If you don't use the real labels (label tags), but placeholders only, you'd also want to make sure that the placeholder doesn't disappear when user focus into an empty field (some UI libraries will do this out of the box). The context is important.

Make sure your labels are clickable

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

You don't even need to do anything. This is the default behavior. Just make sure to use the real label elements with for attribute assigned to the id of the element. If you don't have an id, you can wrap input in label and that should also work.

Here's another catch. A user knows if something is clickable from what the cursor looks like. So it's a good idea to change the cursor to "pointer". Here's a pretty trivial CSS snippet:

label {
  cursor: pointer;
}

Pressing enter should submit the form

When using AJAX to submit a form, it is not obligatory to use form's onSubmit handler. Button's onClick can be used instead, and sometimes developers don't use the form tag at all.

But a bunch of inputs might look like a form, while lack some important features a real form has. In this case, nothing's gonna happen when you press the enter inside a field.

Making it work is straightforward. Wrap the 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 and your users will love you.

Tab moves the focus into the next input field

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

You start with the first field (focus is already there), then you type the data, and hit the Tab to move from one field to another.

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 can fix it by using the tabindex attribute to explicitly set what elements (and in what particular order) should it move to.

Also, while we are here, it's easy to see that an 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.

Here's a simple CSS for that:

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

Focus on the first invalid field on validation error

Getting some validations errors is a quite appalling experience all by itself. The primary goal is to help the user with fixing those errors. 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.

But on the other hand, when using an 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.

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

That was the 6 small and easily-fixable form problems. Please, pay attention! Respect your user!