HTML pre začiatočníkov - formuláre, 8.diel

HTML pre začiatočníkov - formuláre, 8.diel

Formuláre v HTML nehrajú veľkú úlohu ale v spojitosti zo skriptovacími jazykmi sú najdôležitejšou súčasťou jazyka HTML. Naučiť sa robiť formuláre vám ukáže tento diel.

Tvorba formuláru

Formuláre nemajú vysoký stupeň praktického využitia v HTML ale mnoho spojitostí s nimi nájdete v skriptovacých jazykoch ako je napr. PHP, ASP, CGI.... Prvé čo budete musieť podniknúť pre vytvorenie formuláru je jeho zápis. Pre zápis formuláru sa používa párový tag. Zápis vyzerá nasledovne.
<form action="odoslat_formular.php" method="post" enctype="text/plain" target="_blank">

<fieldset><legend>Formulár</legend>

<input type="text">

<textarea>obsah pola</textarea>

<select>

<option>Hodnota 1</option>

<option>Hodnota 2</option>

<option>Hodnota 3</option>

</select>

<input type="submit" value="Odoslať formulár">

</fieldset></form>
To čo ste práve zazreli je bežný zápis formuláru v HTML jazyku. Obsah je vyplnený nepárovými tagmi <input> a inými. Popis funkcií každého atribútu je vysvetlený nižšie:
action - obsahuje cestu(URL) k skriptu kde budú spracované hodnoty formuláru
method - možností sú dve. Zápis GET(odoslanie v URL) a POST(odoslanie bez URL)
enctype - spôsob odoslania, možné hodnoty multiport/form-data(pre súbory...) a text/plain(pre texty...)
target - využitie toho atribútu sme si vysvetlili v 4.diele
fieldset - označuje ohraničenie formuláru - bez CSS štýlov je to čiarou
select - mnoho výberové pole(vysúvacie alebo viacvýberové)
option - tvorí polia v tagu <select>
legend - zapisujeme ním názov/nadpis formuláru
textarea - párový tag, označuje veľké pole vhodné napr. na písanie textov
input - nezbytný prvok formuláru. Má mnoho druhov využitia
value - vypĺňa obsah pola(tlačidlo, textové pole...)

Input a jeho podoby

Input je už ako som uviedol mnohotvárny. Ak vo formulári neuvedieme žiadny input nemá formulár žiadnu funkciu a je bezvýznamný(sú aj výnimky).
Začnem celým zoznamom funkcií inputu, ktoré sa budú zapisovať v tvare:
<input type="NAZOV_TYPU">
Možností je dosť veľa, tak sa hneď nenaplašte :-)
text - malé textové pole [Príklad]
password - pole so skrytými znakmi [Príklad]
checkbox - zaškrtávacie pole [Príklad]
radio - pole výberu(jednej možnosti) [Príklad]
file - pole s tlačidlom, ktoré sa vyplní cestou k súboru [Príklad]
button - prosté tlačidlo [Príklad]
submit - tlačidlo, ktoré odošle formulár [Príklad]
reset - tlačidlo, ktoré vymaže hodnoty zadané v poliach(okrem value) [Príklad]
hidden - skryté pole, ktoré má prednastavenú hodnotu [Príklad]

V niektorých príkladoch som pridal aj pár atribútov navyše aby bolo možné si prezrieť ich využitie na 100%. Povinnosť je aj ich opísať.
Využil som niektoré s týchto možných atribútov v tagoch <input>:
name - meno pola
value - vypĺňa obsah pola(tlačidlo, textové pole...)
size - označuje veľkosť pola
maxlength - nastavenie obmedzenia počtu znakov
checked - pre typy radio a chcekbox nastavuje defaultné zaškrtnutie/označenie
disabled - pole bude nezmeniteľné/nepoužiteľné v prehliadači

Textarea

Teraz nasleduje tag textarea, ktorý popíšem bližšie tiež. Ako vyzerá si môžete prezireť tu. Atribútov neni už tak veľa. Máme tu len name, disabled a čo nám pribudlo je len cols a rows. Spĺňajú podobnú funkciu ako width a height ale v iných rozmeroch.

Select

Select je viac výberové pole. Prezrieť si ho môžete tu. Select je vlastne len vytvorenie miesta pre polia, ktoré bude obsahovať. Skutočné polia, ktorými sa vypĺňa <select> sú párové tagy <option>.
Atribúty tagu <select>:
name - meno odosielaného pola
size - nastavuje veľkosť výberu pola
multiple - umožňuje hromadný výber hodnôt pola
disabled - rovnaká funkcia ako u input a textarea

Atribúty tagu <option>:
value - hodnota pola odosielaná pre <select>
selected - nastavuje defaultne zobrazené políčko výberu(ktoré vidíme ako prvé)

Spracovanie formulárov

Spracovanie formulárov vám nezabezpečí HTML ale iba skriptovacie jazyky. Tie sa potom musíte naučiť tiež a to je oproti HTML pekne ťažká robota. Učenie HTML je jednoduché. Učenie skriptovacých jazykov vám zaberie viac času ale efekt bude oveľa lepší ako pri odoslaní prázdneho formulára nikam :-D. Ako skriptovací jazyk môžem doporučiť PHP - je zadarmo a je veľmi využívané. Podporuje ho už takmer každý hosting na svete.

Ak ale nemáte záujem sa naučiť niektorí zo skriptovacých jazykov môžete využiť služby niektorých stránok, ktoré zabezpečia spracovanie formulárov napr. v podobe návštevnej knihy. Toto sú 2 známe stránky, ktoré poznám:
Blueboard
All4web

Záver

Nezabudnite na radu o skriptovacých jazykoch. Formuláre sú všade. Stretávate sa s nimi takmer na každej väčšej/menšej stránke.
Alternatívne verzie: Text PDF Voice
Autor: PaBi3 · Kategória: Webdesign · Dátum: 31.05.2005 15:25

Komentáre

#1 marian E-mail
30.01.2008 16:32
Dobrý deň som domáci amater a aj tvorca stránok. A mal by som záujem sy vyrobit stránku. Kde sa v <textarea> dalo spravit aby čo sa na na nu mapíše, sa aj uložilo na nej ako v pokeci <pokec.azet.sk> Ďakujem

#2 admin Web E-mail
30.01.2008 20:51
admin [1] marian, neviem vôbec, ktorý formulár myslíte (na pokec ani nechodím), ale určite budete musieť použiť javascript.

Osobné údaje
Captcha
Odpíšte text z obrázku. Rozlišujú sa malé a veľké písmená.
Obsah
Možnosti