traži:  
 php.com.hr > Elementi za unos podataka

Elementi za unos podataka
 


Kao što smo do sada u primjerima vidjeli, sve forme se sastoje od dva osnovna dijela. Prvi dio je sam <form> tag pomoću kojeg logički povezujemo više elemenata za unos / izbor podataka. Normalno, ti elementi bi onda bili drugi dio svake forme, i jedno bez drugoga ne ide.

Pošto postoji vrlo očita potreba za više različitih načina prikupljanja podataka od korisnika postoje različiti elementi od kojih svaki ima neke svoje osobine. Neki elementi imaju mogućnost direktnog unosa podataka od strane surfera, dok mu drugi omogućuju da izabere jednu od ponuđenih vrijednosti, neke vidi u formi a neke ne. Sada ćemo se upoznati sa svim tim različitim elementima i njihovim karakteristikama, te ćemo vidjeti neke načine za olakšavanje posla nama kao programerima tih formi.

Do sada smo u primjerima koristili samo text box element, radi jednostavnosti primjera. Idemo prvo vidjeti koji sve elementi postoje pa ćemo se malo zadržati na svakom od njih.

Elementi HTML formi :

  • Text box
  • Text area
  • Sakriveno polje / hidden field
  • Checkbox
  • Radio gumb
  • Lista / meni – select izbornik
  • Polje za upload datoteka
  • Gumbi

U slijedećim opisima ću zanemariti mnoge dijelove samog HTML-a poput davanja širine i visine polja i sličnih stvari, pošto te stvari nisu bitne za svladavanje rada sa formama u PHP-u, već ću se koncentrirati samo na ključne dijelove. Ukoliko želite saznati više o samom HTML dijelu ove priče preporučam da posjetite www.w3schools.com ili neki slični site, te tamo proučite detalje HTML-a formi.

Text box polje

<input type="text" name="tekst">

Ovo je element sa kojim smo se već upoznali, i mislim da ga nije potrebno previše komentirati. Radi se o polju za unos jedne linije teksta. Ime pomoću kojeg mu pristupamo u PHP-u mu navodimo u name atributu.

Ukoliko želimo da se pri učitavanju stranice u ovom elementu nalazi neka vrijednost možemo ju navesti pomoću value atributa.

<input type="text" name="tekst" value="Ovo je defaultna vrijednost polja i može se promijeniti">

Sa value atributom ćemo se detaljnije baviti u kasnijim dijelovima članka, kada ću pričati o strukturiranju koda za prikaz / obradu formi. Za sada je bitnbo samo da znate da je moguće HTML-om popuniti element forme.

Pošto sam u dosadašnjim primjerima uvijek koristio ovo polje, ovdje ću preskočiti primjer sa prihvatom podataka iz tog elementa te ćemo krenuti dalje.
Text area

<textarea name="velikiTekst"></textarea>

Ovo je polje za unos texta od više redova. Znači, korisnik može prebaciti unos teksta u novi red te ga kao takvog poslati na obradu.

Pravila oko imenovanja su mu ista kao i za sve ostale elemente.

Za razliku od text boxa, text area nema value atribut, već mu se defaultna vrijednost zadaje na slijedeći način.

<textarea name="velikiTekst">

Ovo je defaulta vrijednost elementa i može imati više redova</textarea>

Kod davanja te defaultne vrijednosti je bitno paziti da će se 2 space znaka u samom elementu prikazati kao dva prazna prostora, te da prelazak u novi red u HTML-u uzrokuje prebacivanje unosa podataka u elementu u novi red.

Idemo pogledati na primjeru kako koristiti text area element.

Primjer 6 : Korištenje text area elementa

<html>

<head>

<title>Primjer 6 : Korištenje text area elementa</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

</head>

<body>

<h2>Primjer 6 : Korištenje text area elementa</h2>

<hr>

<?

if ( ! $_POST["submitaj"] ){

?>

<form name="primjer3" method="post" action="<?=$PHP_SELF?>">

Unesi tekst od više redova :<br>

<textarea name="tekst"></textarea>

<br>

<input name="submitaj" type="submit" value="Pošalji">

</form>

<?

} else {

echo "<b>Unijeli ste : </b><br>" . $_POST["tekst"];

echo "<hr>";

// ispis sa paženjem na prelazak u nov red.

echo "<b>Tekst u izvornom obliku : </b><br>";

echo nl2br($_POST["tekst"]);

}

?>

</body>

</html>

Objašnjenje :

Kao što primjećujete, logika prikaza i obade forme je ona iz primjera 3 i ona će biti korištena u većini primjera u ovom dijelu članka.

Još jedna stvar koju možete odmah primijetiti je i način na koji smo pristupili vrijednosti koja je unesena u text areu. Isti je onome za pristupanje vrijednosti običnog text boxa. Znači, unesena vrijednost se nalazi unutar superglobalne varijable $_POST ili $_GET, ovisno o metodi prosljeđivanja podataka forme. Pošto je u našem primjeru metoda POST vrijednost se nalazi unutar $_POST varijable.

