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. Koristi se za unos podataka od strane korisnika. Vrsta podataka koja se unosi zavisi od atributa type.

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

Vežbe (prvi deo)

 Na web stranici (w3schools-> HTML Form elements) se nalaze navedene najčešće korišćene kontrole koje se koriste na formama. Kao vežba je predviđeno da se pogledaju primeri koji su urađeni za (input, select, option, textarea, button, fieldset ) i da se primene u zadatku.


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


Vežbe (drugi deo)

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:

Online okruženje za vežbanje (html, css, javascript i pregled rezultata)

https://jsfiddle.net/


Napomena 3:

Prikaz HTML koda i stranice u kojoj su sadržani svi opisani HTML elementi iz članka možete da pogledate i probate na sledećem linku : https://jsfiddle.net/gripphon/942nty8j/


izvori:

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

https://programirajmozajedno.wordpress.com/2017/05/04/html-tagovi-za-rad-sa-elementima-forme-deo1/


Last modified: Wednesday, 12 January 2022, 11:03 AM