Vsebin11

Obrazci:

Z obrazci lahko znotraj spletne strani dodajamo različne elemente, znane iz grafičnih uporabniških vmesnikov, kot so npr. ukazni guumbi, vnosna polja ali stikala. Grafični brskalniki prikazujejo elemente, prevzete iz operacijskega sistema, v katerem se izvajajo.

V HTML obrazce kodiramo znotraj para oznak <FORM>. Oznaka določa začetek obrazca, poleg tega podaja tudi informacijo o programu oz. protokolu, ki vneseno informacijo obdela.

Celotna oblika:

<FORM
    [ACTION="{strežni program}|{strežni protokol}"]
    [METHOD="{get|post}"]
    [ENCTYPE="{kodiranje podatkov}"]
>

Parameter ACTION lahko vsebuje naslov URL strežnega programa, ki bo obdelal vsebino, vneseno v obrazec, ali pa vsebuje elektronski naslov v obliki URL, kamor se bo vsebina obrazca posredovala po protokolu za prenos elektronske pošte (npr. mailto:Dusan.Klemencic@guest.arnes.si). Parameter METHOD določa način prenosa podatkov, če je uporabljen protokol HTTP. S parametrom ENCTYPE lahko določimo drugačen način kodiranja podatkov (po MIME), kakor je privzeti način application/x-www-form-urlencoded.

Dokument lahko vsebuje več obrazcev, gnezdenje pa ni dopustno. Več obrazcev moramo definirati zaporedno. Posamezne dele obrazca kodiramo z oznakami <INPUT>,<SELECT> in <TEXTAREA>. Z njimi lahko na spletno stran dodamo vnosna polja, ukazne gumbe, stikala, sezname in slike.

Osnovni vnosi

Osnovni vnosi omogočajo izbiro gumba, vklop stikala, vnos krajšega besedila ali izbiro točke na sliki. Vse to kodiramo z oznako <INPUT>:

<INPUT
   [TYPE="{text|password|checkbox|radio|submit|reset|
           file|hidden|image}"]
   [NAME="{ime elementa}"]
   [VALUE="{vsebina}"]
   [CHECKED]
   [SIZE={velikost elementa za vnosno polje}]
   [MAXLENGHT={dopustna dolžina vnosa za polje}]
   [SRC="{naslov URL pri sliki}"]  
   [ALIGN="{top|middle|bottom|left|right}"]
>

Vrednost in smiselnost parametrov je v celoti odvisna od nastavitve vrste elementa, ki jo določa parameter TYPE. Z njim lahko določimo enostavno vnosno polje (text), vnosno polje z zakritim vnosom (password), stikali (checkbox in radio), potrditveni gumb (submit), gumb za vnovično nastavitev elementov (reset), možnost prenosa datotek (file), skrito polje (hidden) ali sliko (image). Če parameter izpustimo, se privzame vnosno polje (text).

Vsak element lahko poimenujemo s parametrom NAME. Nekaterim elementom lahko predpišemo vrednost s parametrom VALUE. Stikali lahko vključimo tako, da navedemo parameter CHECKED. Pri vnosnih poljih lahko določimo izrisano širino (SIZE) in največjo dopustno dolžino vnosa (MAXLENGHT). Pri elementu image podamo naslov URL ustrezne slike in po želji tudi njeno poravnavo (ALIGN).

Poglejmo si obrazce na primeru:

1.) Text:

<FORM>
Tvoja starost:
<INPUT TYPE="text" VALUE="Vnesi pravo vrednost!">
</FORM>

Izgled:

2.) Password:

<FORM>
Tvoja starost:
<INPUT TYPE="password">
</FORM>

Izgled:

3.) Checkbox:

<FORM>
Tvoja starost:
<INPUT TYPE="checkbox" CHECKED>Polnoleten
</FORM>

Izgled:

4.) Radio:

<FORM>
Tvoja starost:
<INPUT TYPE="radio" NAME="starost">0-20 let
<INPUT TYPE="radio" NAME="starost" CHECKED>21-40 let
<INPUT TYPE="radio" NAME="starost">41-60 let
<INPUT TYPE="radio" NAME="starost">61-80 let
</FORM>

Izgled:

5.) Submit, reset in hidden:

