Většina současných prohlížečů nabízí uživatelům ukládat si nejen hesla, ale i svou poštovní a emailovou adresu, telefonní čísla i čísla kreditních karet.

Aby ale mohl uživatel takové informace vyplnit do vaší stránky, musí váš formulář splňovat některá pravidla (z W3C specifikace).

Form autocomplete

Většina webařů a HTML kodérů zná atribut autocomplete jako vlastnost formuláře, pomocí které můžete zakázat nebo povolit, aby se údaje vyplňovali, k čemuž slouží hodnoty ON a OFF.

Ty lze samozřejmě používat, ale atribut autocomplete může (u inputu) obsahovat celou řadu informací o tom, co v poli očekáváte, a prohlížeč pak může automaticky formulář vyplnit.

<form autocomplete=on>
    <input name=name autocomplete=name>
    <texarea autocomplete=street-address>
    </textarea>
    <input name=zip autocomplete=postal-code">
</form>

Poznámka: hodnoty atributu autocomplete jsou case-insensitive, což znamená, že můžete psát malá a velká písmena, jak vám přijde vhodné. Hodnoty ale používají kebab-case, takže slova jedné hodnoty jsou oddělena pomlčkou. Mezerou se oddělují jednotlivé hodnoty (viz dále).

Typy polí

Nepleťte si to s input type, atribut autocomplete určuje obsah dat a nikoliv jejich formát (i když částečně taky):

