Skip to content

Technique H100:Providing properly marked up email and password inputs

Applicability

Content structured in HTML.

This technique relates to:

Description

The objective of this technique is to provide examples of properly marked up email and password inputs. This technique involves providing form mechanism where the user can enter their email address and password to log into the website.

Browsers and password managers generally use the accessible name of the input to determine how to fill it in. The user agent (including password managers) should not be blocked from populating the fields, and pasting by the user should also not be blocked.

Examples

Example 1: properly marked up email and password inputs

A secure website has an email and password based login form. 


<form method="post" action="login">
 <div>
   <label for="email">Email</label>
   <input id="email" type="email" autocomplete="email" ... >
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" type="password" autocomplete="current-password" ... >
  </div>
    <input type="submit" value="Login" >
  </div>
</form>

Other sources

No endorsement implied.

Tests

Procedure

For websites which require users to login with an email and password only:

  1. Check that each input for authentication includes an appropriate accessible-name.
  2. Check that each input for authentication allows pasting.

Expected Results

  • #1 and #2 are true.
Back to Top