<FORM ACTION="mailto:Dusan.Klemencic@guest.arnes.si" METHOD="post" ENCTYPE="text/plain">
Tvoj komentar:
<INPUT NAME="Komentar">
<INPUT TYPE="hidden" NAME="skrito" VALUE="Na to besedilo ne moreš vplivati!">
<INPUT TYPE="submit" VALUE="Pošlji pošto">
<INPUT TYPE="reset" VALUE="Počisti!">
</FORM>

Izgled:

6.) Image:

<FORM ACTION="gumbi.htm">
<INPUT TYPE="image" NAME="akcija" SRC="gumbi.gif">
</FORM>

Izgled:

7.) File:

<FORM ACTION="/" ENCTYPE="multipart/form-data" METHOD="get">
Datoteka za prenos:
<INPUT TYPE="file" NAME="userfile" VALUE="Brskaj...">
<INPUT TYPE="submit" VALUE="Prenesi!">
</FORM>

Izgled:

Ne dela, kot je zamišljeno!?

Poglej si še en primer obrazca!

Seznami

V obrazcih lahko omogočimo uporabniku, da izbere s seznama možnosti. Tedaj porabimo oznako <SELECT>, med katerima naštejemo elemente seznama. Posamezen element določa oznaka <OPTION>.

Oblika oznake je sledeča:
<SELECT
    [NAME="{ime seznama}"]
    [SIZE="{število vidnih elementov}"]
    [MULTIPLE]
>
<OPTION
    [VALUE="{vrednost}"]
    [SELECTED]
>

Seznamu podamo ime s parametrom NAME. S parametrom SIZE lahko določimo, koliko vrstic seznama je naenkrat vidnih na zaslonu. Prisotnost parametra MULTIPLE določa, da je mogoče s seznama izbrati več elementov. Vsaka izmed vrstic je določena z oznako <OPTION>, parameter VALUE pa ji določa vrednost. Prisotnost parametra SELECTED dotično vrstico označi kot izbrano že na začetku.

Poglejmo si primer:

<FORM>
Izberi ustrezna leta:
<SELECT>
   <OPTION VALUE="1" SELECTED>0-20
   <OPTION VALUE="2">21-40
   <OPTION VALUE="3">41-60
   <OPTION VALUE="4">61-80
</SELECT>
</FORM>

Izgled:

Če parameter SIZE ispustimo, se privzame nastavitev ene vidne vrstice, kar se na spletni strani odrazi v padajočem seznamu. S tovrstnega seznama ni mogoče izbrati več elementov, četudi bi podali parameter MULTIPLE. Nastavitev dveh ali več vidnih vrstic se odrazi v odprtem seznamu, po katerem se je moč premikati z drsnikom, če je naštetih elementov več od predpisane velikosti. Če velikosti ne navedemo, podamo pa parameter MULTIPLE v izbiri <SELECT>, je rezultat enak, kot pa če bi za SIZE izbrali število vseh izbir, ki jih navedemo.Izbiranje več elementov je odvisno od brskalnika,pri večini pa to dosežemo tako, da klikamo posamezne vrstice, hkrati padržimo pritisnjeno tipko Ctrl.

Primer:

<FORM>
Izberi ustrezna leta:
<SELECT MULTIPLE>
   <OPTION VALUE="1" SELECTED>0-20
   <OPTION VALUE="2">21-40
   <OPTION VALUE="3">41-60
   <OPTION VALUE="4">61-80
   <OPTION VALUE="5">61-80
</SELECT>
</FORM>

Izgled:

Daljše besedilo

Večkrat želimo, da uporabnik vnese svoje mnenje, ki pa je ponavadi daljše od ene vrstice in ga zato običajno ne moremo vnesti v običajno vnosno polje. Za vnos daljšega besedila je na voljo poseben par oznak <TEXTARA>:

<TEXTAREA
    [NAME="{ime vnosnega polja}"]
    [ROWS={število vidnih vrstic}]
    [COLS={število vidnih stolpcev}]
>
{Začetno besedilo v vnosnem polju}
</TEXTAREA>

Primer:

<FORM>
Vnesi nekaj svojih komentarjev:
<TEXTAREA NAME="Komentarji" ROWS=3 COLS=50>
Ta HTML stran je več kot odlična :)
</TEXTAREA>
</FORM>

Izgled: