Formuláre v HTML

V tejto časti tutoriálu sa pozrieme na tvorbu webových formulárov v jazyku v HTML. Ukážeme si rôzne typy formulárových prvkov a ich HTML tagy. Tiež si spravíme demo: ako vytvoriť webový formulár pre registráciu. Kapitola na tému ako vytvoriť webové formuláre v jazyku HTML obsahuje tieto časti:

• Vytvorenie formulára v HTML

• Ovládacie tlačidlá formuláru

• Vstupné formulárové prvky

• Výberový zoznam vo formulári

• Nahrávanie (upload) súborov v HTML

• Organizácia formulárových prvkov do sekcií

Vytvorenie webového formulára v HTML

Obaľujúci tag pre formulár v jazyku HTML je form a slúži teda ako hlavný element celého formuláru. Do neho sa umiestňujú ďalšie elementy formulárov ako vnorené sekcie, vstupné políčka, odosielacie tlačidlá a pod. V rámci tagu vieme nastaviť niekoľko atribútov, základné z nich sú tieto dva:

• action - adresa, na ktorú sa majú dáta z formuláru po odoslaní poslať.

• method - metóda, ktorou sa majú dáta z formuláru poslať.

Základnú štruktúru prázdneho formuláru (bez formulárových elementov) vidíte na ukážke nižšie (keďže ide len o obaľovací element formuláru, tak vlastne nevidíte zatiaľ nič :).

<form action="/uploads/tutorials/html_form_odoslat.php" method="GET">
  tu bude HTML formulár
</form>

Najskôr si musíme objasniť, ako fungujú formuláre v HTML jazyku a ako prebieha prenos dát na sieti internet. Formuláre majú niekoľko vstupných polí, cez ktoré môže používateľ vložiť údaje. Napríklad vstupné políčka pre text, zaškrtávacie políčka, prepínacie políčka, výber jednej z viacero možností a pod. Odoslaním vyplneného formuláru sa dáta zo vstupných políčok pošlú na URL adresu, ktorá je nastavená v atribúte action v obaľovacom tagu formulára form.

Pomocou HTML formulárov vieme poslať dáta dvomi metódami: metódou GET alebo metódou POST. Sú to HTTP metódy (metódy, ktoré sa používajú na prenos dát po internete pomocou protokolu HTTP). Zjednodušene povedané, protokol je zoznam pravidiel, ktorými sa riadi presun dát. Webové stránky fungujú na tomto protokole, resp. na jeho šifrovanej verzii HTTPS. (Každá webová stránka sa začína na "http" alebo "https").
Protokol HTTP má v skutočnosti viacero metód, ale formuláre v jazyku HTML poznajú len spomínané dve (GET a POST).

Zjednodušene by sme mohli povedať, že sa pri výbere vhodnej metódy stačí riadiť jednoduchým pravidlom:

• Ak chcete dáta na server poslať za účelom ich uloženia (dáta idú od vás na web), používa sa POST.

• Ak používate formulár na to, aby ste dáta získali (dáta idú zo servera a zobrazujú sa vám v prehliadači), používa sa metóda GET (napr. do formuláru zadáte hľadané slovo a očakávate, že dostanete záznamy vyhovujúce tomuto hľadanému slovu).

Pre pochopenie práce s HTML formulármi nie je kritické vedieť, či použiť metódu GET alebo metódu POST. Pre naše príklady stačí stále používať metódu POST a všetko bude fungovať. Je ale dobré poznať a uvedomovať si základné rozdiely:

• HTTP metóda GET odosiela hodnoty v URL adrese, preto ide o menej bezpečnú metódu, ak pracujeme s citlivými údajmi.

• HTTP metóda GET má obmedzenie na maximálnu veľkosť posielaných údajov (limit záleží od nastavenia servera a prehliadača, zvyčajne je to 2048 znakov čo je limit na max. počet znakov pre URL adresu).

• HTTP metóda POST sa používa bezpodmienečne vtedy, keď nám prekážajú obmedzenia metódy GET (napr. chceme poslať väčšie množstvo dát alebo nám nevyhovuje posielať dáta ako parametre v URL adrese).

