Slanje podataka obrasca. HTML obrasci Kreiranje jednostavnog obrasca
HTML obrazac je dio dokumenta koji omogućava korisniku da unese informacije od interesa, koje se naknadno mogu prihvatiti i obraditi na strani servera. Drugim riječima, obrasci se koriste za prikupljanje informacija koje unose korisnici.
Da biste odredili kojem elementu forme pripada trenutna oznaka, morate koristiti for atribut oznake
Pogledajmo primjer upotrebe:
Primjer korištenja oznake Da br >
U ovom primjeru mi:
Unutra prvo oblici:
Objavljeno dva radio dugmad ( ) za odabir jedne od ograničenog broja opcija. Imajte na umu da je za radio dugmad unutar istog obrasca mora biti navedeno isto ime, naznačili smo različite vrijednosti. Za prvo checked , što specificira da element treba biti prethodno odabran kada se stranica učita (u ovom slučaju radio dugme sa vrijednošću yes ). Osim toga, specificirali smo globalne atribute za radio dugmad, koji definiraju jedinstveni identifikator za element.
Postavljena dva elementa , koji definiraju tekstualne oznake za naša tekstualna polja. Imajte na umu da smo koristili atribut for da odredimo kojem elementu forme pripada trenutna oznaka. Vrijednost atributa for odgovara vrijednosti globalnog atributa radio dugmeta koji nam je potreban.
Unutra drugo oblici:
Objavljeno dva radio dugmad ( ) za odabir jedne od ograničenog broja opcija. Za drugo Za radio dugmad smo naveli atribut checked, koji označava da element treba biti prethodno izabran kada se stranica učita (u ovom slučaju radio dugme sa vrednošću br). Osim toga, specificirali smo jedinstvene vrijednosti za radio dugmad unutar obrasca i ista imena.
Postavljena dva elementa , postavili smo naše radio dugmad unutar njih. Za razliku od prethodne metode, nema potrebe da se specificiraju globalni atributi (identifikator elementa) za radio dugmad i koristite for atribut za tekstualne oznake da biste ih upućivali (napravili vezivanje).
U pretraživaču obje opcije (metode) za korištenje tekstualnih oznaka izgledaju identično:
Tooltip za polja za unos
Pogledajmo primjer upotrebe:
Primjer korištenja atributa čuvara mjesta
U ovom primjeru smo specificirali za element sa tekstom tipa (tekstualno polje u jednom redu) i lozinkom tipa (polje lozinke), tekstualni nagoveštaj za korisnika (atribut čuvara mesta) koji opisuje očekivanu vrednost za unos.
Rezultat našeg primjera:
Pitanja i zadaci na temu
Prije nego pređete na sljedeću temu, završite vježbu:
Koristeći stečeno znanje, kreirajte sljedeći obrazac za narudžbu:
Upozorenje: u poljima u kojima se očekuje odabir trebalo bi biti moguće birati klikom na tekst, a ne samo na sam element.
Nakon što završite vježbu, provjerite kod stranice otvaranjem primjera u zasebnom prozoru kako biste bili sigurni da ste sve uradili ispravno.
Obrazac u HTML dokumentu implementiran je oznakom kontejnera FORM, u kojoj su specificirani svi kontrolni elementi - polja za unos, dugmad, itd. Ako su kontrolni elementi navedeni izvan sadržaja oznake FORM, onda oni ne kreiraju formu, već se koriste za izgradnju korisničkog sučelja na web stranici, odnosno za dodavanje različitih dugmadi, potvrdnih okvira i polja za unos.
Elementi obrasca se obrađuju pomoću skripti, ali se možda uopće neće obraditi.
Elementi obrasca su imenovani kroz njihov NAME atribut.
Svaki element forme može imati početnu i krajnju vrijednost, koje su nizovi znakova. Početne vrijednosti elemenata se ne mijenjaju, tako da se korisničke vrijednosti mogu resetirati. Učinak ove akcije je postavljanje svih kontrola obrasca na njihove originalne zadane vrijednosti.
HTML 4.01 definira sljedeće tipove kontrola:
Dugmad - određuju se pomoću elemenata BUTTON i INPUT. tu su:
»
dugme za slanje - kada kliknete na njih, šalju obrazac na server;
»
tipke za resetiranje - kada ih pritisnete, kontrolni elementi poprimaju svoje originalne vrijednosti;
»
ostala dugmad - dugmad za koja nije navedena zadana radnja kada se klikne.
Zavisni prekidači (zaporni prekidači) - određuju se elementom INPUT i predstavljaju prekidače za uključivanje/isključivanje. Ako nekoliko radio dugmadi ima isto ime, oni se međusobno isključuju. To znači da ako je jedan od njih postavljen na "uključeno", onda se svi ostali automatski prebacuju u položaj "isključeno". Upravo je to prednost njihovog korištenja.
Nezavisni prekidači (prekidači sa nezavisnim zaključavanjem) - specificirani su od strane INPUT elementa i predstavljaju prekidače za uključivanje/isključivanje, ali za razliku od zavisnih prekidača, nezavisni prekidači mogu prihvatiti i promijeniti svoju vrijednost nezavisno od drugih prekidača. Čak i ako potonji imaju isto ime.
Izbornik - implementiran pomoću elemenata SELECT, OPTGROUP i OPTION. Meniji pružaju korisniku listu mogućih izbora.
Unos teksta se implementira elementima INPUT ako se unese jedan red, a elementima TEXTAREA ako se unese više redova. U oba slučaja, uneseni tekst postaje trenutna vrijednost kontrole.
Odabir fajla - omogućava vam da podnesete odabrane datoteke zajedno sa formom, implementiran od strane INPUT HTML elementa.
Skrivene kontrole - kreirane od strane INPUT kontrole.
Kao što vidite, mnogo elemenata je specificirano pomoću generičke INPUT oznake.
Možete pronaći kompletnu HTML4 specifikaciju
Oznaka FORM - kontejner obrasca
Kao što je već spomenuto, obrazac u HTML dokumentu implementiran je pomoću oznake kontejnera FORM. Ova oznaka sa svojim atributima označava adresu skripte (skripte) na koju će obrazac biti poslat, način slanja i karakteristike podataka sadržanih u obrascu. Početne i krajnje oznake FORM definiraju granice obrasca, tako da je njihovo navođenje obavezno.
Evo atributa oznake FORM:
akcija je jedini potrebni atribut. Njegova vrijednost je URL tražene skripte koja će obraditi podatke sadržane u obrascu. Prihvatljivo je koristiti unos mailto:URL, koji će uzrokovati slanje obrasca putem e-pošte. Ako atribut ACTION i dalje nije naveden, tada će sadržaj obrasca biti poslan na URL sa kojeg je web stranica učitana;
metod - definiše HTTP metod koji se koristi za slanje podataka obrasca iz pretraživača na server. Atribut METHOD može imati dvije vrijednosti: GET i POST;
enctype je neobavezni atribut. Određuje tip sadržaja obrasca koji se koristi za određivanje formata kodiranja prilikom slanja. HTML definira dvije moguće vrijednosti za atribute ENCTYPE:
Element INPUT je najčešće korištena oznaka HTML forme. Ova oznaka implementira glavne funkcije obrasca. Omogućava vam da kreirate tekstualne nizove, imena datoteka, lozinke itd. unutar polja za unos obrasca.
Obratite pažnju na posebnost INPUT-a - nema završnu oznaku. Atributi i upotreba INPUT ovise o tome kako se koristi. Hajde da razmotrimo ove metode.
» Jednolinijska polja za unos
Najčešće korišćena polja za unos su – na kraju krajeva, čak i dugme je polje za unos informacija. Počnimo s poljem za unos tekstualnih informacija. Format oznake INPUT za kreiranje polja za unos tekstualnog niza je:
Ova oznaka kreira tekstualno polje sa maksimalno dozvoljenom dužinom teksta od maxlen i veličinom poznate veličine. Ako je specificiran atribut value, polje će u početku prikazati vrijednost ovog atributa. Opcioni atributi su označeni uglastim zagradama.
Evo primjera polja za unos u jednom redu:
» Polja lozinke
Naravno, korisničko ime se može unijeti pomoću običnog tekstualnog polja. Ali lozinka ne bi trebala biti prikazana na ekranu kada je unesete. Polje za unos lozinke će nam pomoći u tome:
Princip rada ove oznake je potpuno isti kao i kod tekstualne oznake. Razlika je u tome što se podaci uneseni u polje ne prikazuju, već se zamjenjuju sa " zvjezdice". Ne preporučuje se postavljanje zadane vrijednosti iz sigurnosnih razloga (vrijednost).
Evo primjera polja za unos lozinke:
» Skriveno polje za tekst
Skrivena polja se koriste za prijenos servisnih informacija (koje korisnik ne bi trebao ni biti svjestan). Ova polja se mogu koristiti, na primjer, za prijenos postavki.
Takva polja se šalju na server, ali se ne prikazuju na web stranici.
» Nezavisni prekidači
Vrlo često, korisniku koji popunjava obrazac u pretraživaču treba dati priliku da odredi svoje želje odabirom određenih vrijednosti. U ovom slučaju, te vrijednosti su date, a pored njih je postavljeno malo kvadratno polje u kojem možete označiti ili poništiti okvir. U ovom slučaju, vrijednost će, u skladu s tim, biti ili odabrana ili ne.
Ovo možete ponovo implementirati koristeći oznaku INPUT. Da biste to učinili, samo trebate navesti okvir za potvrdu kao vrijednost atributa tipa.
Ako je prekidač bio omogućen u vrijeme kada je kliknuto na dugme za slanje podataka, skripti će biti proslijeđen parametar ime=vrijednost. Ako je potvrdni okvir isključen, onda skripti uopće neće biti proslijeđeno ništa - kao da uopće nije bilo prekidača.
Zadani prekidač je uključen ili isključen. Da bi radio dugme podrazumevano omogućeno, mora imati označen atribut.
Potvrdni okvir se naziva nezavisnim jer njegovo stanje ne ovisi o stanju drugih potvrdnih okvira. Tako se na jednom obrascu može istovremeno odabrati nekoliko radio dugmadi.
Evo primjera nezavisnih prekidača:
Postoji i prekidač u HTML-u koji zavisi od drugih prekidača o njemu se govori u nastavku.
» Zavisni prekidači
Zavisni prekidač, kao i nezavisni prekidač, može biti uključen ili isključen. U ovom slučaju, radio prekidač je ovisni prekidač, jer na obrascu može biti samo jedan uključen radio prekidač. Preciznije, ako obrazac sadrži nekoliko radio dugmadi istog imena, tada samo jedan od njih može biti omogućen. Kada odaberete jedno radio dugme, sva radio dugmad istog imena se automatski isključuju. Vrijednost atributa name se uzima kao ime prekidača.
br
Ovaj obrazac će izgledati ovako:
Prvo radio dugme (podešeno na da) je podrazumevano omogućeno (postavili smo provereni atribut).
Kada korisnik klikne na dugme Pošalji, script.php će biti prosleđen parametar odgovora (atribut name oba radio dugmeta) sa vrednošću da ili ne (u zavisnosti od toga koju opciju je korisnik izabrao).
A ovako izgleda tekst skripte koji prima podatke iz razmatranog obrasca i obrađuje odgovor.
» Dugme za slanje obrasca
Atribut value specificira tekst koji će biti napisan na dugmetu za slanje. Atribut name specificira ime dugmeta i nije obavezan. Ako vrijednost ovog atributa nije navedena, tada će vrijednosti unesene u obrazac biti proslijeđene skripti i to je to. Ako je za dugme specificiran atribut name, tada će se pored podataka glavnog obrasca poslati i par ime=vrijednost iz samog dugmeta.
» Dugme Reset
Pored dugmeta za slanje, postoji i dugme za resetovanje, koje resetuje parametre obrasca, odnosno postavlja sve elemente obrasca na podrazumevane vrednosti. Preporučljivo je da formular ima takvo dugme, posebno ako se radi o velikoj formi. Prisutnost ovog gumba osigurava brisanje obrasca, na primjer, u slučaju kada su uneseni neispravni parametri. Sintaksa dugmeta za resetovanje:
» Dugme za slanje sa slikom
Umjesto dugmeta za slanje, možete koristiti sliku za slanje podataka. Klikom na ovu sliku čini se ista stvar kao i klikom na dugme za slanje. Međutim, pored ovoga, skripta će dobiti koordinate lokacije klika na slici. Koordinate će se prenijeti u formatu name.x=coor_X, y=coor_Y. Sintaksa za dugme za slanje sa slikom je:
Višelinijska tekstualna polja. Tag TEXTAREA
U HTML-u se višeredna tekstualna polja kreiraju pomoću oznake TEXTAREA. Polje kreirano ovom oznakom omogućava vam da unesete i pošaljete ne samo jedan red, već nekoliko redova odjednom. Sintaksa oznake TEXTAREA:
Nekoliko značenja u vezi sa upotrebom atributa: ipak je preporučljivo specificirati opcione parametre kolone i redove. Prvi određuje broj znakova po redu, a drugi broj redova u području. Atribut wrap određuje vrstu prelamanja teksta, kako će tekst u polju za unos izgledati:
Virtuelno - sa desne strane tekstualnog polja se prikazuje traka za pomeranje. Čini se da je tekst koji unesete podijeljen na redove, a znak novog reda se ubacuje kada pritisnete tipku. ENTER;
Fizički - ovaj tip zavisi od tipa pretraživača i izgleda drugačije;
Ništa - tekst se pojavljuje u polju kada ga korisnik unese. Ako se tekst ne smanji na jedan red, pojavljuje se horizontalna traka za pomicanje.
Treba napomenuti da je najprikladniji tip Virtual. Evo primjera višelinijskog tekstualnog polja koji koristi atribut wrap=Virtual.
HTML forme su kontrole koje se koriste za prikupljanje informacija od posjetitelja web stranice.
Web obrasci se sastoje od kolekcije tekstualnih polja, dugmadi, lista i drugih kontrola koje se aktiviraju klikom miša. Tehnički, obrasci prenose podatke od korisnika do udaljenog servera.
Za primanje i obradu podataka iz obrazaca, web programski jezici kao što su PHP, Perl.
Prije pojave HTML5, web forme su bile zbirka nekoliko elemenata , završava dugmetom . Bilo je potrebno mnogo truda da se stilizuju forme u različitim pretraživačima. Dodatno, obrasci su zahtijevali JavaScript za validaciju unosa i nedostajali su specifični tipovi polja za unos za specificiranje svakodnevnih informacija kao što su datumi, adrese e-pošte i URL-ovi.
HTML5 forme riješio većinu ovih uobičajenih problema uz prisustvo novih atributa, pružajući mogućnost promjene izgleda elemenata forme pomoću CSS3.
Rice. 1. Poboljšani web obrasci sa HTML5
Kreiranje HTML5 obrasca
1. Element
. Ne zahtijeva nikakav unos jer je kontejner, koji drži sve kontrole obrasca zajedno - polja. Atributi ovog elementa sadrže informacije koje su zajedničke za sva polja obrasca, tako da polja koja su logički kombinovana moraju biti uključena u jedan obrazac.
Tabela 1. Atributi oznake
2. Grupisanje elemenata forme
Element
dizajnirano da grupiše elemente koji su međusobno povezani, dijeleći tako formu na logičke fragmente.
Svaka grupa elemenata može se imenovati pomoću elementa