• Off znamená, že hodnota pole je důvěrná (třeba rodné číslo), obsahuje jednorázovou hodnotu (např. aktivační kód) nebo s daty nesouvisí (captcha). Do takového pole se nesmí nic automaticky vyplňovat a ani se hodnota nesmí ukládat. Navíc po přechodu na další stránku se musí hodnota vymazat, aby v poli nezůstala poté, co uživatel klikne na Zpět. Tuhle hodnotu byste měli používat skutečně jen v nutných případech. Používat ji proto, aby musel uživatel pokaždé zadat heslo, je nesmysl, protože nevíte, jak má uživatel vyplnění hesla zabezpečeno (dnes není problém zabezpečit ho otiskem prstu nebo skenem duhovky přes mobil nebo notebook)
• On určuje obecný údaj, který je možno uložit a při opakované návštěvě znovu vyplnit. Takové pole ale není možno automaticky vyplnit z předem připravených údajů (např. zapamatované adresy a čísla kreditních karet). Prohlížeč ale nemusí být schopen takové pole správně vyplnit v případě, že formulář obsahuje více podobných polí nebo se v budoucnu změní name a id takového pole.
• Name určuje celé jméno osoby, včetně všech titulů před a za jménem. Mělo by být vyplněno v jedné řádce s mezerami (tedy bez odřádkování)
• given-name, additional-name a family-name odpovídají českému prvnímu (křestnímu) a druhému (prostřednímu) jménu a příjmení (surname). V jiných jazycích ale mohou mít trochu jiný význam (např. u Kim Chong Un je given=Un, additional=Chong, family=Kim).
• honorific-prefix a honorifix-suffix pak udávají tituly před a za jménem. U některých jazyků je potřeba dávat pozor, protože může definovat jak akademický titul (např. Mgr., Bc., apod.) ale i oslovení (Mr.) nebo pořadí (Senior, Junior, III., atd.)
• username a nickname určují uživatelské jméno, kde username je přímo přihlašovací jméno (např. honza99), zatímco nickname je přezdívka (např. Honzík) tam, kde se uživatelé hlásí emailem (pak email odpovídá username), rodným číslem, apod. (nebo vůbec nejde o přihlašování).
• S uživatelem ještě obvykle souvisí sex (pohlaví) a bday (datum narození). Pohlaví může být jakýkoliv text a W3C nijak neurčuje, co budete považovat za pohlaví (příp. i sexuální orientaci, apod.). Naopak den narození musí mít tvar yyyy-mm-dd (samozřejmě ve správných rozsazích) a být vyplněn do pole text nebo date. V případně, používáte číselná pole (number nebo text), je můžete označit bday-day, bday-month a bday-year.
• current-password a new-password označují pole pro heslo (ve spojení s username) přičemž current-password je pro stávající heslo (přihlášení nebo ověření totožnosti) a new-password je určeno pro registraci (první zadání) nebo změnu hesla.
• organization a organization-title označují jméno společnosti (firmy) a pozice osoby v rámci dané firmy. Mohou se používat buď v adrese (objednávka na firmu a kontaktní osoba) nebo v informacích o osobě (zaměstnání a zaměstnavatel). Organization-title může být např. „CEO“, „Software engineer“ nebo „Operátor výroby“.
• street-address udává místní adresu včetně odřádkování (vyžaduje tedy textarea). Alternativně můžete použít address-lineX, kde X je 1 až 3 a určuje street-name rozdělené na řádky. Rozdělení na řádky nemá žádné bližší určení a záleží na situaci (zda první řádek je ulice a číslo, jméno budovy či skladu uvnitř většího areálu, nebo něco jiného). Nicméně toto pole by mělo určovat přímo budovu (Náměstí míru 155/3) nebo uzavřenou oblast (Tovární 1, sklad 35) a příp. další určení (5. patro, dveře 8, recepce, apod.)
• Naopak address-levelX (kde X je 1 až 4) určuje oblastní správní celky v rámci daného státu. Level 1 je nejrozsáhlejší a obvykle určuje stát (např. Texas nebo Bavorsko) nebo kraj (Vysočina, Košický kraj, Malopolska, apod.). Level 2 je obvykle město, ale může jít o oblast, která má společnou doručovací poštu. Level 3 a level 4 pak jsou např. městské části, místní název (Pankrác, Nad jezem, apod.). Jaká pole zobrazit byste měli určovat dynamicky podle státu (viz dále).
• postal-code pak určuje poštovní směrovací číslo v uznávaném formátu (234 23, W23-123, apod.)
• country a country-name určuje zkratku (ISO kód alpha-2) a jméno země, buď z adresy nebo i samostatně. Country-name může obsahovat jakoukoliv definici, třeba Česká Republika, Česko, ČR, CZE, apod. Související language pak může obsahovat kód jazyka (BCP47).
• Pro další určení adresy nebo informací o uživateli můžete použít url (webowá stránka), photo (URL fotky, loga firmy nebo avataru), email nebo impp (textové nebo telefonní služby jako Skype, IRC, apod.)
• Pro telefon slouží tel, což je číslo v mezinárodním formátu, ale existují i podkategorie, např. tel-country-code a tel-national)
• Další kódy pak souvisí s platbou a začínají cc-* (Credit Card). Hodnoty cc-name, cc-number, cc-exp a cc-csc určují informace z karty (jméno, číslo karty, datum expirace a kontrolní kód). Hodnotu cc-name lze rozdělit stejně jako name (kromě honorific-*) a cc-exp lze zadat jako cc-exp-month a cc-exp-year. Dále můžete použít ještě cc-type pro určení typu karty (např. VISA).
• Pro platby, kde není předem dána částka (např. dary, sázky, aukce, apod.), můžete použít transaction-currency a transaction-amount pro určení měny (ISO4217) a částky (celé nebo desetinné číslo).

U hodnot, kde to dává smysl, můžete pro jeden input určit i více hodnot stejného nebo podobného typu. Např. autocomplete="given-name family-name" může obsahovat současně jméno i příjmení; autocomplete="tel tel-national tel-local" může obsahovat telefonní číslo buď v mezinárodní, národní nebo místním formátu; autocomplete="tel email impp" může obsahovat jakýkoliv kontaktní údaj.