Tým sme si vysvetlili štruktúru obaľovacieho tagu pre formulár form a môžeme sa bližšie pozrieť na konkrétne formulárové prvky. V jazyku HTML poznáme viacero typov formulárových prvkov, ktorými vieme od používateľa získať informácie.

Ovládacie tlačidlá (tag button)

Pre ovládacie tlačidlá sa používajú tagy button alebo input, pričom do atribútu type uvádzame typ tlačidla. Typ tlačidla je veľmi dôležitý, zoznam typov nájdete v tabuľke nižšie.

 <button type="sumbit">Odoslať</button>

 <button type="reset">Vymazať</button>

 <button type="button">Klikni</button>

 <input type="image"></input>

Špeciálne sa treba pozastaviť pri tlačidle, ktoré spôsobí odoslanie formuláru (submit). Možno by sa mohlo zdať, že odosielacie tlačidlo neposiela žiadne dáta, len vykoná odoslanie. V skutočnosti môžeme mať v jednom formulári viacero odosielacích tlačidiel, takže kliknutím sa pošle aj informácia, ktorým tlačidlom bol formulár odoslaný (hodnota, ktorá je uložená v parametri value, ak taký parameter existuje).

S výnimkou posledného typu (obrázkové tlačidlo) je jedno, či použijete tag button alebo input. Pre lepšie rozlíšenie prvkov sa ale odporúča používať tag button pre tlačidlá a tag input pre vstupné údaje.

Vstupné formulárové políčka (tag input)

Tag input sme si už predstavili pri tlačidlách, jeho uplatnenie je však oveľa väčšie. Zmenou spomínaného parametra type dokážeme vytvoriť vstupné formulárové prvky ďalších typov.

 <input type="text"></input>

 <input type="password"></input>

 <input type="checkbox"></input>

 <input type="radio"></input>

 <input type="file"></input>

 <input type="hidden"></input>

 <input type="range"></input>

 <input type="color"></input>

 <input type="date"></input>

 <input type="time"></input>

 <input type="number"></input>

 <input type="email"></input>

 <input type="tel"></input>

 <input type="url"></input>

Atribúty formulárových prvkov input

Každý typ formulárového prvku má svoje parametre, ale mnohé parametre sú tiež spoločné (platia pre všetky vstupné formulárové prvky). Najskôr si teda predstavíme spoločné prvky a následne si prejdeme použitie formulárových prvkov na jednotlivých príkladoch.

• name určuje názov prvku. Je dôležité, aby mal každý formulárový prvok svoj unikátny názov, aby sa dáta poslali korektne (keď v políčku očakávame priezvisko používateľa, mali by sme tento prvok nazvať napr. názvom "priezvisko")

• value slúži na zadefinovanie počiatočnej (prednastavenej hodnoty).

• placeholder slúži na zadefinovanie nápovedy (pomôcky na vyplnenie).

• required označuje, že prvok je nutné vyplniť (ak nebude mať tento prvok žiadnu hodnotu, formulár sa neodošle).

• maxlength slúži na zadefinovanie maximálnej dĺžky v počte znakov, ktoré vieme napísať

• size slúži na zadefinovanie šírky formulárového políčka

Registračný formulár v HTML

Registračný formulár je ideálny a často sa vyskytujúci typ HTML formulárov, preto ho použijeme na vysvetlenie formulárových prvkov. Začnime jednoduchým formulárov s menom, heslom, odosielacím tlačidlom a resetovacím tlačidlom.

<form action="/uploads/tutorials/html_form_odoslat.php" method="POST">
  Meno: <input type="text" name="meno" placeholder="zadaj meno">
  <br>
  Heslo: <input type="password" name="heslo" placeholder="zadaj heslo">
  <input type="reset" name="zresetuj" value="obnoviť">
  <input type="submit" name="odosli" value="odoslať">
</form>

Teraz poďme náš registračný formulár rozšíriť o ďalšie zaujímavé typy prvkov: výberové políčka, zaškrtávacie políčko a jeden skrytý prvok.

<form action="/uploads/tutorials/html_form_odoslat.php" method="POST">
  Meno: <input type="text" name="meno" placeholder="zadaj meno">
  <br>Heslo: <input type="password" name="heslo" placeholder="zadaj heslo">
  <br>Pohlavie:
  <input type="radio" name="pohlavie" value="zena"> žena 
  <input type="radio" name="pohlavie" value="muz"> muž
  <input type="radio" name="pohlavie" value="-"> nechcem povedať
  <br><input type="checkbox" name="som_plnolety" value="ano" > Súhlasím s odoslaním mojich údajov
  <br><input type="reset" name="zresetuj" value="obnoviť">
  <input type="submit" name="odoslat" value="odoslať">
  <input type="hidden" name="nahodne_cislo" value="13">
</form>

Textové pole (text)

Najjednoduchší typ vstupného poľa je jednoriadkový text. Vložíme ho tagom input s parametrom type nastaveným na hodnotu text. Je to základný typ vstupného poľa, takže prehliadač ho použije aj v prípade, keď nevie rozoznať typ (alebo keď sa pomýlite a uvediete nepodporovaný typ). V našom registračnom formulári slúži na zadanie mena.

Prepínacie polia (radio)

Prepínacie pole vložíme ako tag input s parametrom type nastaveným na hodnotu radio.

Tento prvok a používa na výber jednej z možností, pričom používateľ môže zakliknúť jednu možnosť alebo nevybrať nič. Všetky prepínacie políčka patriace do jednej skupiny hodnôt musia mať rovnaký názov, teda atribút name (v ukážke používame name="pohlavie"). V atribúte value je uložená hodnota pre každý prvok, ktorá sa odošle pri zakliknutí konkrétnej možnosti. Pomocou atribútu checked môžeme nastaviť, aby bol prvok prednastavene označený.

Aby bola interakcia s týmto formulárovým prvkom pohodlnejšia, je možné položku vložiť do svojho obaľovacieho tagu label spolu s popisom položky. Potom nebude nutné pri klikaní trafiť presne stred kruhu, ale postačí kliknúť kdekoľvek v rozsahu popisu položky (napríklad na slovo muž).

<label>
  <input type="radio" name="pohlavie" value="zena"> žena 
</label>
<label>
  <input type="radio" name="pohlavie" value="muz"> muž
</label>
<label>
  <input checked type="radio" name="pohlavie" value="-"> nechcem povedať
</label>

Alternatívne môžeme popisy k položkám aj linkovať cez identifikátor položky (id). Atribút id slúži na identifikáciu prvku - teda každý element môže mať tento identifikátor a zároveň musí byť unikátny (nie je povolené dvom rôznym HTML elementom dať taký istý identifikátor). Takto vieme ovládať prvok z hocijakého miesta na stránke.

Názov identifikátora môže mať len alfanumerické znaky, pričom nemôže začínať číslicou.

<input id="pohlavie_zena" type="radio" name="pohlavie" value="zena"> 
<input id="pohlavie_muz" type="radio" name="pohlavie" value="muz">
<br>
<label for="pohlavie_zena">žena </label>
<label for="pohlavie_muz">muž </label>

Zaškrtávacie pole (checkbox)

Zaškrtávacie pole vložíme ako tag input s parametrom type nastaveným na hodnotu checkbox.

Tento prvok a používa, keď chceme umožniť výber z niekoľkých možností, pričom používateľ si môže vybrať všetky alebo aj nevybrať žiadnu. Atribúty fungujú podobne ako pri prepínacích poliach. Tiež ich môžeme obaliť do tagu label

<form>
  Moje obľúbené predmety sú:
  <label>
    <input type="checkbox" name="predmety" value="css"> CSS kurz 
  </label>
  <label>
    <input type="checkbox" name="predmety" value="html"> HTML kurz
  </label>
  <label>
    <input checked type="checkbox" name="predmety" value="weby"> tvorba webov
  </label>
  <input type="reset" name="zresetuj" value="obnoviť">
</form>

Vstupné polia pre dátum a čas

