Dusanko.net - Ako na tvorbu webu v HTML (7.)

Ako na tvorbu webu v HTML (7.) - formuláre

Autor: Dušan Koleno | Vydaný: 26.03.2006

V ďalšom pokračovaní seriálu o HTML by som Vám chcel predstaviť formuláre. Keďže je to dosť veľká téma načrtnem len ich základy.

Na vytvorenie formulárov sa používa tág <form>, ktorý obsahuje hodnoty:

action – stránka, na ktorú sa odošle formulár, môže byť aj mailová adresa v tvare mailto:nieco@nieco.sk,
method – určuje spôsob odosielania informácií. Prvý spôsob je GET , ten odošle informácie v adresnom riadku. Druhý spôsob je METHOD, ten odošle informácie z formulára v pozadí prehliadača. Využitie tejto hodnoty zistíte pri programovaní stránok. Ak hodnotu nezadáte nastaví sa automaticky GET,
enctype – určuje typ odosielaných dát. Napríklad pri prostom texte použite text/plain, pri html text/html. Táto hodnota je nepovinná a nemusíte ju používať. Do tágu form budeme neskôr zapisovať ďalšie tágy, ktoré budú určovať, čo sa bude vo formulári nachádzať (textové pole,zaškrtovadlo...).

Tág <input>

Tág input je najdôležitejší tág vo formulároch a môže obsahovať niekoľko hodnôt. Tie sú popísané nižšie

name – meno prvku formulára
type – určuje, čo sa vytvorí vo formulári.
Type = "text" – textové pole,
type = "submit" – odosielacie tlačítko,
type = "password" – textové pole, v ktorom sa namiesto znakov zobrazujú hviezdičky,
type = "reset" – tlačítko, ktoré vymaže formulár,
type = "radio" – vytvorí prepínač guličiek, ak zadáte viacerím inputom s hodnotou type="radio" to isté meno vytvorí sa skupina, v ktorej si môžete prepínať medzi guličkami,
type = "checkbox" – zaškrtávacie políčko,
okrem týchto hôdnot môžete ešte použiť file,image,hidden a button. Tieto hodnoty sa buď malo používajú, alebo sa používajú pri programovaní, čiže ich nebudem viac definovať.
checked - prázdna hodnota, ktorá udáva predvolený prvok (využivá sa pri radio,checkbox) - ukázané nižšie v príkladoch.
value – hodnota prvku formulára

Ak ste nepochopili niektoré hodnoty nevadí, vysvetlím ich nižšie na príkladoch.

Príklady

Text

<input type="text" name="meno" value="text predvyplnený">

Submit

<input type="submit" name="meno" value="odošli">

Password

<input type="password" name="meno" value="neviditelný text">

Radio

Vyberte si položku: <br>
<input type="radio" name="meno" value="položka 1" checked> Položka 1<br>
<input type="radio" name="meno" value="položka 2"> Položka 2<br>
<input type="radio" name="meno" value="položka 3"> Položka 3<br>

Vyberte si položku:
Položka 1
Položka 2
Položka 3

Checkbox

Mám rád: <br> 
<input type="checkbox" name="meno" value="cigarety" checked> Cigarety<br>
<input type="checkbox" name="meno" value="kávu"> Kávu<br>
<input type="checkbox" name="meno" value="kolu"> Kolu<br>

Mám rád:
Cigarety
Kávu
Kolu

Tág <select>

Tág select je vyberacie políčko a môže obsahovať hodnoty:

name – meno
size – počet zobrazených hodnôt v rámčeku
multiple – umožnuje výber viacerých hodnôt a nemá svoj obsah

Tág select obsahuje tágy option, ktoré obsahuju hodnoty value (určuje hodnotu) a selected (túto hodnotu môže obsahovať len jeden tág option. Určuje že ten jeden tág option bude nastavený ako predvolený).

Príklad:

<select name="meno">
<option value="auto">Auto<br>
<option value="motorku"> Motorku<br>
<option value="lod" selected> Loď<br>
<option value="lietadlo"> Lietadlo<br>
</select>

Všimnite si, že v html je na prvmo mieste Auto ale ako predvolená hodnota sa zobrazuje Loď, je to z dôvodu použitia hodnoty selected (hodnotu selected môžete zapisovať aj takto: selected="selected").

Tág <textarea>

Posledným a zároveň tretím tágom, ktorý budete vo formulároch potrebovať je textarea. Tento tág vytvorí veľké textové pole. Môže obsahovať hodnoty:

name – meno
cols – šírka textarey
rows – výška textarey

Príklad:

<textarea cols="30" rows="5" name="meno">
Obsah …. Obsah .…
</textarea>

Záverečný príklad

Na zaver by som vám chcel ukázať príklad, v ktorom som načrtol všetky možnosti formulárov, ktoré som uviedol vyššie.


<form action="stranka.htm" method="post">
  Meno: 
  <input type="text" name="meno">
  <br>Heslo: 
  <input type="password" name="heslo">
  <br>
  <br>Počítač má:
  <br>
  <input type="checkbox" name="pocitac" value="ram">
  RAM
  <br>
  <input type="checkbox" name="pocitac" value="cpu">
  CPU
  <br>
  <input type="checkbox" name="pocitac" value="kolesa">
  Kolesá
  <br>
  <br>Váš vek:
  <br>
  <input type="radio" name="vek" value="18 a viac">
  18 a viac
  <br>
  <input type="radio" name="vek" value="menej ako 18">
  menej ako 18
  <br>
  <br>Vaša adresa:
  <br>
<textarea name="adresa" cols="30" rows="3"></textarea>
  <br>
  <br>Vlastním:
  <br>
  <select name="vlastnim">
    <option value="motorku">    Motorku
    <option value="auto">    Auto
    <option value="lietadlo">    Lietadlo
    <option value="vsetko">    Všetky tri
  </select>
  <br>
  <br>
  <input type="submit" value="Odoslať!">
  <input type="reset" value="Vymazať!">
</form>

Výsledok príkladu si môžete prezrieť tu.

Hodnota disabled

Ak chcete nejaký prvok formulára znefunkčniť, použite hnodtu disabled. Napríklad:

<input type="text" name="meno" value="nezmeniteľná hodnota" disabled>

Fúúúh koniec

No konečne koniec :), v tomto článku som Vám načrtol používanie formulárov, ale zdaľeka nie ich možnosti, preto ak sa chcete naučiť o formulároch viac zájdite na stránku www.jakpsatweb.cz.

Komentáre

ZAC | http://
Možem sa spýtať ked tam dám aby mi to prišlo na e-mail tak prečo sa to posiela cez outlok ? Nešlo by rovno poslať normálne ? Bez outloku ??

admin | http://dusanko.net
to ZAC: Rovno by to išlo urobiť, ale len pomocou PHP. Čiže tu by už bola potrebná podpora zo strany servera.Tu je príklad http://www.jakpsatweb.cz/formular-mail.html#vlastni