Formuláře

Formulář na webové stránce slouží k zadávání údajů od uživatele – například jméno, heslo, e-mail, výběr z možností, zaškrtávací políčka nebo odeslání zprávy.

Používáme ho například pro:

• přihlášení do systému (jméno a heslo),
• odeslání e-mailu,
• výběr možností (např. obor studia),
• zapsání zprávy nebo komentáře.

Uživatel do něj něco vyplní a klikne na tlačítko odeslat. Data se následně odešlou na server ke zpracování.

Zdroj obrázku: https://www.itnetwork.cz/html-css/html5/html-manual/html-css-html-manual-formulare/html-formulare-form-cesky-manual

Základní struktura

Formulář vždy obalujeme tagem <form>.

V HTML se používají různé vstupní prvky – tzv. inputy. Každý má jiný účel, typ a vzhled.

Základní tagy:

• <form> – začátek formuláře.
• action="…" – kam se data po odeslání odešlou (např. zpracuj.php).
• method="post" – jak se data odešlou (obvykle post nebo get)

💡 Zatím nemusíš vytvářet žádné PHP skripty, ale action tam být musí, i když nefunguje. Můžeš dát třeba action="#".

<form action="zpracuj.php" method="post">
    <!-- Vstupní prvky sem -->
</form>

Základní vstupní prvky (inputy)

Textové pole

Slouží pro zadání krátkého textu (např. jméno, přezdívka, název).

<input type="text" name="jmeno">

Číslo

Uživatel může zadat číslo – vhodné např. pro věk nebo počet kusů.

Můžeme pomocí min a max specifikovat obor povolených hodnot.

<input type="number" name="vek" min="0" max="100">

Heslo

Vypadá jako textové pole, ale text se zobrazuje jako tečky/hvězdičky – pro zadání hesla.

<input type="password" name="heslo">

E-mail

Pole pro zadání e-mailové adresy. Prohlížeč může zkontrolovat správný formát (např. jestli obsahuje @).

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

Datum

Zobrazí kalendář, ze kterého si uživatel může vybrat datum.

<input type="date" name="narozeni">

Čas

Zobrazí jednoduché pole pro výběr času (hodiny:minuty).

<input type="time" name="cas">

Zaškrtávací políčko

Uživatel může zaškrtnout jednu nebo více možností – např. zájmy.

<input type="checkbox" name="zajmy" value="sport"> Sport

Přepínač

Uživatel si může vybrat pouze jednu z možností. Všechny tlačítka musí mít stejné name.

<input type="radio" name="obor" value="it"> IT
<input type="radio" name="obor" value="oa"> OA
<input type="radio" name="obor" value="ag"> AG
<input type="radio" name="obor" value="na"> NA

Soubor

Umožní vybrat soubor z počítače – např. obrázek, dokument.

<input type="file" name="soubor">

Víceřádkový text

Vhodné pro delší text, například vzkaz, zprávu nebo komentář.

<textarea name="zprava" rows="4" cols="40"></textarea>

Rozbalovací nabídka

Uživatel si vybere jednu z možností ze seznamu.

<select name="ucebna">
    <option value="SpV2">SpV2</option>
    <option value="S1V3">S1V3</option>
    <option value="Robotika">Robotika</option>
</select>

Vymazání formuláře

Tlačítko pro vymazání všech vyplněných polí ve formuláři.

<input type="reset" value="Vymazat">

Odeslání formuláře

Tímto tlačítkem odešle uživatel celý formulář.

<input type="submit" value="Odeslat">

Celý formulář – příklad

<form action="#" method="post">
    <h2>Přihláška na kroužek</h2>

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

    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label for="vek">Věk:</label><br>
    <input type="number" id="vek" name="vek" min="10" max="99"><br><br>

    <label>Jaký den:</label><br>
    <input type="radio" name="den" value="pondeli"> Pondělí
    <input type="radio" name="den" value="streda"> Středa
    <input type="radio" name="den" value="patek"> Pátek<br><br>

    <label>Zájmy:</label><br>
    <input type="checkbox" name="zajmy" value="jezdectvi"> Jezdectví
    <input type="checkbox" name="zajmy" value="robotika"> Robotika
    <input type="checkbox" name="zajmy" value="3d"> 3D tisk<br><br>

    <label for="ucebna">Vyber učebnu:</label><br>
    <select name="ucebna" id="ucebna">
        <option value="exterier">Exteriér</option>
        <option value="SpV2">SpV2</option>
        <option value="Robotika">Robotika</option>
    </select><br><br>

    <label for="soubor">Nahraj soubor (nepovinné):</label><br>
    <input type="file" id="soubor" name="soubor"><br><br>

    <label for="zprava">Vzkaz nebo poznámka:</label><br>
    <textarea id="zprava" name="zprava" rows="4" cols="50"></textarea><br><br>

    <input type="submit" value="Odeslat přilhášku">
    <input type="reset" value="Vymazat formulář">
