Kako stvoriti HTML obrazac (objašnjeni primjeri)

Obrasci se koriste za prikupljanje podataka od korisnika, kao što su podaci o kontaktu, ili za omogućavanje interakcije korisnika s web-mjestom, poput objavljivanja komentara ili pretraživanja. U ovom ćemo članku naučiti kako stvoriti osnovni obrazac pomoću HTML-a.

Struktura HTML obrasca

Pomoću oznake kreira se HTML obrazac. Unutar ove oznake možete imati niz različitih elemenata za unos, kao što su tekstualna polja, gumbi, potvrdni okviri, radio gumbi i još mnogo toga.

ulazni elementi idu ovdje

Ulazni elementi

Tekstna polja

Tekstna polja se stvaraju pomoću oznake s atributom tip položi na tekst. Na primjer:

Ime:




Telefon

Element koristi se za polja za unos telefonskog broja.

Telefon:


Datum

Element koristi se za odabir datuma.

Datum rođenja:


Lozinka

Element koristi se za polja za unos lozinke. Tekst unesen u ovo polje prikazuje se kao točkice kako bi se sakrila lozinka.

Lozinka:


Arhiva

Element koristi se kako bi korisnik mogao odabrati datoteku iz svog lokalnog datotečnog sustava.

Prenesi datoteku:


Potvrdni okvir

Element koristi se za polja za unos koja korisniku omogućuju odabir nijedne, jedne ili više opcija.

Prihvaćam uvjete i odredbe

Radio

Element koristi se za polja za unos koja korisniku omogućuju odabir jedne opcije iz skupa opcija.

Spol:

Čovjek

žene

Broj

Element koristi se za numerička polja za unos.

Iznos:


Raspon

Element koristi se za polja za unos koja moraju sadržavati vrijednost iz niza vrijednosti.

Volumen:




Gumbi

Gumbi se izrađuju pomoću oznake s atributom tip položi na podnijeti. Kada se pritisne ovaj gumb, poslat će podatke obrasca. Na primjer:

Ime:




Rukovanje unosom obrasca

Kada se pritisne gumb za slanje, podaci obrasca šalju se na obradu. To se radi pomoću jedne od dvije metode: GET ili POST, koje su navedene pomoću atributa metoda U naljepnici .

GET metoda

Metoda GET šalje podatke obrasca kao dio URL-a. Korisno je za stvari poput pretraživanja, gdje podaci obrasca nisu osjetljivi. Međutim, ova metoda ima ograničenja u smislu duljine podataka koji se mogu poslati.

ulazni elementi idu ovdje

POST metoda

Metoda POST šalje podatke obrasca odvojeno od URL-a. Ovo je sigurnije i može obraditi mnogo veću količinu podataka, pa se koristi za stvari kao što su slanje obrazaca za kontakt ili prijavu.

ulazni elementi idu ovdje

U oba slučaja atribut akcijski koristi se za određivanje URL-a skripte na strani poslužitelja koja će obraditi podatke obrasca.

Primjer HTML obrasca sa svim elementima 

Evo obrasca koji koristi sve elemente koje smo pregledali u ovom članku:

Upisnica

Ime:



Prezime:



E-mail:



Telefon:



Datum rođenja:



Lozinka:



Prenesi datoteku:



Prihvaćam uvjete i odredbe


Spol:

Čovjek

žene

Iznos:



Volumen:




Ovaj obrazac ima polja za ime, prezime, e-mail, telefon, datum rođenja, lozinku, polje za učitavanje datoteku, potvrdni okvir za uvjete i odredbe, radio za odabir spola i polja za broj i raspon za količinu i volumen, odnosno.

Gumb "Pošalji" na kraju je onaj koji bi bio zadužen za slanje obrasca na URL naveden u atributu akcijski Od etikete oblik (u ovom slučaju, "/submit_form"). Kako bi ovaj obrazac funkcionirao na pravoj web stranici, trebate imati poslužitelj konfiguriran za primanje i obradu informacija iz ovog obrasca u putanji "/submit_form".