HTML Obrazci (ang. Forms) se uporabljajo za zbiranje uporabniških vnosov, ki se običajno pošljejo strežniku v obdelavo. <input> ima lahko tudi atribut <value>, ki nam pokaže vneseno vrednost. Atribut <value> se uporablja za izhod iz baze podatkov. Obrazec je zbirka za različne vrste vnosov. Oblika je vsebnik za različne vrste vnosnih elementov, kot so vnos besedila, potrditvena polja, izbirni gumbi, oddajni gumbi itd.
Element <form> predstavlja del dokumenta, ki vsebuje interaktivne kontrolnike za oddajo informacij. Možno
je uporabiti pseudo razred :valid in :invalid za slog <form> glede na to, ali
so elementi v obrazcu veljavni.
Ta tabela vam omogoča hiter pregled vseh vrst vnosnih polj (<input>) in njihovih glavnih
atributov.
| Vrsta (type) | Opis | Primer kode | Ključni atributi |
|---|---|---|---|
type="text" |
Standardno enovrstično besedilno polje. | <input type="text" name="ime"> |
placeholder, maxlength, size |
type="password" |
Skrije znake med vpisom (za varnost). | <input type="password" name="geslo"> |
minlength, required |
type="email" |
Preveri, ali je vnos veljaven e-poštni naslov. | <input type="email" name="email"> |
multiple, placeholder |
type="number" |
Številski vnos s puščicami za povečevanje/zmanjševanje. | <input type="number" name="starost" min="0" max="100"> |
min, max, step |
type="range" |
Drsnik za izbiro vrednosti v določenem območju. | <input type="range" name="glasnost" min="0" max="10"> |
min, max, step, value |
type="date" |
Izbirnik datuma (leto, mesec, dan). | <input type="date" name="rojstni_dan"> |
min, max |
type="time" |
Izbirnik časa (ura, minuta). | <input type="time" name="sestanek"> |
step |
type="datetime-local" |
Datum in čas brez časovnega pasu. | <input type="datetime-local" name="dogodek"> |
- |
type="month" |
Izbirnik meseca in leta. | <input type="month" name="potek"> |
- |
type="week" |
Izbirnik tedna in leta. | <input type="week" name="teden"> |
- |
type="checkbox" |
Večkratna izbira (vklop/izklop). | <input type="checkbox" name="strinjanje"> |
checked |
type="radio" |
Ena izbira izmed več (morajo imeti enak name). |
<input type="radio" name="spol" value="M"> |
checked, value |
type="submit" |
Gumb za pošiljanje podatkov na strežnik. | <input type="submit" value="Pošlji"> |
formaction, formmethod |
type="reset" |
Gumb za ponastavitev vseh polj na začetne vrednosti. | <input type="reset" value="Počisti"> |
- |
type="button" |
Splošni gumb (običajno uporabljen z JavaScriptom). | <input type="button" value="Klikni me"> |
onclick (JS) |
type="search" |
Polje za iskanje (pogosto ima gumb za brisanje "x"). | <input type="search" name="iskanje"> |
autocomplete |
type="tel" |
Telefonska številka (optimizirana za mobilne tipkovnice). | <input type="tel" name="telefon"> |
pattern |
type="url" |
Preveri, ali je vnos veljaven URL. | <input type="url" name="spletna_stran"> |
- |
type="file" |
Izbirnik za nalaganje datoteke. | <input type="file" name="datoteka"> |
accept, multiple |
type="color" |
Izbirnik barve. | <input type="color" name="barva"> |
- |
type="hidden" |
Skrito polje (ni vidno uporabniku, pošlje se s form-om). | <input type="hidden" name="token" value="abc123"> |
value |
type="image" |
Slika kot gumb za pošiljanje. | <input type="image" src="gumb.png"> |
src, alt, width, height |
