U eshopů chceme aby přišlo co nejvíce objednávek, u blogů co nejvíce přihlášených odběratelů a u jiných webů možná chceme hodně formulářových poptávek. Je jedno co formuláře sbírají za data, ale všichni chceme aby vyplněných formulářů bylo co nejvíce. Aby se nám to podařilo musíme zamakat na tom, aby vyplnění formuláře bylo uživatelský přívětivé a pochopitelné. Docílíme toho jedině kombinaci správných atributů. Abychom nedostávali zbytečnou penalizaci od lighthouse, povíme si jak dělat formuláře přístupnými. A na konec si ukážeme jak díky jedinému atributu můžeme automaticky předvyplnit celý formulář.
html input name
Atribut, který umožňuje přistupovat k údajům, které uživatel zadal.
<form action="/page.php">
<label for="jmeno">Vaše jméno:</label>
<input id="jmeno" name="jmeno" required>
<label for="prijmeni">Vaše příjmení:</label>
<input id="prijmeni" name="prijmeni" required>
<button type="submit">Odeslat</button>
</form>
<!-- /page.php?jmeno=Vitalij&prijmeni=Petráš - url po odeslání formuláře -->
html input type
Atribut definující chování inputu v prohlížeči. <input type="number"> omezí vstup pouze na čísla, <input type="password"> skryje text za hvězdičky, <input type="email"> ověřuje zda je email správný atd. Podpora dle statistik caniuse je 97%. Type atribut by všichni měli znát a používat.
<input type="checkbox">
<input type="email">
<input type="number">
<input type="password">
<input type="radio">
<input type="tel">
<input type="text">
<!--
... a další z celkem 22 typů k dnešnímu dni
-->
html input placeholder
Jedna se o doprovodný text inputu. Text tam vložený se zobrazí pokud je input prázdný a po zadání prvního znaku zmizí. Pomáhá tak lepší orientaci ve formuláři, ale pozor! Aby input byl přístupný dle WAI-ARIA standardů placeholder není dostačující.
<input placeholder="Vaše jméno">
Přístupnost dle WAI-ARIA
Měli byste myslet i na uživatele co používají čtečky obrazovky. Bez doprovodného textu takový uživatel netuší co do inputu psát. V dnešní době se přístupnost dost řeší a pokud ji nemáte vyřešenou, získáte méně bodů v přístupnosti lighthouse.
Aby to čtečky správně chápaly je nutné, aby každý input měl svůj doprovodný text, který svážeme s inputem pomoci různých atributů. Uvádím tři možná řešení.
<!-- varianta c.1 -->
<input aria-label="popis">
<!-- varianta c.2 -->
<label for="input">Popis</label>
<input id="input">
<!-- varianta c.3 -->
<p id="popis">Popis</p>
<input aria-labelledby="popis">
html input pattern
Pravidlo, které musí input splnit, aby byl validní. Validovat formuláře lze všelijak, ale já zastávám názoru, že nativní validace prohlížečem je nejlepší věc, kterou pro svůj web můžete udělat. 97% podpora dle statistik caniuse nám dává mocný nástroj na validaci vstupních dat v prohlížeči uživatele.
Uvádím příklad inputu, který chceme aby uživatel vyplnil ve formátu jméno příjmení, všechno ostatní vyhodnotí nevalidně a tudíž nedovolí odeslat formulář.
<form>
<input pattern="([^0-9 ]+\s){1}([^0-9 ]+)" type="text" placeholder="Vaše jméno a příjmení" required>
</form>
Tip: pokud vám nefunguje pattern a vy nevíte proč, zkuste type="cokoliv" změnit na type="text". Pattern nefunguje v některých kombinacích například s <input type="number">.
html inputmode
Na rozdíl od type atributu, inputmode nemění chování prohlížeče, ale určuje typ virtuální klávesnice. Pro inputmode="email" se zobrazí klávesnice s emailem a tečkou, pro inputmode="numeric" se zobrazí číselná klávesnice apod. inputmode má solidní 79% podporu. Pro více informaci vás odkážu na pěkný článek s ukázkami na css tricks.
<input inputmode="none">
<input inputmode="text">
<input inputmode="tel">
<input inputmode="url">
<input inputmode="email">
<input inputmode="numeric">
<input inputmode="decimal">
<input inputmode="search">
Pozor!! Když použijete nevhodný inputmode, můžete znemožnit uživateli odeslat formulář. K dnešnímu dni, uživatele mobilního Chromu nemají možnost klávesnici změnit.
html input autocomplete
Prohlížeč ukládá údaje o vás. Snaží se odhadnout a pamatovat například: jméno, adresu, organizaci, telefon, email a další informace o vás. V chromu se tato funkce jmenuje automatické vyplňování, v jiných prohlížečích se to může jmenovat jinak.
Autocomplete umožňuje automatický předvyplnit inputy, pokud takový údaj prohlížeč zná. Podrobnější informace v MDN dokumentaci. Podpora 50% není až tak slavná, ale už to umí všechny moderní prohlížeče. Byla by škoda toho nevyužit.
<input autocomplete="off">
<input autocomplete="name">
<input autocomplete="email">
<input autocomplete="organization">
<input autocomplete="current-password">
<input autocomplete="street-address">
<input autocomplete="cc-number">
<input autocomplete="bday">
<input autocomplete="tel">
<input autocomplete="one-time-code">
<!-- a další... -->
Moment co je to cc-number? Ono, je to číslo kreditní karty! Automatický předvyplnit číslo kreditní karty? To je paráda!
Pozastavíme se u one-time-code, je to ověření uživatele SMSkou, které je pak značně snadnější. Pěkný článek o tom i s vizualizaci. Zajímat to nejspíš bude banky. Například AirBank využívá dvou faktorové ověření uživatele SMSkou, a tento atribut tam zatím nemají 🙂
A nakonec se mrkneme ještě na new-password. Jsou situace, kdy chcete aby uživatel zadal nové heslo. Někdy chceme aby nové heslo zadal dokonce 2x. Autocomplete přichází s řešením, kdy prohlížeč sám navrhne silné heslo a vloží ho hned do dvou inputů.
<input type="password" autocomplete="new-password" required name="password">
<input type="password" autocomplete="new-password" required name="password-repeat">
Závěr
Ukázali jsme si nejen nejzákladnější atributy inputu, které by každý frontend kodér měl znát, ale i atributy, které jsou relativně nové a umožní vám vypilovat formuláře k dokonalosti. Existuji i další atributy, které neuvádím a pokud si myslíte, že některý je hoden se objevit na této stránce napište prosím do komentářů.
