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:

</span> Primjer korištenja oznake <label><span>
>



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
  • 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

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 <span>
Prijava: type = "text" name = "login" placeholder = "Unesite svoju prijavu">

Lozinka: type = "password" name = "password" placeholder = "Unesite svoju lozinku">


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:

APPLICATION/X-WWW-FORM-URLENCODED (podrazumevano);

VIŠESTRUKI/OBRAZAC-PODACI.

Oznaka INPUT i njene metode

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.


Može biti samo jedan aktivan prekidač. Primjer izlistava obrasca sa radio dugmadima:
Da

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

Osnova svakog oblika je 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
Atribut Značenje/Opis
accept-charset Vrijednost atributa je razmaknuta lista kodiranja znakova, koji će se koristiti za podnošenje obrasca, npr. .
akcija Obavezni atribut, koji specificira url rukovaoca obrascima na serveru na koji se šalju podaci. To je datoteka (na primjer, action.php) koja opisuje šta treba učiniti sa podacima obrasca. Ako vrijednost atributa nije specificirana, tada će nakon ponovnog učitavanja stranice elementi obrasca poprimiti svoje zadane vrijednosti.
Ako će sav posao biti obavljen na strani klijenta pomoću JavaScript skripti, tada možete odrediti vrijednost # za atribut akcije.
Također možete organizirati da vam se putem e-pošte pošalje obrazac koji je popunio posjetitelj. Da biste to uradili potrebno je da izvršite sledeći unos:
autocomplete

enctype Koristi se za označavanje MIME-tip podataka koji se šalju zajedno s formom, na primjer, enctype="multipart/form-data" . Navedeno samo u slučaju method="post" .
application/x-www-form-urlencoded je zadani tip sadržaja, što ukazuje da proslijeđeni podaci predstavljaju listu varijabli obrasca kodiranih URL-om. Znakovi za razmak (ASCII 32) će biti kodirani kao +, a specijalni znak kao što je ! će biti kodiran heksadecimalno kao %21.
multipart/form-data - koristi se za podnošenje obrazaca koji sadrže datoteke, ne-ASCII podatke i binarne podatke, sastoji se od nekoliko dijelova, od kojih svaki predstavlja sadržaj posebnog elementa obrasca.
text/plain - označava da se običan (ne html) tekst prenosi.
metoda Određuje način na koji se podaci obrasca šalju.
Get metoda prosljeđuje podatke serveru kroz adresnu traku pretraživača. Prilikom generisanja zahtjeva serveru, sve varijable i njihove vrijednosti formiraju niz poput www.anysite.ru/form.php?var1=1&var2=2. Da li se imena i vrijednosti varijabli dodaju adresi servera nakon znaka? i odvojeni su sa &. Svi specijalni znakovi i nelatinska slova su kodirani u formatu %nn, razmak je zamijenjen sa +. Ovu metodu treba koristiti ako ne prenosite velike količine informacija. Ako treba da pošaljete datoteku zajedno sa formularom, ova metoda neće raditi.
Post metoda se koristi za slanje velikih količina podataka, kao i povjerljivih informacija i lozinki. Podaci poslati ovim metodom nisu vidljivi u zaglavlju URL-a jer se nalaze u tijelu poruke.
ime Setovi naziv obrasca, koji će se koristiti za pristup elementima obrasca putem skripti, kao što je name="opros" .
novalidate Onemogućuje provjeru valjanosti u gumbu za slanje obrasca. Atribut se koristi bez specificiranja vrijednosti
cilj Određuje prozor u koji će se slati informacije:
_blank - novi prozor
_self - isti okvir
_parent — roditeljski okvir (ako postoji, ako ne, onda na trenutni)
_top je prozor najvišeg nivoa u odnosu na ovaj okvir. Ako poziv ne dolazi iz podređenog okvira, onda u isti okvir.

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 , koji dolazi odmah nakon oznake

. Naziv grupe pojavljuje se u lijevom gornjem rubu
. Na primjer, ako je u elementu
Kontakt podaci se pohranjuju:

Kontakt informacije


Rice. 2. Grupisanje elemenata forme pomoću

Tabela 2. Atributi oznake
Atribut Značenje/Opis
onemogućeno Ako je atribut prisutan, tada je grupa povezanih elemenata obrasca smještena unutar kontejnera
, onemogućen za popunjavanje i uređivanje. Koristi se za ograničavanje pristupa određenim poljima obrasca koja sadrže prethodno unesene podatke. Atribut se koristi bez navođenja vrijednosti -
.
formu
u istom dokumentu. Označava jedan ili više oblika kojima ova grupa elemenata pripada. Atribut trenutno ne podržava nijedan pretraživač.
ime Definiše Ime, koji će se koristiti za referenciranje elemenata u JavaScript-u ili za referenciranje podataka obrasca nakon što je obrazac popunjen i poslan. Analogno je atributu id.

3. Kreirajte polja obrasca

Element kreira većinu polja obrasca. Atributi elementa se razlikuju ovisno o vrsti polja za kreiranje elementa.

Koristeći CSS stilove, možete promijeniti veličinu fonta, vrstu fonta, boju i druga svojstva teksta, kao i dodati ivice, boju pozadine i sliku pozadine. Širina polja je određena svojstvom širine.