Modernejšie zariadenia podporujú aj ďalšie typy vstupných polí, napríklad pre zadanie čísla, rozsahu, dátumu, času a pod. Spôsob vykreslenia týchto polí záleží od konkrétneho zariadenia. Pri dátumoch sa zvyčajne zobrazí malý kalendár, pri čase malé hodiny, pri výbere farieb paleta farieb a pod. Jednotlivé prvky si môžete pozrieť na ukážke nižšie. Avšak stále platí, že na inom zariadení môžu vyzerať odlišne. Ak ich zariadenie nepodporuje, zobrazí sa jednoriadkový vstup. V prípade prvkov pre telefónne číslo tel, email email alebo adresu url, sa pred odoslaním kontroluje správnosť formátu.

<form>
  <input type="search" placeholder="hladaj"><br>
  <input type="number"><br>
  <input type="date"><br>
  <input type="time"><br>
  <input type="color"><br>
  <input type="week"><br>
  <input type="month"><br>
  <input type="datetime-local"><br>
  <input type="range"><br>
</form>

Viacriadkové textové pole (tag textarea)

Ak chceme vložiť dlhší text, môžeme použiť element textarea, ktorý ma niekoľko parametrov. Prvé z nich sú rovnaké ako pri predchádzajúcich formulárových prvkoch. Na rozdiel od tagu input je textarea párový tag (má aj ukončovací tag). Predvolená hodnota sa vkladá do vnútra elementu.

• name: názov (musí byť unikátny v danom formulári)

• placeholder: zadefinovanie nápovedy (pomôcky na vyplnenie)

• required označuje, že prvok je nutné vyplniť

• maxlength slúži na zadefinovanie maximálnej dĺžky v počte znakov

• rows počet riadkov

• cols počet znakov na riadok

<textarea name="popis" placeholder="popis o dĺžke najviac 255 znakov" maxlength="255" rows="4" cols="80"></textarea>

Výberový zoznam (tag select)

Keď chceme umožniť vybrať hodnotu (resp. niekoľko hodnôt) z veľkého zoznamu, namiesto zaškrtávacích políčok môžeme použiť roletkový zoznam select. Jednotlivé položky do zoznamu vkladáme ako elementy option. K dispozícii máme tiež niekoľko parametrov.

Parametre pre obaľujúci tag select

• name: názov (musí byť unikátny v danom formulári)

• multiple definuje, že je možné vybrať viac prvkov naraz

• required definuje, že prvok je nutné vyplniť

Parametre pre položku zoznamu option

• value: názov (musí byť unikátny v danom formulári)

• selected definuje, že je položka označená

Pohlavie: 
<select name="pohlavie">
  <option value="">- vyberte pohlavie -</option>
  <option value="zena">žena</option>
  <option value="muz">muž</option>
  <option selected value="-">nechcem uviesť</option>
</select>

Obľúbené predmety: <br> 
<select name="predmety" multiple>
  <option value="slovenský jazyk">slovenský jazyk</option>
  <option value="anglický jazyk">anglický jazyk</option>
  <option value="tvorba webu">tvorba webu</option>
  <option value="html">html</option>
  <option value="programovanie">programovanie</option>
  <option value="css">css</option>
  <option value="dejiny">dejiny</option>
  <option value="geografia">geografia</option>
  <option value="informatika">informatika</option>
</select>
<br> *  (pre označenie viac predmetov podržte kláves CTRL a klikajte)

Ak máme položiek veľa, môžeme ich zoskupovať do skupín pomocou tagu optgroup, pričom názvy skupín môžeme upraviť parametrom label:

<select name="predmety">
  <option value="">-- Môj najviac obľúbený predmet --</option>
  <optgroup label="jazyky">
    <option value="slovenský jazyk">slovenský jazyk</option>
    <option value="anglický jazyk">anglický jazyk</option>
  </optgroup>
  <optgroup label="ostatné">
    <option value="tvorba webu">tvorba webu</option>
    <option value="html">html</option>
    <option value="programovanie">programovanie</option>
    <option value="css">css</option>
    <option value="dejiny">dejiny</option>
    <option value="geografia">geografia</option>
    <option value="informatika">informatika</option>
  </optgroup>
</select>

Kombobox - kombinácia zoznamu a textového poľa

