autocomplete attribute when first and last names are separated in a form

Conclusion

To conclude,

For last name:autocomplete="family-name"

For first name:autocomplete="given-name".

However, it is only auto-completed on Safari for iOS and Mac.

Let's give up on Android and Chrome.

I will explain in more detail.

Values suggested by autocomplete

First of all, the values suggested by the autocomplete attribute are

For "Safari" on iOS and Mac, contact values are used,

while for Android, values set in the browser are suggested.

The name fields differ between iOS and Android.

Given this, it's clear that Safari on iOS can auto-complete even if "last name" and "first name" are separated,
but Chrome cannot.

Behavior on actual devices

In fact, when tested on Safari for iOS, it auto-completes perfectly,

However, on Chrome for Android, although suggestions are displayed, the first character goes into the "last name" field, resulting in "Yama" and "da Taro".

This is also the case for Chrome on Windows and other platforms.

By the way, even if I inserted a half-width space between "last name" and "first name" in the Chrome settings, it didn't work.

Summary

Therefore, in forms where "last name" and "first name" are separated (or must be separated),

the autocomplete attribute should be:

For last name: autocomplete="family-name"

For first name: autocomplete="given-name"

The source code would look like this:

<form>
	<label>姓 <input type="text" autocomplete="family-name"></label>
	<label>名 <input type="text" autocomplete="given-name"></label>
</form>

However, while it auto-completes correctly on Safari for iOS and Mac, it is unlikely to auto-complete on Chrome for Android or Windows.

If you found different behavior in your environment or know a better method, please let me know in the comments.

Comments