Tabela 3. Atributi oznake
Atribut Značenje/Opis
prihvatiti Određuje vrstu datoteke koja je dozvoljena za slanje na server. Indicirano samo za . Moguće vrijednosti:
file_extension - omogućava preuzimanje datoteka sa navedenom ekstenzijom, na primjer, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* - omogućava preuzimanje audio datoteka
video/* - omogućava preuzimanje video datoteka
image/* - omogućava učitavanje slika
media_type - označava vrstu medija preuzetih datoteka.
alt Definiše alternativni tekst za slike, naznačeno samo za .
autocomplete Odgovoran je za pamćenje vrijednosti unesenih u tekstualno polje i njihovu automatsku zamjenu sljedeći put kada ih unesete:
uključeno - znači da polje nije zaštićeno i da se njegova vrijednost može pohraniti i preuzeti,
isključeno - onemogućava automatsko popunjavanje polja obrasca.
autofokus Omogućava vam da se uvjerite da u učitanom obrascu jedno ili drugo polje za unos već ima fokus (odabrano) i da je spremno za unos vrijednosti.
provjereno Atribut provjerava da li je zadani potvrdni okvir označen pri učitavanju stranice za polja kao što su type="checkbox" i type="radio" .
onemogućeno
formu Vrijednost atributa mora biti jednaka atributu id elementa u istom dokumentu. Identificira jedan ili više obrazaca kojima ovo polje obrasca pripada.
formiranje Određuje url datoteke koja će obraditi podatke unesene u polja prilikom slanja obrasca. Postavite samo za polja type="submit" i type="image" . Atribut nadjačava vrijednost atributa akcije samog obrasca.
formenctype Određuje kako će podaci polja obrasca biti kodirani kada se pošalju na server. Nadjačava vrijednost atributa enctype obrasca. Postavite samo za polja type="submit" i type="image" . Opcije:
application/-x-www-form-urlencoded je zadana vrijednost. Svi znakovi su kodirani prije slanja (razmaci se zamjenjuju znakom +, specijalni znakovi se pretvaraju u ASCII HEX vrijednosti)
multipart/form-data - znakovi nisu kodirani
tekst/običan - razmaci se zamjenjuju simbolom +, a specijalni znakovi nisu kodirani.
formmethod Atribut specificira metodu koju će pretraživač koristiti za slanje podataka obrasca na server. Postavite samo za polja type="submit" i type="image" . Nadjačava vrijednost atributa metode obrasca. Opcije:
get je zadana vrijednost. Podaci iz obrasca (par ime/vrijednost) se dodaju na url i šalju na server: URL?name=value&name=value
podaci iz obrasca se šalju kao http zahtjev.
formnovalidate Određuje da se podaci polja obrasca ne trebaju provjeravati kada se obrazac pošalje. Nadjačava vrijednost novalidate atributa obrasca. Može se koristiti bez specificiranja vrijednosti atributa.
formtarget Određuje gdje će se prikazati odgovor primljen nakon slanja obrasca. Postavite samo za polja type="submit" i type="image" . Nadjačava vrijednost ciljnog atributa obrasca.


_parent – ​​učitava odgovor u roditeljski okvir
_top – učitava odgovor na cijelom ekranu
framename – učitava odgovor u okvir sa navedenim imenom.
visina Vrijednost atributa sadrži broj piksela bez specificiranja mjerne jedinice. Postavlja visinu polja obrasca tipa type="image" , na primjer, . Preporučuje se da istovremeno postavite i visinu i širinu polja.
lista Je referenca na element , sadrži svoj id . Omogućava vam da korisniku pružite nekoliko opcija za odabir kada počne unositi vrijednost u odgovarajuće polje.
max Omogućava vam da ograničite dozvoljeni unos numeričkih podataka na maksimalnu vrijednost atributa može sadržavati cijeli ili razlomak. Preporučuje se korištenje ovog atributa zajedno s atributom min. Radi sa sljedećim tipovima polja: broj, opseg, datum, datum-vrijeme, datum-vrijeme-lokalno, mjesec, vrijeme i sedmica.
maxlength Atribut specificira maksimalan broj znakova unetih u polje. Zadana vrijednost je 524288 znakova.
min Omogućava vam da ograničite dozvoljeni numerički unos na minimalnu vrijednost.
višestruko Omogućava korisniku da unese više vrijednosti atributa, odvojenih zarezom. Odnosi se na fajlove i adrese e-pošte. Navedeno bez vrijednosti atributa.
ime Određuje ime koje će se koristiti za pristup elementu , na primjer, u css stilovima. Analogno je atributu id.
uzorak Omogućava vam da odredite korištenje regularni izraz sintaksu podataka koji se moraju uneti u određeno polje. Na primjer, pattern="(3)-(3)" - uglaste zagrade postavljaju raspon prihvatljivih znakova, u ovom slučaju - sva mala slova, broj u vitičastim zagradama označava da su potrebna tri mala slova, praćena crtom, zatim tri cifre u rasponu od 0 do 9.
čuvar mjesta Sadrži tekst koji se prikazuje u polju za unos prije nego što se popuni (najčešće je to opis alata).
samo za čitanje Ne dozvoljava korisniku da mijenja vrijednosti elemenata obrasca odabir i kopiranje teksta je i dalje dostupno. Navedeno bez vrijednosti atributa.
potrebno Prikazuje poruku koja ukazuje da je ovo polje obavezno. Ako korisnik pokuša poslati obrazac bez unošenja tražene vrijednosti u ovo polje, na ekranu će se prikazati poruka upozorenja. Navedeno bez vrijednosti atributa.
veličina Postavlja vidljivu širinu polja u znakovima. Zadana vrijednost je 20. Radi sa sljedećim tipovima polja: tekst, pretraga, tel, url, email i lozinka.
src Određuje URL slike koja se koristi kao dugme za slanje obrasca. Označeno samo za polje .
korak Koristi se za elemente koji zahtijevaju unos numeričkih vrijednosti, označava iznos za koji se vrijednosti povećavaju ili smanjuju tokom procesa podešavanja raspona (korak).
tip dugme - kreira dugme.
checkbox - pretvara polje za unos u polje za potvrdu koje se može označiti ili obrisati, npr.
Imam auto
boja - generiše palete boja u podržanim pretraživačima, omogućavajući korisnicima da odaberu vrednosti boja u heksadecimalnom formatu.
datum — omogućava vam da unesete datum u formatu dd.mm.gggg.
rođendan:
datetime-local - omogućava vam da unesete datum i vrijeme odvojene velikim engleskim slovom T koristeći obrazac dd.mm.gggg hh:mm.
Rođendan - dan i vrijeme:
e-pošta - Preglednici koji podržavaju ovaj atribut će očekivati ​​da korisnik unese podatke koji odgovaraju sintaksi e-mail adresa.
Email:
fajl - omogućava vam preuzimanje datoteka sa računara korisnika.
Odaberite fajl:
hidden - sakriva kontrolu, koju pretraživač ne prikazuje i sprečava korisnika da promeni podrazumevane vrednosti.
slika - kreira dugme, omogućavajući vam da umetnete sliku umesto teksta na dugme.
mjesec - Omogućava korisniku da unese broj godine i mjeseca koristeći obrazac yyyy-mm.
broj - namijenjen za unos cjelobrojnih vrijednosti. Njegovi atributi min , max i step određuju gornje, donje granice i korak između vrijednosti. Ovi atributi se pretpostavljaju za sve elemente koji imaju numeričke indikatore. Njihove zadane vrijednosti zavise od tipa elementa.
Molimo navedite količinu (od 1 do 5):
lozinka - kreira tekstualna polja u obrascu, dok se znakovi koje unese korisnik zamjenjuju zvjezdicama, mecima ili drugim ikonama koje instalira pretraživač.
Unesite lozinku:
radio - stvara prekidač - kontrolu u obliku malog kruga koji se može uključiti ili isključiti.
vegetarijanac:
raspon - omogućit će vam da kreirate element sučelja kao što je klizač, min / max - omogućit će vam da postavite raspon odabira
reset - kreira dugme koje briše polja obrasca podataka koje je korisnik uneo.
pretraga - označava polje za pretragu, po defaultu polje za unos je pravokutnog oblika.
Traži:
submit - kreira standardno dugme koje se aktivira klikom miša. Dugme prikuplja informacije iz obrasca i šalje ih na obradu.
text - Kreira tekstualna polja na obrascu, izlazeći jednoredno tekstualno polje za unos teksta.
vrijeme - omogućava vam da unesete vrijeme u 24-satnom formatu koristeći obrazac hh:mm. U podržanim pretraživačima, pojavljuje se kao kontrola polja za numerički unos sa vrijednošću koja se može uređivati ​​mišem i dozvoljava samo unos vremenskih vrijednosti.
Navedite vrijeme:
url—polje je namijenjeno za navođenje URL-ova.
Početna stranica:
sedmica - Odgovarajući alat za pokazivače omogućava korisniku da odabere jednu sedmicu u godini, nakon čega će omogućiti unos podataka u nn-yyyy formatu. U zavisnosti od godine, broj sedmica može biti 52 ili 53.
Navedite sedmicu:
vrijednost Određuje tekst koji se pojavljuje na dugmetu, u polju ili u povezanom tekstu. Nije navedeno za polja tipa datoteke.
širina Vrijednost atributa sadrži broj piksela. Omogućava vam da postavite širinu polja obrasca.

4. Polja za unos teksta

Element koristi se umjesto elementa kada trebate kreirati velika tekstualna polja. Tekst prikazan kao originalna vrijednost nalazi se unutar oznake. Dimenzije polja se postavljaju pomoću atributa cols - horizontalne dimenzije, redovi - vertikalne dimenzije. Visina polja se može postaviti pomoću svojstva visine. Sve veličine se izračunavaju na osnovu veličine jednog znaka u jednorazrednom fontu.

Tabela 4. Atributi oznake

7. Dugmad

Element kreira dugmad na koja se može kliknuti. Za razliku od kreiranih dugmadi ( , , , ), unutar elementa .

Dugmad omogućavaju korisnicima da dostave podatke u obrazac, obrišu sadržaj obrasca ili poduzmu neku drugu radnju. Možete kreirati ivice, promijeniti pozadinu i poravnati tekst na gumbu.

Tabela 9. Atributi oznake
Atribut Značenje/Opis
autofokus Postavlja fokus na dugme kada se stranica učita.
onemogućeno Onemogućuje dugme, čime se ne može kliknuti.
formu Označava jedan ili više oblika kojima ovo dugme pripada. Vrijednost atributa je identifikator odgovarajućeg obrasca.
formiranje Vrijednost atributa sadrži URL rukovatelja podacima obrasca koji se šalje kada se klikne na dugme. Samo za tipku tipke="pošalji" . Nadjačava vrijednost atributa akcije specificiranog za element .
formenctype Postavlja tip kodiranja podataka obrasca prije slanja na server kada se klikne tipke poput type="submit". Nadjačava vrijednost atributa enctype specificiranog za element . Moguće vrijednosti:
application/x-www-form-urlencoded je zadana vrijednost. Svi znakovi će biti kodirani prije slanja.
multipart/form-data - znakovi nisu kodirani. Koristi se kada se fajlovi učitavaju pomoću obrasca.
text/plain - znakovi nisu kodirani, a razmaci se zamjenjuju simbolom +.
formmethod Atribut specificira metodu koju će pretraživač koristiti za slanje obrasca. Nadjačava vrijednost atributa metode specificiranog za element . Određeno samo za dugmad tipa type="submit". Moguće vrijednosti:
get - podaci iz obrasca (par ime/vrijednost) se dodaju u url i šalju na server. Ova metoda ima ograničenja u pogledu veličine poslanih podataka i nije prikladna za slanje lozinki i povjerljivih informacija.
post - podaci iz obrasca se dodaju kao http zahtjev. Metoda je pouzdanija i sigurnija od get i nema ograničenja u veličini.
formnovalidate Atribut specificira da se podaci obrasca ne trebaju provjeravati nakon podnošenja. Određeno samo za dugmad tipa type="submit".
formtarget Atribut određuje u kojem prozoru će se prikazati rezultat nakon slanja obrasca. Određeno samo za dugmad tipa type="submit". Nadjačava vrijednost ciljnog atributa specificiranog za element .
_blank - učitava odgovor u novi prozor/karticu
_self - učitava odgovor u isti prozor (podrazumevano)
_parent - učitava odgovor u roditeljski okvir
_top - učitava odgovor na cijelom ekranu
framename - učitava odgovor u okvir sa navedenim imenom.
ime Postavlja ime dugmeta, vrednost atributa je tekst. Koristi se za povezivanje sa podacima obrasca nakon slanja obrasca ili za povezivanje sa datim dugmetom(ima) u JavaScript-u.
tip Definira tip gumba. Moguće vrijednosti:
dugme - dugme na koje se može kliknuti
reset - dugme za resetovanje, vraća originalnu vrednost
submit - dugme za slanje podataka obrasca.
vrijednost Postavlja zadanu vrijednost koja se šalje kada se klikne na dugme.

8. Polje za potvrdu i radio dugmad u obrascima

Potvrdni okviri u obrascima se postavljaju pomoću konstrukcije , a prekidač - koristeći .

Polje za potvrdu, za razliku od radio dugmadi, može se postaviti na nekoliko u jednom obliku. Ako je označeni atribut naveden za potvrdne okvire, onda kada se stranica učita, potvrdni okviri na odgovarajućim poljima obrasca će već biti odabrani.

Element

Više puta smo vidjeli web stranice koje traže da unesemo neke podatke u polja za unos. HTML ima mehanizam za primanje podataka od korisnika. Naravno, ove podatke još treba obraditi, ali specijalizovani programi to rade. Razmotrimo mehanizam njihove interakcije sa web stranicama.

Dakle, korisnik je preuzeo web stranicu na kojoj se nalaze kontrole za unos informacija. Svi oni su kombinovani u zajednički agregat tzv formu. Svaki obrazac ima dugme, klikom na njega podaci koje je korisnik uneo prenose se u program za obradu. Ovaj program se nalazi na web serveru koji opslužuje ovu stranicu. Takvi programi se mogu kreirati korištenjem raznih tehnologija programiranja. Objedinjuje ih samo jedna procedura za primanje podataka sa web stranice. Podaci se prenose korišćenjem interfejsa gateway-a CGI (Common Gateway Interface). Stoga se programi za obradu često nazivaju CGI aplikacijama ili CGI skriptama.

Dakle, aplikacija prima podatke i obrađuje ih. Tada može ili poslati neki email, ili izvršiti neku operaciju u bazi podataka, ili poslati korisniku novu web stranicu, moguće radnje su ograničene samo svojstvima tehnologije i maštom programera. Uz pomoć ovakvih programa funkcionišu sve vrste sistema registracije, sistema povratnih informacija, knjiga gostiju, foruma i četovanja. Uz njihovu pomoć stvaraju se opsežniji i složeniji sistemi, na primjer, online trgovine.

Da biste kreirali takve aplikacije, još uvijek morate biti sposobni programirati i znati odgovarajuća pravila za kreiranje CGI aplikacija.

Dok ne znamo kako to učiniti, morat ćemo koristiti, opet, javno dostupne CGI skripte. Ali čak i ako dobijemo ove aplikacije, tada se obrazac za korisnički unos i dalje mora kreirati nezavisno. U ovom dijelu ćemo naučiti kako to učiniti. Forma je ograničena oznakama

I

. Između ovih oznaka nalaze se oznake koje kreiraju ovlaštenja za unos informacija i oznake za kreiranje uobičajenog sadržaja web stranice, odnosno sami autoriteti za unos mogu se smjestiti u tablicu, koja se pak u potpunosti nalazi u formi. Tag ne stvara nikakvu strukturu koja se može prikazati. Pre je namenjen za unutrašnje grupisanje objekata.

  • Tag akcija, naravno, ima niz parametara koji postavljaju svojstva kreiranog obrasca. Pogledajmo ove parametre.
  • Parametar je obavezno. Njegova vrijednost je URL koji označava lokaciju CGI aplikacije koja će obraditi podatke koje je korisnik unio koristeći kontrolu ovog obrasca. Parametar metoda ima za cilj da odredi način na koji će se podaci prenijeti u aplikaciju za obradu.. Sada ne moramo saznati koji se mehanizmi implementiraju pomoću ove ili one metode. Na ovaj ili onaj način, prateća dokumentacija za CGI aplikaciju pokazuje koji način prijenosa podataka treba koristiti.
  • Parametar Zadana ikona je dobiti. enctype koristi se za označavanje vrste podataka koji se dostavljaju iz obrasca. Obično nema potrebe za korištenjem, jer vrijednost
  • Parametar application/x-www-form-urlencoded, zadano, idealno je za veliku većinu CGI aplikacija. accept-charset koristi se u slučajevima kada korisnik prenosi ne samo informacije, već i datoteke iz obrasca u aplikaciju. U ovom slučaju, možemo eksplicitno odrediti kodiranja prenesenih datoteka. Vrijednost ovog parametra je tekstualni niz u koji je upisano jedno ili više imena kodiranja.
  • Tag prihvatiti Ako se koristi više kodiranja, njihova imena se odvajaju razmacima ili zarezima. Zadana vrijednost je
  • Parametar nepoznato koji govori serveru da mora otkriti korištena kodiranja

. Između ovih oznaka nalaze se oznake koje kreiraju ovlaštenja za unos informacija i oznake za kreiranje uobičajenog sadržaja web stranice, odnosno sami autoriteti za unos mogu se smjestiti u tablicu, koja se pak u potpunosti nalazi u formi. Tag specificira tipove datoteka koje treba prenijeti. Obično se ne koristi, budući da je server sasvim sposoban da adekvatno prepozna vrstu datoteke koja se prima. ime omogućava vam da navedete jedinstveno ime za obrazac. Naravno, na jednoj web stranici može biti nekoliko formi. U ovom slučaju, vrijednosti parametara imena ne bi se trebale podudarati.

sa svojim završnim blizancem

, u suštini, kreirati kontejner za postavljanje organa za unos informacija. Većina ovih ulaza se implementira pomoću oznake



<р>. Hajde da to demonstriramo malim primerom (slika 1.32).< input type="text">






Listing 1.33 "http://www.w3.org/TR/html4/strict.dtd">

Polje za unos reda teksta Rice. 1.32.

  • Parametar Prozor pretraživača koji prikazuje rezultat datoteke prikazan na Listingu 1.33 Dakle, na ilustraciji možete vidjeti da smo uspjeli kreirati polje za unos teksta i dugme, kada se klikne, podaci koje unese korisnik će biti poslani CGI aplikaciji na obradu. A ako pogledamo listing kod, vidjet ćemo da su i gumb i polje za unos kreirani pomoću iste oznake . Svojstva ove oznake se podešavaju pomoću njenih brojnih parametara, koje ćemo sada razmotriti. tip Zadana vrijednost je tekst. Ove vrste ćemo detaljnije pogledati malo kasnije.
  • Parametar nepoznato dizajniran za postavljanje jedinstvenih imena za svaku kontrolu. Iako je ovaj parametar opcionalan, toplo se preporučuje.
  • Parametar Prateća dokumentacija za CGI aplikacije mora naznačiti kako treba imenovati odgovarajuća tijela za unos informacija. vrijednost Prateća dokumentacija za CGI aplikacije mora naznačiti kako treba imenovati odgovarajuća tijela za unos informacija. koristi se za određivanje podrazumevane vrednosti prikaza za dugmad i polja za unos teksta.
  • Parametar Ako koristimo radio dugmad, onda vrijednost parametra neće biti vidljivo korisniku, ali to je vrijednost koju će aplikacija za obradu CGI dobiti ako korisnik odabere odgovarajuće radio dugme.<provjereno Koristi se samo za nezavisne prekidače i radio dugmad. Postavlja njihovo početno stanje. Ako se ovaj parametar unese u oznaku
  • Parametar unos>, prekidač će se prebaciti u uključeno stanje. Parametar se koristi bez vrijednosti.
  • Tag samo za čitanje onemogućeno
  • Parametar čini kontrolu nedostupnom za upotrebu od strane korisnika. Parametar se koristi bez vrijednosti. Primjenjuje se samo na unos teksta tipova lozinki. Korištenje ove opcije znači da se podaci prikazani u ovim poljima ne mogu mijenjati.
  • Parametar veličina obično specificira dimenzije organa za unos podataka. Ali za svaki pojedinačni tip ulaznog organa, njegovo djelovanje je specifično.
  • Parametar maxiength omogućava vam da postavite najveći mogući broj znakova koji korisnik može unijeti u polja za unos teksta. Vrijednost parametra je pozitivan cijeli broj.
  • Parametar src koristi se u slučajevima kada kreiramo kontrole unosa koje se odnose na grafiku. Vrijednost ovog parametra je URL grafičke datoteke koja sadrži prikazanu sliku.
  • Tag alt omogućava vam da kreirate kratke opise autoriteta za unos podataka koji se kreira. Ovaj opis se može prikazati kao mali savjet kada korisnik pređe mišem preko ovog ulaznog elementa.
  • Parametar tabindex zadaje broj kontrole u nizu svih objekata, fokus ulaza se pomera između njih uzastopnim pritiskom na taster tab.

pristupni ključ omogućava vam da postavite “vrući taster”, kada ga korisnik pritisne, fokus ulaza će se pomeriti na ovu kontrolu.

Objekti uključeni u formu podijeljeni su u dvije vrste - tijela za unos podataka i dugmad koja pokreću različite radnje. Prvo da vidimo kako možemo stvoriti ulazne organe.

Jedan od najčešćih objekata obrasca je jednolinijsko polje za unos. U Listingu 1.33 vidjeli smo da je kreiran korištenjem parametra tipa sa tekstom vrijednosti. Istovremeno, vrlo često moramo postaviti ograničenja na maksimalni mogući broj znakova koji korisnik može unijeti u ovo polje. Ovo ograničenje se implementira pomoću parametra maxlength.

Postoji izmjena polja za unos teksta u jednom redu, koje je namijenjeno posebno za unos osjetljivih informacija, na primjer, lozinke. Prikazuju uneseni tekst i zamjenjuju ga zvjezdicama. Takva polja za unos se kreiraju pomoću sljedeće konstrukcije:

Koristeći tip polje za potvrdu omogućava kreiranje nezavisnih prekidača. To su poznati kvadrati u kojima klikom miša možemo odabrati i ukloniti potvrdne okvire u obliku kvačica. U ovom slučaju se koristi parametar vrijednosti. Vrijednost ovog parametra će biti proslijeđena CGI aplikaciji ako korisnik označi ovaj potvrdni okvir.

Takođe možemo kreirati grupe prekidača, koje se često nazivaju radio dugmad. U ovoj grupi korisnik može odabrati i označiti samo jedno radio dugme. Svaki prekidač se kreira pomoću oznake sa parametrom tip, kojem je dodijeljena vrijednost radio. Da bi pretraživač shvatio da više radio dugmadi pripada istoj grupi, njihove vrijednosti parametara imena moraju biti iste. Ali u isto vrijeme, moraju imati različite vrijednosti za parametre vrijednosti.

Pogledajmo pravila za kreiranje i prikaz razmatranih tijela za unos informacija kao primjer.

Listing 1.34

:! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.Qrg/TR/html4/strict.dtd">
, </head><br> <form action="http://www.mysite.com/.cgi-bin/test.exe" method="post"> <br> <р>. Hajde da to demonstriramo malim primerom (slika 1.32). <input type="text"> </p> <br> <р>Polje za lozinku <input type="password"> </p><br> <р>Nezavisni prekidač <input type="checkbox" value="provjereno"> </p><br> <р>Promijeni grupu</р><br> <р>Alternativa 1 <input type="radio" name="groupl" value="checkl"> </p><br> <р>Alternativa 2 <input type»"^adio" name="groupl" value="checki checkied></p><br><r>Alternativa 3 <input type=!}"radio" name="groupl" value="check3"> </p><br> <input type="submit" value="Pošalji"> </form> <br> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </i></p><p>Ilustracija ispod (Sl. 1.33) pokazuje kako se uneseni tekst prikazuje u redovnom polju za unos iu polju za unos poverljivih informacija.</p><p>A Listing 1.34 jasno pokazuje kako možemo kreirati nezavisne radio dugmad i grupe radio dugmadi. Istovremeno smo inicijalno postavili zadano stanje za drugi prekidač u grupi. Ali korisnik, naravno, uvijek može sam odabrati traženu alternativu. <i>tip</i> Korištenje parametra <i>sa dodijeljenom skrivenom vrijednošću možemo kreirati skrivena polja. Ovo polje ne samo da ne dozvoljava korisniku da unese bilo kakve informacije, već se uopšte ne pojavljuje u okviru za prikaz. Ovu vrstu polja programeri obično koriste u službene svrhe. I koristeći vrijednost</i> fajl</p><p>možemo kreirati polje za unos imena datoteke. U ovom slučaju, pored polja za unos teksta, automatski se kreira dugme koje se zove Browse, kada se klikne, otvara se standardni dijalog za odabir datoteke.</p> <p><img src='https://i0.wp.com/tepka.ru/html4b/33.jpg' height="478" width="427" loading=lazy loading=lazy></p> <p>Pored organa za unos informacija, možemo postaviti i kontrole. <i>U ovom slučaju, to su dugmad. Obrasci koriste tri vrste dugmadi.</i></p> <p>Dugme poput "pošalji" šalje korisnički unos u aplikaciju za obradu CGI. Dugme "reset" uklanja informacije koje je korisnik unio iz kontrola za unos i prikazuje zadane informacije. Tu su i jednostavna dugmad čije reakcije možemo sami programirati koristeći skript jezike. Također, umjesto dugmeta "pošalji" možemo koristiti bilo koju grafičku sliku. Pogledajmo načine za kreiranje ovih kontrola.</p> <p><i><input type="submit" vа1uе="Подтвердить"> </i></p> <p>Rice. 1.33. <i>Prozor pretraživača koji prikazuje rezultat datoteke prikazan na Listingu 1.33</i> Prozor pretraživača sa rezultatom prikaza datoteke prikazane na listi. 1.34 <i>Prateća dokumentacija za CGI aplikacije mora naznačiti kako treba imenovati odgovarajuća tijela za unos informacija.</i> Dugme tipa "pošalji" kreira se pomoću sljedeće konstrukcije:</p> <p><i> <input type="reset" value="Kao što vidite, dugme se kreira pomoću parametra"> </i></p><p>, a natpis na njemu određen je vrijednošću parametra</p> <p><i> <input type-"button" value="."> </i></p><p>Ako trebamo kreirati dugme za brisanje polja za unos informacija, možemo koristiti sljedeći fragment koda:</p> <p><i> <input type="invage" src="http://www.mysite.com/image/pict.gif"> </i></p><p>Jasno <i>Prateća dokumentacija za CGI aplikacije mora naznačiti kako treba imenovati odgovarajuća tijela za unos informacija.</i> A za jednostavno dugme koristimo sljedeću konstrukciju: <i>maxiength</i> Dugme</p><p>Ali pored onih organa za unos informacija koje smo već razmotrili, postoje dodatni organi koji se ne implementiraju pomoću oznake <i><input> </i>.</p><p>To uključuje padajuću listu i polje za unos teksta u više redova. <i><select> </i> Padajuća lista se implementira pomoću oznake <i> </select>. </i>. <i><option>. </i> U ovom slučaju, naravno, koristi se i njegov završni par <i><select> </i> Između ovih oznaka deklariramo elemente liste pomoću oznaka</p> <ul><li>Parametar <i>nepoznato</i> Tag</li> <li>Parametar <i>čini kontrolu nedostupnom za upotrebu od strane korisnika. Parametar se koristi bez vrijednosti.</i>, naravno, ima neka svojstva koja se mogu podesiti pomoću parametara.</li> <li>Parametar <i>, kao i obično, specificira jedinstveno ime datog polja za unos, odnosno padajuće liste.</i> postavlja broj vidljivih redova prilikom proširenja liste. Naravno, na listi može biti više elemenata nego što je prikazanih redova. Ali u ovom slučaju će se prikazati samo vertikalna traka za pomicanje. Vrijednost parametra je pozitivan cijeli broj.</li> <li>Parametar <i>višestruko</i> koristi se ako želimo omogućiti korisniku da odabere više vrijednosti sa liste odjednom.</li> <li>Tag <i>alt</i> onemogućiti</li> </ul><p>uzrokuje da pretraživač prikaže datu padajuću listu, ali korisnik neće moći da je aktivira i odabere bilo koju vrijednost. <option>, kao što već znamo, postavlja serijski broj elementa za unos podataka u nizu objekata, između kojih se ulazni fokus mijenja pomoću tipke tab.</p> <ul><li>Parametar <i>I sami elementi padajuće liste kreiraju se pomoću oznaka</i>.</li> <li>Tag <i>vrijednost</i> Ove oznake također imaju svoja svojstva. Ali nema ih toliko.</li> </ul><p>odabrano</p> <p>koristi se za one elemente koji će biti označeni prema zadanim postavkama kada se aktivira padajući popis.</p> <p><i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br>specificira vrijednost koja će biti proslijeđena aplikaciji za obradu CGI ako korisnik odabere ovu određenu stavku padajuće liste. <br> <html><br> <head><title>








2 bod

sel3 3 bod

/html> Rice. 1.34. Prozor pretraživača koji prikazuje rezultat datoteke prikazan na Listingu 1.35

  • Tag ime Ostaje samo jedan element za unos podataka za razmatranje. Ovo je višelinijsko polje za unos teksta. Implementira se pomoću oznake
  • Tag redova specificira broj redova koji će se prikazati za kreirano polje za unos. U suštini, ovo je njegova visina, ali je navedena u redovima. Parametar je obavezan. Vrijednost je pozitivan cijeli broj.
  • Parametar cols specificira širinu u znakovima kreiranog polja za unos teksta. Parametar je također obavezan.
  • Parametar unos> koristi se ako polje treba učiniti neupotrebljivim.
  • Parametar samo za čitanje koristi se za kreiranje polja sa tekstom koji se ne može uređivati. Tekst u takvim poljima za unos može se samo prikazati, ali ga korisnik neće moći promijeniti.
  • Tag alt postavlja serijski broj elementa za unos podataka i niza objekata, između kojih se fokus unosa mijenja pomoću tipke tab.
  • Parametar tabindex omogućava vam da odredite tipku, kada se pritisne, fokus unosa će se automatski prenijeti na ovo polje za unos.

Sada da vidimo kako se kreiraju takva polja za unos (slika 1.35).

Listing 1.36

, u suštini, kreirati kontejner za postavljanje organa za unos informacija. Većina ovih ulaza se implementira pomoću oznake









Pored ovih polja za unos postoji još jedan objekat koji se odnosi na kreiranje obrazaca. Za određene organe za unos podataka možemo kreirati takozvane tekstualne oznake.

Na kraju krajeva, radio dugmad i nezavisni prekidači su prilično male veličine, a da biste ih aktivirali, morate precizno pritisnuti njihovo aktivno područje mišem. To nije uvijek zgodno. Stoga, u mnogim programima s dobro dizajniranim korisničkim sučeljem, takve kontrole možete aktivirati i klikom na njihov tekstualni naziv. HTML nam pruža potpuno istu priliku.

Rice. 1 .35. Prozor pretraživača koji prikazuje rezultat datoteke prikazan na Listingu 1.36

Za kreiranje sličnih tekstualnih oznaka i naslova povezanih sa određenim elementima unosa podataka, možemo koristiti oznaku Ali takve oznake ćemo moći vezati samo za ona tijela za unos podataka za koja smo eksplicitno postavili identifikacijski parametar id. Kroz to se uspostavlja korespondencija između oznake i objekta forme. Glavni parametar za oznaku Koristi se parametar for čija je vrijednost vrijednost parametra id objekta na koji je vezana ova tekstualna oznaka. Dajemo primjer stvaranja takve veze. Prvo ćemo kreirati nezavisno radio dugme, a zatim mu priložiti pridruženi tekstualni naslov. Slična operacija se izvodi koristeći sljedeći fragment koda:


Unos type="checkbox" name="check" value="checked" id="checkl"> !}

Međutim, možete učiniti bez parametra for ako je oznaka koja deklarira povezani organ za unos podataka postavljena između oznaka
I sa ovim možemo završiti razmatranje procedure za kreiranje obrazaca za unos podataka u statične HTML dokumente.

HTML. Forme i njihovi atributi

Elementi forme poznati su svim korisnicima moderne globalne mreže. To su polja za unos teksta i lozinke, standardna dugmad, radio dugmad, potvrdni okviri, padajuće liste itd. Najočigledniji slučajevi upotrebe: unos ključnih riječi u tražilice, rad s e-poštom preko web sučelja, registracija na web stranici, web upitnici, online testovi. Odmah napominjemo da upotreba formulara podrazumijeva interaktivnost i stoga je pružanje funkcionalnosti neizbježno povezano sa programiranjem (klijent ili server). Možda se u većini slučajeva obrasci koriste za prijenos podataka na server, međutim, na strani klijenta postoje zadaci u kojima je upotreba obrazaca zgodna (na primjer, kalendar ili kalkulator).

Uloga HTML-a je da opiše potrebne elemente i rasporedi ih na stranici. Svi atributi formi i njihovi elementi opisani pomoću HTML-a se prevode u odgovarajuća svojstva DOM objekata i koriste pri kreiranju JavaScript skripti.

Opisi kontrolnih elemenata obrasca dizajnirani da obezbede neophodnu funkcionalnost treba da se nalaze u kontejneru obrasca, čiji su atributi bitni u fazi razvoja skripte. Osnovni atributi elementa forme:

atribut opis moguće vrijednosti
nepoznato Ime
akcija adresa serverske skripte koja će obraditi popunjeni i dostavljeni obrazac
je obavezno. način prenosa podataka na server Parametar
post
Zadana ikona je tip sadržaja koji se koristi za slanje obrasca na server
multipart/form-data
application/x-www-form-urlencoded lista kodiranja znakova za unos podataka koje će obraditi server
cilj
onSubmit JavaScript skripta koja se pokreće prije nego što se podaci obrasca predaju serveru
onReset JavaScript skripta se izvršava kada se vrijednosti elementa obrasca resetuju na zadane vrijednosti

Nakon što smo pažljivo pročitali opise atributa, primjećujemo da je većina njih relevantna za obradu podataka obrasca od strane serverske skripte. Tri atributa imaju zadane vrijednosti (što je općenito nekarakteristično za HTML).

Međutim, svi gore navedeni atributi su formalno neobavezni

  • kada radite na strani klijenta, morate postaviti ime imena forme da biste mogli pristupiti elementima obrasca iz JavaScript skripte;
  • Slanje podataka obrasca na server zahtijeva, u najmanju ruku, specificiranje atributa akcije, koji definira skriptu za obradu na strani servera.

Značenje najmanje dva atributa treba detaljnije objasniti.

atribut metode

Atribut metode ima dvije glavne moguće vrijednosti: get (podrazumevano) i post.

Značenje ovih značenja je sljedeće. Prilikom slanja podataka metodom get, podaci obrasca se šalju serveru u zaglavlju zahtjeva, a kada se koristi post metoda, šalju se u tijelu zahtjeva. Prijenos tekstualnih podataka može se obaviti bilo kojom od ovih metoda. Ali binarni podaci se mogu poslati samo metodom pošte. Ovo se dešava kada datoteka nije preuzeta sa servera (jasan primer je prilog e-pošte). Usput, u ovom slučaju morate navesti enctype=”multipart/form-data” (pogledajte dolje za bilješke o atributu enctype).

Dakle, s izuzetkom slučaja prijenosa binarnih podataka, obje moguće metode mogu se koristiti podjednako. Ovo ni na koji način ne utiče na složenost razvoja serverske skripte koja prihvata podatke obrasca. Koja metoda je poželjnija? Ima smisla pažljivo pregledati resurse dostupne na Internetu i osigurati da se metoda get koristi u velikoj većini slučajeva (na primjer, u pretraživačima). Je li ovo neizgovoreno pravilo? Da biste odgovorili na ovo pitanje, trebali biste uporediti metode get i post u najmanje tri aspekta: količinu prenesenih podataka, sigurnost i jednostavnost korisnika.

  1. Imajte na umu da je maksimalna količina podataka prenesenih metodom get ograničena, ovisno o postavkama protokola, i ni u kom slučaju ne može premašiti 8192 KB.
  2. Prenošenje osjetljivih informacija korištenjem metode get nesumnjivo predstavlja određeni sigurnosni rizik, jer get string ostaje u logovima svih posrednih servera i proxy servera.
  3. S druge strane, možete razmisliti koja je opcija pogodnija za korisnika informacijskog resursa.

Kada se prosledi metodom get, korisnik ima zadovoljstvo da vidi podatke obrasca u adresnoj traci. Znakovi različiti od standardne latinice su kodirani. Na primjer, kod %20 odgovara razmaku. Svako od nas stalno posmatra ovu situaciju kada radi sa pretraživačima. Postavimo, na primjer, u Yandex ključnu frazu " HTML jezik" i pogledajte u adresnoj traci:

riječ " jezik" je kodiran sekvencom %FF%E7%FB%EA, a "HTML" se prenosi kao što jeste. Po prijemu takvog zahtjeva, odgovarajući serverski program će pristupiti bazi podataka i na kraju generirati i poslati listu rezultata pretraživanja pretraživaču. Da li je lijepo gledati takvu adresnu traku? br. Ali korisnik može sačuvati jedinstveni bookmark na generisanoj stranici.

Prilikom slanja putem post metode, podaci obrasca se također šalju na server. U ovom slučaju, korisnik ne vidi ništa „dodatno“ u adresnoj traci. Ali pojavljuju se i drugi problemi: pokušaj osvježavanja stranice uzrokuje poruku koja je većini korisnika nerazumljiva: “... ažuriranje stranice je nemoguće bez ponovnog slanja podataka...”. I ne možete sačuvati oznaku.

Nastavi. Čini se da bi za većinu tipičnih zadataka trebali odabrati zadanu metodu get u svim slučajevima. osim prijenos na server:

  • binarni podaci,
  • povjerljive informacije,
  • veliki obim podataka.

atribut enctype

Ovaj atribut ima dvije moguće vrijednosti:

  • application/x-www-form-urlencoded(zadano)
  • multipart/form-data

Prva vrijednost se koristi u velikoj većini slučajeva. Nema smisla to eksplicitno specificirati - već se pretpostavlja po defaultu. Drugi tip kodiranja (multipart/form-data) je specificiran u jedinom slučaju: prilikom učitavanja binarne datoteke na server. U ovom slučaju potrebno je postaviti atribut method=”post”.