24/25.3 WEB programiranje 3

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)

U okviru ove lekcije neće biti objašnjeni svi elementi, već samo neki od onih koji se najčešće koriste:

<input>

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.

<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
        

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>.

  <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> 

<form id="mojaForma">
    Ime: <input type="text" id="ime"><br>
    E-mail: <input type="email" id="email"><br>
    <input type="submit" value="Pošalji">
</form>

Ova forma ima dva tekstualna polja: jedno za unos imena i jedno za unos e-mail adrese, kao i dugme za slanje.

<h1> Naslov</h1>
<hr>
<form>
  <label for="ime"> Vaše ime : </label>
  <input type="text" id="ime" name = "ime">
  <br>
  <label for="prezime"> Vaše prezime: </label>
  <input type="text" id="prezime" name="pprezime">
 <br>
 <input type="button" id="dugme" name="dugme" value="OK" onclick="poruka()">

</form>
<script>
 //ovde ide funkcija za poruku prilikom klika na dugme

</script>

Objašnjenje: Prilikom klika na dugme se poziva funkcija poruka(). U njoj treba se pristupa dokumentu preuzimaju podaci koje je korisnik uneo i prikazuju.

Primer čitanja vrednosti:

let ime = document.getElementById("ime").value;
console.log("Ime korisnika je: " + ime);

Primer promene vrednosti:

document.getElementById("ime").value = "Novo ime";

Ova linija menja vrednost polja za unos u "Novo ime".

document.getElementById("mojaForma").addEventListener("submit", function(event) {
    let ime = document.getElementById("ime").value;
    let email = document.getElementById("email").value;
    
    if (ime === "" || email === "") {
        alert("Sva polja su obavezna!");
        event.preventDefault(); // Sprečava slanje forme
    }
});

U ovom primeru, ako su polja "Ime" ili "E-mail" prazna, forma se neće poslati i prikazaće se poruka o grešci.