Využívejte u formulářových prvků autofocus efektivně

Automatický focus

Pokud je formulář v dialogu nebo na samostatné stránce, cílem je:

• Vyplnit požadovaná pole.
• Odeslat formulář.

Jedině tak se lidé dostanou dál a my se jim to často nesnažíme příliš usnadnit. Při procházení webů jsem si všiml, že se automatický focus, tzv. autofocus, vůbec nevyužívá nebo se využívá v omezené míře.

Představme si situaci, že si chci založit nový email na Seznam.cz:

Jak je vidět na obrázku, ještě před samotnou tvorbou vlastního účtu musím celkem dvakrát kliknout. Přitom mě formulář pro založení nového účtu tučným písmem vyzývá, abych si zvolil své uživatelské jméno.

V podobných případech by formuláře měly fungovat tak, že pokud se lidé na stránku s formulářem dostanou, měli by mít možnost rovnou psát. Jak ukazuje příklad přihlašování na stránkách Ebay.com:

Řešení je snadné

Nastavení tohoto chování u formulářů je velice snadné. Díky HTML5 lze využít jednoho parametru, pro prohlížeče bez podpory HTML5 stačí jeden řádek JavaScriptového kódu.

Představme si, že máme webový formulář, např. v nákupním košíku, který je na samostatné stránce:

<form method="post" action="?akce=odeslat-formular">
<div>
<label for="name">Celé jméno</label>
<input type="text" id="name" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email required>
</div>
<p><strong>Adresa</strong></p>
<div>
<label for="street">Ulice</label>
<input type="text" id="street">
</div>
<div>
<div>
<label for="post">PSČ</label>
<input type="text" id="post">
</div>
<div>
<label for="city">Město</label>
<input type="text" id="city">
</div>
</div>
<div>
<input type="submit" value="Odeslat" name="send">
</div>
</form>

Po menších úpravách a přidáním stylů bude v prohlížeči vypadat takto:

A aby došlo k automatickému zaměření na formulářový prvek, stačí prvnímu poli přidat parametr autofocus:

<input type="text" id="name" required autofocus>

Protože stále všechny dostupné prohlížeče nepodporují HTML5, tedy ani parametr autofocus, pro zajištění funkcionality stačí přidat jednoduchý JavaScriptový kód:

<script>
document.getElementById("name").focus();
</script>

V obou případech bude kurzor automaticky nastaven do políčka name a lidé můžou začít vyplňovat formulář bez nutnosti klikání.

Pokud znají možnost přecházení ve formuláři pomocí klávesy TAB, bude vyplnění formuláře o dost snazší a rychlejší.

Tip
K detekci podpory parametru autofocus lze využít knihovnu Modernizr nebo jednoduchou JavaScriptovou konstrukci:

// při podpoře autofocus vrací true, jinak false
function autofocus_support(){
var i = document.createElement("input");
return 'autofocus' in i;
}

Používejte autofocus

Často i maličkosti zpříjemní používání webových stránek a zrovna autofocus může být touto maličkostí. Lidé se tak dostanou rychleji ke splnění požadovaného cíle.

Podívejte se na zahraniční weby, které autofocus využívají, např.:

• Google.com – vyhledávací pole, přihlašování.
• Ebay.com – vyhledávací pole, přihlašování, registrace.
• Yahoo.com – vyhledávací pole, přihlašování.
• Amazon.com – přihlašování, registrace.

I u českých webů se v některých případech tato funkce využívá, např.:

• Seznam.cz – vyhledávací pole.
• Alza.cz – přihlašování.

U formuláře na samostatné stránce nebo v dialogu lze předpokládat, že bude vhodné této funkcionalitu použití, neboť jejich jediným cílem je od lidí získat potřebná data, aby bylo možné přejít dál.

Pro další typy zobrazení a pozice formulářů však doporučuji implementaci vhodně rozmyslet, neboť s využítím této funkce dochází k automatickému posunutí stránky na zaměřené pole!