Format në PHP. Format HTML

Çfarë do të krijoni

Në këtë tutorial, unë do t'ju tregoj hap pas hapi se si të krijoni një formë kontakti pune duke përdorur kornizën më të njohur të front-end, Bootstrap, të kombinuar me AJAX dhe PHP. Ne do të shikojmë gjithashtu disa veçori të avancuara këtu, si disa animacione të çmuara CSS duke përdorur fletën e stilit animate.css, formën e pas-validimit nëpërmjet Javascript dhe përmirësimin e përvojës së përgjithshme të përdoruesit fundor me përmbajtje asinkrone.

Në kohën e shkrimit, versioni i fundit i kornizës ishte Bootstrap 3.3.5 dhe vlen të përmendet se ky udhëzim do të përdorë një ndërtim të rregullt me ​​dymbëdhjetë kolona. Ndërsa lexoni këtë udhëzues, sigurohuni që po përdorni copat dhe pjesët më të fundit të kodit siç tregohet në dokumentacionin e Bootstrap.

Struktura e përafërt e skedarit dhe dosjes

Para së gjithash, ne krijojmë një direktori rrënjë dhe vendosim skedarët dhe dosjet e mëposhtme në të:

Bootstrap-Form: ├── css/ ├── imazhe/ ├── js/ ├── scripts.js ├── php/ ├── proces.php ├──