U gornjoj slici je u text area polje unesena vrijednost sa slike ispod.

Znači radi se o tekstu od tri linije od kojih je jedna prazna. No, u našem ispisu je u prvom slučaju :

echo "<b>Unijeli ste : </b><br>" . $_POST["tekst"];

sve ispisano u jednoj liniji.

O čemu se radi?

Odgovor na ovo pitanje je zapravo vrlo očit. Radi se o tome da HTML u svom sourcu zanemaruje sve praznine, tj. više uzastopnih praznina interpretira poput jednog praznog prostora. Pod isto pravila spada i prelazak u novi red u HTML sourcu. Ukoliko želite, možete se u to uvjeriti ako pogledate source našeg primjera. U prvom ispisu unesene vrijednosti se HTML source nalazi u više redova, no izgled u browseru je kao da nema novih redova.

No tu nam dolazi u pomoć PHP sa svojim ugrađenim funkcijama. Ona je korištena u drugom ispisu u primjeru, i kao što vidite, ispis unesene vrijednosti prati isti format teksta koji je upisan u text area polje.

Korištena funkcija je :

nl2br($_POST["tekst"]);

(nl2br – čitaj new line to break)

Ime funkcije govori što ona radi. U stringu koji joj se da kao argument mijenja sve nove redove ( \n ) sa HTML <br> tagom koji prebacuje ispis u novi red pri gledanju dokumenta u browseru.

Kod rada sa ovakvim tekstovima je potrebno paziti na neke stvari. Uzet ću za primjer nekakvu news skriptu. U njoj se vijesti unose kroz text area polje, pošto je to najjednostavniji način za unos većeg teksta. Te vijesti spremamo u neki trajni spremnik podataka, poput MySQL baze.

Očita stvar je da želimo pri ispisu vijesti zadržati format koji je zadao autor vijesti pri unosu. Znači kada stisne enter da se i na siteu vidi prijelaz u novi red.

Ovdje treba paziti kada će se pozvati funkcija nl2br. Naime, ukoliko se ta unesena vijesti spremi u bazu tako da se prije samog spremanja 'provuče' kroz nl2br te se ta vrijednost spremi u bazu, pri ponovnom uređivanju vijesti će se u text area polju vidjeti i <br> tagovi, što nije poželjno. Stoga je preporučljivo funkciju nl2br pozivati netom prije ispisa vijesti na siteu, te u bazu spremiti izvornu vrijednost (onakvu kakva je unesena u text areu) da bi je mogli opet prikazati u text arei u njenom izvornom obliku.

Oko metoda uređivanja postojećih vrijednosti (npr. u slučaju naknadnog uređivanja vijesti) ćemo se više pozabaviti u slijedećem poglavlju članka. Za sada idemo dalje na elemente forme.
Hidden polje

<input type="hidden" name="nevidljivoPolje" value="Vrijednost polja">

Kao što i samo ime elementa / polja kaže, radi se o polju koje nije vidljivo pri gledanju dokumenta u browseru, te korisnik ne može direktno utjecati na vrijednost koja je spremljena u njega. Vrijednost koje se nalazi u u takvom polju se mora namijestiti direktno u sourcu dokumenta ili unosom u HTML source ručno ili pomoću PHP-a. Drugi način promijene vrijednosti je dinamički, za vrijeme gledanje stranice u browseru putem JavaScripta.

Kao i kod text boxa, vrijednost se unosi u value atribut.

Također, pravila oko pristupa tim podacima su ista kao i kod text boxa, sa malenom razlikom. Ta je da u njega možemo spremiti tekst od više redova.

Poput ovoga :

<input type="hidden" name="nevidljivoPolje" value="Vrijednost polja

U više redova">

Ovo polje obično služi za pamćenje nekih vrijednosti koje ne ovise o korisniku (surferu), te ih na ovaj način štitimo od korisničkog unosa i izmjene. U primjeru 5 je već korišteno hidden polje za spremanje vrijednosti kontrolne varijable nav koja nam je služila za navigaciju po dokumentu kada smo promijenili metodu slanja iz POST u GET.
Checkbox

<input type="checkbox" name="jezik" value="hrvatski">

Checkbox je element koji se uglavnom koristi u slučaju da korisniku želimo omogućiti da izabere jednu / više / niti jednu vrijednost iz nekog logički povezanog skupa vrijednosti. Recimo, u gornjem primjeru bi značilo da naš korisnik / surfer priča hrvatski ukoliko je označio to polje, ili ga ne priča ukoliko ga je ostavio neoznačenim. Normalno, pošto se radi o grupi povezanih informacija trebali bismo ponuditi više jezika pomoću više checkboxova .

Iako gornja tvrdnja ne mora biti uvijek točna, recimo može se raditi o samo jednoj vrijednosti, poput označavanja suglasnosti sa nečim ili sličnim da / ne situacijama.

