Neograničeno podnesite html. Čudno ponašanje slanja html obrasca. Primjer: korištenje podnesi i poništi

Dugo sam razmišljao o tome koji naslov dati ovom članku i nisam mogao smisliti ništa bolje. Ovo je jedini naslov koji barem nekako odražava bit onoga što je navedeno. Da budem iskren, ne znam kako se točno zove, pa sam članak nazvao na isti način na koji sam pokušao pronaći barem neke informacije u tražilici na ovu temu.

Na jednoj od stranica morao sam koristiti dva gumba u jednom obrascu podnijeti, koji bi poslao ispunjene podatke različitim PHP "rukovateljima", ovisno o pritisku gumba. Google mi nije odgovorio ništa razumno, očito samo nisam pitao kako treba, pa sam se morao sam dosjetiti.

Izložio sam to na vaše razmatranje.

Suština problema

Nakon što sam ga sam implementirao, ipak sam pronašao nekoliko rješenja koja su se temeljila na korištenju običnih gumba na koje je bio pričvršćen JS.

Proveo sam svoj plan na gotovo isti način, ali koristio sam standardni tip slanja. Čini se da sve radi i po mom mišljenju moje je rješenje logičnije točno.

Ovo rješenje će jednako dobro funkcionirati i na besplatnom hostingu i ako odaberete profesionalni hosting. Ova metoda je u potpunosti implementirana na strani klijenta i ne bi trebala usporiti poslužitelj.

Kako bih lakše razumio što želim i kako to radi, evo stvarno radnog primjera, u obliku obrasca koji ima 2 submita koji šalju podatke na različite stranice.

Obrasci su dizajnirani za slanje podataka od korisnika do web poslužitelja. Obrasci u HTML-u mogu se sastojati od tekstualnih polja i tekstualnih područja, potvrdnih okvira i radio gumba te padajućih popisa. Sve su to elementi forme. Svaki element služi za prenošenje nekog značenja web mjestu.
U svojoj srži, HTML obrazac je web stranica na kojoj vidite područja za unos svojih podataka. Nakon što ispunite obrazac i kliknete Pošalji, informacije iz obrasca se pakiraju i šalju web poslužitelju na obradu skriptom na strani poslužitelja (datoteka rukovatelja). Nakon obrade, druga web stranica vam se vraća kao odgovor. Sljedeća slika jasno pokazuje kako obrazac funkcionira:

Nema ništa teško u izradi HTML obrazaca. Najlakši način da dobijete ideju o obrascima je da raščlanite mali HTML kod i zatim vidite kako to radi. Sljedeći primjer prikazuje sintaksu za stvaranje jednostavnog HTML obrasca:

Primjer: Jednostavan HTML obrazac

Probajte sami"

Moj prvi obrazac:
Ime:
Prezime:

Jednostavna forma

Element

Obrasci se umetnu u web stranice pomoću elementa . Omogućuje spremnik za sav sadržaj obrazaca, uključujući elemente kao što su tekstualna polja i gumbi, kao i sve druge HTML oznake. Međutim, ne može sadržavati drugi element .
Za slanje obrasca na poslužitelj koristite gumb “Pošalji”, isti rezultat dobit ćete ako pritisnete tipku “Enter” unutar obrasca. Ako gumb "Pošalji" nije prisutan na obrascu, za slanje se može koristiti tipka "Enter".
Većina atributa elementa utjecati na obradu obrasca, a ne na njegov dizajn. Od kojih su najčešći akcijski I metoda. Atribut akcijski sadrži URL na koji će se podaci u obrascu poslati na obradu od strane poslužitelja. Atribut metoda je HTTP metoda koju preglednici moraju koristiti za slanje podataka obrasca.

Element

Gotovo sva polja obrazaca kreirana su pomoću elementa (od engleskog unosa - ulaz). Izgled elementa mijenjati ovisno o vrijednosti atributa tip:

Ovdje su neke vrijednosti atributa tip:

