HTML Input - Unos teksta

Input element je praktično "devojka za sve". Pomoću njega, korisnik može unositi različite tipove podataka u našu web aplikaciju. U ovom tekstu ćemo se pozabaviti najosnovnijim tipom podataka - tekstom. Da bismo na našoj stranici napravili polje za unos, koristimo jednodelnu oznaku <input>. Videćete, ovaj element ima mnogostruka značenja.

Praktično jedini parametar bez koga ovaj element ne može je parametar type. On određuje tip ulaznog elementa i može imati veliki broj različitih vrednosti. Vrednost koja nas trenutno najviše zanima je text (koja je takođe i default vrednost), koja znači da će input ulazni element biti prikazan kao obično, polje za unos teksta.

<input type="text" />

Ako koristimo input element u okviru forme, sa ciljem da unetu vrednost prosledimo serveru, moramo koristiti parametar name, kako bi vrednost bila identifikovana.

Vodite računa da unutar jedne forme ne smeju da postoje dva ulazna elementa sa istim name vrednostima. Ako se to desi, prilikom prosleđivanja podataka na server, podaci iz ta dva elementa neće moći da se razlikuju.

<input type="text" name="naziv" />

Ovaj element ima i mogućnost postavljanja "default" vrednosti, odnosno teksta koji će već biti unet u polju kada se stranica učita. Naravno, korisnik je onda može promeniti. Ova vrednost se postavlja pomoću parametra value. Imajte na umu da neki web čitači, poput Firefoxa, prilikom ponovnog učitavanja stranice (reload) zadržavaju vrednost koju je korisnik (eventualno) uneo, a ne postavljaju je nazad na ono što smo zadali kao value parametar.

<input type="text" name="ime" value="Pera" />

Ako koristite parametar value, da biste korisniku "objasnili" šta treba da se unese u polju, onda je možda bolja ideja da isprobate parametar placeholder, koji upravo služi da se u polju ispiše "šta bi trebalo da se unese" ali bez postavljanja prave vrednosti polja. Ovaj parametar je uveden u HTML5 standardu.

<input type="text" name="ime" placeholder="Unesite ime" />

Moguće je i zabraniti korisničku interakciju sa poljem. U tom slučaju korisnik neće moći da "uđe" u polje niti da mu promeni vrednost. Ovo se postiže korišćenjem parametra disabled. Ovo je parametar sa logičkom (boolean) vrednošću, što znači da ne mora da mu se navodi bilo kakva vrednost, već samo da se navede. Zabranjena polja se neće prosleđivati serveru kada se forma aktivira.

HTML5 uvodi još jedan sličan parametar - readonly, koji se zadaje na isti način kao i parametar disabled. Ovaj parametar znači da se vrednost polja može samo čitati, ali ga korisnik ne može menjati. Koja je razlika između ova dva parametra? Iako korisnik ne može da menja sadržaj ni jednog ni drugog polja, polja koja su samo-za-čitanje (readonly) će se prosleđivati serveru, dok se zabranjena polja (disabled) neće čak ni prosleđivati kada se forma aktivira,

<input type="text" name="skola" disabled /> <input type="text" name="razred" readonly />

Možda izgleda beskorisno navoditi polja koja ničemu ne služe, ali treba da znate da je parametar disabled najpre namenjen da se postavlja ili ukida programski, preko JavaScripta, zavisno od toga da li je neki uslov zadovoljen ili ne.

Za tekstualna polja je moguće odrediti veličinu (širinu) merenu brojem znakova, korišćenjem parametra size. Vrednost ovog parametra mora biti celi broj, veći od nule. Ako se ne navede, unapred određena vrednost je 20 znakova. Imajte na umu da prikazana širina tekstualnog polja takođe može biti određena i CSS atributima.

<input type="text" size="10" />

Već smo rekli da ulazna polja mogu i ne moraju biti unutar forme. Ako su unutar forme, onda joj pripadaju i njihove vrednosti se automatski prosleđuju serveru kada se forma aktivira. Ako polja ne pripadaju formi, moramo sami (pomoću JavaScripta) da se pobrinemo oko toga šta će se dešavati sa unetim podacima. Sa dizajnerske strane, možda nećemo biti zadovoljni time što sve elemente moramo da grupišemo u formama. Međutim, HTML5 je doneo trik koji rešava taj problem. Gde god da se na stranici nalazi polje za unos, parametar form definiše kojoj formi polje pripada. Kao vrednost se navodi jedinstvena identifikacija forme (vrednost id parametra elementa forme) kojoj želimo da polje bude dodeljeno.

<form action="..." method="..." id="prva">...</form> ... <input type="text" form="prva" />

Ovo može da se pokaže prilično korisno ako želimo da isto ulazno polje u jednom trenutku pripada jednoj, a u drugom drugoj formi. Ovu izmenu je moguće izvesti pomoću JavaScripta.

Vrednost polja

Postoje parametri koji služe da korisniku ograniče šta je sve moguće uneti u polju.

Osnovni parametar je maxlength, kojim se određuje maksimalni broj znakova koji je moguće uneti u polje. Nemojte mešati ga mešati sa parametrom size koji utiče na veličinu prikaza polja. I ovde se zadaje celi, nenegativni broj, a ako se ne navede, web čitač neće nametati nikakva specijalna ograničenja.

<input type="text" size="10" maxlength="50" />

Parametar autocomplete označava da web čitač može da pokuša da dovrši tekst koji korisnik unosi, tokom kucanja. Ovaj atribut postoji u HTML5 standardu i ima veliki broj vrednosti, a za sada ćemo navesti samo dve osnovne:

Parametar pattern (uveden u HTML5 standardu) kao vrednost ima šablon (regularni izraz) u koji uneti tekst mora da se uklopi da bi prošao validaciju. Validacija se obavlja prilikom napuštanja polja, odnosno prilikom aktiviranja forme (kada korisnik klikne na submit dugmence). Polja koja ne zadovoljavaju zadati šablon će biti (zavisno od web čitača) označena kao pogrešna.

Specifična tekstualna polja

Osim tekstualnog tipa, postoji još nekoliko tekstualnih polja koja možemo koristiti za posebne namene. To su:

Primer

Ovde smo napravili jednu jednostavnu formu, gde smo ilustrovali većinu stvari o kojima smo pisali. Ne zaboravite, osnovni parametri koji su vam potrebni su type i name. Takođe, parametri value, kao i placeholder vam isto mogu biti od koristi. 


  <form action="korisnik.php" method="GET">
  
    Ime: <input type="text" name="ime" value="" placeholder="Unesite ime" /> <br />
    Mesto: <input type="text" name="mesto" value="Beograd" disabled /> <br />
    Škola: <input type="text" name="skola" value="Vodeničar Janko" readonly /> <br />
    Razred: <input type="text" name="razred" value="VII/2" /> <br />
    E-mail: <input type="email" name="adr" size="30" /> <br />
    Web: <input type="url" name="web" maxlength="50" /> <br />

    <input type="submit" value="Prikaz" />
   
  </form>

Pogledajte i "živi" primer na kome možete i sami da eksperimentišete...

html-input-sr
  1. Mozilla Developer Network, Input
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.