Formuláře

Formuláře jsou velmi důležité, protože umožňují návštěvníkům vaší stránky zadávat informace – např. své jméno, zprávu, vybrat si něco ze seznamu nebo nahrát soubor. Všechny formuláře začínají značkou <form>.

Základní formulář

Uvnitř značek <form> a </form> jsou zejména vstupní pole (<input>) a popisky (<label>)

<form>
    <label for="jmeno">Vaše jméno:</label><br>
    <input type="text" id="jmeno" name="jmeno"><br><br>
    <input type="submit" value="Odeslat jméno">
</form>

Důležité atributy formuláře: action a method

Když uživatel odešle formulář (klikne na tlačítko "Odeslat"), data se někam pošlou. Kam a jak, to určují atributy action a method u značky <form>.

• action

  Tohle je adresa (URL) stránky, kam se data formuláře pošlou. Pak speciální program (např. v PHP nebo Pythonu) data zpracuje.

  <form action="zpracuj_data.php">
      <!-- ... formulářové prvky ... -->
  </form>
  

• method

  Tohle říká, jak se data pošlou. Existují dvě hlavní metody:

  • get: Data se připojí přímo k URL adrese. To je vidět v adresním řádku prohlížeče. Není bezpečné pro hesla nebo citlivé informace! Používá se pro jednoduchá vyhledávání.
  • post: Data se pošlou "schovaná" uvnitř požadavku. To je bezpečnější pro hesla a citlivé informace, protože data nejsou vidět v URL adrese.

  <form action="prihlasit.php" method="post">
      <!-- ... formulářové prvky ... -->
  </form>
  

Vstupní pole (<input>): Různé typy

Značka <input> je samouzavírací a je to nejčastější prvek ve formulářích. Atribut type (typ) určuje, jaký druh vstupního pole to bude:

• Textové pole (type="text")

  Pro zadávání krátkého textu (jméno, příjmení).

  <label for="jmeno">Vaše jméno:</label>
  <input type="text" id="jmeno" name="jmeno" placeholder="Zadej své jméno">
  

  • id: Jedinečné jméno pro toto pole (aby se k němu mohl připojit <label>).
  • name: Jméno, pod kterým se data odešlou na server.
  • placeholder: Šedý text, který se zobrazí uvnitř pole, dokud do něj nezačnete psát. Je to jako malá nápověda.

• Heslo (type="password")

  Když píšete heslo, znaky se skryjí (většinou se zobrazí hvězdičky nebo tečky).

  <label for="heslo">Vaše tajné heslo:</label>
  <input type="password" id="heslo" name="heslo">
  

• E-mail (type="email")

  Prohlížeč zde zkontroluje, jestli vstup vypadá jako e-mail (má znak @).

  <label for="email">Váš e-mail:</label>
  <input type="email" id="email" name="email">
  

• Telefon (type="tel")

  Pro zadávání telefonních čísel. Na mobilních telefonech se často objeví speciální klávesnice s čísly.

  <label for="telefon">Váš telefon:</label>
  <input type="tel" id="telefon" name="telefon">
  

• Číslo (type="number")

  Pro zadávání čísel. Objeví se šipky pro zvýšení/snížení čísla.

  <label for="vek">Váš věk:</label>
  <input type="number" id="vek" name="vek" min="0" max="120">
  

  • min: Minimální povolená hodnota.
  • max: Maximální povolená hodnota.

• Datum (type="date")

  Pro výběr data. Objeví se malý kalendář!

  <label for="datum_narozeni">Datum narození:</label>
  <input type="date" id="datum_narozeni" name="datum_narozeni">
  

• Zaškrtávací políčko (type="checkbox")

  Uživatel může zaškrtnout jednu nebo více možností.

  <input type="checkbox" id="souhlas" name="souhlas" value="ano">
  <label for="souhlas">Souhlasím s pravidly.</label>
  

  • value: Hodnota, která se odešle, když je políčko zaškrtnuto.

• Přepínače (Radio Buttons) (type="radio")

  Uživatel může vybrat jen jednu možnost ze skupiny. Všechny přepínače ve stejné skupině musí mít stejný atribut name.

  <p>vyberte si své pohlaví:</p>
  <input type="radio" id="muz" name="pohlavi" value="muz">
  <label for="muz">Muž</label><br>
  <input type="radio" id="zena" name="pohlavi" value="zena">
  <label for="zena">Žena</label>
  

• Tlačítka pro odeslání a reset (type="submit" a type="reset")

  type="submit": Tlačítko, které odešle data formuláře na adresu určenou v action.

  <input type="submit" value="Odeslat formulář">
  

  type="reset": Tlačítko, které vymaže všechna zadaná data ve formuláři a vrátí je do původního stavu.

  <input type="reset" value="Vymazat vše">
  

Rozbalovací nabídky

Když chcete, aby uživatel vybral z dlouhého seznamu možností, je vhodné použít rozbalovací nabídku.

• <select>: Celá rozbalovací nabídka.
• <option>: Každá jednotlivá možnost v nabídce.

<label for="barva">Vyberte si oblíbenou barvu:</label>
<select id="barva" name="barva">
    <option value="cervena">Červená</option>
    <option value="modra">Modrá</option>
    <option value="zelena">Zelená</option>
</select>

Atribut value u <option> je hodnota, která se odešle, když je tato možnost vybrána.

Víceřádkové textové pole (<textarea>)

Když chcete, aby uživatel mohl napsat delší zprávu (např. vzkaz, komentář), použijte značku <textarea>.

<label for="zprava">Napište vzkaz:</label><br>
<textarea id="zprava" name="zprava" rows="5" cols="40" placeholder="Sem napište vzkaz..."></textarea>

• rows: Kolik řádků bude pole mít (výška).
• cols: Kolik sloupců bude pole mít (šířka).

Atribut required (Povinné pole)

Pokud chcete, aby uživatel musel pole vyplnit, než odešle formulář, přidejte atribut required.

<label for="jmeno_povinne">Vaše jméno (povinné):</label><br>
<input type="text" id="jmeno_povinne" name="jmeno_povinne" required>