Formuláře (form, input)

Doba čtení: cca 2 min

Formuláře jsou hlavní způsob, jak uživatelé komunikují s webem – přihlašovací formuláře, kontaktní formuláře, vyhledávací pole, komentáře. Špatně napsaný formulář je nepříjemný pro všechny; pro nevidomé uživatele může být zcela nepoužitelný. Tato lekce ti ukáže, jak formuláře psát správně.

Tag <form>

Tag <form> obaluje celý formulář. Klíčové atributy:

  • action – URL adresa, na kterou se data formuláře odešlou.
  • method – způsob odeslání: get (data se přidají do URL) nebo post (data se odešlou v těle požadavku – pro hesla a citlivé údaje).
<form action="zpracovat.php" method="post">
  <!-- Pole formuláře -->
</form>

Tag <input>

Tag <input> je základní prvek formuláře – textové pole, zaškrtávací políčko, tlačítko a mnoho dalšího. Typ určuje atribut type:

  • type="text" – jednořádkové textové pole
  • type="email" – pole pro e-mail (mobilní klávesnice zobrazí @)
  • type="password" – pole pro heslo (text se skrývá)
  • type="number" – číselné pole
  • type="tel" – pole pro telefonní číslo
  • type="checkbox" – zaškrtávací políčko
  • type="radio" – přepínač (výběr jedné z možností)
  • type="submit" – odesílací tlačítko
  • type="reset" – tlačítko pro vymazání formuláře
<input type="email" id="email" name="email" placeholder="vas@email.cz">

Tag <label> – popis pole

Každé formulářové pole musí mít popisek pomocí tagu <label>. Toto je absolutní základ přístupných formulářů. VoiceOver přečte popisek pole při vstupu do něj – bez <label> uživatel neví, co do pole zadat.

Propojení popisku s polem se provádí atributem for, který musí odpovídat atributu id příslušného pole:

<label for="jmeno">Jméno a příjmení</label>
<input type="text" id="jmeno" name="jmeno">

Alternativně lze input vložit přímo do labelu (pak není potřeba for a id):

<label>
  Jméno a příjmení
  <input type="text" name="jmeno">
</label>

Další prvky formuláře

<textarea> – víceřádkový text

<label for="zprava">Zpráva</label>
<textarea id="zprava" name="zprava" rows="5"></textarea>

<select> – rozbalovací seznam

<label for="tema">Téma zprávy</label>
<select id="tema" name="tema">
  <option value="">Vyberte téma</option>
  <option value="dotaz">Obecný dotaz</option>
  <option value="objednavka">Objednávka masáže</option>
</select>

<button> – tlačítko

<button type="submit">Odeslat zprávu</button>

Povinná pole a validace

Atribut required označí pole jako povinné – prohlížeč upozorní uživatele, pokud ho nechá prázdné. Atribut aria-required="true" doplní tuto informaci pro odečítač:

<label for="email">E-mail <span aria-hidden="true">*</span></label>
<input type="email" id="email" name="email" required aria-required="true">
<p><small>* Povinné pole</small></p>

Tip od Zdeňka

Zdeněk radí: Nikdy nepoužívej placeholder jako náhradu za <label>. Placeholder zmizí, jakmile začneš psát – a pak nevíš, co jsi kam zadal. Pro odečítač je placeholder podružná informace, nikoli popisek pole. Label musí být vždy přítomen, viditelný a správně propojený. Formuláře jsou pro nevidomé uživatele nejnáročnější část webu – dobře napsaný formulář je pro nás dar; špatně napsaný je noční můra.