U údajů, které mají předem očekávané hodnoty (např. country-name, tel-country-code, language, apod. můžete atribut použít i na select. Prohlížeč pak může automaticky vybrat hodnotu, která odpovídá jeho uloženému údaji.

Typ kontaktu

U kontaktních údajů tel (včetně všech tel-*), email a impp můžete doplnit klíčové slovo podle toho, jaký kontakt očekáváte:

• home označuje osobní kontakt. U telefonního čísla nemusí přímo označovat pevnou linku, ale jakékoliv číslo, které vlastní daná osoba.
• work naopak označuje pracovní kontakt jako je emailová adresa firmy (info@company.com) nebo skupiny (hr@company.com). Měl by označovat kontakt, na který může daná osoba reagovat pouze v pracovní době.
• mobile pak označuje jakýkoliv kontakt, který můžete použít kdykoliv nezávisle na tom, zda je daná osoba doma, v práci nebo na cestách.
• Pro telefonní číslo pak ještě můžete použít fax a pager.

<form autocomplete=on>
    <input type=email autocomplete="work email">
    <input type=tel autocomplete="mobile tel-national">
</form>

Adresy

Ve spojení s výše uvedenými hodnotami (adresa, telefon, jméno firmy, atd.) můžete použít klíčová slova shipping nebo billing, čímž určíte, zda se jedná o adresu nebo kontakt pro doručení zásilky nebo kontakt pro platbu.

Nejde přitom čistě o potřebu rozlišit dvě adresy v jednom objednávkovém formuláři (k tomu slouží sekce, viz dále), ale o to, k čemu budete kontakt používat. Pokud jde např. o adresu, u shipping adresy je důležité, aby šlo o fyzickou adresu, na kterou je možné něco doručit, někam přijet a dá se očekávat, že tam v danou dobu někdo bude – může jít třeba o adresu vaší chaty, pokud objednáváte instalatéra, firemní P.O.Box, pokud jde o doručení poštovní zásilky, apod. Naopak u billing údaje je důležité aby se přímo vztahoval k dané osobě např. za účelem zjištění, jaké DPH je potřeba odvést, nebo jak se má nakládat s osobními údaji.

Sekce

Pokud máte v jednom formuláři více stejných nebo podobných polí (např. adresy pro doručení zboží a faktury), telefonní číslo do vrátnice a do kanceláře, apod. můžete do atributu autocomplete zadat hodnotu section-* následovanou libovolným identifikátorem. Prohlížeč pak automaticky rozdělí pole do skupin podle identifikátorů.

Například pokud máte formulář pro objednání kurýra, budete potřebovat tři různé adresy a telefonní čísla:

 
<form autocomplete=on> 
    <input type=name 
        autocomplete="section-sender name">
    <input type=tel 
        autocomplete="section-sender tel">
    <textarea autocomplete="section-sender
                street-address postal-code">

    <input type=name 
        autocomplete="section-pick-up name">
    <input type=tel 
        autocomplete="section-pick-up tel">
    <textarea autocomplete="section-sender
                street-address postal-code">

    <input type=name 
        autocomplete="section-deliver name">
    <input type=tel 
        autocomplete="section-deliver tel">
    <textarea autocomplete="section-deliver
                street-address postal-code">

</form>

Následně pak nezáleží na tom, v jakém pořadí budou pole ve formuláři, a prohlížeč vždy správně vyplní jména, adresy a telefonní čísla všech tří osob.

Skryté prvky

U viditelných inputů typu text, number, atd. hodnota autocomplete určuje, jakou hodnotu bude uživatel vyplňovat (autofill expectation mantle) a co mu má tedy prohlížeč nabídnout (aby u pole name nenabízel jméno ulice).

Autocomplete ale můžete použít i u skrytých prvků (input type=hidden), což ale neznamená, že vám do nich prohlížeč něco vyplní. Naopak to znamená, že pokud bude chtít údaje z vašeho formuláře uložit pro pozdější použití, může si uložit i další údaje, které mu vy poskytnete (autofilll anchor mantle).

Např. do formuláře pro změnu hesla můžete přidat skrytý input s hodnotou username, aby prohlížeč věděl, u kterého účtu je potřeba aktualizovat heslo (z hodnoty current-password na new-password).

U formuláře, kde uživatel zadává číslo kreditní karty (cc-*) můžete přidat skrytá pole transaction-amount a transaction-currency a prohlížeč pak třeba nebude nabízet uložené karty, u kterých je nastavený limit nižší než vaše požadovaná částka (pokud prohlížeč takový údaj zná).

Pokud máte formulář, kam uživatel zadá IČO a vy automaticky doplníte informace o firmě z registru, můžete tyto informace poskytnout ve skrytých inputech, aby si je mohl prohlížeč uložit a použít na jiných stránkách, které tuto funkčnost nemají (vy tím samozřejmě nic nezískáte, ale zlepšujete tím komfort svých uživatelů).

I skryté prvky samozřejmě mohou (resp. by měli) definovat sekci, ke které patří, pokud jsou použity ve formuláři.