Name

Examples

 
<div class="cgds form-group">
  <label class="form-label" for="fullName">Full Name</label>
  <input class="form-control" type="text" id="fullName" autocomplete="name" required />
</div>

        

 
<div class="cgds form-group">
  <label class="form-label" for="familyName">Family Name</label>
  <input class="form-control" type="text" id="familyName" autocomplete="family-name" required />
</div>
<div class="cgds form-group mb-3">
  <label class="form-label" for="givenName">Given Name</label>
  <input class="form-control" type="text" id="givenName" autocomplete="given-name" required />
</div>

        

Usability guidelines

Labeling of name fields

• Name fields should be long enough to accommodate the names of your users.
• Make sure that you support all characters that users may need to enter, including symbols and numbers.

General name fields

• This accommodates the widest range of name types and formats.
• Reduces the risk of users entering their name in the incorrect format.
• Set the autocomplete attribute to name so that browsers can fill in their name if they have entered in previously.

Multiline name fields

• Use multiple name fields with discretion. Not everyone's name fits the general first-name, last-name convention.
• Set the autocomplete attributes to given-name and family-name so that browsers can fill in their names if they have entered in previously.