Unos teksta i lozinke

Jedna od najjednostavnijih vrsta elemenata obrasca je tekstualno polje, dizajnirano za unos teksta u jednom retku. Ova vrsta unosa teksta postavljena je prema zadanim postavkama i stoga će se prikazati polje od jednog retka ako zaboravite navesti atribut tip. Da biste dodali polje za unos teksta u jednom retku u obrazac, trebali biste unutar elementa registrirajte atribut tip s tekstualnom vrijednošću:

Polje za unos lozinke vrsta je uobičajenog tekstualnog polja. Podržava iste atribute kao tekstualno polje s jednim redom. Atribut Ime postavlja naziv polja za unos lozinke koje će biti poslano na poslužitelj zajedno sa lozinkom koju je unio korisnik. Da biste stvorili polje za lozinku, trebate postaviti atribut zaporke na tip(lozinka (engleski) - lozinka):

Primjer kreiranja obrasca s poljem za lozinku:

Primjer: Polje za lozinku

Probajte sami"

Vaša prijava:

Lozinka:

Vaša prijava:

Lozinka:

Možete koristiti atribut u kombinaciji s ovim atributom najveća duljina, čija vrijednost određuje najveći broj znakova koji se mogu unijeti u dati niz. Također možete postaviti duljinu polja za unos pomoću atributa veličina. Prema zadanim postavkama, većina preglednika ograničava širinu tekstualnog polja na 20 znakova. Za kontrolu širine novih elemenata obrasca, umjesto atributa veličina, preporučujemo korištenje Cascading Style Sheets (CSS).
Atribut vrijednost određuje vrijednost koja se prema zadanim postavkama prikazuje u tekstualnom polju kada se obrazac učita. Unosom zadane vrijednosti u polje možete korisniku objasniti koje točno podatke i u kojem formatu želite da korisnik ovdje unese. Ovo je poput uzorka, jer je korisniku mnogo prikladnije ispuniti obrazac, videći primjer ispred sebe.

Prekidači (radio)

Element tip radio stvara prekidače koji koriste logički princip "ILI", omogućujući vam da odaberete samo jednu od nekoliko vrijednosti: ako odaberete jednu poziciju, tada sve ostale postaju neaktivne. Osnovna sintaksa preklopnog elementa je:

Atribut Ime za prekidače je potreban i igra važnu ulogu u kombiniranju nekoliko elemenata prekidača u grupu. Za kombiniranje radio gumba u grupu, morate postaviti istu vrijednost atributa Ime i različite vrijednosti atributa vrijednost. Atribut vrijednost postavlja vrijednost odabranog radio gumba za slanje na poslužitelj. Vrijednost svakog elementa radio gumba mora biti jedinstvena unutar grupe tako da poslužitelj zna koju je opciju odgovora korisnik izabrao.
Prisutnost atributa provjereno(s engleskog - instaliran) na elementu prekidača označava koja od predloženih opcija treba biti odabrana prema zadanim postavkama prilikom učitavanja stranice, ako je potrebno. Ovaj atribut može se postaviti samo za jedan element radio gumba iz grupe:

Probajte sami"

Koliko si star?

ispod 18
od 18 do 24
od 25 do 35
više od 35

Koliko si star?

ispod 18
od 18 do 24
od 25 do 35
više od 35

Potvrdni okviri

Element tip potvrdni okvir stvara potvrdne okvire koji su slični radio gumbima jer korisniku daju mogućnost odabira između opcija koje nudite. Glavna razlika od radio gumba je u tome što posjetitelj može odabrati nekoliko opcija odjednom, a same zastavice označene su kvadratićima, a ne krugovima. Kao i kod radio gumba, grupa potvrdnih okvira stvara se dodjeljivanjem iste vrijednosti atributa svakoj stavci Ime, međutim, svaki potvrdni okvir ima svoje značenje. Osnovna sintaksa potvrdnog okvira je:

Atribut provjereno, kao i kod radio gumba, navodi da potvrdni okvir treba biti označen prema zadanim postavkama kada se stranica učita. Ovaj se atribut može postaviti istovremeno za nekoliko grupnih potvrdnih okvira.
Sljedeći primjer korištenja potvrdnih okvira ima nekoliko zadanih izbora odgovora:

Primjer: korištenje radio gumba

Probajte sami"

Jazz
Blues
Rock
šansona
Zemlja

Koje žanrove glazbe voliš?

Jazz
Blues
Rock
šansona
Zemlja

Gumbi za slanje i poništavanje

Element tip podnijeti stvara gumb koji, kada se klikne, šalje preglednik poslužiteljskoj skripti za obradu podataka koje korisnik unese u obrazac. Ako kreiramo gumb koji briše obrazac, tada dodjeljujemo atribut tip"reset" vrijednost. element tip podnijeti može se dodijeliti izborni atribut Ime. Atribut vrijednost koristi se u ovom elementu za određivanje teksta koji označava oznaku na gumbu. Preglednici prema zadanim postavkama imaju napisano "Pošalji" na gumbu; ako niste zadovoljni ovim natpisom, unesite ga sami. Budući da se stilovi gumba za potvrdu mogu razlikovati u različitim preglednicima, bolje je sami prilagoditi stil gumba pomoću CSS alata ili koristiti grafičke gumbe.
Stvaranje gumba za potvrdu i brisanje:

Primjer: korištenje podnesi i poništi

Probajte sami"

Klikom na gumb Reset poništava sve podatke koje je unio korisnik.

Atribut akcije.

Glavni za element

Datoteka za obradu nalazi se na poslužitelju mojtestserver.com u mapi imenska mapa i naziv skripte poslužitelja koja će obraditi podatke - obrabotchik.php. Njemu će se prenijeti svi podaci koje ste unijeli u obrazac na web stranici. Ekstenzija .php označava da navedeni obrazac obrađuje skripta napisana u PHP-u. Sam rukovatelj može biti napisan na drugom jeziku, na primjer to može biti skriptni jezik Python, Ruby itd.
Preporučljivo je uvijek postaviti vrijednost atributa akcijski. Ako obrazac treba proslijediti vrijednosti na istu stranicu na kojoj se nalazi, navedite prazan niz kao vrijednost atributa akcije: action="".

atribut metode

Atribut metoda određuje kako se informacije trebaju prenijeti na poslužitelj. Način podnošenja obrasca koji odaberete ovisi o podacima koje želite poslati uz obrazac. Količina ovih podataka ovdje igra glavnu ulogu. Najpopularnije su dvije metode prijenosa izvornih podataka obrasca iz preglednika na poslužitelj: DOBITI I POST. Metoda se može postaviti na bilo koju koju odaberete, a ako je ne navedete, koristit će se zadana DOBITI. Razmotrimo upotrebu svakog od njih.

POST metoda

metoda POST paketi formiraju podatke i šalju ih na poslužitelj, a da korisnik to ne primijeti, jer su podaci sadržani u tijelu poruke. Web preglednik, kada koristite metodu POSTšalje zahtjev poslužitelju koji se sastoji od posebnih zaglavlja iza kojih slijede podaci obrasca. Budući da je sadržaj ovog zahtjeva dostupan samo poslužitelju, metoda POST koristi se za prijenos povjerljivih podataka kao što su lozinke, podaci o bankovnim karticama i drugi osobni podaci korisnika. metoda POST također pogodan za slanje velikih količina informacija, jer za razliku od metode DOBITI, nema ograničenja u broju prenesenih znakova.

GET metoda

Kao što već znate, glavni zadatak preglednika je primanje web stranica od poslužitelja. Dakle, kada koristite metodu DOBITI, vaš preglednik jednostavno dohvaća web stranicu kao i uvijek. metoda DOBITI također omotava podatke obrasca, ali ih dodaje na kraj URL-a prije slanja zahtjeva poslužitelju. Da biste razumjeli kako metoda funkcionira DOBITI, da vidimo na djelu. Otvorite prvi primjer iz ove lekcije (Primjer: Jednostavan HTML obrazac) u Notepadu (na primjer Notepad++) i napravite malu promjenu u HTML kodu:

oni. zamijeniti POST na DOBITI.
Spremite datoteku pod imenom naziv_datoteke.html i osvježite stranicu preglednika (F5), zatim ispunite obrazac npr Vasya Pupkin, i kliknite gumb "Pošalji". U adresnoj traci vašeg preglednika vidjet ćete nešto poput ovoga:

File_name.html?ime=Vasya&prezime=Pupkin

Sada možete vidjeti naziv svakog elementa obrasca, kao i njegovu vrijednost, upravo ovdje u URL-u.
URL je od ostalih podataka obrasca odvojen upitnikom, a nazivi i vrijednosti varijabli odvojeni su znakom & (&) .
Ovu metodu treba koristiti ako ne prenosite velike količine informacija.
Ova metoda neće funkcionirati ako su podaci u vašem obrascu osjetljivi, poput pohranjivanja broja bankovne kartice ili lozinke.
Osim toga, metoda DOBITI nije prikladan ako želite poslati datoteke na poslužitelj zajedno s obrascem.

Grupiranje elemenata obrasca

Elementi obrasca koji su povezani po značenju mogu se grupirati između oznaka

. Prikazat će se preglednik

u obliku okvira oko skupine elemenata oblika. Izgled okvira može se promijeniti pomoću Cascading Style Sheets (CSS).
Da biste dodali naslov za svaku grupu, trebat će vam element , koji navodi tekst naslova grupe koji će biti ugrađen u okvir.

S pojavom HTML5, obrasci su postali svestraniji. Element unosa sada može sadržavati adrese e-pošte, datume i više, što se može označiti kao potrebno bez korištenja javascripta - a to su samo neke od najvrjednijih značajki. Također, sada možete koristiti nekoliko gumba za slanje za jedan obrazac, a sada je moguće premjestiti gumb za slanje izvan obrasca.

Više prijava unutar jednog obrasca

Donedavno ste u obrazac mogli umetnuti samo jedan gumb za slanje, inače bi obrazac obrađivao samo zadnji gumb. Dodavanjem method="post" i url-a elementu forme "form" dobili smo radnu formu.

Sada se situacija promijenila - u HTML su dodana nova svojstva "formmethod" i "formaction". Omogućuju vam da dodate metodu objave i url izravno na gumb "pošalji", tako da ne morate ništa dodavati u obrazac. Dodavanje ovih parametara gumbu "pošalji", a ne obrascu, daje veću fleksibilnost obrascu. Sada možete napraviti onoliko gumba koliko je potrebno za obrazac.

Sada svaki gumb "pošalji" pripada drugom URL-u, a sve to eliminira potrebu za pisanjem javascript koda tijekom izgleda. Sve ovo radi dobro i sada kada kliknete na gumb, obrazac će primiti formmethod i formation, koji će prebrisati standardnu metodu i parametre akcije. Ako obrazac sadrži uobičajeni gumb "pošalji" bez novih parametara, vratit će vrijednosti obrasca postavljene za element obrasca.

Formmethod i formation svojstva podržavaju svi popularni preglednici

Elementi obrasca (unos, odabir, textarea) izvan obrasca

Opće je prihvaćena činjenica da se svi elementi forme koji joj pripadaju moraju nalaziti unutar elementa

Danas atribut forme podržavaju svi popularni preglednici, s izuzetkom Internet Explorera (do verzije 10).

Ovo pitanje je vjerojatno jedno od TOP 10 pitanja na forumima :) Najvjerojatnije je to zahtjev dizajnera ili kupca.

Dakle, rješenje je na prvi pogled jednostavno:

<a href = "#" onclick = "document.getElementById("myform").submit(); return false;"> Poslati</a>

Ali onda se (čudno) postavlja sljedeće pitanje: Što ako je JS onemogućen za posjetitelja?

Promijenimo naš kod u:

<input type = "submit" value = "Submit" class = "link" / > !}

I dodajmo malo JS-a:

addEvent(window, "load" , windowLoad) ;
/* Dodavanje obrađivača događaja u više preglednika */
funkcija addEvent(obj, evType, fn) (
if (obj.addEventListener) (
obj.addEventListener(evType, fn, false);
) else if (obj.attachEvent) (
obj.attachEvent("on" + evType, fn);
}
}
/* Dobivanje nadređenog oblika za element */
funkcija getParentForm(obj) (
while ((obj = obj.parentNode ) ) (
if (obj.nodeName == "FORM" ) (
pauza ;
}
}
vratiti obj;
}
/* Tražimo sve gumbe za slanje s klasom veze i zamjenjujemo ih vezama */
funkcija windowLoad() (
var buttons = document.getElementsByTagName("input" ) ;
za (var i = 0; i< buttons.length ; i++ ) {

link.appendChild(document.createTextNode(buttons[ i].getAttribute("value") ));
link.setAttribute ("href" , "#" ) ;
addEvent(link, "klik" , linkKlik) ;
var roditelj = gumbi[ i].parentNode ;
parent.removeChild (gumbi[ i] ) ;
parent.appendChild(link) ;
}
}
}
/* Pošaljite obrazac klikom na poveznicu */
funkcija linkClick(e) (
var e = prozor.događaj || e;
var target = e.target || e.srcElement;
var parentForm = getParentForm(target) ;
parentForm.submit();
if (window.event) (e.returnValue = false;) else (e.preventDefault();)
}

Sada, ako je JS onemogućen, posjetitelj će vidjeti gumb umjesto veze i još uvijek će moći poslati obrazac. Ali nećemo tu stati. Neka gumb izgleda kao poveznica čak i ako je JS onemogućen. Kako bismo stilizirali gumb, promijenit ćemo oznaku u gumb, a raspon je potreban kako bismo mogli dodati podcrtavanje teksta u Firefoxu.

<gumb type = "submit" class = "link" > Poslati</span>

Također ćemo promijeniti dio JS u skladu s tim.

var buttons = document.getElementsByTagName("button");
za (var i = 0; i< buttons.length ; i++ ) {
if (buttons[ i].getAttribute("type" ) == "submit" && buttons[ i].className == "link" ) (
var link = document.createElement("a");
link.appendChild(document.createTextNode(buttons[ i].firstChild.firstChild.nodeValue));

CSS će izgledati ovako:

button.link(
/* Prva dva svojstva potrebna su za uklanjanje uvlake u IE */
preljev: vidljiv;
širina: auto;
/* Ukloni uvlaku */
margina: 0;
ispuna: 0;
/* Ukloni sve elemente dizajna gumba */
pozadina: nema;
granica: nema;
/* Normalni kursor za veze */
kursor: pokazivač;
}
/* Link je obično podvučen */
button.link span(
boja : #00f ;
tekst-ukras: podcrtano;
}

Za Firefox, također možete dodati -moz-user-select: text; tako da se tekst gumba može istaknuti, ali sumnjam da je to potrebno.

Preostali stilovi ovisit će o specifičnom dizajnu.

Nekoliko napomena:

Neće biti moguće primijeniti pseudoklase aktivne, posjećene i za IE6 i lebdjeti na gumb
Nekoliko gumba za jedan obrazac neće raditi normalno u IE6
Možeš i bez JS-a. Sve ovisi o tome koliko vam je važna prirodnost poveznice.

UPD
insa , nije kompatibilan s više preglednika (pročitajte komentare).

(obično zato što je korisnik kliknuo gumb), korisnički agent pokušava poslati obrazac na poslužitelj.