HTML forme

Osnovni elementi forme

Form: Glavni kontejner za cijeli obrazac. Bez njega podaci se ne mogu grupno poslati. action="potvrda.html": Određuje kamo se šalju podaci nakon klika na gumb (obično URL skripte). method="POST": Način slanja podataka (POST ih šalje skriveno unutar zahtjeva, što je sigurnije za lozinke). label: Definira tekstualni opis polja. Povezuje se s poljem pomoću atributa for (koji mora odgovarati id-u inputa) kako bi klik na tekst fokusirao polje. input>: Najvažniji element za unos. Njegova funkcija se mijenja ovisno o atributu type. br: Prelazak u novi red (služi za jednostavan razmještaj elemenata).

Tipovi unosa (type=)

type="text": Standardno polje za unos jedne linije teksta. type="email": Polje koje automatski provjerava ima li upisani tekst format e-adrese (npr. sadrži li @). type="password": Polje koje sakriva upisane znakove (prikazuje točkice). type="number": Dopušta unos isključivo brojeva. type="range": Prikazuje grafički klizač (slider) za odabir vrijednosti. type="date": Otvara interaktivni kalendar za odabir datuma. type="time": Omogućuje odabir vremena (sati i minute). type="month": Omogućuje odabir specifičnog mjeseca i godine. type="tel": Polje optimizirano za unos telefonskih brojeva. type="radio": Okrugli gumbi za odabir samo jedne opcije iz grupe. type="checkbox": Kvadratni okviri za odabir više opcija istovremeno

Atributi unutar naredbi

id: Jedinstveni identifikator elementa na stranici (koristi se za povezivanje s labelom ili za CSS). name: Ključ pod kojim se podatak šalje serveru (npr. ime=Marko). placeholder: Sivi pomoćni tekst unutar polja koji nestaje čim korisnik počne pisati. required: Prisiljava korisnika da popuni polje prije slanja forme. min / max: Određuju najmanju i najveću dopuštenu brojčanu vrijednost. checked: Unaprijed označava radio gumb ili checkbox pri učitavanju stranice.

Napredna polja i gumbi

textarea: Za razliku od običnog inputa, omogućuje unos velikih blokova teksta u više redova. rows / cols: Određuju visinu i širinu polja u znakovima. select: Kreira padajući izbornik. option: Pojedinačna stavka unutar padajućeg izbornika. Atribut value je ono što server zapravo prima. button: Gumb koji se može kliknuti. type="submit": Šalje sve podatke iz forme. type="reset": Vraća sva polja na početne (prazne) vrijednosti. type="button": Običan gumb koji nema automatsku funkciju (obično pokreće JavaScript kod).

Sada možete isprobati forme na našoj stranici.

Forma