Technical Requirements
Chrome Autofill uses autocomplete attributes, field names, and labels to predict fields. Here is how to configure them for phonetic names.
1. Autocomplete Attribute vs Field Name & Label
The autocomplete attribute takes precedence. However, there is no standard HTML value for phonetic names. Therefore, you should either **omit** it or set it to its regular name counterpart:
- Phonetic Full Name:
autocomplete="name" - Phonetic Family Name:
autocomplete="family-name" - Phonetic Given Name:
autocomplete="given-name"
2. Valid Field Names and Labels
If the autocomplete attribute is missing or set to the regular name counterpart, use the following regex-matching strings in your name attributes or label text:
| Field Type | Valid Field Names (Regex) | Valid Field Labels (Regex) |
|---|---|---|
| Full Phonetic Name | full-name-phonetic |
γ»γ€γ‘γ€, γγγγ |
| Family Phonetic Name | family-name-phonetic |
γ»γ€, γγ, ε§γ΅γγγͺ |
| Given Phonetic Name | given-name-phonetic |
γ‘γ€, γγ, εγ΅γγγͺ |
3. Specifying Character Set (Katakana vs Hiragana)
Autofill transliterates based on the **label character set**, not the name. If the label contains at least one Katakana character, Autofill fills Katakana. Otherwise, it defaults to Hiragana.
Example: Katakana expecting form
<form>
<label for="family-name-phonetic">γ»γ€</label>
<input name="family-name-phonetic" type="text" />
</form>Example: Hiragana expecting form
<form>
<label for="family-name-phonetic">γγ</label>
<input name="family-name-phonetic" type="text" />
</form>4. Debugging Tips
- Open page and open DevTools.
- Go to **Autofill** tool (via 3-dot menu -> More tools).
- Trigger filling. The tool records the phonetic name fields as "Alternative full name", "Alternative family name", or "Alternative given name".
- To verify character set filling, check manually by creating a Japanese profile in parameters:
chrome://settings/addresses.