HTML/CSS za početnike #9 - Form i input elementi

     Pošto smo u prošloj lekciji odradili početnu stranu našeg sajta, u ovoj ćemo odraditi kontakt stranicu. Kontakt stranica sadržaće obrazac (form) u kojem bi korisnici sajta mogli da unesu poruku za vlasnika sajta, otprilike kao kontakt stranica ovog sajta. Da bi kontakt obrazac bio potpuno funkcionalan potreban je web server i php skripta koja će slati email tako da ćemo mi za sada odraditi samo izgled da bi se vi upoznali sa form i input elementima.
     Input elementi su elementi koji ne služe za prikaz sadržaja kao ostali HTML elementi već služe za unos podataka od strane korisnika. Ovi elementi se mogu koristiti nezavisno ili unutar form elementa. Svaki obrazac se nalazi unutar <form>...</form> tagova.
     Za početak ću vam napisati kompletan kontakt obrazac u HTML-u, a zatim ću objasniti svaki deo posebno. Otvorite kontakt.html fajl i u "content" sektoru unesite sledeći html kod:

<form name="kontakt">
Ime:<br/>
<input type="text" name="ime" size="40"/><br/><br/>
Email:<br/>
<input type="text" name="email" size="40"/><br/><br/>
Pol:<br/>
<input id="pol-m" type="radio" name="pol" value="m"/>
<label for="pol-m">Muški</label>
<input id="pol-z" type="radio" name="pol" value="z"/>
<label for="pol-z">Ženski</label><br/><br/>
Poruka:<br/>
<textarea name="poruka" cols="45" rows="10">Tekst poruke...</textarea><br/><br/>
<input id="kopija" type="checkbox" name="kopija"/>
<label for="kopija">Pošalji kopiju poruke na moj email.</label><br/><br/>
<input type="submit" value="Pošalji!"/>
</form>

     Prvo što vidite je da se ceo obrazac nalazi između <form>...</form> tagova. Obrazac ima ime u otvarajućem tagu (name atribut), a treba da ima još neke tagove koje ćemo dodavati kasnije kada budemo pravili program koji će slati poruke. <br/> tagovi koje vidite predstavljaju nove redove u tekstu. Sada ću pojedinačno objasniti pojedine redove u kodu.

<input type="text" name="ime" size="40"/>
     Input tag predstavlja neki element koji služi za unos nekog podatka od strane korisnika. Tip elementa  određuje type atribut. U ovom slučaju vrednost ovog atributa je text što predstavlja polje za unos kratkog teksta. Name atribut je ime datog input elementa. Ova imena nisu isto što i id i ona će koristiti kasnije u programiranju. Size atribut je veličina polja, odnosno broj simbola koji će se prikazivati u elementu.

<input type="text" name="email" size="40"/>
     Ovo je potpuno isti element sa drugim imenom i služiće za unos email adrese korisnika. Idemo odmah dalje.

<input id="pol-m" type="radio" name="pol" value="m"/>
<label for="pol-m">Muški</label>
<input id="pol-z" type="radio" name="pol" value="z"/>
<label for="pol-z">Ženski</label>

     Kao primer za radio dugmiće uzeo sam primer za pol. Radio dugmići su grupa elemenata od kojih samo jedan može biti "štikliran" u istom trenutku. Zato je pol osobe dobar primer za ovo jer osoba ne može da bude i muško i žensko istovremeno (mada u 21. veku neki tvrde i da može). Radio dugmići su input elementi kojima je vrednost type atributa "radio". Takođe, ime (name atribut) svih radio dugmića koji pripadaju jednoj celini treba da bude isto, jer u protivnom više radio dugmića može biti aktivirano istovremeno. A radio dugmići u okviru te celine se razlikuju po value atributu.
     Label tagovi služe da imenuju radio dugmiće. For atribut labela treba da se poklapa sa id atributom radio dugmeta na koje se odnosi. Umesto labela može da se koristi i običan tekst, ali label je bolji jer klikom na tekst se aktivira i radio dugme. Idemo sa sledećim elementom.

<textarea name="poruka" cols="45" rows="10">Tekst poruke...</textarea>
     Textarea  služi za unos dugog teksta kao što je poruka. Textarea takođe poseduje name atribut kao i neobavezne atribute kao što su cols i rows koji određuju broj kolona i redova teksta a samim tim i veličinu ovog elementa.

<input id="kopija" type="checkbox" name="kopija"/>
<label for="kopija">Pošalji kopiju poruke na moj email.</label>

     Sada imamo checkbox element koji služi za uključivanje ili isključivanje neke opcije po želji korisnika. Ono što razlikuje ovaj element od radio dugmića je to što više opcija može biti uključeno istovremeno. I ovaj element kao i radio dugmići ima label zbog lakšeg korišćenja.

<input type="submit" value="Pošalji!"/>
     I na kraju imamo input element koji služi da ceo obrazac pošalje serveru na obradu. Kao što sam napomenuo ranije ovo je samo pokazni obrazac i neće funkcionisati bez PHP programa. Type="submit" nam govori da se radi o dugmetu za slanje kompletnog form elementa serveru, a value atribut predstavlja tekst koji će se nalaziti u dugmetu.
     To bi bilo sve u ovoj lekciji. Kao vežbanje onog što ste radili u prethodnim lekcijama, možete da odradite CSS za obrazac iz ove lekcije. Do naredne lekcije, pozdrav.

14 comments:

  1. Kada će sljedece lekcije?

    ReplyDelete
  2. Poštovani,

    mnogo Vam hvala na ovim tutorijalima. Nakucao sam koda i sada to ide poprilično lagano. Super je što ste nas ostavili da se sami snalazimo sa ovim kontakt i linkovi stranicama i CSS-om.

    Lijep pozdrav iz Brčkog.

    ReplyDelete
  3. Ocemo jos lekcijaaaa :) Svaka vam dala :D

    ReplyDelete
  4. Kada idemo dalje...

    ReplyDelete
  5. Svaka cast, jedan od boljih tutoriala, sto se tice webdesigna, na srpskom jeziku. Cekamo sledeci :)

    ReplyDelete
  6. Bogdane, hvala! Ovo je neverovatno dobro objasnjeno! Uzivam dok ovo citam, koliko je samo sve pojednostavljeno i sveobuhvatno! Svaka cast!

    ReplyDelete
  7. Molim Vas novih lekcija,napredujem!!! :)

    ReplyDelete
  8. Lekcije su odlicne, ocekujem nastavak :)

    ReplyDelete
  9. Hvala, ovako objasnjeno ide brzo i lako...

    ReplyDelete
  10. Svaka cast. Ja sam ovo prosao odavno ali vidim da je sve lepo objasnjeno i pocetnicima ce pomoci mnogo.

    ReplyDelete