Do not split up expected form groupings

Some groupings like username and password are so commonly expected that both people and browsers can struggle if they are changed.

Typical example that causes barriers

This can happen if systems have non-standard patterns, for example needing extra details to sign in.

Example
HTML
Nunjucks

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Original version</span>
  <h1 class="govuk-heading-l">
    Log in
  </h1>
  <div class="govuk-form-group govuk-!-margin-bottom-2">
    <label class="govuk-label" for="username">
      User ID
    </label>
    <div id="username-hint" class="govuk-hint">
      This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us.
    </div>
    <input
      class="govuk-input govuk-!-width-one-half" id="username" name="username" type="text" spellcheck="false" aria-describedby="username-hint" autocomplete="username">
  </div>
  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my user ID</a>
  </p>
  <div class="govuk-form-group">
    <label class="govuk-label" for="surname">
      Surname
    </label>
    <div id="surname-hint" class="govuk-hint">
      This must be the name registered to the account
    </div>
    <input
      class="govuk-input govuk-!-width-one-half" id="surname" name="surname" type="text" spellcheck="false" aria-describedby="surname-hint" autocomplete="family-name">
  </div>
  <div class="govuk-form-group govuk-password-input govuk-!-margin-bottom-2" data-module="govuk-password-input">
    <label class="govuk-label" for="password-input">
      Password
    </label>
    <div class="govuk-input__wrapper govuk-password-input__wrapper">
      <input
        class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-!-width-one-half" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
      <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button"
        aria-controls="password-input" aria-label="Show password" hidden>
        Show
      </button>
    </div>
  </div>
  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my password</a>
  </p>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Original version</span>

  <h1 class="govuk-heading-l">
    Log in
  </h1>

  {{ govukInput({
    formGroup: {
      classes: "govuk-!-margin-bottom-2"
    },
    label: {
      text: "User ID"
    },
    hint: {
      text: "This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us."
    },
    classes: "govuk-!-width-one-half",
    id: "username",
    name: "username",
    autocomplete: "username",
    spellcheck: false
  }) }}

  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my user ID</a>
  </p>

  {{ govukInput({
    label: {
      text: "Surname"
    },
    hint: {
      text: "This must be the name registered to the account"
    },
    classes: "govuk-!-width-one-half",
    id: "surname",
    name: "surname",
    autocomplete: "family-name",
    spellcheck: false
  }) }}

  {{ govukPasswordInput({
    formGroup: {
      classes: "govuk-!-margin-bottom-2"
    },
    label: {
      text: "Password"
    },
    classes: "govuk-!-width-one-half",
    id: "password-input",
    name: "password"
  }) }}

  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my password</a>
  </p>

  {{ govukButton({
    text: "Continue"
  }) }}
</form>

This will not work at all without autocomplete tagging (as mentioned in coding mistakes). However, even with autocomplete examples, this breaks user mental models for account fields, and also means browsers may have unexpected results.

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Improved version</span>
  <h1 class="govuk-heading-l">
    Log in
  </h1>
  <div class="govuk-form-group">
    <label class="govuk-label" for="surname">
      Surname
    </label>
    <div id="surname-hint" class="govuk-hint">
      This must be the name registered to the account
    </div>
    <input
      class="govuk-input govuk-!-width-one-half" id="surname" name="surname" type="text" spellcheck="false" aria-describedby="surname-hint" autocomplete="family-name">
  </div>
  <div class="govuk-form-group govuk-!-margin-bottom-2">
    <label class="govuk-label" for="username">
      User ID
    </label>
    <div id="username-hint" class="govuk-hint">
      This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us.
    </div>
    <input
      class="govuk-input govuk-!-width-one-half" id="username" name="username" type="text" spellcheck="false" aria-describedby="username-hint" autocomplete="username">
  </div>
  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my user ID</a>
  </p>
  <div class="govuk-form-group govuk-password-input govuk-!-margin-bottom-2" data-module="govuk-password-input">
    <label class="govuk-label" for="password-input">
      Password
    </label>
    <div class="govuk-input__wrapper govuk-password-input__wrapper">
      <input
        class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-!-width-one-half" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
      <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button"
        aria-controls="password-input" aria-label="Show password" hidden>
        Show
      </button>
    </div>
  </div>
  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my password</a>
  </p>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Improved version</span>

  <h1 class="govuk-heading-l">
    Log in
  </h1>

  {{ govukInput({
    label: {
      text: "Surname"
    },
    hint: {
      text: "This must be the name registered to the account"
    },
    classes: "govuk-!-width-one-half",
    id: "surname",
    name: "surname",
    autocomplete: "family-name",
    spellcheck: false
  }) }}

  {{ govukInput({
    formGroup: {
      classes: "govuk-!-margin-bottom-2"
    },
    label: {
      text: "User ID"
    },
    hint: {
      text: "This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us."
    },
    classes: "govuk-!-width-one-half",
    id: "username",
    name: "username",
    autocomplete: "username",
    spellcheck: false
  }) }}

  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my user ID</a>
  </p>

  {{ govukPasswordInput({
    formGroup: {
      classes: "govuk-!-margin-bottom-2"
    },
    label: {
      text: "Password"
    },
    classes: "govuk-!-width-one-half",
    id: "password-input",
    name: "password"
  }) }}

  <p class="govuk-body">
    <a class="govuk-link" href="#">I have forgotten my password</a>
  </p>

  {{ govukButton({
    text: "Continue"
  }) }}
</form>

Restructuring the input fields to follow existing form grouping means both people and browsers are more likely to be able to correctly input the fields.

Do not split up expected form groupings

Typical example that causes barriers

Contents

Improved version

Contents