03.02. - WEB FORME (i primeri)
Gde možete da potražite tutorijale
za skoro sve što vam treba u vezi web-a:
Nas u ovom momentu interesuju tutorijali vezani za web forme.
Direktan link:
https://www.w3schools.com/html/html_forms.asp
Zadatak za početak: kreirati novi folder (forme2) u kojem će se raditi i u njemu index.html i stil.css.
U stilu postaviti izgled kojntejnera u kojem radimo:
.container {
background-color: yellow;
width: 50%;
min-height: 500px;
margin: 10% auto;
padding: 10px;
}
U index.html ubaciti osnovni html kod i jedan div element klase container u kojen radimo dalje
Primere koji su u nastavku ubacujemo u formu!
Da se podsetimo:
Forme služe za prikupljanje informacija od posetilaca stranice.
Na formi može postojati veći broj kontrola koje se zadaju odgovarajućim tagovima.
😀
tip: Unutar web formi se nalaze web kontrole
😀
...
Koji elementi se mogu koristiti u formi:
HTML <form> element može da sadrži jednu ili više kontrola (elemenata):
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
Na web sajtu w3schools-a pogledajte: (LINK: HTML Form Elements)
Proučite kako su urađeni primeri za pojedine elemente (select, textarea, button, ). Pokušajte sami da uradite te primere na stranicama za vežbu i da dodate ili oduzmete pojedine opcije. (Ako do sad niste primetili, imate dugme, ispod primera, na kojem piše "Try it Yourself »")
U okviru ove lekcije neće biti objašnjeni svi elementi, već samo neki od onih koji se najčešće koriste:
<input>
Ovo je jedan od najviše korišćenih elemenata u formama. Koristi se za unos podataka od strane korisnika. Vrsta podataka koja se unosi zavisi od atributa type. 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 |
Primer:
<label for="ime">Ime:</label>
<input type="text" id="ime" name="ime">
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK)
<label>
Element <label> se koristi za definisanje labela / zabeleški / natpisa koji mogu da se vezuju za druge elemente u formi.
Vezivanje labele za drugi element na formi ide pomoću atributa for nakon čega se navodi id elementa za koji se labela vezuje. Ako se klikne na labelu onda se, na primer, menja stanje elementa za koji je labela vezana, ili u slučaju elemenata za unos teksta se kursor postavlja na mesto gde se taj tekst unosi.
( Treba obratiti pažnju da for atribut za <label> treba da buda identičan atributu id elementa <input>za koji se vezuje. )
<select>
Element <select> se koristi za padajuće liste:
Primer:
<label for="auta">Odaberite auto:</label>
<select id="auta" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK
<option> definiše opciju koja može da se izabere. Ako drugačije nije navedeno, podrazumevano je da će biti odabrana prva stavka sa liste.
Za definisanje stavke koja je izabrana na početku, treba dodati se atribut selected u okviru opcije:
Primer:
<option value="fiat" selected>Fiat</option>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK
Za definisanje koliko elemenata je istovremeno vidljivo koristi se atribut size :
Primer:
<label for="auta">Choose a car:</label>
<select id="auta" name="auta" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK
Mogućnost izbora više opcija odjednom - atribut multiple :
Primer:
<label for="auta">Choose a car:</label>
<select id="auta" name="auta" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK
<textarea>
Koristi se za unos više linija teksta (engl. text area):
Primer:
<textarea name="poruka" rows="5" cols="30">
Ana voli Milovana.
</textarea>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK
rows - vidljivi broj linija teksta,
cols - vidljiva širina.
A ovako to izgleda u browser-u:
Isto tako, oblast u koju se piše tekst može da se definiše i korišćenjem CSS-a:
Primer:
<textarea name="poruka" style="width:200px; height:600px;">
Idemo u Afriku ...
</textarea>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK
<button>
<button> sе koristi ko nam treba dugme na koje može da se klikne:
Primer:
<button type="button" onclick="alert('Hello World!')">Kliknite ovde!</button>
A u nastavku je prikazano kako to izgleda u browser-u:
Napomena: Uvek navedite atribut type za button. Može da se desi da različiti browseri koriste različite tipove za button.
<fieldset> i <legend>
<fieldset> element se koristi za grupisanje podataka na formi.
<legend> element definiše naslov za <fieldset>.
Primer:
<form>
<fieldset>
<legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK
Dodatno da pogledate kod kuće:
1.
Na web stranici (w3schools-> HTML Form elements) se nalaze navedene najčešće korišćene kontrole koje se koriste na formama.
Za vašu vežbu pogledajte primere koji su tamo urađeni (za input, select, option, textarea, button, fieldset ) i da se primene u zadatku.
Podsetite se od prethodne školske godine: Kontrole forme - element <input>
• Element <input> je osnovni element za unos podataka
• Ima više različitih oblika u zavisnosti od atributa type
◦ type="text"
◦ type="password"
◦ type="hidden"
◦ type="checkbox"
◦ type="radio"
◦ type="reset"
◦ type="submit"
◦ type="image"
◦ type="button"
◦ type="file"
◦ type="email"
Atributi <input> elementa
• Atribut id koristi se za pristup elementu iz CSS-a ili javascripta
◦ Atribut id mora biti jedinstven na formi
• Atribut value postavlja podrazumevanu vrednost za numeričke i tekstualne kontrole za unos podataka
• Atribut name se koristi od strane servera da se referenciraju polja forme kada se ona submituje, takođe se koristi za pristup elementu iz klijentskog koda
• Atribut placeholder opisuje očekivanu vrednost unutar nekog text polja
• Atribut required ukazuje da je polje obavezno i da se forma ne može submitovati ukoliko je polje prazno
VAŽNO: Atribut name za svako <input>
polje mora da se navede. Ako se ne navede, onda ni vrednost koja se unese neće biti poslata !
Za detaljnije upoznavanje sa pojedinim opcijama, možete da pogledate dodatna objašnjenja i da isprobate kako to radi na sledećim stranicama:
HTML Input Types: https://www.w3schools.com/html/html_form_input_types.asp
HTML Input Attributes: https://www.w3schools.com/html/html_form_attributes.asp
3.
Na sledećoj web stranici imate detaljnije objašnjeno gradivo (na našem jeziku naravno 😀 ) .
Odatle ćemo raditi primere (počev od dela 2 na toj stranici)
Kliknite na link, trebalo bi da se otvori u drugom tabu:
LINK: HTML tagovi za rad sa elementima forme
Napomena 1:
Treba naglasiti da sva INPUT polja koja ćemo pominjati nisu uvek podržana od strane svih glavnih web pregledača.
Da biste proverili da li vaš web pregledač podržava neku HTML komponentu ili web tehnologiju, posetite link https://caniuse.com i ukucajte ime tražene kontrole/tehnologije.
Napomena 2:
Izvori: