HTML Obrasci - Lekcija 3

Pre nego što nastavimo, evo još jedne sitnice. U obrascima je moguće koristiti i slike. Zapravo, moguće je koristiti skoro sve u obrascima i obrasce u skoro svemu. Pazite samo na HTML sintaksu i preklapanje tagova. Pogledajte sledeći primer...

Predsednički kviz

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem

RepDem

RepDem

RepDem

RepDem

RepDem
Odgovarajući HTML kôd nalazi se ovde ako Vas interesuje.
...a odgovori su ovde ... ako su Vam stvarno potrebni.

Za one koje to interesuje, preklapajući tagovi su oni tagovi koji se... hmmm... preklapaju. Šta to znači? Evo male ilustracije...

   <TABLE><FORM></TABLE></FORM>    Preklapajući tagovi.... LOŠE
   <TABLE><FORM></FORM></TABLE>    Ugnežđeni tagovi.... DOBRO


Sledeće što ćemo naučiti je tzv. PULL DOWN LIST. Ovde ćemo koristiti tag <SELECT> umesto <INPUT>; ne zaboravite zatvarajući tag! Hajde da vidimo kako to izgleda.

<SELECT>
</SELECT>


Ne zaboravite ni da imenujete...

<SELECT NAME="NAJBOLJI DRUG">
</SELECT>


Dodajmo nekoliko opcija.

<SELECT NAME="NAJBOLJI DRUG">
<OPTION>Pera
<OPTION>Raša
<OPTION>Toma
<OPTION>Ivan
</SELECT>


A, dodajmo i vrednost (VALUE) svakoj opciji (<OPTION>).

<SELECT NAME="NAJBOLJI DRUG">
<OPTION VALUE="PERA">Pera
<OPTION VALUE="RAŠA">Raša
<OPTION VALUE="TOMA">Toma
<OPTION VALUE="IVAN">Ivan
</SELECT>

Predefinisana (default) je prva opcija.


Ukoliko želimo, možemo neku drugu opciju proglasiti default opcijom.

<SELECT NAME="NAJBOLJI DRUG">
<OPTION VALUE="PERA">Pera
<OPTION VALUE="RAŠA">Raša
<OPTION VALUE="TOMA" SELECTED>Toma
<OPTION VALUE="IVAN">Ivan
</SELECT>


SCROLLING LISTA je veoma slična, što se konstrukcije tiče, PULL DOWN LISTI . Hajde da prvo dodamo još imena.

<SELECT NAME="NAJBOLJI DRUG">
<OPTION VALUE="PERA">Pera
<OPTION VALUE="RAŠA">Raša
<OPTION VALUE="TOMA">Toma
<OPTION VALUE="IVAN">Ivan
<OPTION VALUE="MIHAJLO">Mihajlo
<OPTION VALUE="DRAGAN">Dragan
<OPTION VALUE="VLADA">Vlada
</SELECT>


Sve što je potrebno za stvaranje SCROLLING LISTE je dodavanje atributa SIZE u tag <SELECT>.

<SELECT NAME="NAJBOLJI DRUG" SIZE=4>
<OPTION VALUE="PERA">Pera
<OPTION VALUE="RAŠA">Raša
<OPTION VALUE="TOMA">Toma
<OPTION VALUE="IVAN">Ivan
<OPTION VALUE="MIHAJLO">Mihajlo
<OPTION VALUE="DRAGAN">Dragan
<OPTION VALUE="VLADA">Vlada
</SELECT>

Zašta nam služi taj novi atribut? Pa, jednostavno je - on samo kazuje koliko će opcija biti prikazano u prozoru! Prosto, zar ne?


Ponovo, default vrednost će biti prva opcija, osim ako mi ne želimo da to bude neka druga opcija... ovako:

<SELECT NAME="NAJBOLJI DRUG" SIZE=4>
<OPTION VALUE="PERA">Pera
<OPTION VALUE="RAŠA">Raša
<OPTION VALUE="TOMA" SELECTED>Toma
<OPTION VALUE="IVAN">Ivan
<OPTION VALUE="MIHAJLO">Mihajlo
<OPTION VALUE="DRAGAN">Dragan
<OPTION VALUE="VLADA">Vlada
</SELECT>

Ne pada mi na pamet zašta bi ovo moglo da se koristi, ali ta funkcija postoji, pa nije loše znati je!:-)


Sledeće... veoma koristan tip inputa je <TEXTAREA>.

<TEXTAREA NAME="COMMENTS">
</TEXTAREA>


Moguće je kontrolisati veličinu prozora...

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>

[Napomena: ROWS pokazuje visinu, a COLS širinu prozora.]



Odgovarajući HTML kôd nalazi se ovde .

Koristan atribut, koji se uključuje u tag <TEXTAREA> je WRAP. Neki browseri ga neće razumeti, ali to nije strašno... naime, HTML kôd neće propasti samo zbog toga - browser će jednostavno ignoristi svaki onaj atribut ili tag koji ne poznaje (ovo pravilo, najverovatnije, važi uvek).

Dodajmo ovo...

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>

WRAP=VIRTUAL znači da će tekst u prozoru biti lomljen, ali će biti poslat kao jedan dugačak, neprekidan red.


<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>

WRAP=PHYSICAL znači da će tekst biti lomljen u prozoru, ali će tako biti i poslat.


<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>

Ovo je predefinisana (default) vrednost.
WRAP=OFF znači da tekst u prozorčiću neće biti lomljen, ali će biti poslat baš onako kako je otkucan (kao onaj čovečuljak malo gore).

<--Lekcija 2        Lekcija 4-->

Sadržaj Lekcije
Uvod - 1 - 2 - 3 - 4 - 5
Indeks Barebones
HTML vodič
Z o N i . W e b !