</form>

Odesílání formuláře (metody)

Představ si formulář jako takový balíček s informacemi, který uživatel vyplní – jméno, věk, zájmy, zprávu…
Když klikne na „Odeslat“, tak se ten balíček odešle na nějakou adresu (např. zpracuj.php).

A pak… někdo (třeba PHP skript) tyto údaje přečte a něco s nimi udělá – uloží, pošle e-mail, zobrazí na stránce atd.

Formulář ale sám o sobě nic nezpracovává – pouze odesílá data. Proto je důležité pochopit, jak data opustí stránku – a k tomu slouží atributy action a method.

• action je cíl – adresa nebo soubor, kam se data odešlou (např. PHP skript).
• method je způsob – jak budou data přibalena: viditelně v adrese (GET) nebo skrytě v „balíčku“ (POST).

Metoda GET

Metoda GET připojí data k adrese v URL. To znamená, že když klikneš na „odeslat“, tak se adresa v prohlížeči rozšíří o parametry.

<form action="vysledek.html" method="get">
    <label for="jmeno">Jméno:</label>
    <input type="text" id="jmeno" name="jmeno">
    <input type="submit" value="Odeslat">
</form>

Když napíšeš jméno Eva a odešleš, prohlížeč přejde na:

vysledek.html?jmeno=Eva

Vlastnosti metody GET:

• data jsou viditelná v adrese (uživatel je může zkopírovat, poslat mailem…),
• můžeš si stránku uložit do záložek (oblíbených),
• není bezpečné – neposílat hesla, osobní data,
• omezení délky – jen několik kilobajtů (v závislosti na prohlížeči),
• vhodné pro vyhledávání, filtrování, přechod na jinou stránku.

Metoda POST

Metoda POST odešle data skrytě – nezobrazují se v adrese. To je výhodné, když uživatel zadává důvěrné nebo rozsáhlé informace.

<form action="zpracuj.php" method="post">
    <label for="zprava">Zpráva:</label>
    <textarea name="zprava" id="zprava"></textarea>
    <input type="submit" value="Odeslat">
</form>

Po kliknutí na odeslat se stránka přesměruje na zpracuj.php, ale v URL nebude nic vidět.
Všechna data se posílají „v balíčku“ na pozadí.

Vlastnosti metody GET:

• bezpečnější než GET,
• vhodné pro hesla, přihlášení, registraci, zprávy, delší texty,
• neomezená délka dat,
• není možné uložit si stránku i s daty do záložek,
• data nelze jednoduše vidět v URL.

Zpracování dat z formuláře v PHP

Ale co když chceš s těmi vyplněnými údaji něco udělat? Třeba zobrazit je zpátky uživateli? Uložit je? Poslat e-mailem?

Tohle všechno zařídí jazyk PHP. PHP totiž běží na serveru – to znamená, že prohlížeč odešle data na server, PHP si je přečte a nějak s nimi naloží.

Formulář se odesílá pomocí tagu <form> – už znáš atributy action (kam se data posílají) a method (jakým způsobem).

Na stránce zpracuj.php napíšeš PHP kód, který přečte odeslaná data.

• $_POST – je speciální pole v PHP, které obsahuje data odeslaná z formuláře,
• $_POST["jmeno"] – vezme hodnotu z políčka name="jmeno",

<?php
$jmeno = $_POST["jmeno"];
$zprava = $_POST["zprava"];

echo "Ahoj, $jmeno!<br>";
echo "Tvoje zpráva byla: $zprava";
?>

❗ Pozor – POST vs. GET

Ve formuláři jsi měl method="post". Pokud bys tam měl method="get", musíš v PHP použít:

$_GET["jmeno"];

$_POST a $_GET jsou jako poštovní schránky. Jsou dvě různé, podle toho, jaký způsob doručení (metodu) zvolíš.

Kontrola vyplnění

Může se stát, že uživatel klikne na Odeslat bez vyplnění. PHP by pak mohlo zahlásit chybu – protože proměnná není k dispozici.

Proto je dobré udělat kontrolu, jestli už byla data odeslána a zda nejsou prázdná:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $jmeno = $_POST["jmeno"] ?? "";
    $zprava = $_POST["zprava"] ?? "";

    if ($jmeno == "" || $zprava == "") {
        echo "Prosím, vyplň všechna pole.";
    } else {
        echo "Ahoj, $jmeno!<br>";
        echo "Tvoje zpráva: $zprava";
    }
}
?>

Zabezpečení

Představ si, že někdo místo jména zadá HTML kód nebo JavaScript. Mohl by pak napadnout tvoji stránku.

Proto vždy, když vypisuješ data od uživatele zpátky na stránku, použij funkci htmlspecialchars. Tím řekneš: „Všechno vypiš jako text, nic nespouštěj“

htmlspecialchars($promenna)

Zdroje