Prijava, pretraga, anketa, komentar – sve to su forme. U ovoj lekciji su polja za unos, padajući meniji, izbor jedne ili više opcija, provera unosa koju radi sam pregledač i šta se dešava kada se forma pošalje.
<form action="https://httpbin.org/get" method="get">
<label for="ime">Ime:</label>
<input type="text" id="ime" name="ime" placeholder="npr. Ana" required>
<label for="razred">Razred:</label>
<input type="number" id="razred" name="razred" min="5" max="8" value="7">
<button type="submit">Pošalji</button>
</form>
Rezultat:
| Deo | Značenje |
|---|---|
form | okvir forme; action – adresa na koju se šalju podaci, method – GET ili POST (vidi HTTP protokol) |
label for="ime" | natpis polja; klik na natpis aktivira polje sa istim id – važno za pristupačnost |
name | ime pod kojim se vrednost šalje serveru: ?ime=Ana&razred=7 – bez name polje se ne šalje |
placeholder | siva pomoćna poruka u praznom polju (nije zamena za label) |
required | polje je obavezno – pregledač ne dozvoljava slanje praznog |
U primeru forma šalje podatke testnom servisu httpbin.org, koji vraća šta je primio. Upiši ime i klikni „Pošalji“ – u odgovoru ćeš videti "ime": "...".
<form>
<p><label>Email: <input type="email" name="email"></label></p>
<p><label>Lozinka: <input type="password" name="lozinka" minlength="8"></label></p>
<p><label>Datum rođenja: <input type="date" name="datum"></label></p>
<p><label>Omiljena boja: <input type="color" name="boja" value="#2b7bb9"></label></p>
<p><label>Ocena: <input type="range" name="ocena" min="1" max="5"></label></p>
<p>Jezik:
<label><input type="radio" name="jezik" value="cpp" checked> C++</label>
<label><input type="radio" name="jezik" value="py"> Python</label>
</p>
<p><label><input type="checkbox" name="vesti"> Želim obaveštenja</label></p>
<p><label>Grad:
<select name="grad">
<option>Beograd</option><option selected>Pančevo</option><option>Novi Sad</option>
</select></label></p>
<p><label>Poruka:<br><textarea name="poruka" rows="3" cols="30"></textarea></label></p>
<button>Pošalji</button> <button type="reset">Obriši</button>
</form>
Rezultat:
| Polje | Kada |
|---|---|
text, email, password, number, date | unos teksta, adrese, lozinke (zvezdice), broja, datuma |
radio | tačno jedna opcija – sve opcije imaju isto name |
checkbox | da/ne ili više opcija odjednom |
select + option | izbor iz padajuće liste |
textarea | duži tekst u više redova |
color, range | izbor boje, klizač |
Na telefonu polja email, number i date otvaraju odgovarajuću tastaturu ili kalendar – zato je važno izabrati pravi tip.
| Atribut | Provera |
|---|---|
required | polje ne sme biti prazno |
type="email" | mora da liči na adresu (ima @) |
min, max, step | granice broja |
minlength, maxlength | dužina teksta |
pattern | pravilo zapisano regularnim izrazom, npr. pattern="[0-9]{5}" – tačno 5 cifara |
name=vrednost od svih polja koja imaju name.?ime=Ana&razred=7) – za pretragu i filtere. POST: šalje ih u telu zahteva – za prijavu, registraciju, poruke.Bez backenda forma nema gde da pošalje podatke. Na kontakt strani ovog sajta forma zato otvara email program, a u Flask i Django lekcijama formu prima Python server.
Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.
Napravi formu za prijavu na informatičku sekciju: ime i prezime (obavezno), email (obavezno), razred (5–8), jezik koji želi da uči (radio: C++, Python, Scratch), dani kada može (checkbox: utorak, četvrtak) i napomena (textarea). Forma se šalje metodom POST.
name se ne šalje serveru.name, inače se može izabrati više njih.1. Šta se dešava sa poljem koje nema atribut name?
2. Koji tip polja dozvoljava izbor tačno jedne opcije iz grupe?
3. Kojom metodom se šalje forma za prijavu sa lozinkom?
4. Da li je provera required u pregledaču dovoljna zaštita?