HTML forme se najčešće koriste za prikupljanje podataka koje unose korisnici. Ti podaci koje korisnici unesu se najčešće šalju na server na obradu.
Tag koji nam je potreban za to je <form>. 

Neke bitne činjenice :

  • Element <form> omogućava unos podataka od strane korisnika

  • Atribut action elementa <form> specificira url adresu strane (ili metodu klase) kojoj će podaci sa forme biti poslati.
    (ako se ne navede, akcija je na tekućoj web stranici)

  • Atribut method specificira kako će podaci biti poslati

    • GET metoda je podrazumevana opcija

    • POST je preferirana metoda

  • ... ima još atributa, koje zasad nećemo raditi (enctype, target, novalidate, autocomplete...)

Iz ovoga se može zaključiti da se element <form> koristi kao kontejner za različite tipove elemenata za unos, kao što su: tekstualna polja, dugmad za potvrdu (checkbox), radio dugmad, dugmad za slanje itd.

( .... Inače, ovo bi trebalo da je obrađivano u okviru predmeta Web dizajn, u toku drugog razreda, pa se stoga ovde neće objašnjavati svi detalji. Umesto toga ćete dobiti smernice kako da se podsetite najvažnijih pojmova tako što ćete pogledati reference ili tutorijale na w3schools-u .... )

U ovoj lekciji su prvo dva video klipa (sa Youtube-a), u kojima se demonstrira kreiranje forme i nekih kontrola na njoj. Nakon toga su dati zadaci koji su planirani da se rade kao vežbe, uključujući i sve potrebne linkove ka resursima, kao i ka web stranici na kojoj se ti zadaci mogu vežbati.

1. Na početku se treba podsetiti kako se prave forme:

2. Sledeće je primer kreiranja jedne web forme:

3.  Vežbe:

U prvom videu, pri kraju, je objašnjeno kako da dođete do tutorijala na w3schools-u. Nas konkretno interesuju tutorijali vezani za web forme.

Direktan link:  https://www.w3schools.com/html/html_forms.asp

    <input>

Ovo je nešto što se najčešće koristi u formama. Neki primeri su dati u nastavku:

Tip Opis
<input type="text"> Prikazuje polje za unos jednog reda teksta
<input type="radio"> Prikazuje radio dugmiće (za izbor jedne opcije od više ponuđenih)
<input type="checkbox"> Prikazuje se checkbox (za izbor 0 ili više od ponuđenih opcija)
<input type="submit"> Prikazuje dugme za submit (za slanje podataka iz forme)
<input type="button"> Prikazuje se dugme na koje se može kliknuti

Prva vežba: Podsetite se kako se koristi <input> element, a zatim na stranici pogledajte već postojeći primer. Izmenite primer tako da se koriste izrazi na našem jeziku. Postavite id za prvi <input> da bude "ime", a za drugi "prezime". Ubacite još jedan deo u kojem se dodaje unos za ime jednog od roditelja. Klikom na "Run" koji se nalazi na vrhu ekrana proverite kako izgleda vaše rešenje.

   ( LINK ka editoru na stranici za vežbu sa w3schools-a, gde se već nalazi i primer )

Druga vežba: Podsetite se kako se koriste radio buttons. Pogledajte primer na stranici, pa ga izmenite po vašoj volji (LINK ka primeru). Klikom na "Run" koji se nalazi na vrhu ekrana proverite kako izgleda vaše rešenje.

Treća vežba: Kako se koristi checkbox? I za ovo imate već urađen primer (LINK ka primeru).  Izmenite ga. Klikom na "Run" koji se nalazi na vrhu ekrana proverite kako izgleda vaše rešenje.

Za one koji žele da znaju malo više (ili ne znaju engleski da bi pročitali objašnjenja na sajtu w3schools-a, ili žele da se malo detaljnije upoznaju, ili samo da pročitaju drugačije objašnjenje) ... na sledećem linku je detaljnije objašnjeno gradivo koje se radi u ovoj i sledećoj lekciji (na našem jeziku naravno  😀 )

LINK: HTML tagovi za rad sa elementima forme

Last modified: Saturday, 8 January 2022, 9:29 PM