WEB Programiranje 3

<form action="prijava.php" method="post">
  <label for="korisnik">Korisničko ime:</label><br>
  <input type="text" id="korisnik" name="korisnik"><br><br>

  <label for="lozinka">Lozinka:</label><br>
  <input type="password" id="lozinka" name="lozinka"><br><br>

  <input type="submit" value="Prijavi se">
</form>

Kada korisnik klikne na Prijavi se, forma će poslati podatke (korisnik, lozinka) na stranicu prijava.php.

<form action="registracija.php" method="post">
  <h3>Registracija korisnika</h3>
  
  Ime: <input type="text" name="ime"><br><br>
  Email: <input type="email" name="email"><br><br>
  
  Pol:<br>
  <input type="radio" name="pol" value="M"> Muški<br>
  <input type="radio" name="pol" value="Z"> Ženski<br><br>
  
  Interesovanja:<br>
  <input type="checkbox" name="hobiji" value="sport"> Sport<br>
  <input type="checkbox" name="hobiji" value="muzika"> Muzika<br>
  <input type="checkbox" name="hobiji" value="it"> IT<br><br>
  
  Grad:
  <select name="grad">
    <option>Beograd</option>
    <option>Novi Sad</option>
    <option>Niš</option>
  </select><br><br>
  
  <input type="submit" value="Registruj se">
</form>

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

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

A ovako to izgleda u browser-u:

Ana voli Milovana.

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> 

       (pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK

<form method="get" action="pretraga.html">
  <label>Unesi proizvod:</label>
  <input type="text" name="proizvod">
  <input type="submit" value="Traži">
</form>

<form method="post" action="kontakt.php">
  <label>Ime:</label><br>
  <input type="text" name="ime"><br>
  
  <label>Email:</label><br>
  <input type="email" name="email"><br>
  
  <label>Poruka:</label><br>
  <textarea name="poruka"></textarea><br><br>
  
  <input type="submit" value="Pošalji">
</form>

  

Na sledećoj web stranici imate detaljnije objašnjeno gradivo (na našem jeziku naravno  😀 ) : 

   LINK: HTML tagovi za rad sa elementima forme

Napomena 1:

Napomena 2:

Izvori: