Autocomplete a předvyplňování formulářů
Atribut autocomplete se u tagu <input> používá pro automatické vyplňování formulářů. Přijde mi velmi důležitý a málo známý. Kromě input type="text", u kterého je nejčastější, se dá použít i u většiny jiných typů inputu a u tagu textarea. Budu i hodně psát o atributu name, se kterým autocomplete historicky souvisí.
V některých textech se zaměňují slova autocomplete a autofill. Autofill je zjednodušeně řečeno starší označení pro tutéž funkcionalitu formulářových políček.
Příklad na autocomplete, který do prvního pole vyplní křestní jméno a do druhého telefon.
email: <input type="text" id="cokoli" name="blbost"
autocomplete="given-name">
telefon: <input type="text" id="bflmpsvz" name="hchkrdtn"
autocomplete="tel">
I když máte v id a name blbosti, dá se to zachránit atributem autocomplete. Ten určuje, jaká informace se uživateli do políčka předvyplní.
Ještě pár příkladů
Tohle je špatně, protože se nic automaticky nedoplní:
Zadejte email: <input name="nejaka_blbost">
Lepší by bylo mít tam třeba hodnotu "mail", protože je šance, že do takového políčka už uživatel v minulosti mailovou adresu vyplňoval. Na to je dobrý režim historických hodnot nebo režim hádání, že se tyhle věci občas podaří:
Zadejte email: <input name="mail">
Ideální by bylo změnit atributu name na hodnotu "email", protože "email" je standardní hodnota atributu autocomplete pro mailovou adresu. Pak bude správně vyplněná jak historicky, tak i v režimu vyplňování:
Zadejte email: <input name="email">
Ale ne vžcky lze name změnit, protože někdy nelze upravit aplikaci, která name následně zpracovává. Pak je nutné name nechat blbé. Může se ale doplnit autocomplete:
Zadejte email: <input name="nejaka_blbost" autocomplete="email">
A přesně tohle vám doporučuji udělat. Místo přepisování name doporučuju do svých formulářů doplnit hodnoty autocomplete. A ideálně tak, aby krom režimu hádání a historických hodnot fungovaly i v režimu vyplňování. O těch různých režimech je tahle stránka.
Proč je autocomplete důležité
- Protože uživateli rychle vyplní formulář, typicky jeho jméno, adresu, mail a tak dále.
- Zrychluje to vyplnění formulářů, zvyšuje pravděpodobnost, že to uživatel vůbec vyplní.
- Eliminuje to chyby vzniklé špatným předvyplněním formulářů.
- Pomáhá rozlišit nově tvořené heslo od starého platného hesla.
- a tak dále
V anglickém prostředí je slovo autocomplete také synonymum pro našeptávač (podobné spíše tagu datalist). V tomto textu se zabývám pouze autocomplete ve významu doplnění textového pole input.
Proč je autocomplete složité
Protože to je jedna z mála věcí, které se v moderních prohlížečích opravdu liší.
Jak se ta hra vyhrává?
Je potřeba vždy používat pouze standardní hodnoty tagu autocomplete. Ty fungují všude.
Přehled režimů vyplňování
Tohle je můj unikátní přínos - pojmenovám různé režimy. Autoři jiných nápověd je nerozlišují a soustředí se vždy jen na jeden režim. Jenže pak je v tom bordel.
| název režimu | podle čeho se určuje typ pole | jaké se vyplní hodnoty |
|---|---|---|
| režim vyplňování | atributy autocomplete, name a id se standardními hodnotami | předvyplněné údaje z nastavení prohlížeče nebo ze systému z kontaktu |
| režim hádání | atributy autocomplete, name a id, ale pokud neodpovídají standardním hodnotám, pak také nestandardní hodnoty a všechny možné texty okolo (rozdíly v prohlížečích) | |
| vyplňování jmen a hesel | atribut name="password", atribut autocomplete | jména a hesla ze správce hesel. Do něj se dostali při starším použití přihlašování na téže doméně, pokud uživatel souhlasil. |
| vyplňování platebních karet | atribut autocomplete= cc-* | údaje z uložených karet, které jsou prohlížeči uložené po minulých platbách, pokud s uložením karty uživatel souhlasil |
| režim historických hodnot | atributy name a id | historické hodnoty, které byly vyplněné u stejných name a id. Hodnoty se ukládají automaticky, uživatele se nikdo neptá. |
Dvě úlohy autocomplete
Při předvyplňování řeší prohlížeč dvě odlišné úlohy:
- jak se dozvědět údaje o uživateli, tedy například jaký má telefon
- jak u políčka <input> poznat, že právě do něj má přijít třeba telefon - na to právě slouží krom jiných signálů také autocomplete.
Údaje o uživateli
Údaje o uživateli se berou z různých míst.
- Nejlepší je, že si svoje údaje uživatel předvyplní v prohlížeči. Jde hlavně o adresy.
- Bankomatní karty si uživatel také může zadat do platebních metod.
- Hesla se berou ze správce hesel, který je v prohlížeči
- Prohlížeče na mobilech berou údaje (pokud se jim to povolí) z kontaktů majitele telefonu. To je dost praktické.
- a prohlížeče také vedou uživatele k tomu, aby si tyhle věci správně vyplnili. Například když poprvé zadám novou kartu, prohlížeč se mě zeptá, jestli ji chci uložit do svých platebních metod.
- Prohlížeče si také všímají starších zadaných hodnot do formulářových polí se stejným ID nebo NAME. Tomu říkám "režim historických hodnot" a rozebírám to níže.
Nastavení poštovní adresy v prohlížeči
Podrobněji zmíním tu první možnost, zadání adresy do prohlížeče.
Například v desktopovém Chrome je to v Nastavení > Automatické vyplňování hesel chrome://settings/addresses). Tam jsou tři sekce: "Správce hesel", "Platební metody" (tedy karty) a ta třetí jsou "Adresy a další". V adresách může být vyplněno více různých adres - v takovém případě se při vyplňování dá uživateli na výběr, kterou adresu chce použít. Když se přidává nebo upravuje adresa, vypadá to třeba takhle:
Úprava předvyplněné adresy v desktopovém Chrome. Můžete si všimnout, že tu
spousta věcí chybí, takže je do desktopového Chromu není jak zadat
(například doručovací adresu).
V prohlížeči je možné mít nastaveno více různých profilů s různými údaji - Chrome to chápe jako různé adresy. Ale není to moc praktické, protože to pak zdržuje při vyplňování a ne vždy je jasné, který profil je který (například když mají stejný email). Kdo nakupuje hodně letenky, tomu se vyplatí udělat si další profil s údaji bez háčků a čárek, protože je letecké společnosti neumějí zpracovat.
Rozpoznávání typu pole
To je druhá úloha, kdy prohlížeč potřebuje zjistit, jaký typ údaje se do pole má vyplnit. Například do kterého inputu patří telefon a do kterého jméno.
Pokud jsem to správně pochopil, automatické hodnoty ve formuláři mají více režimů, které jsem si pojmenoval vyplňování a hádání:
- režim vyplňování se striktně řídí tím, co vidí v atributech autocomplete, name nebo id (přičemž autocomplete má přednost). Je to režim, který se prohlížeč pokouší použít nejdříve.
- režim hádání je nejistá heuristika, která v každém prohlížeči probíhá jinak. Hlavně to dělá Chrome. V tomto režimu, kdy už ví, že nedostal přesný typ pole, se ho pokusí uhodnout. Používá k tomu opravdu hodně různých signálů z okolí formulářového pole, tedy typicky texty nad, texty pod, label, title, placeholder a hodnoty dalších atributů. Často se mu to povede, takže uživateli vyplní správnou hodnotu. Někdy se typ pole určit nedaří, tak ho prohlížeč nechává prázdný. Jsou situace, kdy i chybuje, takže pole vyplní nesprávnou hodnotou.
- vyplňování hesel je podobný režimu vyplňování, ale řídí se vlastními odlišnými pravidly (některá zmiňuji níže). Typ pole s heslem se určí podle <input type="password"> a co je uživatelské jméno, prohlížeč většinou nějak uhodne (ale taky se mu dá napovědět autocomplete="username").
- vyplňování platebních údajů má také svá vlastní pravidla, ale je velmi podobné režimu vyplňován
Dále existuje funkčnost, kterou jsem si pojmenoval režim historických hodnot. Kombinuje v sobě obě úlohy - jak zjištění informací, tak jejich použití. Pole se vyplňují na základě toho, co prohlížeč v minulosti viděl, že uživatel do stejně pojmenovaných polí vyplňuje na jiných webech.
Autofill expectation mantle a autofill anchor mantle
V oficiální dokumentaci k autocomplete se objevují relativně složité pojmy Autofill expectation mantle a Autofill anchor mantle. Vypadají strašně důležitě. Trvalo mi asi dva roky, než jsem pochopil, že to je totální ptákovina a není potřeba se jimi vůbec zabývat. Všechny případy jsou pokryté tím, čemu dokumentace říká autofill expectation mantle. Jediná podivná a velmi řídká výjimka je situace, kdy se autocomplete použije u skrytého pole, tedy <input type="hidden">. V takové situaci se používá autofill anchor mantle, ale fakticky to vůbec nic nedělá. Takže tyhle věci s mantle (plášť) můžete v klidu ignorovat.
Přesto mě to dovedlo k poznání, že autofill má spoustu různých režimů, které zde popisuju.
Režim vyplňování a standardní hodnoty
Režim vyplňování je moje označení. Používám ho na odlišení od jiných režimů (hlavně od režimu hádání a režimu historických hodnot - to jsou také moje termíny). Vyplňování je nejlepší režim.
Vyplňování jednoduše bere vyplňované hodnoty z nastavení prohlížeče nebo ze systému. Stejně jako v režimu historických hodnot se také kromě atributu autocomplete kouká i atributy name a id, ale tentokrát se standardními hodnotami. Výčet standardních hodnot autocomplete ve standardu HTML 5 obsahuje asi 50 různých typů informace.
Pokud uživatel při režimu vyplňování zvolí jedno políčko z formuláře, z nastavení prohlížeče se doplní i všechna ostatní políčka, která mají shodu s atributem name nebo autocomplete. Očkává se totiž, že potvrzením jedné hodnoty uživatel zvolil celý uživatelský profil. To naneštěstí často vede k chybám, pokud autor stránky autocomplete přesně nezná nebo si hodnoty name ve formuláři zvolil nestandardně, jak ho napadlo.
Hodnotou atributu autocomplete může být i více standardních hodnot oddělených mezerou (některé zdroje říkají, že čárkou, ale čárka je asi zbytečná). Uživateli se potom při vyplňování nabídne všechno, co souhlasí.
Jak už jsem zmínil, podrobný rozpis všech hodnot je ve specifikaci. Tohle byly jenom příklady.
V atributu name stačí, když je standardní hodnota uvedena jako podřetězec hodnoty. Například name="XXBS-name" bude fungovat jako celé jméno, protože obsahuje řetěžec "name". Hodnota name="hotel" bude fungovat jako telefon, protože obsahuje řetězec "tel".
Hodnota atributu autocomplete má přednost před hodnotami uvedenými v name. Pokud atribut autocomplete odpovídá nějaké standardní hodnotě, tak se hodnoty atributů name i předchozí texty před políčkem ignorují. Výjimka je, když autocomplete obsahuje dvě nebo více platných hodnot, které se navzájem vylučují (například zip a email). Pak se obě (všechny) ignorují a vypňuje se případně podle jiných informací. Ale pozor, některé hodnoty se navzájem nevylučují (např. "billing address-line1").
Neznám žádnou hodnotu autocomplete, která by určovala například jméno bez diakritiky. To by se často hodilo u formulářů, které akceptují jenom latinku. Ale neexistuje to, pokud vím. Je potřeba vytvořit si další profil.
Firefox vyplňování zatím nemá
V době aktualizace tohoto textu (2024) Firefox neumožňoval v české verzi nebo pro uživatele v Česku nastavení adresy. Tím pádem ve Firefoxu vůbec nefungují režimy vyplňování a hádání.
Section-*, více sekcí formuláře
Section slouží pro oddělení částí formuláře, které se týkají něčeho jiného. Například dvou různých osob. Takhle to dopadne, když máte ve formuláři údaje o více lidech, ale neumíte používat section-*
Co se tady Invii děje: protože formulář nemá vyznačené autocomplete a už vůbec ne section, přepnul se prohlížeč do režimu hádání (viz níže) a vyplnil pole blbě, protože druhé jméno a příjmení bylo k té adrese blíž než první. Zajímavé je, že v tomhle případě by nestačilo mít vyplněné jenom správně autocomplete. Důležité je mít označení, o kterou jde sekci (v tomto případě o kterého člověka), tedy začít autocomplete zápisem sekce a oddělit to mezerou. Správně tedy kód měl vypadat takhle:
Dospělý cestující (1)
Jméno <input autocomplete="section-person1
given-name" ... >
Příjmení <input autocomplete="section-person1
family-name" ...>
...
PSČ: <input autocomplete="section-person1
postal-code" ...>
...
Dospělý cestující (2)
Jméno <input autocomplete="section-person2
given-name" ... >
Příjmení <input autocomplete="section-person2
family-name" ...>
Režim hádání typu pole
Teď to začne být trochu složité.
Režim hádání je velmi podobný režimu vyplňování. Liší se jen podle toho, na co prohlížeč kouká, když určuje typ pole.
Aby předvyplňování pro uživatele dobře fungovalo, snaží se je prohlížeče používat nejenom ve formulářích, které jsou udělané dobře (např. podle předchozího návodu pro režim vyplňování). Prohlížeče ve skutečnosti řeší následující zadání:
aby vyplňování fungovalo, i když to autor stránky nějak zvoral
Naprostá většina formulářů na internetech je nějak blbě. O autocomplete málokdo ví a atributy name fláká každý, jak se mu to líbí, takže když funguje režim vyplňování, je to spíš šťastná náhoda než záměr autora.
Kvůli tomu se prohlížeče snaží patřičný typ pole i hádat z jiných údajů, čemuž říkám režim hádání. Mají na to soustavu neveřejných heuristických pravidel. Například prohlížeč Chrome už je v tom tak dobrý, že většinu formulářů vyplňuje často dobře, aniž by autor webu musel cokoli udělat. Jenomže ne všichni mají Chrome a i Chrome se často splete.
Z čeho režim hádání hádá?
- z atributu name - to je základ režimu vyplňování i režimu hádání. Pokud například prohlížeč vidí name="zip", dost často z toho trefí, že správná hodnota je postal-code. Tu následně použije.
- stejně jako name funguje atribut id
- z dalších atributů jako jsou title, placeholder a podobné,
- z překladů atributů z jazyka stránky do angličtiny,
- z okolních textů, které obklopují <input>. Hádání má rádo spárované tagy <label>, protože u nich ví, ke kterým <input> patří.
- ze širších souvislostí. Například když vidí za sebou dva inputy name a surname, mohl by z toho pochopit, že to první name neznamená celé jméno (což se standardně vyplňuje, viz výše tabulku), ale že asi to první bude given-name a to druhé family-name
Celé je to magie a blbě se to debuguje. Chrome má v DevTools i modul na debugování hádání autocomplete, ale nevysvětluje, proč si něco myslí - vysvětluje jenom, k čemu došel, což je skoro na nic. Naštěstí to není potřeba úplně chápat, protože snadné řešení je naflákat tam standardní hodnoty, čímž se to přepne z hádání na vyplňování, a jít dál.
Rozdíly režimu hádání v prohlížečích
Je potřeba upozornit na jednu důležitou věc. Zatímco u vykreslování HTML a CSS už se jednotlivé prohlížeče téměř neliší, protože skoro všechny (kromě Firefoxu) používají stejné nebo podobné vykreslovací jádro, v autocomplete funkcionalitě se mohou lišit zásadně. Proč? Protože to si každý prohlížeč implementuje sám.
Z toho plyne, že autocomplete je potřeba pečlivě testovat v různých prohlížečích, ne pouze ve Chrome. Například je nutné testovat v Safari. Podle mých zkušeností Safari akceptuje standardní hodnoty a nic si nevymýšlí. Proto jenom standardní hodnoty považuju za bezpečné.
Myslím, že je zřejmé, co je na režimu hádání blbé. Ne vždycky funguje správně. Někdy do inputu na jméno vyplní celé jméno, jindy jenom křestní. Telefonní číslo se vyplní s předvolbou, i když jej formulář vyžaduje bez předvolby. A tak dále. Před příchodem na to autoři webů reagovali tak, že automatické doplňování vypínali zvláštní hodnotou autocomplete="off". To vypíná režim hádání.
Tohle je nějaký můj starší text o režimu hádání, který je mi líto smazat:
Asi nejdál v rozvíjení autocomplete v režimu vyplňování je prohlížeč Chrome. Krom standardních hodnot může mít další aliasy. U Chrome znám zip za postal-code (PSČ) a city za address-level2 (město). Prohlížeč Chrome kromě atributů autocomplete a name scanuje i texty nacházející se před tagem input (počínaje začátkem <form> nebo předchozím <input>). Pokud v textech najde odpovídající retězce, které zná (např. "postal code", "post code" či "postalcode", ale ne "zip"), bude následující input vyplňovat (v tomto případě jako autocomplete "postal-code"). Pokud najde známých řetězců více, buďto si nevybere, nebo vybere něco podle docela složitého algoritmu, který jsem nedokázal odhalit. ("name" je křestní jméno, ale nesmí být kolem něj jiný text; příjmení jsem nijak nevydráždil; "email" pro email; "phone" pro telefon.) Je možné, že Chrome umí scanovat i jazykové verze, ale nějak se to asi musí nastavit, neumím to. Pro debugování fungování autocomplete v Chrome existuje i podsekce DevTools. Ta je sice užitečná na základní věci, které ukazují co se kam vyplní, ale neříká, proč se co kam vyplní. Takže stejně je Chrome černá skříňka.
Předvyplňování hesel a uživatelských jmen
Do předvyplňování hesel jsem ještě úplně neproniknul. Je závislé na správci hesel, který je v prohlížeči oddělený od ostatní logiky autocomplete.
Kolem hesel tři významné hodnoty autocomplete:
- autocomplete="username", tedy uživatelské jméno
- autocomplete="current-password", tedy současné heslo
- autocomplete="new-password", tedy nové heslo
Důležité je zmínit rozdíl mezi starým na novým heslem. Pokud hodnotu autocomplete nezadáte, nemáte v případě <input type="password"> úplnou kontrolu, čím ji prohlížeč bude vyplňovat. Typicky se bude snažit ji vyplnit současným heslem (tedy current-password), což je většinou správně, ale někdy taky ne.
Když chcete, aby si uživatel vytvořil nové heslo (nebo aby mu bylo prohlížečem vytvořeno), použijte vždy tenhle zápis:
<input type="password" autocomplete="new-password">
To je vlastně ta hlavní rada.
Některé prohlížeče se následně při aktivaci takového pole a autocomplete="new-password" pokusí vygenerovat tzv. silné heslo s bambiliónem speciálních znaků. Pokud uživate souhlasí, tohle heslo se použije a uloží do správce hesel.
Jak funguje správce hesel s autocomplete
Úplně nevím, ale funkci správce hesel v prohlížeči si představuju takhle: Když se někam přihlásím, prohlížeč se mě zeptá, jestli chci jméno a heslo uložit. Pokud souhlasím, uloží se do správce dvojice jméno a heslo.
Když na stejnou doménu přijdu příště, při focusu na input s autocomplete="username" (nebo při focusu na jiné formulářové pole, za kterým následuje input type="password") se objeví nabídka, zda chci uživatelské jméno vyplnit ze správce hesel. Pokud souhlasím, vyplní se jak uživatelské jméno, tak heslo.
Když se někde na stejné doméně objeví jiné input type="password", prohlížeč se po odeslání zeptá, jestli si má hodnotu hesla aktualizovat. To může být blbé chování, pokud je to heslo k něčemu úplně jinému.
Stejně tak se prohlížeč zeptá, jestli má aktualizovat heslo, když uživatel vyplnil jiné než to, které má uložené. To může být taky blbá situace, protože se tak občas zeptá i v případě, že se přihlášení nezdařilo. Nevím, jak to ošetřit jinak, než spoléhat na inteligenci uživatele, že si neuloží chybné heslo.
Režim historických hodnot
Když jsem po dvou letech přišel na svou testovací stránku formulářů, nabídlo se mi vyplnění formuláře hodnotou, kterou jsem někde kdysi použil. To zařídila funkčnost, které říkám režim historických hodnot.
Jak funguje autocomplete v režimu historických hodnot v normálních případech:
Prohlížeč si v minulosti při odesílání ukládal hodnoty, které u tohoto uživatele viděl, a páruje si je k hodnotě atributu name nebo id vyplněného políčka. Uvidí-li v budoucnu ve formuláři input se stejným name, nabídne uživateli možnost vyplnit input již známou hodnotu. Proto je dobrý nápad používat v atributech name (nebo id) nějaké rozumné hodnoty, typicky krátká anglická slova -- častěji pak při hádání nastane shoda. Ideální je v atributech name používat standardní hodnoty (zmíním níže).
Zatím pořád píšu o atributu name. Podle něj prohlížeče od pradávna doplňování začaly dělat, protože to dává smysl. Atribut autocomplete pak vzniknul ze zřejmé potřeby používat nějaké úplně jiné hodnoty atributů name, které jsou často pevně dané, typicky pro potřeby aplikací. Aby se mohly doplňovat automatické hodnoty i do inputů, které mají divně nebo šíleně vyplněné name, vzniknul atribut autocomplete.
S atributem autocomplete režim historických hodnot vůbec nesouvisí. Režim historických hodnot je historicky nejstarší, vzniknul v prohlížečích ještě před zavedením atributu autocomplete. Tenkrát se také této funkčnosti říkalo spíše autofill (dnes jsou autofill a autocomplete v podstatě synonyma).
Autocomplete="off"
Autocomplete="off" nevypíná vyplňování! Vypíná pouze režim historických hodnot. Ostatní režimy nechává zapnuté.
Speciální hodnota autocomplete="off" zabrání pouze tomuto:
- aby se políčko doplňovalo historicky nějakou dříve zadanou hodnotou v nějaké jiné stránce (shoda se hádá podle shody atributu name). Také vypne, aby se zadaná hodnota do prohlížeče ukládala.
Prohlížeče tedy naopak ignorují autocomplete="off" v těchto případech:
- identifikované jméno a heslo - vyplňuje se přes svůj správce hesel, i když je autocomplete="off".
- v režimu hádání. Pokud prohlížeč z něčeho uhodne, jaký je typ pole, prostě ho nechá vyplnit, bez ohledu na to, že má autocomplete="off". Uhodnout typ může z předcházejících textů, z hodnoty name, teoreticky z čehokoli jiného.
Protože je vypínání vyplňování pomocí autocomplete="off" tak nespolehlivé, zneužívá se někdy pro vypínání autocomplete také hodnota new-password. Je to hloupý workaround (nedělejte to), ale vidím to velmi často při registraci do bank. Bankám asi narozdíl od eshopů významně vadí i drobné chybky, které může autocomplete udělat při vyplňování. I tak je new-password blbý nápad, protože prohlížeče teď nově u new-password nabízí vygenerování hového silného hesla. Dříve prohlížeče new-password nechávaly vždy prázdné, což už teď neplatí.
Lepší reakce na chyby je opět umožnění režimu vyplňování, tedy zavedení atributu autocomplete a jeho standardních hodnot.
Alternativy k autocomplete
Pokud potřebujete vyplňovat něco jiného nebo složitějšího, autocomplete v HTML stačit nebude.
- Pokud chcete vybírat z předem známé skupiny hodnot, použijte select.
- Pokud chcete známou skupinu hodnot napovídat, ale chcete umožnit i jiný vstup, použijte datalist.
- Na výběr datumů nebo barev jsou input type="date" nebo input type="color.
- Napovídání adres, jmen států nebo něčeho podobného, k čemu je potřeba mít data, řeší jedině složitější komponenty, typicky javascriptové, které si musíte napsat nebo někde stáhnout.
Tento text byl původně součástí HTML příručky a popisoval jeden konkrétní atribut tagu input. Ale svým rozsahem už si zaslouží vlastní stránku. Původní text z roku 2022 byl v popisu tagu input. Stránka vytvořena 24. 5. 2024. Aktualizováno 30. 6. 2024
Reklama
