24/25 Primenjene informacione tehnologije 3

Zadatak za početak: kreirati nove fajlove: index.html i stil.css.

.container {
   background-color: yellow;
   width: 50%;
   min-height: 500px;
   margin: 10% auto;
   padding: 10px;
}

Primere koji su u nastavku ubacujemo u formu!

Šta su to web kontrole?

Web kontrole su elementi na web stranici koji omogućavaju korisnicima interakciju s aplikacijom. Ove kontrole se koriste za unos podataka, izbor opcija, pokretanje akcija ili prikaz informacija.

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>

U okviru ove lekcije neće biti objašnjavani svi elementi, već samo navedeni primeri za neke od onih koji se najčešće koriste:

Polja za unos podataka (<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:

   <label for="ime">Ime:</label>
   <input type="text" id="ime" name="ime">

       <input type="text" name="username" placeholder="Unesite svoje korisničko ime">

   <input type="password" name="password" placeholder="Unesite lozinku">

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

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

Dugmad (<button> ili <input type="submit">)

• Služe za slanje podataka iz forme na server ili resetovanje podataka forme.

   <button type="submit">Pošalji</button>
   <button type="reset">Resetuj</button>

Inače, obično dugme <button> smo do sada koristili ako nam treba dugme na koje može da se klikne, kao u sledećem primeru:

<button type="button" onclick="alert('Hello World!')">Kliknite ovde!</button> 

A u nastavku je prikazano kako to izgleda u browser-u:

Kliknite ovde!

Napomena: Uvek navedite atribut type za button. Ako se ne navete tip dugmeta unutar forme, podrazumevaće se da je u pitanju tip submit - za slanje podataka !

Radio dugmad i checkbox-ovi

• Radio dugmad omogućavaju izbor samo jedne opcije, dok checkbox-ovi omogućavaju višestruki izbor:

   <input type="radio" name="gender" value="male"> Muški
   <input type="radio" name="gender" value="female"> Ženski
   <input type="checkbox" name="agree"> Prihvatam uslove

Padajuće liste

• Koriste se za izbor jedne ili više opcija iz liste:

 <select name="city">
    <option value="belgrade">Beograd</option>
    <option value="novisad">Novi Sad</option>
    <option value="nis">Niš</option>
 </select>

Tekstualna polja za više linija 

• Omogućavaju unos dužih tekstova (u više redova):

   <textarea name="message" rows="4" cols="50"></textarea>

**************

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

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

Neke dodatne opcije:

Za definisanje stavke koja je izabrana na početku, treba dodati se atribut selected u okviru opcije:

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

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

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

<textarea>

Koristi se za unos više linija teksta (engl. text area):

<textarea name="poruka" rows="5" cols="30">
Ana voli Milovana.
</textarea>
(pokušajte ovo i sami da uradite na web sajtu w3schools-a: LINK

<textarea name="poruka" style="width:200px; height:600px;">
   Idemo u Afriku ...
</textarea>

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

Koji su to napredni koncepti koje do sada koristimo

 HTML5 validacija 

  Savremeni pretraživači podržavaju ugrađenu validaciju pomoću atributa kao što su required, min, max, minlength, maxlength, pattern,  itd.

  Na primer, validacija za email polje:

   <input type="email" name="email" required>

Stilizacija formi sa Bootstrap-om

  Bootstrap olakšava pravljenje formi profesionalnog izgleda. 

   <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Unesite email">
   </div>

Vežbe:

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

Dodatne vežbe

Zadatak 1: Kreirajte jednostavnu formu za unos imena i email adrese sa dugmetom za slanje. Dodajte HTML5 validaciju za obavezna polja.

*komentar

Zadatak 2: Proširite prethodnu formu:

• Dodajte padajuću listu za izbor grada.

• Dodajte radio dugmad za izbor pola.

• Implementirajte validaciju putem HTML5 atributa.

*komentar

Napomena:

Spoljašnji linkovi:

Na našem jeziku:

• HTML tagovi za rad sa elementima forme – (1.deo)

Na engleskom jeziku:

• HTML Forms
• HTML Form Attributes
• HTML Form Elements
• Online okruženju za vežbanje (html, css, javascript i pregled rezultata):  https://jsfiddle.net/