Jak udělat formulář v HTML

Formulář je místo, kde návštěvník něco vyplní a odešle – poptávku, přihlášení, objednávku nebo zprávu. V HTML ho postavíte ze stavebních kamenů, které se dají skládat jako stavebnice. Začneme úplně nejmenším příkladem.

Kostra formuláře

Celý formulář obaluje značka <form>. Uvnitř jsou jednotlivá pole a tlačítko pro odeslání:

<form action="/odeslat.php" method="post">
  ...pole a tlačítko...
</form>

Dva atributy jsou důležité. action říká, kam se data pošlou (zpracování na serveru si ukážeme v návodu o PHP formulářích). method="post" znamená, že data se posílají skrytě v těle požadavku. U osobních údajů je to vhodnější než get, jehož hodnoty jsou vidět v adrese.

Textové pole a popisek

Pro jedno řádkové pole použijeme <input>. Jeho typ se nastaví atributem type. Popisek patří do značky <label>, která se propojí s polem přes for a stejné id:

<label for="jmeno">Jméno</label>
<input type="text" id="jmeno" name="jmeno">

Atribut name je důležitý: podle něj server pozná, co přišlo. Kliknutí na popisek přesune kurzor do pole, a to ocení hlavně lidé na mobilu.

Různé typy polí

Stejné <input> umí podle typu různé věci. Prohlížeč díky tomu nabídne správnou klávesnici a sám hlídá, že jste zadali e-mail a ne něco jiného:

<input type="text">      <!-- obyčejný text -->
<input type="email">     <!-- e-mail, kontroluje se formát -->
<input type="tel">       <!-- telefon, na mobilu číslicová klávesnice -->
<input type="number">    <!-- jen čísla -->
<input type="date">      <!-- výběr data z kalendáře -->

Takhle to vypadá v náhledu (zatím bez odeslání):

Výběr z možností

Když má návštěvník vybrat jednu z nabídek, použijte rozbalovací seznam <select> s položkami <option>. Hodnota z atributu value je to, co se odešle:

<label for="duvod">Důvod zprávy</label>
<select id="duvod" name="duvod">
  <option value="poptavka">Poptávka</option>
  <option value="dotaz">Dotaz</option>
  <option value="jine">Jiné</option>
</select>

Delší text a tlačítko odeslání

Pro delší text, třeba zprávu nebo poznámku, je tu <textarea>. Výška se dá určit atributem rows (počet řádků), dnes se ale velikost spíš nastavuje v CSS. Tlačítko pro odeslání je <button type="submit">:

<label for="zprava">Vaše zpráva</label>
<textarea id="zprava" name="zprava" rows="5"></textarea>

<button type="submit">Odeslat</button>

Povinná pole

Atribut required řekne prohlížeči, že pole nesmí zůstat prázdné. Formulář pak nepůjde odeslat, dokud ho nevyplníte, a prohlížeč sám ukáže upozornění:

<input type="email" name="email" required>

Časté chyby

• Pole bez popisku. Samotný placeholder po napsání zmizí, takže vždy přidejte <label>.
• Chybějící atribut name. Pole bez name se při odeslání vůbec nepošle.
• Špatný typ pole. E-mail jako type="text" nepřijde s kontrolou a na mobilu se nabídne zbytečně špatná klávesnice.
• Formulář bez tlačítka pro odeslání. Návštěvník pak neví, jak ho odeslat.

Teď umíte postavit formulář, který se dá vyplnit a je přehledný i na mobilu. Aby se data skutečně někam uložila, potřebujete ještě PHP. To zvládnete v návodu o zpracování formuláře v PHP.