Name
Use this pattern when you need to ask users for their names
Examples
General name field
<label class="form-label" for="fullName">Full Name as per NRIC</label>
<input class="form-control" type="text" id="fullName" autocomplete="name" required />Multiline name field
<div class="mb-3">
<label class="form-label" for="givenName">Given Name</label>
<input class="form-control" type="text" id="givenName" autocomplete="given-name" required />
</div>
<div class="mb-3">
<label class="form-label" for="familyName">Family Name</label>
<input class="form-control" type="text" id="familyName" autocomplete="family-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.
- This accommodates the widest range of name types and formats.
- Reduces the risk of users entering their name in the incorrect format.
- Set the
autocompleteattribute tonameso that browsers can fill in their name if they have entered in previously.
- Use multiple name fields with discretion. Not everyone's name fits the general first-name, last-name convention.
- Using multiple name fields increases the risk of a person's name not fitting the same convention. Hence, it may be entered incorrectly.
- Set the
autocompleteattributes togiven-nameandfamily-nameso that browsers can fill in their names if they have entered in previously.
Last updated 02 October 2024
