HTML Guidelines for Creating Better Forms

html
Published on July 19, 2020

This article discusses some basic HTML guidelines for creating better forms. Mostly it deals with HTML tags & attributes which if included, can help the user to fill out the form better, and also reduce workload and bugs from developer's side.

HTML tags & attributes that are discussed include :

  • Using <form> element
  • Using <label> element
  • Using <button> element
  • Using proper input type attribute
  • Using autofocus attribute
  • Using inputmode attribute
  • Using name attribute
  • Using different name attributes for password input
  • Using required attribute

1) Use <form> Element to Wrap Input Elements

This is unfortunate, but in many cases developers just use a <div> to wrap input elements.

Use the standard <form> element to wrap input elements. This makes the page more accessible to screen readers and assistive devices. It also helps browsers to understand that the HTML markup represents a form, and then they can enable built-in form features.

2) Use <label> Element to Specify Input Labels

  • Use the <label> tag to label an input. By using the for attribute on the label, a click or tap on it automatically moves the focus to the associated form input.

    <label for="login-email">Email</label>
<input type="email" id="login-email" />

    <label> is also helpful for screen readers as they speak the label text when the input gets focused.

  • placeholder attribute for input can be used, but in addition to the <label>. If only placeholders are used, users may sometimes get confused what the input represents once they start entering. The label text will help preventing such a situation.

    <!-- use label even if including placeholder -->
<label for="login-email">Email</label>
<input type="email" id="login-email" placeholder="Your Email" />

  • Put <label> above the input element, not side by side. According to Google AI, this enables quicker scanning by users.

3) Use <button> Element to Submit Form

Use the standard <button> element for the form submit button as it contains built-in form features.

4) Use Proper type Attribute for Input Fields

Use relevant type attribute for input elements. This helps the browser to automatically validate the value provided by the user, and give a warning if the value provided is incorrect. This also means that we don't need to write Javascript code to validate those input fields.

Some of the special input types that have achieved cross-browser compatibility include :

  • number — specifies numeric input

    <input type="number" />

  • email — specifies email input

    <input type="email" />

  • url — specifies url input

    <input type="url" />

5) Use autofocus Attribute

Use the autofocus attribute for the first element of the form. This makes it clear for the user where to start.

<input type="email" name="email" autofocus />

6) Use inputmode Attribute

The inputmode attribute gives a hint to the browser regarding the type of onscreen keyboard to be displayed in mobile devices. This makes it easier for the user to enter the input field within the size constrained onscreen keyboard in mobiles.

<!-- display only numbers in onscreen keyboard -->
<input type="text" inputmode="numeric" />

inputmode attribute can have the following values :

  • text
  • decimal
  • numeric
  • tel
  • search
  • search
  • url

7) Use name Attribute

The name attribute helps browser to remember input fields, and this can then be used to auto fill other forms.

<input type="email" name="email" />

8) Use Different name Attributes for Password Input on Different Forms

Different name attribute should be given to password input on different forms — Sign-in, Sign-up or Change Password.

This will be helpful in cases where browser saves and auto fills the login credentials. For example, this will prevent auto filling the login password in the Change Password form. Another example can be that it will prevent auto filling the login password in the Sign-up form for another user that uses the same device.

<!-- password input for login form -->
<input type="password" name="login-password" />

<!-- password input for signup form -->
<input type="password" name="signup-password" />

<!-- password input for change password form -->
<input type="password" name="new-password" />

9) Use required Attribute

Use the required attribute for fields that are compulsory.

<input type="email" name="email" required />

This attribute will trigger the browser to automatically show a warning if the input has been left empty, or is of invalid type. This also means we don't need to write Javascript code to check whether those fields have been filled or not.

Credits and further reference : This article uses the suggestions given in this excellent video tutorial. Apart from HTML changes, the video also discusses tiny CSS & design changes that can help in creating better forms.

In this Tutorial