Do të na duhet të shtojmë disa biblioteka të përparme që do të na ndihmojnë, kështu që mos kini turp dhe shkarkoni (ose shtoni lidhje të jashtme për sa vijon:

Le të supozojmë se i kemi shkarkuar ato në ruajtjen lokale dhe i kemi vendosur në dosjen e projektit, struktura e skedarit të projektit tonë tani do të duket kështu:

Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── images/ ├── js/ ├── skriptet.js ├──1.js .min. js ├── php/ ├── process.php ├── index.html

Vendosja e bazave të formularit

Hapni index.html dhe kopjoni strukturën e mëposhtme bazë HTML:

Formulari i kontaktit duke përdorur Bootstrap 3.3.4 " Më dërgoni një mesazh

Ky është shablloni ynë bazë HTML nga i cili do të krijojmë përmbajtjen e formularit. Mund të shihni se ne kemi bashkuar të gjithë skedarët e nevojshëm CSS dhe JavaScript (vini re se nuk kemi nevojë për bootstrap.js për këtë shembull të veçantë). Ne e përfshimë këtë për ta bërë më të lehtë punën me pyetjet e medias në Bootstrap. JavaScript u shkrua në fund të skedarit në mënyrë që pjesa kryesore e formularit të ngarkohej së pari.

Brenda etiketës së trupit ne kemi përfshirë një div me një klasë të col-sm-6 col-sm-offset-3. Kjo në thelb do të thotë që në ekranet e vogla sm (të vogla) duam të shfaqim një kolonë 50% të gjerë (maksimumi 12 kolona). Klasa col-sm-offset-3 shton një diferencë të majtë prej 25%, duke krijuar kështu një plan urbanistik që zë gjysmën e ekranit të disponueshëm dhe është i rreshtuar në qendër. Këtu kemi shtuar një etiketë h3 dhe ky është fillimi i bazës së formës sonë. Sigurohuni që të aplikoni ID-në në këtë formular që të mund ta lidhim ngjarjen jQuery më vonë.

Ai që nuk rrezikon nuk pi shampanjë

Kur krijojmë elementë të formës, ne mund të kopjojmë/ngjitim ose shkruajmë kodin e mëposhtëm në etiketa:

Emri Email Mesazhi Dërgo Mesazhi u dërgua!

Përdoruesi do të ndërveprojë me të gjitha këto fusha dhe butona. Një div prind që i është caktuar rreshtit të klasës - sintaksë klasike e Bootstrap, krijon një rresht elementësh col. Kolonat në Bootstrap krijojnë mbushje të brendshme ose ndarje - shtimi i një linje rreth tyre do të heqë mbushjen majtas dhe djathtas dhe kolonat përshtaten në mënyrë të përkryer në kontejnerin kryesor.

Ne kemi krijuar dy kolona me një klasë col-sm-6 (50%) të cilat do t'i përdorim për të ndarë formën tonë. Në kolonën e parë col-sm-6 krijuam një etiketë dhe fushë për emrin, në kolonën e dytë një fushë për email. Secila prej tyre përfshin një etiketë me një atribut përkatës që i referohet fushës përkatëse. Secila prej këtyre kolonave është e mbështjellë në një klasë të grupit të formës e cila grupon në mënyrë semantike etiketën dhe fushën së bashku dhe gjithashtu shton një diferencë të vogël në fund.

Tipografia

Bootstrap ju lejon të përdorni klasat e kokës H1-H6. Këto klasa na ndihmojnë të përdorim elementë inline pa shtuar mbushje shtesë ose duke krijuar elementë blloku. Ne aplikuam klasën H4 në etiketat, duke rritur shpejt madhësinë e tyre dhe duke i bërë ato më të qarta.

Klasa e kontrollit të formës e aplikuar në secilën fushë hyrëse e lejon atë të shtrijë të gjithë gjatësinë e kontejnerit (100%). Ai gjithashtu shton stile të ndryshme për të përmirësuar lexueshmërinë e tekstit (duke rritur lartësinë e tekstit, duke shtuar një kufi, etj.).

Pas këtyre kolonave ne shtojmë një fushë teksti të mesazhit. Përsëri, ne e mbështjellim këtë brenda një klase të grupit të formave dhe aplikojmë stile të ngjashme në fushën tonë të etiketës dhe tekstit siç kemi bërë më parë.

Thirrje për veprim

Së fundi, ne shtojmë një buton. Bootstrap ka disa klasa për butona të ndryshëm me ngjyra dhe gjendje të ndryshme. Ne vendosëm të përdorim butonin "sukses" (btn-success), i cili është i gjelbër si parazgjedhje. Për më tepër, ne duhet të shtojmë një klasë btn për të rivendosur stilet e butonave të paracaktuar (kufiri, mbushja, rreshtimi i tekstit, pesha e shkronjave). Ne përdorëm klasën btn-lg e cila zmadhon butonin dhe në fund klasën pull-right për të lidhur butonin në të djathtë.

Pas butonit tonë, ne shtuam një div me ID #msgSubmit dhe aplikuam klasat e mëposhtme: " h3 text-center hidden ". h3 krijon një titull më të madh, në qendër të tekstit (e keni marrë me mend) e bën qendrën e tekstit të përafruar dhe më në fund ne vendosim një klasë të fshehur që vendos si veçorinë e shfaqjes në asnjë, ashtu edhe veçorinë e dukshmërisë në të fshehtë (shfaq: asnjë; dukshmëri: e fshehur ;).

Shtimi i një funksioni dërgimi

Siç mund ta shihni në shfletuesin tuaj, ne kemi krijuar një bazë formulari Bootstrap. Por deri më tani ajo nuk po bën asgjë. Hapi tjetër është krijimi i një funksioni që merr hyrjen e përdoruesit dhe e dërgon atë në mënyrë asinkrone në klasën tonë të postuesit PHP.

Hapni scripts.js dhe kopjoni kodin e mëposhtëm:

$("#contactForm").submit(funksion(ngjarje)( // anulon ngjarjen e paraqitjes së formularit.preventDefault(); submitForm(); ));

Kjo pjesë e kodit është një copëz jQuery që pranon një funksion dërgimi në ID-në tonë #contactForm (siç është përcaktuar më parë). Duke përdorur këtë funksion, ne analizojmë variablin e ngjarjes, i cili ruan veprimin e paraqitjes së formularit në funksion. Ngjarja e ngjarjes.preventDefault(); ndalon dërgimin e të dhënave të formularit si zakonisht për të rifreskuar faqen sepse veprimi i formularit nuk është vendosur. Së fundi, thirret funksioni submitForm(); .

submitForm();

Më pas do të krijojmë një funksion submitForm(); :

Funksioni submitForm())( // Fillo variablat me përmbajtjen e formularit var emri = $("#name").val(); var email = $("#email").val(); mesazh var = $("# mesazh ").val(); $.ajax(( lloji: "POST", url: "php/form-process.php", të dhënat: "name=" + emri + "&email=" + email + "&mesazh= " + mesazh, sukses: funksion(tekst)( if (tekst == "sukses")( formSuccess(); ) ) ) funksioni formSuccess())( $("#msgSubmit").removeClass("fshehur"); )

Tre variabla mbajnë vlerat e të gjitha hyrjeve të formularit dhe i caktojnë ato në një ndryshore JavaScript që do të përdoret më vonë.

Ne inicializojmë objektin AJAX në jQuery dhe vendosim llojin e kërkesës për të postuar, URL-ja është një lidhje me skedarin PHP, të dhënat që duam të dërgojmë dhe nëse përpunohen me sukses, aktivizohet funksioni i suksesit. Të dhënat përfshijnë të tre variablat të kombinuara me ID/etiketën përkatëse. Funksioni i kthimit të thirrjes thirret kur objekti Ajax merr me sukses informacion nga skripti PHP. Funksioni krahason tekstin e kthyer dhe kontrollon nëse është i barabartë me vargun "sukses". Nëse gjithçka është e saktë, funksioni formSuccess ekzekutohet.

Funksioni formSuccess heq klasën e fshehur nga div me id #msgSubmit që kemi aplikuar më parë, duke zbuluar kështu tekstin.

Lidhja e funksionit të postës PHP

Gjithçka që duhet të bëjmë është të shkruajmë një skript PHP për të marrë të dhëna dhe për të dërguar informacionin tonë duke përdorur funksionin e integruar të postës PHP. Hapni process.php dhe shtoni kodin e mëposhtëm:

Ngjashëm me fragmentin e kodit jQuery më sipër, ne krijojmë dhe ruajmë variablat që duam të përdorim. Nga funksioni postim marrim tre variabla hyrëse dhe shkruajmë vlerat e tyre në të njëjtat variabla PHP. Ndryshorja $EmailTo është një adresë emaili e paracaktuar që specifikohet në skript dhe dërgohet në emailin tuaj nga formulari. $Subject është një varg që përdoret si subjekt i emailit.

Mesazhi kryesor është krijuar nga tre variabla. Së pari, tregoni se nga është mesazhi "Emri:", pastaj shtoni karakterin e linjës së re /n. (linjë e re/ndërprerje e linjës). Kjo përsëritet dhe kombinohet me ndryshoren $body.

Për të dërguar më në fund mesazhin, ne shkruajmë një funksion për të dërguar një mesazh. Në variablin $success kthejmë rezultatin e dërgimit, i cili përfshin: marrësin, subjektin, tekstin e trupit dhe dërguesin.

Për të filluar procesin e dërgimit të emailit, ne mund ta thërrasim atë në një deklaratë if. Kjo gjithashtu ndihmon për të kontrolluar nëse gjithçka ishte e suksesshme apo jo. Nëse funksioni i postës kthen vlerën "e vërtetë", skripti do të kthejë vlerën "sukses", dhe nëse është e gabuar, atëherë "i pavlefshëm".

Ky rezultat do të kthehet në një objekt AJAX dhe do të përpunohet përsëri në anën e klientit. E bukura e AJAX është se gjithçka ndodh në mënyrë asinkrone në anën e klientit, duke i lejuar klientit të përdorë faqen gjatë dërgimit të mesazhit.

Rendi perfekt

Pasi të kemi mbuluar strukturën bazë dhe funksionalitetin e formës sonë në gjysmën e parë të këtij tutoriali, tani do të flasim për mënyrën se si t'i ofrojmë komentet e përdoruesve me veçoritë e ndryshme shtesë që mund të shtojmë. Në veçanti, ne do të shikojmë formularin e komenteve përmes trajtimit të gabimeve, si në anën e klientit ashtu edhe në anën e serverit.

Edhe një herë, ne do të përdorim disa mjete për të vërtetuar formularin. Kjo perfshin:

Shtojini ato gjithashtu në projekt, ashtu siç bëmë më parë me Bootstrap dhe jQuery. Këto mjete do të ndihmojnë në dhënien e komenteve të përdoruesit kur dorëzoni një formular. Ka shumë mjete dhe korniza për vërtetimin e formularit (përfshirë vërtetuesin e integruar HTML5), por unë përdora Bootstrap Validator pasi integrohet mirë me formën tonë aktuale.

Struktura e projektit tani duhet të duket diçka si kjo:

Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── animate.css ├── images/ ├── js/ ├├├s.js ── jquery- 1.11.2.min.js ├── validator.min.js ├── php/ ├── process.php ├── index.html

Kontrollimi i formularit tonë

Le të fillojmë duke krijuar një verifikues për të vërtetuar formularin kur klikohet një buton. Përsëri në skedarin scripts.js, ne duhet të modifikojmë pjesën e parë të kodit që thërret funksionin submitForm() kur formulari dorëzohet.

Tani kodi duket si ky:

$("#contactForm").validator().on("submit", funksion (ngjarje) ( if (event.isDefaultPrevented()) ( // trajton formën e pavlefshme... ) else ( // çdo gjë duket mirë! event.preventDefault();

Kjo pjesë e re e kodit kontrollon për të parë nëse Validuesi Bootstrap gjeti ndonjë gabim dhe e ndaloi procesin. Nëse jo, ne do të vazhdojmë. Ne ende duhet të parandalojmë veprimin e paracaktuar (rifreskimin e faqes) kur formulari dorëzohet me sukses, kështu që do ta ruajmë atë.

Tani, kur klikoni në butonin dërgoni të formularit, kur ai nuk është plotësuar plotësisht, formulari do të kontrollohet për korrektësi dhe fushat do të theksohen me të kuqe, duke treguar se çfarë duhet të futet, është e lehtë!

Në procesin e shtimit të këtij kontrolli, ne hoqëm ose çaktivizuam kontrollin vendas HTML5. Ne mund të përmirësojmë vërtetimin tonë duke përfshirë mesazhe gabimi. Bootstrap Validator ka një veçori të shkëlqyer që e bën mjaft të lehtë shfaqjen e mesazheve të gabimit pranë çdo fushe hyrëse. Për ta shtuar atë, duhet të shkruani kod shtesë HTML.

Në secilin grup formash, nën fushat e hyrjes, duhet të vendosni kodin e mëposhtëm html:

Për shembull, këtu është një div shtesë e shtuar në fushat Emri dhe E-mail:

Emri Email

Tani, kur ridorëzimi i formularit, nëse fushat mbeten bosh, si parazgjedhje duhet të shfaqet një mesazh gabimi "Ju lutemi plotësoni këtë fushë.". Duke shtuar një atribut “data-error” në një fushë hyrëse, mund të shtoni një mesazh gabimi të personalizuar. Për shembull:

Ka një sërë veçorish të tjera, të tilla si modelet e shprehjeve të rregullta, që mund të aplikohen në verifikuesin Bootstrap. Mund të shihni më shumë në Github.

Shtimi i animacionit

Vërtetimi i klientit tonë duket shumë i mirë; ne kemi një theksim të mrekullueshëm të fushave boshe me të kuqe. Megjithatë, do të ishte mirë të shtoni animacione shtesë në formular dhe të shtoni mesazhe shtesë për të informuar përdoruesin se çfarë po ndodh. Aktualisht kemi një mesazh "Mesazhi u dërgua!", e cila shfaqet në paraqitjen e suksesshme, por çfarë ndodh me mesazhin e gabimit?

Ne do të ndryshojmë kodin tonë për të qenë më i përgjithshëm, duke ndryshuar mesazhin e suksesit për të pranuar gjithashtu mesazhe gabimi.

Para së gjithash, le të heqim tekstin "Mesazhi u dërgua!" nga kodi HTML dhe thjesht lini bllokun div bosh:

Tani duhet të krijojmë një funksion të ri për të trajtuar statusin e mesazhit. Shtoni këtë funksion në fund të skriptit tuaj scripts.js

Funksioni submitMSG(vlefshëm, msg)( var msgClasses; if(valid)( msgClasses = "h3 text-center tada text animated-success"; ) other ( msgClasses = "h3 teksti në qendër të rrezikut"; ) $("# msgSubmit").removeClass().addClass(msgClasses).tekst(msg); )

Ky funksion merr dy argumente. e vlefshme do të jetë një variabël boolean: nëse është e vërtetë, atëherë shfaqet një mesazh suksesi, nëse është i gabuar, atëherë shfaqet një mesazh gabimi. msg përmban një mesazh për t'u shfaqur në div.

Së pari, funksioni kontrollon nëse ka sukses apo dështon duke kontrolluar vlerën e vlefshme. Në çdo rast, emrat e nevojshëm të klasave CSS shkruhen në ndryshore (duhet të përfshini përsëri h3 dhe text-center, pasi më vonë do t'i heqim ato si parazgjedhje).

Shënim: Ne po përdorim disa klasa animate.css. Klasa tada do të aplikojë një animacion kur mesazhi të dërgohet me sukses.

Së fundi, funksioni heq të gjitha klasat nga #msgSubmit (shmang klasat konfliktuale), më pas shton klasat e instaluara më parë dhe më pas shton tekstin e mesazhit brenda elementit div.

Në formularin tonë të vlefshmërisë që përditësuam në fillim të këtij seksioni, ne mund të shtojmë thirrjen e funksionit të mëposhtëm brenda deklaratës if kur është e vërtetë.

SubmitMSG (false, "A e keni plotësuar formularin siç duhet?");

Një mesazh gabimi duhet të shfaqet kur dërgoni një formular me fusha boshe "A e keni plotësuar formularin siç duhet?"

Hapi i fundit për këtë funksion të ri submitMSG është thirrja e tij kur mesazhi të dërgohet me sukses. Përditësoni funksionin formSuccess() si më poshtë:

$("#contactForm").reset(); dërgoMSG (e vërtetë, "Mesazhi u dërgua!")

Së pari, ne duam të rivendosim të dhënat e formularit dhe të pastrojmë vlerat e fushës pas paraqitjes së suksesshme, më pas të thërrasim funksionin tonë submitMSG si më parë. Dorëzimi i suksesshëm tani duhet të shfaqë një mesazh me efektin e animacionit tada nga animate.css.

Shkundni

Një tjetër animacion, apo jo? Le të shtojmë një animacion tjetër për të gjithë formularin kur raportoni një gabim, "jitter" i animuar duhet të duket vërtet i mirë!

Krijoni një funksion të ri menjëherë pas formSuccess() dhe quani atë formError()

Funksioni formError())( $("#contactForm").removeClass().addClass("shuke animuar").one("webkitAnimationEndEnd mozAnimationEnd MSAnimationEnd oanimationendend animationend", funksion())( $(this).removeClass(); )) ;)

Ky funksion përdor qasjen e gjetur në faqen demo animate.css, e cila ju lejon të shtoni një animacion në një element dhe më pas ta rithirrni/shtoni atë pa pushim. Ekziston një problem i vogël me animacionet CSS: nëse shtoni animacion në një element një herë dhe më pas hiqni stilet dhe pastaj shtoni ato përsëri, animacioni nuk do të përsëritet. Kjo veçori ndihmon në rivendosjen e klasave kur animacioni është i plotë dhe më pas ju lejon t'i rishtoni ato. Kur përdoruesi klikon butonin "Dërgo" në një formular që nuk është plotësuar plotësisht, ne duam që animacioni të dridhet. Dhe nëse forma ende i mbushur gabimisht, animacioni duhet të funksionojë përsëri.

Ne mund ta quajmë këtë funksion formError() mbi funksionin submitMSG(). P.sh.

FormError(); submitMSG (false, "A e keni plotësuar formularin siç duhet?");

Tani kur dorëzojmë një formular bosh, ai do të dridhet për t'i bërë të ditur përdoruesit se diçka nuk shkoi mirë.

verifikim shtesë

I gjithë ky verifikim nga ana e klientit duket i shkëlqyeshëm, por çdo përdorues mund t'i çaktivizojë këto masa dhe të dorëzojë formularin me fusha boshe duke redaktuar kodin në shfletuesin e tij. Pra, ia vlen të shtohet vërtetimi nga ana e serverit për të kapur çdo gjë që rrëshqet.

Hapni skedarin tonë process.php, duhet ta ndryshojmë pak, të shtojmë një kontroll për fusha boshe; Nëse nuk janë bosh, ne e dërgojmë mesazhin përsëri në front-end. Ne do të krijojmë një variabël të quajtur $errorMSG për të regjistruar gabimet dhe më pas do të aktivizojmë një kontroll shtesë $_POST.

Ky kod PHP kontrollon nëse fushat janë bosh përpara se të shkruajë në variablat përkatëse (zëvendëson kodin ekzistues duke vendosur variablat nga $_POST). Nëse ato janë bosh, ne ndërtojmë një mesazh bazë për t'ia dërguar klientit. Ne mund të kontrollojmë edhe më thellësisht sesa thjesht të kontrollojmë fushat për zbrazëti (nëse vlera është shumë e shkurtër/e gjatë, atëherë e kontrollojmë me shprehje të rregullta) në PHP dhe JavaScript. Sidoqoftë, për hir të thjeshtësisë, ne do të kufizohemi vetëm në kontrollimin e zbrazëtisë.

Duhet të ktheni një mesazh në një funksion AJAX që do të shfaqet në shfletues. Ne do të modifikojmë kushtin if që krijuam më parë në fund të skedarit PHP.

Në kushtin tonë if, ne gjithashtu kontrollojmë nëse ndryshorja $errorMSG është bosh (""), që është ajo që kemi përdorur në variablin $success. Në gjendjen tonë tjetër ne kemi përfshirë kontrolle të mëtejshme. Këtu është vetëm një kontroll, nëse rezultati false është kthyer në variablin $success, atëherë ai kthehet "Dicka shkoi keq:(". Përndryshe, ne shfaqim mesazhin që është përpiluar kur kontrollojmë për vlera boshe.

Hapi i fundit është të pranoni mesazhin e ri në AJAX dhe ta shfaqni atë në formular. Ne duhet të përditësojmë objektin Ajax në skedarin scripts.js si më poshtë:

$.ajax(( type: "POST", url: "php/form-process.php", të dhënat: "name=" + emri + "&email=" + email + "&message=" + mesazh, sukses: funksion( tekst)( if (tekst == "sukses")( formSuccess(); ) else (formError(); paraqes MSG(false,tekst); ) ) ));

Sapo përditësuam kushtin else, i cili kontrollon nëse teksti == sukses. Në pjesën tjetër tonë ne e quajtëm funksionin formError() i cili aktivizon animacionin e tundjes, funksioni submitMSG() shfaq tekstin e mesazhit nga skedari PHP. Teksti i kthyer do të jetë ose "Dicka shkoi keq:(", ose të dhëna për fushat boshe.

konkluzioni

Shkoni te Github për të parë të gjithë kodin që kemi shkruar!

Formulari ynë tani ofron komente për përdoruesit dhe tregon se cilat fusha janë plotësuar gabimisht ose janë bosh. Në formular, ne siguruam mesazhe kontekstuale bazuar në statusin e vlerës së kthyer nga skedari PHP dhe zbatuam një nivel shtesë të vlefshmërisë nga ana e serverit, duke kapur ata përdorues që donin të anashkalonin vlefshmërinë në front.

Në përgjithësi, ju tani keni një formë shumë të gjallë në duart tuaja, gati për t'u stiluar dhe integruar me faqen tuaj të internetit. Shpresoj se ju ka pëlqyer ky tutorial, ju lutemi lini çdo pyetje ose mendim në komentet më poshtë!

Në thelb, metodat POST dhe GET përdoren për të kaluar parametrat.
Dallimi kryesor midis metodave POST dhe GET është mënyra se si transferohet informacioni. Në metodën GET, parametrat kalohen përmes shiritit të adresave (URL), d.m.th. në kokën e kërkesës HTTP, ndërsa në metodën POST parametrat transmetohen përmes trupit të kërkesës HTTP dhe nuk pasqyrohen në shiritin e adresave.

1. Butonat – Tag

Etiketa krijon butona në një faqe interneti dhe veprimi i tij i ngjan rezultatit të marrë duke përdorur etiketën (me parametrin type="button | reset | submit"). Ndryshe nga ky etiketë, ai ofron opsione të avancuara për krijimin e butonave. Për shembull, në një buton të tillë mund të vendosni çdo element HTML, duke përfshirë imazhet. Duke përdorur stilet, mund të përcaktoni pamjen e një butoni duke ndryshuar fontin, ngjyrën e sfondit, madhësinë dhe parametra të tjerë.
Në teori, etiketa duhet të vendoset brenda formës së vendosur nga elementi. Megjithatë, shfletuesit nuk shfaqin një mesazh gabimi dhe punojnë saktë me etiketën nëse haset vetë. Sidoqoftë, nëse duhet të dërgoni rezultatin e klikimit të butonit në server, ai duhet të vendoset në një enë. Kërkohet etiketa mbyllëse.
Opsione:
i çaktivizuar – bllokon aksesin dhe modifikimin e elementit.
lloji – lloji i butonit
vlera – Vlera e butonit që do të dërgohet në server ose do të lexohet duke përdorur sprits.

Butoni me tekst
Parametri DISABLED
Bllokon aksesin dhe modifikimin e butonit. Në këtë rast, ai shfaqet gri dhe nuk mund të aktivizohet nga përdoruesi. Për më tepër, një buton i tillë nuk mund të përqendrohet duke shtypur tastin Tab, duke përdorur miun ose ndryshe. Megjithatë, kjo gjendje e butonit mund të ndryshohet përmes skripteve.

Butoni aktiv Butoni joaktiv

Parametri TYPE
Përcakton llojin e butonit, i cili vendos sjelljen e tij në formë. Llojet e ndryshme të butonave nuk ndryshojnë në pamje në asnjë mënyrë, por secili buton ka funksionet e veta. Vlera e paracaktuar: butoni.
Argumentet:
butoni – Butoni i rregullt.
rivendosja - Një buton për të pastruar të dhënat e formularit të futur dhe për t'i kthyer vlerat në gjendjen e tyre origjinale.

Submit – Butoni për dërgimin e të dhënave të formularit në server.

Pastro formularin Dërgo formularin

Parametri VALUE Përcakton vlerën e butonit që do t'i dërgohet serverit. Një çift "emër=vlerë" dërgohet në server, ku emri specifikohet nga parametri i emrit të etiketës dhe vlera specifikohet nga parametri i vlerës. Kuptimi ose mund të përkojë me tekstin në buton ose të jetë i pavarur. Parametri i vlerës përdoret gjithashtu për të hyrë në të dhëna përmes skripteve.

Paraqisni formularin

1.1. Butoni (lloji i hyrjes=buton) 1.2. Butoni me një imazh (lloji i hyrjes = imazh) Butoni me një foto

Butonat me imazhe janë të ngjashëm në veprim me butonin Submit, por ato përfaqësojnë një foto. Për ta bërë këtë, vendosni type=image dhe src="image.gif" .

Kur përdoruesi klikon kudo në imazh, formulari përkatës do të dërgohet në server me dy variabla shtesë - sub_x dhe sub_y. Ato përmbajnë koordinatat e përdoruesit që klikon në imazh. Programuesit me përvojë mund të vërejnë se emrat e variablave të dërguar nga shfletuesi në të vërtetë përmbajnë një pikë dhe jo një nënvizim, por PHP automatikisht e konverton pikën në një nënvizim.

1.3. Butoni për dërgimin e formularit (lloji i hyrjes=submit)

Shërben për të dorëzuar formularin në skenar. Kur krijoni një buton për të dorëzuar një formular, duhet të specifikoni 2 atribute: type="submit" dhe value="Button text" . Атрибут name необходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки. !}

Nuk kërkohet skript PHP.

1.4. Një grup butonash (dorëzo) për zgjedhjen e opsionit të veprimit 2. Butoni i rivendosjes së formularit (Rivendosja)

Kur klikoni butonin e rivendosjes, të gjithë elementët e formularit do të vendosen në gjendjen që u specifikua në atributet e paracaktuara dhe formulari nuk do të dorëzohet.

Nuk kërkohet skript PHP.

3. Kutia e kontrollit

Kutitë e kontrollit i paraqesin përdoruesit një numër opsionesh dhe lejojnë zgjedhje arbitrare (asnjë, një ose më shumë prej tyre).

E bardha
E gjelbër
Blu
E kuqe
E zezë

Shembulli 2.
// grupi i parë i butonave
// grup i dytë i butonave
// grupi i tretë i butonave

5. Fusha e tekstit (tekst)

Kur krijoni një fushë të rregullt teksti me madhësinë dhe gjatësinë maksimale të lejuar të karaktereve të gjatësisë maksimale, atributi tip merr vlerën e tekstit . Nëse specifikohet parametri i vlerës, fusha do të shfaq vlerën e specifikuar në variabël. Kur krijoni një fushë, mos harroni të specifikoni emrin e fushës, sepse... ky atribut kërkohet.

6. Fusha e fjalëkalimit

Pikërisht njësoj si një fushë teksti, përveç se karakteret e shtypura nga përdoruesi nuk do të shfaqen në ekran.

7. Fusha e tekstit të fshehur (e fshehur)

Ju lejon të kaloni disa informacione shërbimi në skript pa e shfaqur atë në faqe.

8. Lista rënëse (zgjidh)

Një etiketë është një listë rënëse ose e zgjeruar dhe një ose më shumë rreshta mund të zgjidhen në të njëjtën kohë. Por vlera do të kalojë në butonin e fundit të zgjedhur.
Lista fillon me etiketat e çiftuara. Etiketat ju lejojnë të përcaktoni përmbajtjen e listës, dhe parametri i vlerës përcakton vlerën e vargut. Nëse parametri i zgjedhur është specifikuar në etiketë, atëherë rreshti do të zgjidhet fillimisht. Parametri i madhësisë përcakton se sa rreshta do të zërë lista. Nëse madhësia është 1, atëherë lista do të jetë një dropdown. Nëse specifikohet atributi i shumëfishtë, atëherë mund të zgjidhen disa elementë nga lista. Por kjo skemë praktikisht nuk përdoret, dhe me madhësi = 1 nuk ka kuptim.

E bardhë E gjelbër Blu E kuqe E zezë

Nëse keni nevojë të krijoni një drop-down me një sekuencë të parashikueshme. Për shembull, një listë me vite nga 2000 deri në 2050. Më pas përdoret teknika e mëposhtme.

9. Fusha e futjes së tekstit me shumë rreshta (textarea)

Një fushë e futjes së tekstit me shumë rreshta ju lejon të dërgoni jo vetëm një rresht, por disa në të njëjtën kohë. Nëse është e nevojshme, mund të specifikoni atributin vetëm për lexim, i cili ndalon redaktimin, fshirjen dhe ndryshimin e tekstit, d.m.th. teksti do të jetë vetëm për lexim. Nëse është e nevojshme që teksti fillimisht të shfaqet në një fushë hyrëse me shumë rreshta, atëherë ai duhet të vendoset midis etiketave.
Ekziston një parametër i mbështjelljes - vendosja e mbështjelljes së linjës. Vlerat e mundshme:
off – çaktivizon mbështjelljen e linjës;
virtuale – tregon ndërprerje të rreshtave, por e dërgon tekstin ashtu siç është futur;
fizike – ndërprerjet e vijave lihen në formën e tyre origjinale.
Si parazgjedhje, etiketa krijon një fushë bosh me gjerësi 20 karaktere dhe përbëhet nga 2 rreshta.

Në mënyrë që një fushë teksti me shumë rreshta të përputhet me formatimin html (mbështjellja e rreshtit duke përdorur etiketën
ose
), më pas përdorni funksionin nl2br():

Rreshti i futur fillimisht 1 Rreshti i futur fillimisht 2 Rreshti 3 i futur fillimisht

10. Butoni për ngarkimin e skedarëve (shfleto)

Shërben për të zbatuar ngarkimin e skedarëve në server. Kur krijoni një fushë teksti, duhet gjithashtu të specifikoni llojin e fushës si "skedar".

Ngarko skedarin:

Mënyrat se si shfletuesi komunikon me serverin

Ka pak metoda të ofruara nga protokolli HTTP. Ky është informacion i rëndësishëm. Nuk ka rrugë të tjera. Në praktikë, përdoren dy:
GET është kur të dhënat dërgohen në shiritin e adresave, për shembull kur një përdorues klikon një lidhje.
POST – kur ai klikon një buton në formular.

Metoda GET

Për të transferuar të dhëna duke përdorur metodën GET, nuk keni nevojë të krijoni një formular në një faqe HTML (askush nuk ju ndalon të përdorni formularë për kërkesat duke përdorur metodën GET) - vetëm një lidhje me dokumentin me shtimin e një vargu pyetësor, i cili mund të duket si variabël=vlerë. Çiftet bashkohen duke përdorur ampersand-in &, dhe vargu i shtohet URL-së së faqes duke përdorur pikëpyetjen “? "
Por nuk duhet të përdorni çifte key=value nëse duhet të kaloni vetëm një variabël - për ta bërë këtë, duhet të shkruani VALUE (jo emrin) e ndryshores pas pikëpyetjes.
Avantazhi i kalimit të parametrave në këtë mënyrë është se klientët që nuk mund të përdorin metodën POST (siç janë motorët e kërkimit) mund të vazhdojnë thjesht të ndjekin lidhjen për të kaluar parametrat në skript dhe për të marrë përmbajtjen.
Disavantazhi është se thjesht duke ndryshuar parametrat në shiritin e adresave, përdoruesi mund ta kthejë skriptin në një mënyrë të paparashikueshme dhe kjo krijon një vrimë të madhe sigurie, në kombinim me variabla të papërcaktuar dhe register_globals ose dikush mund të zbulojë vlerën e një variabël i rëndësishëm (për shembull - ID sesioni) vetëm duke parë ekranin e monitorit.
:
- për të hyrë në faqet publike me parametra kalues ​​(funksionalitet i rritur)
- transferimi i informacionit që nuk ndikon në nivelin e sigurisë
:
- për të hyrë në faqet e mbrojtura me transferimin e parametrave
- për të transmetuar informacione që ndikojnë në nivelin e sigurisë
- për të transmetuar informacione që nuk mund të modifikohen nga përdoruesi (disa transmetojnë tekstin e pyetjeve SQL.

Metoda POST

Ju mund të dërgoni të dhëna duke përdorur metodën POST vetëm duke përdorur një formular në një faqe HTML. Dallimi kryesor midis POST dhe GET është se të dhënat nuk transmetohen në kokën e kërkesës, por në trup, prandaj, përdoruesi nuk i sheh ato. Mund ta modifikoni vetëm duke ndryshuar vetë formularin.
Avantazhi:
- siguri dhe funksionalitet më i madh i kërkesave duke përdorur formularët duke përdorur metodën POST.
E metë:
- më pak disponueshmëri.
Për çfarë duhet ta përdorni:
- për transmetimin e një sasie të madhe informacioni (tekst, skedarë..);
- të transmetojë çdo informacion të rëndësishëm;
- për të kufizuar aksesin (për shembull, përdorni vetëm formularin për navigim - një opsion që nuk është i disponueshëm për të gjithë programet robotike ose grabitësit e përmbajtjes).
Për çfarë nuk duhet të përdoret:

PHP është në gjendje të pranojë një skedar të shkarkuar duke përdorur çdo shfletues. Kjo bën të mundur ngarkimin e skedarëve tekst dhe binar. I kombinuar me autentifikimin PHP dhe funksionet e sistemit të skedarëve, ju keni kontroll të plotë se kush lejohet të ngarkojë skedarë dhe çfarë të bëjë me skedarin pasi të jetë ngarkuar.
Faqja e ngarkimit të skedarit mund të zbatohet duke përdorur një formë të veçantë që duket diçka si kjo:

//Formulari për ngarkimin e skedarëve Dërgo këtë skedar:

Në shembullin e mësipërm " URL" duhet të zëvendësohet me një lidhje për një skript PHP. Fusha e fshehur MAX _FILE_SIZE (vlera duhet të specifikohet në bajt) duhet t'i paraprijë fushës së përzgjedhjes së skedarit dhe vlera e saj është madhësia maksimale e lejuar e skedarit të pranuar. Gjithashtu duhet të bëni Sigurohuni që të specifikoni enctype=" në formularin atributet multipart/form-data" , përndryshe skedarët nuk do të ngarkohen në server.
Kujdes
Opsioni MAX _FILE_SIZE është një rekomandim i shfletuesit, edhe nëse PHP do të kontrollonte gjithashtu këtë gjendje. Anashkalimi i këtij kufizimi në anën e shfletuesit është mjaft i lehtë, kështu që nuk duhet të mbështeteni në këtë veçori për të bllokuar të gjithë skedarët më të mëdhenj. Megjithatë, nuk ka asnjë mënyrë për të anashkaluar kufizimin maksimal të madhësisë së PHP. Gjithsesi, duhet të shtoni një variabël të formës MAX _FILE_SIZE, pasi i pengon përdoruesit të presin me ankth gjatë transferimit të skedarëve të mëdhenj, vetëm për të zbuluar se skedari është shumë i madh dhe transferimi në të vërtetë dështoi.

Si të përcaktoni një metodë kërkese?

Direkt:

Getenv("REQUEST_METHOD");

do të kthehet GET ose POST.

Cila metodë duhet përdorur?

Nëse formulari përdoret për të kërkuar disa informacione, për shembull, gjatë një kërkimi, atëherë ai duhet të dërgohet duke përdorur metodën GET. Për ta mbajtur faqen të përditësuar, mund ta shënoni atë dhe/ose t'ia dërgoni lidhjen një miku.
Nëse, si rezultat i paraqitjes së një formulari, të dhënat regjistrohen ose ndryshohen në server, atëherë ato duhet të dërgohen duke përdorur metodën POST, dhe është e domosdoshme që, pas përpunimit të formularit, të ridrejtoni shfletuesin duke përdorur metodën GET. Gjithashtu, POST mund të nevojitet nëse një sasi e madhe e të dhënave duhet të transferohet në server (për GET është shumë e kufizuar), dhe gjithashtu nëse të dhënat e transferuara nuk duhet të shfaqen në shiritin e adresave (kur futni një hyrje dhe fjalëkalim, për shembull).
Në çdo rast, pas përpunimit të POST-it, gjithmonë duhet ta ridrejtoni shfletuesin në ndonjë faqe, qoftë edhe në të njëjtën, por pa të dhënat e formularit, në mënyrë që kur faqja të rifreskohet, ato të mos regjistrohen më.

Si të transferoni të dhënat në një skedar tjetër direkt nga trupi i një programi PHP duke përdorur metodat GET dhe POST?

Një shembull për të demonstruar dërgimin e të dhënave duke përdorur metodat POST dhe GET njëkohësisht dhe marrjen e një përgjigje nga serveri.

Një nga detyrat më të zakonshme në praktikë është zbatimi i një formulari feedback. Do të thotë të shkruani kodin e tij HTML, ta dizenjoni atë në CSS, të krijoni një skript PHP që do të përpunonte të dhënat e marra nga përdoruesi dhe do t'i dërgonte në postën tonë, duke shkruar një skript JS që do të kontrollonte formularin për përshtatshmërinë e të dhënave të futura, duke mbrojtur ideja jonë nga mesazhet e padëshiruara, në mënyrë që kutia postare të mos u shemb nga sulmet me bot.

Të gjitha pikat e mësipërme do të diskutohen në rishikimin tonë dhe do të komentohen në detaje.

Pra, le të fillojmë të krijojmë një formular reagimi:

HTML

Para së gjithash, ne shkruajmë kodin HTML, i cili specifikon fushat që përdoruesi do të plotësojë. Ato do të zyrtarizohen në të ardhmen. Kodi i formës duket si ky:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Emri:< input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefoni:< input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail:< input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Mesazh:< textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Dërgo" />

Dhe vizualisht tani duket kështu:

Jam dakord, deri tani gjithçka është e shëmtuar dhe asgjë nuk është e qartë, por ne sapo kemi filluar.

Le të shohim në detaje kodin e mësipërm:

• < form method= "post" action= "mail.php" > …

  
  Për të krijuar një formë, duhet të përdorni etiketën e formës. Është ai që përcakton fillimin dhe fundin e formularit për interpretuesin e kodit. Ai, si çdo etiketë, ka një grup të tërë atributesh, por kërkohen vetëm dy që forma të funksionojë, këto janë metoda (metoda e dërgimit të një kërkese në server, postimi përdoret si standard për format) dhe veprimi ( tregon rrugën drejt skedarit të trajtuesit të formularit, domethënë në Ky skedar do të përmbajë një skript PHP, i cili më pas do të na dërgojë vlerat e futura nga përdoruesi në rastin tonë, ne shohim që ky skedar quhet mail.php dhe ndodhet në të njëjtin direktorium të sajtit si faqja që po shqyrtojmë).

• < input maxlength= "30" type= "text" name= "name" />

  
  Më pas kemi hyrje. Këto janë në fakt vetë fushat e formularit në të cilat përdoruesit do të fusin informacionin që na nevojitet (type="text" tregon se ky do të jetë tekst). Atributi maxlength specifikon se sa karaktere mund të fusë përdoruesi në një fushë të caktuar formulari. Atributi më i rëndësishëm është emri - ai specifikon emrin e një fushe specifike. Është me këta emra që skripti PHP do të përpunojë më pas informacionin që hyn në të. Nëse dëshironi, mund të vendosni edhe atributin mbajtës të vendit, i cili shfaq tekstin brenda fushës që zhduket kur kursori vendoset brenda saj. Një nga problemet me mbajtësin e vendndodhjes është se ai nuk mbështetet nga disa shfletues të vjetër.

• < label for = "name" >Emri:

  
  Përdoret nëse kemi braktisur mbajtësit e vendeve. Një nënshkrim i rregullt i fushës, atributi for tregon se cilës fushë specifike i referohet ky nënshkrim. Vlera tregon emrin e fushës që na intereson.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Ashtu si inputi, synohet që përdoruesi të futë informacione, vetëm këtë herë fusha është e përshtatur për mesazhe të gjata. Rreshtat specifikojnë madhësinë e fushës në rreshta, kolonat në karaktere. Në përgjithësi, ata vendosin lartësinë dhe gjerësinë e fushës sonë.

• < input type= "submit" value= "Dërgo" />

  
  Type="submit" na tregon se ky është një buton për dërgimin e një formulari dhe vlera specifikon tekstin që do të jetë brenda këtij butoni.

• < div class = "right" >

  
  përdoren vetëm për dizajn të mëtejshëm vizual të formës.

CSS

Në mënyrë që formulari ynë i komenteve të duket i paraqitshëm, ai duhet të formatohet. Për të marrë rezultatin e mëposhtëm:

Ne kemi përdorur këtë kod:

forma ( sfond: #f4f5f7; mbushje: 20px; ) forma . majtas, formë . djathtas (ekrani: inline-blloku; vertikal-linje: lart; gjerësia: 458px;) forma . djathtas ( mbushje- majtas: 20 px; ) etiketa (ekrani: bllok; madhësia e shkronjave: 18 px; rreshtimi i tekstit: në qendër; margjina: 10 px 0px 0px 0px; ) hyrja, zona e tekstit (kufiri: 1px solid #82858D; mbushja: 10px; madhësia e shkronjave: 16 pikselë; gjerësia: 436 px; ngjyra: #fff; transformimi i tekstit: shkronja të mëdha)

Unë nuk e shoh kuptimin në përshkrimin e CSS në detaje, unë do t'ju tërheq vëmendjen vetëm në pikat kryesore:

Nuk ka nevojë të shkruani një dizajn për çdo etiketë në formë. Përpiquni të ndërtoni përzgjedhësit tuaj në atë mënyrë që të mund të dizajnoni të gjithë elementët që ju nevojiten në disa rreshta kodi.

Mos përdorni etiketa të panevojshme të tipit për të thyer linja dhe për të krijuar dhëmbëzime< br>, < p>etj. CSS me ekranin: bllokimi dhe diferenca me vetitë e mbushjes përballen mirë me këto detyra. Më shumë se pse nuk duhet ta përdorni< br>në paraqitjen në përgjithësi, mund të lexoni në artikullin Tag br, por a është vërtet e nevojshme? .

Ju nuk duhet të përdorni paraqitjen tabelare për format. Kjo bie ndesh me semantikën e kësaj etikete dhe motorët e kërkimit e duan kodin semantik. Për të formuar strukturën vizuale të dokumentit, na duhen vetëm etiketat div dhe veçoritë e ekranit të specifikuara në CSS: inline-block (rregullon blloqet në një rresht) dhe vertikal-align: lart (parandalon që ato të shpërndahen nëpër ekran) , vendosini ato në lartësinë dhe voila të kërkuar, asgjë e tepërt dhe gjithçka është e vendosur ashtu siç na nevojitet.

Për ata që duan të kursejnë kohën e tyre në hartimin e faqeve të internetit, unë mund t'ju rekomandoj përdorimin e kornizave CSS kur krijoni faqe interneti, veçanërisht ato të shkruara vetë. Zgjedhja ime në këtë drejtim është Twitter Bootstrap. Ju mund të shikoni një mësim se si të hartoni forma duke përdorur atë.

PHP

Epo, është koha që forma jonë të funksionojë.

Ne shkojmë në drejtorinë tonë rrënjësore të faqes dhe krijojmë skedarin mail.php atje, të cilit më parë kemi specifikuar shtegun në atributin e veprimit të etiketës së formës.

Në fund të fundit, kodi i tij do të duket si ky:

Mesazhi juaj është dërguar me sukses

Ju mund të kaloni diskutimin e pjesëve HTML dhe CSS të këtij dokumenti. Në thelb, kjo është një faqe e rregullt e internetit që mund ta dizajnoni sipas dëshirave dhe nevojave tuaja. Le të shohim pjesën e tij më të rëndësishme - skriptin PHP për përpunimin e formularit:

$mbrapa = "

Kthehu

" ;

Me këtë rresht krijojmë një lidhje për t'u kthyer në faqen e mëparshme. Meqenëse nuk e dimë paraprakisht nga cila faqe përdoruesi do të shkojë në këtë, kjo bëhet duke përdorur një funksion të vogël JS. Në të ardhmen, ne thjesht do të aksesojmë këtë variabël për ta shfaqur atë në vendet që na duhen.

nëse (! bosh ($_POST [ "emri" ] ) dhe ! bosh ($_POST [ "telefon" ] ) dhe ! bosh ($_POST [ "mail" ] ) dhe ! bosh ($_POST [ "mesazh" ] ) ) ( //pjesa e brendshme e mbajtësit ) else (echo "Për të dërguar një mesazh, plotësoni të gjitha fushat! $back " ; dilni ; )

Këtu shtojmë një kontroll formulari për t'u siguruar që fushat janë plot. Siç e keni marrë me mend, në pjesën $_POST["name"], në thonjëza, ne shkruajmë vlerën e atributit të emrit të hyrjeve tona.

Nëse të gjitha fushat janë plotësuar, atëherë skripti do të fillojë të përpunojë të dhënat në pjesën e tij të brendshme, por nëse të paktën një fushë nuk është plotësuar, atëherë në ekranin e përdoruesit do të shfaqet një mesazh që i kërkon të plotësojë të gjitha fushat e formularit jehonë "Për të dërguar një mesazh, plotësoni të gjitha fushat $back" dhe një lidhje për t'u kthyer në faqen e mëparshme që kemi krijuar me rreshtin e parë.

Më pas ne ngjitim në pjesën e brendshme të mbajtësit të formularit:

$name = trim (etiketat_strip ($_POST ["emri"]) ); $telefon = trim(shirit_etiketat($_POST["telefon"])); $mail = trim(shirit_etiketat($_POST["mail"])); $mesazh = trim(shirit_etiketat($_POST["mesazh"]));

Kështu, ne pastruam të dhënat e futura nga përdoruesi nga etiketat html dhe hapësirat shtesë. Kjo na lejon të mbrohemi nga marrja e kodit me qëllim të keq në mesazhet që na dërgohen.

Kontrollet mund të bëhen më të komplikuara, por kjo është në diskrecionin tuaj. Ne kemi instaluar tashmë mbrojtje minimale në anën e serverit. Ne do ta bëjmë pjesën tjetër në anën e klientit duke përdorur JS.

Unë nuk rekomandoj braktisjen e plotë të mbrojtjes së formularit në anën e serverit në favor të JS, pasi, megjithëse jashtëzakonisht të rralla, ka unike me JS të çaktivizuar në shfletues.

Pas pastrimit të etiketave, shtoni dërgimin e një mesazhi:

mail ("[email protected]" , "Leter from_your_site_address" , "Të kam shkruar: " . $name ."
Numri i tij: " . $phone ."
Email-i i tij: " . $mail ."
Mesazhi i tij: " . $message, "Content-type:text/html;charset=windows-1251" );

Është kjo linjë që është përgjegjëse për gjenerimin dhe dërgimin e mesazhit tek ne. Ai plotësohet si më poshtë:

"[email protected]" - këtu ju futni emailin tuaj midis kuotave

“Letra nga your_site_address” është tema e mesazhit që do të dërgohet në emailin tuaj. Këtu mund të shkruani çdo gjë.

"Të ka shkruar: ".$name."< br />Numri i tij: ".$phone."< br />Email-i i tij: ".$mail."< br />Mesazhi i tij: ".$mesazh – ne formojmë vetë tekstin e mesazhit. $name – fusim informacionin e plotësuar nga përdoruesi duke hyrë në fushat nga hapi i mëparshëm, në thonjëza përshkruajmë se çfarë do të thotë kjo fushë, me etiketën< br />Ne thyejmë vijën në mënyrë që mesazhi në tërësi të jetë i lexueshëm.

Content-type:text/html;charset=windows-1251 - në fund ka një tregues të qartë të llojit të të dhënave të transmetuar në mesazh dhe kodimit të tij.

E RËNDËSISHME!

Kodimi i specifikuar në "kokën" e dokumentit (< meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" />), kodimi nga mesazhi Content-type:text/html;charset=windows-1251 dhe në përgjithësi kodimi i skedarit PHP duhet të përputhet, përndryshe në mesazhet e marra me postë, "fjalë të çmendura" do të shfaqen në vend të ruse ose Shkronjat angleze.

Shumë njerëz nuk tregojnë në mënyrë eksplicite kodimin e mesazhit që po dërgohet, por në disa klientë të postës elektronike kjo mund të shkaktojë probleme në të ardhmen (emailet e palexueshme dërgohen në postë), kështu që unë rekomandoj ta specifikoni gjithsesi.

Kontrollimi i formularit për përshtatshmërinë e të dhënave të futura

Për të siguruar që përdoruesit të mos humbasin pa dashje fushat dhe të plotësojnë gjithçka saktë, ia vlen të kontrolloni të dhënat e futura.

Kjo mund të bëhet si në PHP në anën e serverit dhe në JS në anën e klientit. Unë përdor opsionin e dytë, sepse në këtë mënyrë një person mund të zbulojë menjëherë se çfarë ka gabuar dhe të korrigjojë gabimin pa bërë tranzicione shtesë të faqeve.

Ngjisim kodin e skriptit në të njëjtin skedar ku kemi pjesën HTML të formularit. Për rastin tonë do të duket kështu:

< script>funksioni checkForm(forma) ( var emri = forma. emri. vlera; var n = emri. përputhje(/ ^[ A- Za- zA- Jaa-z ] * [ A- Za- zA- Ja-z ] + $/ ) nëse (! n) ("Emri është futur gabimisht, ju lutemi korrigjoni gabimin"); ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; A- Za- z0- 9 ] [ A- Za- z0- 9 \- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za. - z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \ ) + [ A- Za- z] + $/ ) , ju lutem korrigjoni gabimin" ) ; kthe false ; ) kthe e vërtetë ;)

Epo, tani analiza e zakonshme:

Në mënyrë që ne të kontrollojmë formularin kur klikojmë në butonin "dorëzo", ne bashkojmë nisjen e skriptit tonë në etiketën e formularit:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Tani le të marrim listën e kontrollit pikë për pikë:

Siç mund ta shihni, një mini kontroll i tillë është shkruar për secilën nga fushat tona. E theksova kontrollin për një fushë në pamjen e ekranit me një katror të kuq për fushat e tjera, ajo ka një strukturë të ngjashme, dhe nëse është e nevojshme të shtoni një fushë ose ta hiqni atë, tani mund ta bëni këtë lehtësisht.

Një nga gjërat më të mira të PHP-së është mënyra se si funksionon me format HTML. Gjëja kryesore këtu është që çdo element i formës bëhet automatikisht i disponueshëm për programet tuaja PHP. Për informacion të detajuar rreth përdorimit të formave në PHP, lexoni seksionin. Këtu është një shembull i formës HTML:

Shembulli #1 Forma më e thjeshtë HTML

Emri juaj:

Mosha juaj:

Nuk ka asgjë të veçantë në këtë formë. Ky është një formë e rregullt HTML pa ndonjë etiketë të veçantë. Kur përdoruesi të plotësojë formularin dhe të klikojë butonin dërgo, do të thirret faqja action.php. Ky skedar mund të ketë diçka të tillë:

Shembulli #2 Shfaqja e të dhënave të formularit

Përshëndetje, .
Ti je i vjeter.

Shembull i prodhimit të këtij programi:

Përshëndetje Sergej. Ju jeni 30 vjeç.

Nëse nuk merrni parasysh pjesët e kodit me htmlspecialchars() dhe (int), parimi i funksionimit të këtij kodi duhet të jetë i thjeshtë dhe i kuptueshëm. htmlspecialchars() siguron që karakteret "speciale" HTML janë të koduara siç duhet në mënyrë që HTML ose Javascript keqdashëse të mos futen në faqen tuaj. Fusha e moshës, të cilën ne e dimë se duhet të jetë një numër, thjesht mund ta shndërrojmë në një numër të plotë, i cili automatikisht do të heqë qafe karakteret e padëshiruara. PHP gjithashtu mund ta bëjë këtë automatikisht duke përdorur shtesën e filtrit. Ndryshoret $_POST["emri"] dhe $_POST["mosha"] vendosen automatikisht për ju nga PHP. Më parë kemi përdorur variablin superglobal $_SERVER, por këtu përdorim edhe variablin superglobal $_POST, i cili përmban të gjitha të dhënat POST. vini re, se mënyra e dërgimit(metoda) e formës sonë është POST. Nëse do të përdornim metodën MARR, atëherë informacioni ynë i formës do të jetë në variablin superglobal $_GET. Përndryshe, mund të përdorni variablin $_REQUEST nëse burimi i të dhënave nuk ka rëndësi. Kjo variabël përmban një përzierje të të dhënave GET, POST, COOKIE.

15 vjet më parë

Sipas specifikimeve HTTP, duhet të përdorni metodën POST kur përdorni formularin për të ndryshuar gjendjen e diçkaje në fund të serverit. Për shembull, nëse një faqe ka një formular për të lejuar përdoruesit të shtojnë komentet e tyre, si kjo faqe këtu, formulari duhet të përdorë POST Nëse klikoni "Ringarkoni" ose "Rifresko" në një faqe që keni arritur përmes një POST, është pothuajse gjithmonë një gabim -- nuk duhet të postoni të njëjtin koment dy herë -- kjo është arsyeja pse këto faqe nuk janë të shënuara ose të ruajtura në memorie.

Ju duhet të përdorni metodën GET kur forma juaj është, mirë, duke hequr diçka nga serveri dhe në fakt nuk ndryshon asgjë. Për shembull, formulari për një motor kërkimi duhet të përdorë GET, pasi kërkimi i një faqe interneti nuk duhet të ndryshojë asgjë që mund t'i interesojë klientit, dhe shënimi ose ruajtja në memorie e rezultateve të një pyetjeje të motorit të kërkimit është po aq e dobishme sa shënimi ose ruajtja në memorie. një faqe statike HTML.

1 vit me pare

Vlen të sqarohet:

POST nuk është më i sigurt se GET.

Arsyet për zgjedhjen e GET vs POST përfshijnë faktorë të ndryshëm si qëllimi i kërkesës (a po "paraqisni" informacion?), madhësia e kërkesës (ka kufizime për sa kohë mund të jetë një URL dhe parametrat GET dërgohen në URL), dhe sa lehtë dëshironi që Veprimi të jetë i ndashëm -- Shembull, Kërkimet në Google janë GET sepse e bën të lehtë kopjimin dhe ndarjen e pyetjes së kërkimit me dikë tjetër thjesht duke ndarë URL-në.

Siguria është vetëm një konsideratë këtu për faktin se një GET është më e lehtë për t'u ndarë sesa një POST. Shembull: ju nuk dëshironi që një fjalëkalim të dërgohet nga GET, sepse përdoruesi mund të ndajë URL-në që rezulton dhe të ekspozojë pa dashje fjalëkalimin e tij.

Sidoqoftë, një GET dhe një POST janë po aq të lehta për t'u kapur nga një person keqdashës i vendosur mirë nëse nuk vendosni TLS/SSL për të mbrojtur vetë lidhjen e rrjetit.

Të gjithë formularët e dërguar përmes HTTP (zakonisht porta 80) janë të pasigurt dhe sot (2017), nuk ka shumë arsye të mira që një faqe interneti publike të mos përdorë HTTPS (që në thelb është HTTP + Siguria e Shtresës së Transportit).

Si bonus, nëse përdorni TLS, ju minimizoni rrezikun që përdoruesit tuaj të marrin kodin (AD) të injektuar në trafikun tuaj që nuk është vendosur nga ju.

Ditë të mbarë për të gjithë. Alexey Gulynin është në kontakt. Në artikullin e fundit, mësuat se çfarë është serializimi në php. Në këtë artikull do të doja të flisja për mënyrën e punës me forma në PHP. Gjuha PHP është projektuar për programimin e skripteve të ueb-it dhe përpunimi i formave është ndoshta vendi më i rëndësishëm në këtë proces. Në ditët e sotme nuk mund të gjesh as sajte që nuk kanë, për shembull, regjistrim ose një formular reagimi ose një pyetësor. Forumet, dyqanet në internet, shtimi i një komenti, dërgimi i një mesazhi në një rrjet social - e gjithë kjo është përpunimi i të dhënave të vendosura në fushat e formularit. Le të përdorim një shembull për të kuptuar se si të përpunojmë formularët në PHP.
Ne do të zbatojmë një detyrë të thjeshtë: duhet të krijojmë 2 fusha (emri dhe mbiemri), t'i kalojmë këto të dhëna në skriptin action.php dhe si rezultat duhet të shfaqet përshëndetja "Mirë se erdhe, mbiemri emri". Për ata që kanë harruar se si krijohen format dhe cilat fusha ka, mund t'i hidhni një sy. Le të krijojmë një skedar test.html:

Emri Mbiemri:

Ju lutemi vini re se skedari action.php (në rastin tonë) duhet të jetë i vendosur në të njëjtën dosje si skedari test.html. Këtu mund të specifikoni shtigjet relative dhe absolute. Kini kujdes, shumë gabime shoqërohen me specifikimin e gabuar të shtegut për në skriptin e trajtuesit të formularit.

Le të krijojmë një skedar action.php me përmbajtjen e mëposhtme:

Nëse tani hapim skedarin test.html, plotësojmë fushat e formularit dhe klikojmë në butonin, do të përfundojmë në skedarin action.php, ku do të shfaqet një mesazh. Në këtë rast, shfletuesi akseson skriptin action.php dhe e kalon atë përmes "?" të gjitha vlerat e atributeve të emrit të vendosura brenda etiketave të ndara nga & . Ju lutemi vini re se çfarë është zëvendësuar për $_SERVER.

Ne mund ta zgjidhim problemin tonë duke analizuar vargun QUERY_STRING duke përdorur funksione standarde për të punuar me vargje në PHP, por është më mirë të përdorim një mekanizëm tjetër - duke përdorur grupin $_REQUEST. PHP vendos të gjitha të dhënat e marra nga fushat e formularit në grupin $_REQUEST, pavarësisht se si janë transmetuar të dhënat: POST ose GET (mund t'i zbuloni përmes $_SERVER["REQUEST_METHOD"] ). Më lejoni t'ju kujtoj se si ndryshojnë këto metoda:

Metoda GET është publike, metoda POST është private, d.m.th. ato ndryshojnë në mënyrën e kalimit të parametrave. Shembull:

1) Nëse përdorim metodën e postimit: mysite.ru/request.php.
2) Nëse përdorim metodën e marrjes: mysite.ru/request.php?myname=”Alex”&surname=”Gulynin”.

Gjithashtu, përveç grupit $_REQUEST, PHP krijon vargjet $_GET dhe $_POST. Le të zbatojmë tani detyrën tonë, bazuar në njohuritë e marra:

Nëse tani plotësojmë formularin dhe klikojmë në butonin, do të shohim se skripti action.php na përshëndet me mbiemër dhe emër. Gjithçka funksionon si duhet.

Gjithçka është në rregull këtu, por nëse ndryshojmë emrin e skriptit, do të duhet të bëjmë ndryshime në skedarin test.html. Le të modifikojmë skedarin action.php në mënyrë që kur ta qasemi, ai ose të shfaqë një formular kur nuk kemi dorëzuar asgjë, ose një mesazh përshëndetje kur klikojmë një buton: