Neisplativ obrazac za prijavu html. Slanje podataka obrasca. Grupiranje elemenata obrasca

💖 Sviđa li vam se? Podijelite vezu sa svojim prijateljima

Sastavili smo popis od 60 besplatnih obrazaca za prijavu koje možete koristiti na svojoj WordPress stranici, blogu, forumu itd. Svaki obrazac je temeljito testiran kako bi se osiguralo da radi i izvorni kod je dostupan.

WordPress alat za prilagodbu prijave

Obrasci na ovom popisu izrađeni su pomoću HTML/CSS-a. Ali u ovom slučaju, govorimo o najboljem dodatku za prilagodbu korisničkog sučelja WordPressa. Dolazi s više predložaka koji se mogu dodatno prilagoditi kako bi odgovarali dizajnu vaše web stranice. Pomoću ovog dodatka možete se riješiti dosadne WordPress stranice za prijavu.

Kreativni obrazac za prijavu

Jednostavan, ali kreativan obrazac za prijavu kreiran pomoću HTML-a i CSS3. Može se koristiti i kao obrazac za registraciju. Ovo je naš omiljeni predložak s ovog popisa.

Tražili smo na internetu stvarno cool obrasce za autorizaciju, ali pokazalo se da ih je teško pronaći. Zato smo odlučili da vam predstavimo našu. Ovdje je 20 obrazaca za prijavu koje je dizajnirao naš tim.

Obrazac ovlaštenja br.1

Jednostavan, kreativan i živopisan obrazac za prijavu s gradijentnom pozadinom. Možete ga koristiti za bilo koju svrhu, kao što je autorizacija u web servisu, mobilnoj ili desktop aplikaciji.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br. 2

Minimalistički i sofisticirani obrazac za prijavu s gumbom, gradijentnom ispunom, animacijom i logotipom. Koristite ga mijenjanjem potrebnih elemenata.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.3

Stranica za prijavu s pozadinskom slikom, sjenom i efektom lebdenja za gumb za prijavu.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br. 4

Možete preuzeti ovaj web obrazac i koristiti ga kako želite. Potpuno je prilagodljiv.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br. 5

Lijepa i moderna forma s opcijama prijave putem Facebooka ili Googlea. Njegovi gumbi imaju prekrasne efekte lebdenja kako bi korisnicima pružili sjajno korisničko iskustvo.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br. 6

Ako je web stranica uredna i lijepa, obrazac za prijavu ne bi se trebao razlikovati od njezinog dizajna. Evo obrasca koji će zasigurno ispuniti vaša očekivanja.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br. 7

Obrazac s tri opcije za prijavu na vaš račun: Facebook, Twitter ili e-mail. A ako korisnik još nema račun, obrazac možete povezati sa stranicom za registraciju.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.8

Još jedan moderan, moderan i lijep obrazac za prijavu. Posebno dobro izgleda na mobilnim uređajima.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br. 9

Ako želite pobjeći od čistog bijelog ili monokromatskog dizajna, obratite pozornost na ovaj oblik. Podržava dodavanje pozadinske slike ili sloja gradijenta. Postoji i mogućnost prijave putem Facebooka ili Googlea.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.10

Ovo je upravo suprotno od prethodne opcije. Izgleda minimalistički, ali u isto vrijeme vrlo uredno.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.11

Umjesto stvaranja obrasca od nule, možete upotrijebiti izvrstan predložak spreman za korištenje poput ovog.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.12

Pozadinska slika s plavim slojem sjene, ime s avatarom i polja za unos je obrazac ovlaštenja br. 12. Dodan efekt lebdenja gumbu za prijavu.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.13

Predložak podijeljenog zaslona gdje je jedna polovica za sliku, a druga za oblik.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.14

Ova zbirka sadrži jednostavne i složenije obrasce za prijavu. A predložak broj 14 je jedan od minimalističkih.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.15

Prilično minimalistički oblik, ali možete dodati banner na vrh. Zahvaljujući ovoj maloj opciji obrazac možete učiniti privlačnijim.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.16

Ovo je obrazac za prijavu sa slikom preko cijelog zaslona, ​​na čijem se vrhu nalaze polja za unos vaše prijave i lozinke, kao i gumb s efektom lebdenja.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.17

Kako biste svoj obrazac učinili personaliziranijim, možete koristiti ovaj predložak. Uključuje sliku sa strane.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.18

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.19

Živahno, energično i uzbudljivo - to je ono o čemu se radi u ovom obrascu za prijavu. Potpuno je responzivan, optimiziran za mobilne uređaje i kompatibilan sa svim većim web preglednicima.

preuzimanje datoteka

Pregled

Obrazac ovlaštenja br.20

Gradijentna pozadina, crni gumb s efektom lebdenja, polja za unos prijave i lozinke, kao i odjeljak "Zaboravili ste lozinku?". Sve to nalazi se u obrascu ovlaštenja br.20.

preuzimanje datoteka

Pregled

Padajući obrazac za prijavu

preuzimanje datoteka

Plutajući obrazac za prijavu

Dizajnirano za obrasce za pretplatu pomoću kartica i oznaka.

preuzimanje datoteka

Jednostavan obrazac za autorizaciju

Ono što je zaustavljalo ljude kada su se htjeli prijaviti na WordPress stranicu je to što je izgledalo previše jednostavno. Ovaj oblik zadržava popularni dizajn, ali mu dodaje boju.

preuzimanje datoteka

Jednostavna prijava – obrazac za prijavu

Kada kliknete gumb “Klikni me” koji se nalazi u gornjem desnom kutu, obrazac za prijavu će se putem animacije pretvoriti u obrazac za registraciju.

preuzimanje datoteka

Prijavite se sa samostalnim SCSS obrascem

Ovo je obrazac kreiran pomoću SCSS-a. CSS proširenje koje dodaje novu funkcionalnost i eleganciju osnovnom jeziku. Omogućuje vam korištenje varijabli, ugniježđenih pravila, ugrađeni uvoz i još mnogo toga.

preuzimanje datoteka

Animirani obrazac za prijavu

Ovo je animirani obrazac za prijavu, a gornji dio "Hej, prijavite se već" pretvara se u obrazac kada kliknete gumb.

preuzimanje datoteka

Obrazac za prijavu koristeći CSS3 i HTML5

Primjer kako stvoriti jednostavan obrazac za prijavu pomoću HTML5 i CSS3. Koristi pseudo elemente (:after i :before) za stvaranje efekta više stranica. Ovaj obrazac koristi HTML5 za pojednostavljenje provjere i prezentacije podataka.

preuzimanje datoteka

Prijavite se s efektom trešnje

Ako ste unijeli pogrešnu lozinku, bit ćete obaviješteni prekrasnim efektom trešnje. Jednostavno i učinkovito rješenje.

preuzimanje datoteka

Boxy obrazac za prijavu

preuzimanje datoteka

Animirani obrazac za prijavu

Uredan mali obrazac za prijavu Kada kliknete na gumb "PRIJAVA" koji se nalazi s lijeve strane, prikazat će se obrazac za prijavu.

HTML oznake koje definiraju HTML forme na stranici

Izrađujemo web stranice i pojedinačne stranice na internetu za komunikaciju s posjetiteljima.

HTML obrasci koriste se za registraciju posjetitelja na stranici, za interaktivne ankete i glasovanje, omogućuju vam slanje poruka, kupnju i tako dalje. HTML Obrazac je kreiran s jednom svrhom: prikupljanje i naknadni prijenos informacija za obradu softverskom skriptom ili putem e-pošte.

Primjer HTML obrasca | Unesite stranicu

Oznake, atributi i vrijednosti

  • - odrediti oblik.
  • name="" - definira naziv forme.
  • method="" - definira način slanja podataka iz forme. Vrijednosti: "get" (zadano) i "post" . Metoda "post" često se koristi jer omogućuje prijenos velikih količina podataka.
  • action="" - definira url na koji se podaci šalju na obradu. U našem slučaju - enter_data.php ..
  • - definirati elemente obrasca kao što su gumbi, prekidači, tekstualna polja za unos podataka.
  • type="text" - definira tekstualno polje za unos podataka.
  • type="password" - definira polje za unos lozinke, pri čemu se tekst prikazuje u obliku zvjezdica ili kružića.
  • type="checkbox" - definira radio gumb.
  • type="hidden" - definira skriveni element obrasca - koristi se za prijenos dodatnih informacija na poslužitelj.
  • size="25" - duljina tekstualnog polja u znakovima.
  • maxlength="30" - najveći dopušteni broj unesenih znakova.
  • value="" - definira vrijednost koja će se poslati na obradu ako se odnosi na radio gumbe ili prekidače. Vrijednost ovog atributa kao dijela tekstualnog polja ili gumba bit će prikazana kao, na primjer, Vasya ili Login u gornjem primjeru.

Primjer HTML obrasca | Komentari na stranici

Primjer HTML obrasca




Ime



pošta








Oznake, atributi i vrijednosti

  • action="http://site/comments.php" - definira url na koji će se slati podaci iz forme.
  • id="" - definira naziv i identifikator elementa forme.
  • name="" - definira naziv elementa forme.
  • - definirati tekstualno polje kao dio obrasca.
  • cols="" - određuje broj stupaca tekstualnog polja obrasca.
  • rows="" - definira broj redaka tekstualnog polja forme.

Ako između mjesto teksta, on će biti prikazan unutar polja kao primjer koji se može lako ukloniti.

Primjer HTML obrasca | Padajući popis

HTML obrasci




Oznake, atributi i vrijednosti

  • - definirajte popis s pozicijama za odabir.
  • size="" - određuje broj vidljivih pozicija na listi. Ako je vrijednost 1, imamo posla s padajućim popisom.
  • - odrediti pozicije (stavke) liste.
  • value="" - sadrži vrijednost koju će formular poslati na navedeni url na obradu.
  • selected="selected" - ističe stavku popisa kao primjer.

Primjer HTML obrasca | Popis s trakom za pomicanje

Povećanjem vrijednosti atributa size="" dobivamo popis s trakom za pomicanje:

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

HTML obrasci




Za ovu opciju koristite oznaku multiple="multiple", koja omogućuje odabir više pozicija. Njegov nedostatak omogućuje odabir samo jedne stavke.

  • type="submit" - definira gumb.
  • type="reset" - definira gumb za resetiranje.
  • value="" - definira oznaku na gumbu.
  • Pogledajte dodatno:

    Kao što već znate, web klijent ima mogućnost slanja različitih informacija web poslužitelju koristeći GET i POST zahtjeve. HTML obrasci je glavni alat za kreiranje takvih upita. U osnovi, HTML obrazac je polje ili polja za unos informacija na web stranici. Dobar primjer HTML obrasca je obrazac za unos prijave i lozinke za autorizaciju na web mjestu.

    HTML obrazac je opisan pomoću uparene oznake oblik. Ova oznaka ima dva važna atributa: metoda I akcijski. Atribut method specificira tip HTTP zahtjeva (get ili post), a atribut action specificira traženi dokument, odnosno put do datoteke čiji će se zahtjev uputiti. Put može biti apsolutan (označava domenu stranice) ili relativan. Na primjer:

    <form method = "get" action = "/login.php" > ... </obrazac>

    Postoji nekoliko različitih vrsta elemenata za unos podataka koji se uklapaju u obrazac. Element s kojim bih želio započeti zove se podnijeti:

    <input type = "submit" value = "Prijava" / > !}

    Element je gumb, klik na koji rezultira HTTP zahtjevom. Atribut vrijednost postavlja oznaku na gumb. Obrazac može sadržavati više elemenata za slanje. Da biste utvrdili koji je gumb kliknut u traženom dokumentu, trebate postaviti atribute elemenata za slanje Ime. Na primjer:

    <form method = "get" action = "/control.php" > <input type = "submit" name = "submit" value = "Add" / > !} <input type = "submit" name = "submit" value = "Edit" / > !} </obrazac>

    Prilikom formiranja zahtjeva, web preglednik će uključiti HTTP parametar koji karakterizira kliknuti submit element. Vrijednost atributa name pritisnutog gumba bit će uzeta kao naziv parametra, a vrijednost atributa value kao vrijednost. Dakle, kada kliknete gumb Dodaj, generira se sljedeći zahtjev:

    /control.php?submit=Dodaj

    i kada pritisnete gumb Uredi:

    /control.php?submit=Uredi

    Sljedeći element je najjednostavniji element za unos teksta u jednom retku. Njegov HTML kod:

    <input type = "text" name = "name" / >

    ime je potreban atribut za sudjelovanje u HTTP zahtjevu. Vrijednost ovog atributa koristit će se kao naziv HTTP parametra. Sve vrste elemenata obrasca imaju ovaj atribut.

    Također možete postaviti atribut vrijednosti za element tako da navedete tekst koji će se prema zadanim postavkama unijeti u element. Na primjer:

    <vrsta unosa = "tekst" naziv = "prijava" vrijednost = "Korisničko ime" / >

    Element lozinka koristi se za unos lozinki. Izvana je isti, ali se uneseni tekst prikazuje kao zvjezdice ili točke:

    <vrsta unosa = "lozinka" / >

    To je u načelu dovoljno za izradu najjednostavnijeg oblika ovlaštenja. Pokušajmo ga implementirati, a zatim se vratimo na razmatranje drugih vrsta elemenata.

    Kreirajmo datoteku auth.php u korijenskom direktoriju sa sljedećim sadržajem:

    <html xmlns= "http://www.w3.org/1999/xhtml"> <glava > <naslov > Autorizacija</naslov> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </glava> <tijelo > <form method = "get" action = "/auth.php" > <stol > <tr > <td > Korisničko ime:</td> <td > <vrsta unosa = "tekst" naziv = "prijava" vrijednost = "" / > </td> </tr> <tr > <td > Lozinka:</td> <td > <input type = "password" name = "pass" value = "" / > </td> </tr> </stol> <input type = "submit" value = "Prijava" / > !} </obrazac> </tijelo> </html>

    Kao što vidite, unutar oznake obrasca možete postaviti oznake koje vam pomažu da lijepo označite formu (unutra sam stavio tablicu). Obrazac sadrži polja za korisničko ime i zaporku pod nazivom login i pass. Kada kliknete "Prijava", generira se GET zahtjev za dokument /auth.php (to jest, stranica sama zahtijeva). U mom slučaju URL cijele stranice izgledao je ovako http://testna-domena3/auth.php.

    Unesite svoje podatke i kliknite na "Prijava". Stranica bi se trebala ponovno učitati. Trebala bi se promijeniti i adresa stranice. U mom slučaju to je imalo oblik:

    Http://test-domain3/auth.php?login=Joker-jar&pass=12345

    To znači da je dokument auth.php zatražen s GET parametrima koji su uneseni pomoću HTML obrasca. Postavite PHP rukovatelj na početak auth.php datoteke koja će primiti podatke o autorizaciji:

    //--Provjerite jesu li podaci preneseni if ( isset ($_GET [ "login" ] ) && isset ($_GET [ "pass" ] ) ) ( echo "Vaše korisničko ime: ". $_GET [ "prijava" ] . ", tvoja lozinka: " . $_GET["prolaz"]; Izlaz ; ) ?>

    Ako je stranica dobila prijavu i lozinku, uvjet će se pokrenuti i prikazat će se poruka. Također će biti pozvan Izlaz, što će zaustaviti daljnje izvršavanje skripte, stoga obrazac neće biti prikazan.

    Nije sigurno slati lozinku pomoću GET zahtjeva jer je vidljiva u adresnoj traci. Promijenimo vrstu zahtjeva u POST. Da biste to učinili, promijenite vrijednost atributa metode i u PHP rukovatelju za pristup nizu promijenite $_GET u $_POST. Provjerite funkcionalnost skripte.

    Sljedeći element - potvrdni okvir. Koristi se kada se od korisnika traži odgovor "da/ne":

    <vrsta unosa = "potvrdni okvir" / >

    Ako potvrdni okvir nije označen, ništa se ne prosljeđuje u parametrima. U suprotnom, parametar name se prosljeđuje s vrijednošću na. Postoji još jedna stvar. Uz potvrdni okvir u pravilu se nalazi tekst objašnjenja. Dobra je praksa za webmastera da potvrdni okvir reagira na klikove na ovaj tekst. To se radi jednostavno. Zastavi je dodijeljen određeni ID, a sam natpis ukrašen je oznakom označiti s atributom za, čija je vrijednost jednaka identifikatoru potvrdnog okvira:

    <input type = "checkbox" id = "remember" name = "remember" / > <oznaka za = "zapamti" > Zapamti me</oznaka>

    Sličan element koristi se za odabir odgovora iz skupa vrijednosti. Recimo da korisnik treba odabrati jednu od tri boje:

    <input type = "radio" id = "red" name = "color" value = "red" / > !} <oznaka za = "crveno" > Crvena</oznaka> <br/> <input type = "radio" id = "green" name = "color" value = "green" / > !} <oznaka za = "zeleno" > zelena</oznaka> <br/> <input type = "radio" id = "blue" name = "color" value = "blue" / > !} <oznaka za = "plavo" > Plava</oznaka> <br/>



    Imajte na umu da svi elementi imaju istu vrijednost naziva. Možete odabrati samo jednu vrijednost. HTTP parametar sadržavat će, na primjer, vrijednost odabranog elementa boja=plava.

    Da bi jedan od elemenata bio inicijalno odabran, npr. prvi, potrebno mu je dati atribut provjereno sa značenjem provjereno(XHTML standard):

    <input type = "radio" id = "red" name = "color" value = "red" checked = "checked" / > !}

    Postoji poseban element za unos velikog višerednog teksta tekstualno područje:

    <textarea rows = "6" cols = "20" name = "text" > Tekst unutar elementa</textarea>

    Tekst unutar elementa

    Ovaj element, kao što vidite, razlikuje se od prethodnih. To je uparena oznaka, a tekst se ne nalazi u atributu, već u tijelu oznake. Element također ima atribut imena. Korištenje atributa redaka možete postaviti broj linija u elementu, cols- broj znakova u retku. Element textarea koristi se, u pravilu, u POST formama, jer... uključuje unos dugog teksta (na primjer, obrazac za poruku na forumu).

    Padajući popis. Vjerojatno ste naišli na takav element u programima. Omogućuje odabir jedne vrijednosti iz skupa. Kod elementa također nije sasvim običan. Prvo se kreira element spremnika Izaberi, daje mu se atribut imena:

    <odaberite naziv = "gradovi" > </odaberi>

    Elementi popisa smješteni su unutar spremnika. Element popisa je uparena oznaka opcija, svaki element dobiva atribut vrijednosti. Natpis elementa upisan je u tijelo elementa:

    <odaberite naziv = "grad" > <vrijednost opcije = "msk" > !} Moskva</opcija> <vrijednost opcije = "vlad" > !} Vladivostok</opcija> <vrijednost opcije = "nsk" > !} Novosibirsk</opcija> </odaberi>

    HTTP zahtjev prosljeđuje parametar s nazivom name i vrijednošću odabranog elementa, na primjer grad=vlad. Prema zadanim postavkama, prvi element popisa je odabran, ako želite da bude odabran drugi element, dodijelite mu atribut odabran sa značenjem odabran:

    <vrijednost opcije = "vlad" selected = "selected" > !} Vladivostok</opcija>

    Popis vrijednosti. Ako je odabranom elementu dodan atribut veličina s numeričkom vrijednošću, padajući popis će se pretvoriti u popis vrijednosti. U ovom slučaju, vrijednost atributa veličine će odrediti okomitu veličinu elementa:

    <odaberite naziv = "grad" veličina = "3" > <vrijednost opcije = "msk" > !} Moskva</opcija> <vrijednost opcije = "vlad" > !} Vladivostok</opcija> <vrijednost opcije = "nsk" > !} Novosibirsk</opcija> </odaberi>

    Moskva Vladivostok Novosibirsk

    Ako je odabranom elementu dodan atribut višestruki sa značenjem višestruki(XHTML standard), tada će biti moguće odabrati više od jednog elementa u isto vrijeme (npr. dok držite pritisnutu tipku Ctrl). U ovom slučaju, svi odabrani elementi s istim imenima bit će poslani u HTTP zahtjevu, na primjer: town=msk&town=vlad&town=nsk.

    Ponekad je potrebno proslijediti parametar u HTTP zahtjevu koji korisnik ne bi trebao uređivati, a ponekad čak i vidjeti. Recimo da implementirate obrazac za uređivanje vijesti. HTTP zahtjev mora sadržavati identifikator ove vijesti. Za takve slučajeve postoji skriveni element HTML obrazaca:

    <input type = "hidden" name = "param" value = "" / >

    Ovaj element neće biti vidljiv na obrascu, ali će HTTP parametar ime=vrijednost biti proslijeđen kada se podnese zahtjev.

    Ponekad element koji čisti formu može biti koristan. Gumb na koji se pritiskom brišu svi podaci koje je korisnik upisao u obrazac:

    <input type = "reset" value = "Clear" / > !}

    Navedeni elementi imaju dva posebna atributa:

    readonly="readonly" - zabranjuje promjenu informacija u elementu (način samo za čitanje);
    disabled="disabled" - čini element neaktivnim.

    Tu je i element za odabir datoteke koja će biti uploadana na web poslužitelj kada se obrazac preda, no o tome će vjerojatno biti riječi u posebnom članku.

    Bok svima. Tako smo naučili nekoliko elemenata za stvaranje oblika. Vrijeme je da udružimo svoje znanje kako bismo riješili veći problem. Kreirajmo najjednostavniji obrazac za autorizaciju na web mjestu. Da bismo to učinili, potrebna su nam dva polja, stvaramo i prilažemo im potpise.

    Prvo polje je za prijavu, drugo je za lozinku. A s drugim nije tako jednostavno. Budući da je to trenutno samo polje za unos teksta.

    Rezultat u pregledniku:

    Da bi se tekst uneseni u njemu zamijenio zvjezdicama, kao što je uobičajeno za polje ove vrste, morate učiniti jednu jednostavnu radnju. Naime, zamijeniti vrijednost atributa tip na lozinka:

    Proizlaziti:

    Gumb za slanje obrasca

    Izvoli. Naš obrazac je gotovo spreman. Sada, da biste dovršili njegovu izradu, trebate izraditi gumb koji će se koristiti za slanje obrasca. Problem je riješen pomoću oznake s tipom podnijeti.

    Ako gumb treba imati neku vrstu natpisa, onda se to može učiniti pomoću atributa vrijednost. Na vama je hoćete li imenovati gumb ili ne, ali ako to učinite, poslužitelj će primiti to ime kao i vrijednost gumba.

    U pravilu, naziv gumba za slanje obrasca potreban je kada obrazac ima nekoliko gumba od kojih svaki izvršava određenu radnju. Zahvaljujući tome, poslužitelj, primajući naziv i vrijednost gumba od preglednika, razumije koji je gumb korisnik kliknuo i što, prema tome, treba učiniti.

    Kao rezultat toga, kôd za naš obrazac bit će sljedeći:

    Rezultat u pregledniku:

    Sam obrazac obično je namijenjen za primanje informacija od korisnika za daljnje slanje na poslužitelj, gdje podatke obrasca prima program rukovatelj. Takav program može biti napisan u bilo kojem programskom jeziku na strani poslužitelja kao što je PHP, Perl itd. Adresa programa navedena je u atributu akcije oznake

    , kao što je prikazano u primjeru 1.

    Primjer 1: Slanje podataka obrasca

    HTML5 IE Cr Op Sa Fx

    Podaci obrasca

    U ovom primjeru, podaci obrasca naznačeni atributom imena (prijava i lozinka) bit će proslijeđeni u datoteku na /example/handler.php. Ako atribut akcije nije naveden, prijenos se odvija na adresu trenutne stranice.

    Prijenos na poslužitelj odvija se na dvije različite metode: GET i POST, za postavljanje metode u oznaci

    Koristi se atribut metode, a njegove vrijednosti su ključne riječi get i post. Ako atribut metode nije naveden, podaci se prema zadanim postavkama šalju poslužitelju koristeći GET metodu. U tablici Slika 1 prikazuje razlike između ovih metoda.

    Pomoću adresne trake preglednika lako se može odrediti koja se metoda koristi. Ako se u njemu pojavi upitnik, a adresa izgleda ovako, onda je ovo definitivno GET.

    http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

    Jedinstvena kombinacija parametara u adresnoj traci jedinstveno identificira stranicu, pa se stranice s adresama ?q=node/add i ?q=node smatraju različitima. Ovu značajku koriste sustavi za upravljanje sadržajem (CMS, sustav za upravljanje sadržajem) za izradu mnogih web stranica. U stvarnosti se koristi jedna datoteka koja prima GET zahtjev i prema njemu generira sadržaj dokumenta.

    Dolje su navedene tipične primjene ovih metoda na stranicama.

    DOBITI

    Prijenos malih tekstualnih podataka na poslužitelj; Pretraživanje stranice.

    Tražilice i obrasci za pretraživanje web-mjesta uvijek se šalju metodom GET, što vam omogućuje dijeljenje rezultata pretraživanja s prijateljima, slanje poveznice poštom ili objavu na forumu.

    POST

    Prijenos datoteka (fotografija, arhiva, programa itd.); slanje komentara; dodavanje i uređivanje poruka na forumu, blogu.

    Prema zadanim postavkama, obrazac se obrađuje u trenutnoj kartici preglednika; međutim, prilikom slanja obrasca možete promijeniti ovaj parametar i otvoriti obrasca u novoj kartici ili okviru. Ovo ponašanje navedeno je kroz "naziv konteksta", koji je vrijednost ciljnog atributa oznake . Popularne vrijednosti su _blank za otvaranje obrasca u novom prozoru ili kartici i naziv okvira koji je određen atributom name oznake

    U ovom primjeru, kada kliknete gumb Pošalji, rezultat slanja obrasca otvara se u okviru koji se zove područje.

    Elementi obrasca tradicionalno se postavljaju unutar oznake

    , čime se određuju podaci koji će se prenijeti na poslužitelj. U isto vrijeme, HTML5 ima mogućnost odvajanja forme od njenih elemenata. To je učinjeno radi praktičnosti i svestranosti, tako da složeni izgled može sadržavati nekoliko obrazaca koji se ne bi trebali međusobno presijecati ili, na primjer, neki elementi se prikazuju pomoću skripti na jednom mjestu na stranici, a sam obrazac nalazi se na drugom. . Veza između obrasca i njegovih elemenata u ovom se slučaju ostvaruje preko identifikatora obrasca, a elementima treba dodati atribut obrasca s vrijednošću jednakom ovom identifikatoru (primjer 3).

    Primjer 3: Povezivanje obrasca s poljima

    HTML5 IE Cr Op Sa Fx

    Oblik

    U ovom primjeru oznaka

    je jedinstveno identificiran putem identifikatora autentifikacije, a form="auth" se dodaje u polja koja treba poslati putem obrasca. U ovom slučaju, ponašanje elemenata se ne mijenja kada se klikne na gumb, prijava i lozinka se šalju rukovatelju handler.php.

    Iako su parametri prijenosa obrasca tradicionalno navedeni u oznaci , također se mogu prenijeti na gumbe za slanje obrasca (

    reci prijateljima