Formuláre

Formulár je definovaný značkami <form></form>, pričom do ich vnútra sa ukladajú polia, ktoré sa následne odosielajú na server na spracovanie. Na to, aby sa mohli na server odoslať potrebujú principiálne vlastnosti:

  • Tlačidlo na odoslanie formuláru
  • action atribút (action=“/action_page.php“) – označuje adresu pre script, ktorý má polia spracovať
  • method atribút (method=“get“) – HTTP metóda na zaslanie dát. Môže byť GET alebo POST

Každé z polí, ktoré sa vo formulári nachádza musí obsahovať vlastnosť name, na základe ktorej sa dáta spárujú s jednotlivými vstupnými poliami.

Input elementy

poznáme podľa atribútu type:

  • <input type=“text“> – obsahuje text
  • <input type=“password“> – obsahuje heslo
  • <input type=“submit“> – slúži na definovanie tlačidla na odoslanie formuláru
  • <input type=“reset“> – slúži na zresetovanie všetkých hodnôt vo formulári na ich predvolené hodnoty
  • <input type=“radio“> – definuje iba jednu konkrétnu hodnotu zo série
  • <input type=“checkbox“> – definuje viacero hodnôt zo série
  • <input type=“button“> – definuje tlačidlo
  • <input type=“color“> – obsahuje farbu
  • <input type=“number“> – obsahuje číslo
  • <input type=“range“> – zobrazuje rozmedzie, z ktorého je možné vybrať hodnotu
  • <input type=“search“> – definuje pole pre vyhľadávanie
  • <input type=“date“> – obsahuje dátum
  • <input type=“datetime-local“> – obsahuje dátum a čas
  • <input type=“month“> – obsahuje mesiac
  • <input type=“time“> – obsahuje čas
  • <input type=“email“> – obsahuje e-mail
  • <input type=“tel“> – obsahuje telefónne číslo
  • <input type=“url“> – obsahuje odkaz na stránku
  • <input type=“week“> – obsahuje poradové číslo týždňa v roku

Jednotlivé input elementy môžu mať vlastnosti:

  • disabled – pole nie je aktívne
  • max – maximálna hodnota, napr. pre čísla
  • maxlength – maximálna dĺžka, napr. maximálne môže obsahovať 5 znakov
  • min – minimálna hodnota, napr. pre čísla
  • readonly – slúži iba na čítanie
  • required – povinné pole
  • size – definuje šírku (v znakoch) input elementu
  • step – špecifikuje po akých krokoch sa má číslo navyšovať
  • value – definuje vyplnenú hodnotu
  • placeholder – definuje vyplnenú hodnotu, ktorá sa zobrazuje na pozadí, no neodosiela sa na server, pokiaľ nie je zmenená užívateľom

Select

Select rovnako ako input type „radio“ alebo „checkbox“ poskytuje niekoľko možností. Predvolene je možné s ním pracovať ako s radio inputom, no pomocou atribútu multiple je možné vybrať aj viac hodnôt naraz. Každá z možností je označená značkou option.

<select multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Textarea

Slúži na zadávanie dlhšieho textu, pričom je možné zobrazovať niekoľko riadkov.

<textarea rows="4" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique eros eu augue porttitor ultricies. Donec orci enim, tincidunt ac finibus at, bibendum vitae diam. Praesent lobortis ipsum libero, et interdum nisl facilisis eget. Phasellus sodales purus eget ante pulvinar, tincidunt volutpat nisi volutpat. Donec pulvinar sagittis consequat.
</textarea>