V niektorých situáciách by sa nám hodila kombinácia elementov textového vstupu a výberu z viacerých možností. HTML element select nám umožňuje zadať zoznam hodnôt, ale neumožňuje vložiť vlastnú hodnotu. Naopak, element input typu text nám umožní napísať ľubovoľný text, ale nemôžeme zadať hodnoty na výber.
Na kombináciu týchto vlastností sa používa tzv. kombobox, ktorý však v jazyku HTML neexistuje. Môžeme si však pomôcť elementom datalist, do ktorého vložíme zoznam hodnôt a tento zoznam nalinkujeme na vstupné textové pole. Do poľa môžeme takto zadať hocijaký text, a zároveň máme k dispozícii aj pripravený zoznam hodnôt formou tzv. našepkávania. Zoznam hodnôt sa prispôsobuje vstupu používateľa (stačí začať písať a ponúkané položky sa automaticky filtrujú)

<input list="zoznam_predmetov" name="predmety" />
<datalist id="zoznam_predmetov">
    <option value="tvorba webu">
    <option value="tvorba webových stránok pre začiatočníkov">
    <option value="tvorba webových stránok pre pokročilých">
    <option value="slovenský jazyk">
    <option value="anglický jazyk">
    <option value="nemecký jazyk">
    <option value="HTML">
    <option value="dejepis">
</datalist> (začnite písať slovo "jazyk" alebo "tvorba" a zoznam hodnôt sa prispôsobí)

Nahrávanie súborov

Pre nahrávanie súborov (z angl. upload) vieme použiť HTML element input s parametrom type="file". Pri nahrávaní súborov však nesmieme zabudnúť na dva detaily: upload súborov funguje len pri HTTP metóde POST a v obaľujúcom tagu pre formulár form je potrebné pridať parameter enctype, ktorý povolí nahrávanie konkrétnych typov súborov:

<form action="/uploads/tutorials/html_form_odoslat.php" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <input type="submit" name="odoslat_subor" value="odoslať">
</form>

Poznámka: Pre spracovanie odoslaného súboru na serveri je potrebné použiť iný jazyk, keďže jazyk HTML túto funkcionalitu nezvládne. Preto sa nebudeme viac zaoberať elementom na upload súborov v rámci tohto tutoriálu k HTML.

Organizácia prvkov v HTML formulári

Pri tvorbe väčších formulárov je vhodné formulárové prvky členiť do sekcií. Jeden formulár môže v rámci svojho tela obsahovať viacero tzv. skupín polí, ktoré sa definujú tagom fieldset. Fieldset je teda množina formulárových prvkov, ktorá môže mať svoj zastrešujúci názov uvedený v tagu legend. Členenie formuláru na sekcie uvádzame na príklade nižšie.

<form action="/uploads/tutorials/html_form_odoslat.php" method="post">
  <fieldset>
    <legend>Prihlasovacie údaje</legend>
    Meno: <input type="text" name="meno" placeholder="zadaj meno">
    <br>
    Heslo: <input type="password" name="heslo" placeholder="zadaj heslo">
  </fieldset>
  <br>
  <fieldset>
    <legend>Osobné údaje</legend>
    Môj najviac obľúbený predmet:
    <select name="predmety">
      <option value="tvorba webu">tvorba webu</option>
      <option value="html">html</option>
      <option value="programovanie">programovanie</option>
      <option value="css">css</option>
      <option value="dejiny">dejiny</option>
      <option value="geografia">geografia</option>
      <option value="informatika">informatika</option>
    </select>
    <br>Pohlavie:
    <label><input type="radio" name="pohlavie" value="zena">žena</label>
    <label><input type="radio" name="pohlavie" value="muz">muž</label>
  </fieldset>
  <label>
    <input type="checkbox" name="suhlasim" value="ano" > Súhlasím s odoslaním mojich údajov
  </label>
  <input type="reset" value="odoslať">
</form>

Tým sme sa dostali na koniec tutoriálu zameraného na tvorbu formulárov - v poslednej ukážke máme sľúbený kompletný registračný formulár. Ten by sa dal samozrejme rôzne vylepšiť, ale to už necháme na vás :) Možno ste si všimli, že odosielacie tlačidlo nie typu submit, ale typu reset. Takto sa môžete s formulárom lepšie pohrať :)

Tvorba formulárov v HTML - zhrnutie