Forme:
<form> element se koristi da sakuplja podatke OD korisnika. Postoji više elemenata koji se koriste isključivo za forme. U <form> direktno mogu da idu samo BLOCK elementi.
action atribut sadrži ime servera i ime Web aplikacije koja će obraditi podatke. action="URL/IME.php"
method atribut određuje kako će podaci iz forme biti poslati serveru. Uobičajena vrednost je POST, ali postoji i GET (stvara URL za bookmark rezultata).
<input />:
<input /> element je najvažniji element forme. Ima mnogo varijacija u zavisnosti od type atributa. U njega se direktno unose podaci ili se klikće za unos. Prazan (empty) element.
type atribut određuje VRSTU inputa (text, password, submit, file, radio, checkbox). Svaka type vrednost čini ceo input element POSEBNIM od onih sa drugim tipom.
name atribut služi za komunikaciju sa Web serverom (fullname, firstname, lastname, email, ...). Bitan je za Web aplikaciju. Ovaj sajt (kao ni knjiga) ne pokriva kako se prave Web aplikacije, za to je potrebno znanje programskog jezika (PHP, Perl, Python, ...).
size atribut definiše vidljivu širinu polja za unos kod <input> elementa, i određuje broj vidljivih opcija padajućeg menija kod <select> elementa.
required atribut (HTML5) uslovljava da to input polje MORA biti popunjeno pre submit-ovanja forme. U slučaju XHTML, gde je minimalizacija atributa zabranjena, piše se required="required".
Text input:
Vrednost "text" za type atribut pravi jednu liniju za unos texta širine 20 karaktera (po default-u, ali može da se menja gorenavedenim size atributom).
value atribut ispisuje početni text u input area (u HTML5 se za to koristi placeholder atribut, ali value atribut je i dalje dostupan).
maxlength atribut limitira broj karaktera texta.
<form action="URL/IME.php" method="POST"> <p>Vaše ime: <input type="text" name="ime" value="Unesite ime ovde" maxlength="50" /></p> </form>
Password input:
Vrednost "password" za type atribut radi isto što i text input, ali se iskucani karakteri ne vide (samo vizuelno, ne utiče na sigurnost i zaštitu podataka koji se šalju).
<form action="URL/IME.php" method="POST"> <p>Vaša šifra: <input type="password" name="šifra" /></p> </form>
Submit input:
Vrednost "submit" za type atribut pravi TASTER na stranici sa imenom.
value atribut menja SLOVA ispisana na tasteru. Da, ATRIBUT se ZOVE value (vrednost) i IMA vrednost. U slučaju da se value atribut izostavi, na tasteru će biti ispisana predefinisana reč "Submit".
<form action="URL/IME.php" method="POST"> <input type="submit" name="submit" value="OVDE PRITISNI! Ništa se neće desiti..." /> </form>
File input:
Vrednost "file" za type atribut pravi TASTER za upload fajla. Mora POST vrednost za method atribut. I naravno, da postoji Web aplikacija koja očekuje fajl upload.
<form action="URL/IME.php" method="POST"> <p>Dodajte dokument: <input type="file" name="dokument" /></p> </form>
Radio input:
Vrednost "radio" za type atribut pravi dugmiće između kojih je dozvoljen izbor.
name atribut uvek mora biti isti za svako dugme tj. element. Kao sto već rekosmo, služi za komunikaciju sa Web serverom.
value atribut (da, opet ATRIBUT vrednost koji ima vrednost) je odrednica jednog mogućeg izbora i zahteva ceo novi element za svaku vrednost. Tiče se Web servera / aplikacije.
checked atribut čekira odmah jednu opciju unapred. Value treba da bude "checked" (dakle checked="checked").
<form action="URL/IME.php" method="POST"> <p>Odlučite:<br /> <input type="radio" name="izbor" value="prvi" checked="checked" /> hoću<br /> <input type="radio" name="izbor" value="drugi" /> neću </p> </form>
Checkbox input:
Vrednost "checkbox" za type atribut pravi kvadratiće koji mogu da se štikliraju (više njih ili nijedan).
Za atribute name, value i checked važe ista pravila kao i kod Radio input-a.
<form action="URL/IME.php" method="POST"> <p>Izaberite:<br /> <input type="checkbox" name="odluka" value="jedan" /> kašika<br /> <input type="checkbox" name="odluka" value="dva" /> viljuška<br /> <input type="checkbox" name="odluka" value="tri" checked="checked" /> nož </p> </form>
Textarea:
<textarea> element stvara površinu u koju može da se ukuca text. Uneti text nema limit (pojavi se scroll bar ako se oblast ispuni). Text između tag-ova je početni text u oblasti. Za method atribut koristiti vrednost POST zbog moguće dužine (GET ima limit od 256 karaktera).
rows i cols atributi određuju koliko karaktera texta sadrži red, a koliko kolona.
<form action="URL/IME.php" method="POST"> <p>Utisci:<br /> <textarea name="bla" rows="5" cols="30">Započnite svoj roman...</textarea> </p> </form>
Select & option:
<select> element pravi meni sa padajućim izborom (size atribut određuje broj vidljivih opcija padajućeg menija, 1 je default).
<option> element se koristi za svaku stavku u meniju.
selected atribut određuje koja će opcija prvobitno biti prikazana kad se stranica učita. Po defaultu je to prva opcija na listi. Value treba da bude "selected" (dakle selected="selected").
Ako se value atribut izostavi, kao u slučaju kod Anite Blond, sve što je ispisano između <option> tag-ova će automatski biti dodato kao podrazumevana vrednost, dakle value će biti value="Anita Blond".
<form action="URL/IME.php" method="POST"> <p>Izaberite jednu damu: <select name="dame"> <option>Anita Blond</option> <option value="Michelle">Michelle Wild</option> <option value="Angel">Angel Dark</option> <option value="Rita">Rita Faltoyano</option> <option value="Tania">Tania Russof</option> <option value="Lea" selected="selected">Lea Martini</option> <option value="Sofia">Sofia Gucci</option> <option value="Laure">Laure Sainclair</option> </select> </p> </form>
Znam, znam, reći ćete: "Pa ovo je mučenje, ko može da izabere samo JEDNU?" Tu nam u pomoć priskače multiple atribut za <select> element. On sa istom vrednošću (multiple="multiple") od padajućeg menija sa jednim izborom pravi meni sa mogućnošću više izbora.
Napomena: zbog toga što je potrebno držati CTRL za obeležavanje više opcija, kao i zbog toga što korisniku morate naglasiti da ima mogućnost više izbora, preporučljivo je da za višestruki izbor koristite Checkbox input.
Raspored i stil formi:
Za layout <form>-e je bolje koristiti <table>, a za stil CSS. Može i CSS da se koristi za layout ali je to veoma teško i komplikovano.
HTML kod:
<form action="URL/IME.php" method="POST"> <table id="forma"> <tr> <th>Izaberite boju: </th> <td> <select name="boje"> <option value="red">Crvena</option> <option value="blue">Plava</option> <option value="yellow">Žuta</option> <option value="green">Zelena</option> </select> </td> </tr> <tr> <th>Odlučite:</th> <td> <input type="radio" name="izbor" value="prvi" /> da<br /> <input type="radio" name="izbor" value="drugi" checked="checked" /> ne </td> </tr> <tr> <th>Izaberite:</th> <td> <input type="checkbox" name="odluka" value="jedan" /> piletina<br /> <input type="checkbox" name="odluka" value="dva" /> svinjetina<br /> <input type="checkbox" name="odluka" value="tri" checked="checked" /> salata </td> </tr> <tr> <th>Podaci:</th> <td> <table> <tr> <th>Ime: </th> <td><input type="text" name="first" /></td> </tr> <tr> <th>Prezime: </th> <td><input type="text" name="last" /></td> </tr> <tr> <th>Adresa: </th> <td><input type="text" name="address" /></td> </tr> <tr> <th>Grad: </th> <td><input type="text" name="city" /></td> </tr> <tr> <th>Poštanski broj: </th> <td><input type="text" name="zip" /></td> </tr> </table> </td> </tr> <tr> <th>Utisci:</th> <td><textarea name="bla" rows="10" cols="50"></textarea></td> </tr> <tr> <th></th> <td><input type="submit" name="submit" value="Pošalji!" /></td> </tr> </table> </form>
CSS kod:
table#forma {
background-color: #DCDCDC;
border: thin solid black;
padding: 10px;
margin-left: 200px;
}
table#forma th {
text-align: right;
vertical-align: top;
padding-right: 10px;
padding-top: 2px;
}
table#forma td {
vertical-align: top;
padding-bottom: 10px;
}
table#forma table td {
padding-bottom: 0px;
}
Finalni izgled forme sa tabelama i CSS-om:
Napomena: nijedna od ovih formi nije funkcionalna jer ne postoji Web aplikacija koja omogućava njen rad. Ako je popunite i kliknete "Pošalji", nećete dobiti povratnu informaciju (osim da je u pitanju greška).
Fieldsets & legends:
<fieldset> element se koristi da grupiše (zaokruži) set <input> elemenata u <form>-i (ovo može da se radi i <div>-om i CSS-om).
<legend> ispisuje ime (label) grupi.
<form action="URL/IME.php" method="POST"> <fieldset> <legend>Izaberite:</legend> <input type="checkbox" name="odluka" value="jedan" /> kašika<br /> <input type="checkbox" name="odluka" value="dva" /> viljuška<br /> <input type="checkbox" name="odluka" value="tri" checked="checked" /> nož </fieldset> </form>
Labels:
Do sada smo za reči koje stoje uz <input> text-box-eve, dugmiće, kvadratiće, koristili samo text. Iako label može biti običan text, postoji i <label> element koji daje dodatne informacije o strukturi strane, lakše se menja u CSS-u, i omogućava čitačima ekrana za slabovide da pravilno identifikuju element forme.
Da bi se koristio <label>, mora da se dodeli id atribut svakom <input> elementu. Zatim dodajte for atribut u <label> koji ima istu vrednost kao id.
<form action="URL/IME.php" method="POST"> <fieldset> <legend>Odlučite:</legend> <input type="radio" name="izbor" value="prvi" id="da" /> <label for="da"> pozitivno</label><br /> <input type="radio" name="izbor" value="drugi" id="ne" /> <label for="ne"> negativno</label> </fieldset> </form>
Kao što vidite, ne izgleda ništa drugačije. Ipak, kada mišem pređete preko TEKSTA koji je između <label> tag-ova (u gornjem slučaju "pozitivno" i "negativno"), možete da KLIKNETE na reč i to će aktivirati Radio dugme kao da ste kliknuli na njega. <label> element može da se koristi uz bilo koji element forme.