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

Weby nejsou tvořeny pouze obsahem, ale jejich součástí jsou také formulářové prvky – např. pro přihlášení, registraci nebo kroky košíku na eshopech.

Často jsou formuláře na samostatných stránkách nebo ve formě dialogů, které se zobrazí po kliknutí na odkaz. A aby se lidé dostali dál, je nutné formulář vyplnit a odeslat. A aby lidé mohli vůbec něco vyplnit, musí často do požadovaného pole nejprve kliknout.

Bohužel se na řešení často zapomíná a přitom je velice snadné – stačí přidat k formulářovému poli jeden parametr nebo řádek JavaScriptového kódu.

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:

Pro začátek tvorby nového účtu na Seznam.cz potřebuji dvě kliknutí.
Pro začátek tvorby nového účtu na Seznam.cz potřebuji dvě kliknutí.

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:

Na ebay je možné ihned zadat uživatelské jméno bez nutnosti dalšího kliknutí.
Na ebay je možné ihned zadat uživatelské jméno bez nutnosti dalšího kliknutí.

Ř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:

Výsledná podoba formuláře pro vložení jména, emailu a adresy.
Výsledná podoba formuláře pro vložení jména, emailu a adresy.

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í.

Díky parametru autofocus (nebo JS řešení) je možné psát do formuláře bez nutnosti klikání.
Díky parametru autofocus (nebo JS řešení) je možné psát do formuláře 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!


Sdílejte článek



Michal Maňák

Jmenuji se Michal Maňák, jsem Interaction Designer a Digital Product Designer.

Pracuji ve společnosti LMC.