Ponekad moramo da prikupimo i dostavimo informacije od posjetilaca našeg sajta. Sa HTML <form> tagom, omogućavamo korisnicima da unose informacije kao što su tekst, brojevi, polja za potvrdu i još mnogo toga, a zatim te informacije predaju serveru na obradu. Početna HTML oznaka može imati dva atributa:
- action - vrijednost ovog atributa predstavlja gdje se podaci prosleđuju.
- method - označava HTTP metod koji treba da se koristi za obavljanje radnji kao što su GET/POST.
- GET - vrijednosti forme su vidljive u URL linku. Dodaje podatke iz obrasca u URL kao par ključ/vrednost. Nikada ne šaljite osjetljive podatke putem zahtjeva za dobijanje (GET), ali je bezbjedno za upite pretrage. GET je ograničen na oko 2k karaktera.
- POST – može da sadrži osjetljive podatke i lične podatke jer se podaci ne prikazuju kao dio URL adrese. Za razliku od zahtjeva za dobijanje, ne postoji ograničenje veličine.
<form action="https://example.com" method="POST">
<!-- form code -->
</form>Unutar forme definišemo polja koja čine istu, pošto sama forma ne radi ništa na svoju ruku 😉.
Label
Počnimo sa <label> oznakom, koja opisuje element sa kojim je povezan. Obično koristimo label da identifikujemo unose obrasca i biramo menije u povezanom elementu obrasca. Label je od vitalnog značaja za pristupačnost jer omogućava čitačima ekrana da povežu unose obrazaca sa pripadajućim oznakama, omogućavajući korisnicima sa oštećenim vidom da shvate svrhu svakog unosa.
<!-- Implicitni label - label i input su nezavisno smješteni -->
<label for="first_name">Puno ime:</label>
<input type="text" name="first_name" id="first_name" />
<!-- Explicitni label - input smješten unutar label oznaka -->
<label>
Puno ime:
<input type="text" name="first_name" />
</label>Inputi
Unosi forme su polja HTML obrasca koja omogućavaju korisnicima da unose podatke, biraju opcije i komuniciraju sa web sajtom ili aplikacijom. Inputi su jedan od najvažnijih elemenata svake forme. Neki od uobičajenih input polja za unos su tekst, e-pošta, polje za potvrdu, radio, submit, itd. Sva polja za unos imaju određene atribute:
- type - atribut koji definiše tip polja za unos.
- name - vrijednost ovog atributa se šalje serveru nakon slanja obrasca. Svaki input treba da ga ima.
- id - jedinstveni identifikator input-a, koji se može koristiti za stilizovanje ili JavaScript manipulaciju.
- placeholder - postavlja tekst koji se prikazuje u polju za unos da bi pružio nagovještaj korisniku o tome šta se očekuje.
- min i max - atributi definišu minimalne i maksimalne vrijednosti koje se mogu unijeti u polje za numeričke tipove unosa.
- minlength i maxlength - minimalne i maksimalne dužine unosa koje su dozvoljene.
- required - označava da se polje za unos mora popuniti prije nego što se obrazac može poslati.
- disabled - sa ovim atributom možemo onemogućiti ulazni element.
- autocomplete - određuje da li pretraživač treba da daje predloge na osnovu prethodno unijetih podataka. Vrijednosti mogu biti on/off.
- autofocus - automatski fokusira polje za unos kada se stranica učita.
- pattern - definiše obrazac regularnog izraza (regex) sa kojim ulazna vrijednost mora da odgovara.
- title - pruža opis alatke ili poruku o grešci koja se prikazuje kada se ulazna vrijednost ne poklapa sa šablonom.
- list - specificira id elementa <datalist> koji daje predloge polja za unos.
NAPOMENA: IMATI NA UMU DA NEKI ATRIBUTI NE ODGOVARAJU SVIM INPUT POLJIMA
<input
type="text"
name="username"
id="username"
placeholder="Enter your username"
minlength="3"
maxlength="20"
min="3"
max="20"
required
disabled
autocomplete="off"
autofocus
pattern="[a-zA-Z0-9]+"
title="Username must contain only letters and numbers"
list="suggestions"
/>
<!--
Moguće je kreirati svojstvo automatskog dovršavanja za element unosa pomoću oznake <datalist>. Na ovaj način postavljamo padajuću listu prilikom inputa.
-->
<datalist id="suggestions">
<option value="user1"></option>
<option value="user2"></option>
<option value="user3"></option>
</datalist>Select
Da bismo omogućili korisnicima da izaberu jednu ili više opcija sa liste unaprijed definisanih opcija, koristimo element <select> u koji postavljamo opcije. Ako želimo da opcija bude unaprijed izabrana, koristimo atribut selected sa oznakom opcije. Atribut size se koristi za definisanje većeg broja vidljivih opcija, a atribut mutliple omogućava korisniku da izabere više opcija.
<select name="cars" id="cars" size="2" multiple>
<option value="bmw" selected>BMW</option>
<option value="vw">VW</option>
<option value="tesla">Tesla</option>
<option value="audi">Audi</option>
</select>Textarea
Koristeći element <textarea>, moguće je kreirati višelinijsko polje za unos teksta. Često se koristi u odjeljcima za komentare na veb lokacijama, formama i drugim mjestima gde je potreban opsežniji unos. Specifični atributi textarea polja:
- rows - broj vidljivih redova textarea polja.
- cols - broj vidljivih kolona textarea polja.
<textarea
name="message"
id="message"
rows="4"
cols="20"
placeholder="Unesi svoju poruku"
></textarea>Primer jednostavne forme
<form action="/submit" method="post">
<label for="full-name">Puno ime:</label>
<input type="text" id="full-name" name="full-name" required />
<label for="favorite-cars">Omiljeni automobili:</label>
<select id="favorite-cars" name="favorite-cars[]" multiple required>
<option value="bmw" selected>BMW</option>
<option value="vw">VW</option>
<option value="tesla">Tesla</option>
<option value="audi">Audi</option>
<option value="honda">Honda</option>
<option value="toyota">Toyota</option>
<option value="ford">Ford</option>
<option value="chevrolet">Chevrolet</option>
</select>
<label for="comment">Komentar:</label>
<textarea id="comment" name="comment" rows="5" cols="30" required></textarea>
<input type="submit" value="Submit" />
</form>