Kroz slijedećih par primjera ću ilustrirati oba načina korištenja ovog elementa.

Prvo idemo pogledati kako prihvatiti vrijednost checkboxa u PHP-u pa ćemo na tome graditi dalje. Ovaj primjer se može koristiti u situaciji u kojoj je potreba potvrda surfera da je punoljetan i da je suglasan sa pravilima našeg sitea. Recimo da imao neki web shop na kojem se prodaje alkoholno piće ovo bi bila realna situacija. Ali, siguran sam da se svi možete sjetiti barem još jednog tipa sitea gdje je ovo korišteno.

Primjer 7 a) : Prihvat checkbox elementa

<html>

<head>

<title>Primjer 7 a) : Prihvat checkbox elementa</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

</head>

<body>

<h2>Primjer 7 a): Prihvat checkbox elementa</h2>

<hr>

<?

if (! $_POST["SBgumb"] ){

?>

<form name="form1" method="post" action="">

<p>

<input type="checkbox" name="punoljetan" value="1">

Punoljetan sam i suglasan sam sa pravilima sitea</p>

<p>

<input name="SBgumb" type="submit" value="Ulaz">

</p>

</form>

<?

} else {

// provjera da li je označen checkbox

if ($_POST["punoljetan"]) {

echo "Pošto si punoljetan možeš dalje koristiti ove stranice";

} else {

echo "Pošto nisi punoljetan ne možeš pristupiti sadržaju ovih stranica";

die();

}

}

?>

</body>

</html>

Objašnjenje :

Mislim da je gornji primjer sam po sebi jasan. Način prihvata informacije iz checkboxa je identičan onome iz prijašnjih primjera.

Znači, unutar superglobalne varijable $_POST na indexu ekvivalentnom imenu checkbox elementa u formi se nalazi njegova vrijednost. Pošto se checkboxu obično zadaje predefinirana vrijednost u samom HTML-u pomoću value atributa, ukoliko ga se označi u formi ta vrijednost će biti vidljiva PHP skripti. Ukoliko nije bio označen, njegova vrijednost neće biti vidljiva skripti.

Ovdje je potrebno paziti da se value atributu ne da vrijednost 0, jer u tom slučaju gornji primjer neće raditi. Ukoliko očekujete 0 kao vrijednost iza scheckboxa onda je potrebno zamijeniti

if ($_POST["punoljetan"]) {

sa

if (isset($_POST["punoljetan"])) {

što će provjeriti da li postoji bilo koja vrijednost u $_POST["punoljetan"].

Ovo je bio vrlo jednostavan primjer. Radilo se o da / ne situaciji. Idemo se sada vratiti na naš primjer sa jezicima. Recimo da želimo na našem siteu imati formu u kojoj ćemo ponuditi surferu par svjetskih jezika i pitati ga koji od njih tečno govori. Očito je da će neki od surfera označiti i više jezika, dok neki možda niti jedan. Ovo malo komplicira stvari.

Idemo to vidjeti na primjeru.

Primjer 7 b) : Prihvat vrijednosti više povezanih checkbox elemenata

<html>

<head>

<title>Primjer 7 b) : Prihvat vrijednosti više povezanih checkbox elemenata</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

</head>

<body>

<h2>Primjer 7 b) : Prihvat vrijednosti više povezanih checkbox elemenata</h2>

<hr>

<?

if (! $_POST["SBgumb"] ){

?>

<form name="form1" method="post" action="">

<p>Koje od ponuđenih jezika pričate tečno?</p>

<p>

<input type="checkbox" name="jezik[]" value="engleski">

Engleski<br>

<input type="checkbox" name="jezik[]" value="njemački">

Njemački<br>

<input type="checkbox" name="jezik[]" value="francuski">

Francuski<br>

<input type="checkbox" name="jezik[]" value="ruski">

Ruski </p>

<p>

<input name="SBgumb" type="submit" id="SBgumb" value="Pošalji">

</p>

</form>

<?

} else {

if (is_array($_POST["jezik"]) and count ($_POST["jezik"]) > 0 ){

echo "Jezici koje pričate su :";

foreach ($_POST["jezik"] as $pricam){

echo $pricam . ",";

}

} else {

echo "Jeste sigurni da ne pričate niti jedan od navedenih jezika?";

}

}

?>

</body>

</html>

Objašnjenje :

Kao što naziv primjera kaže, radi se o formi koja sadrži više povezanih checkbox elemenata. Njihovo povezivanje u jednu cjelinu smo obavili tako da smo svima dali isto ime. U ovom slučaju name="jezik[]". No to nije sve što smo napravili. Primjećujete uglate zagrade na kraju imena?

Čemu one služe?

Odgovor na to pitanje leži duboko unutar samog PHP-a i njegovog načina baratanja sa podacima koji dolaze iz forme.  



PHP i forme
 © 2004 - 2008 php.com.hr