Veidlapas PHP. HTML veidlapas

Ko jūs radīsit

Šajā apmācībā es soli pa solim sniegšu jums norādījumus par to, kā izveidot strādājošu saziņas veidlapu, izmantojot vispopulārāko priekšgala sistēmu Bootstrap kopā ar AJAX un PHP. Šeit apskatīsim arī dažas uzlabotas funkcijas, piemēram, dažas izdomātas CSS animācijas, izmantojot stila lapu animate.css, veidlapas pēcpārbaudi, izmantojot Javascript, un vispārējās galalietotāja pieredzes uzlabošanu ar asinhrono saturu.

Rakstīšanas laikā jaunākā ietvara versija bija Bootstrap 3.3.5, un ir vērts atzīmēt, ka šajā instrukcijā tiks izmantota parasta divpadsmit kolonnu versija. Izlasot šo rokasgrāmatu, pārliecinieties, vai izmantojat jaunākos koda fragmentus un daļas, kā parādīts Bootstrap dokumentācijā.

Aptuvenā failu un mapju struktūra

Pirmkārt, mēs izveidojam saknes direktoriju un ievietojam tajā šādus failus un mapes:

Bootstrap-Form: ├── css/ ├── images/ ├── js/ ├── scripts.js ├── php/ ├── process.php ├─ index.html─

Mums būs jāpievieno vairākas priekšgala bibliotēkas, kas mums palīdzēs, tāpēc nekautrējieties un lejupielādējiet (vai pievienojiet ārējās saites uz tālāk norādītajām bibliotēkām:

Pieņemsim, ka mēs tos lejupielādējām vietējā krātuvē un ievietojām projekta mapē, mūsu projekta failu struktūra tagad izskatīsies šādi:

Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── images/ ├── js/ ├── scripts.js ├──├── bootstrap.j.1.1. js ├── php/ ├── process.php ├── index.html

Veidlapas iestatīšanas pamati

Atveriet index.html un kopējiet šādu HTML pamata struktūru:

Saziņas veidlapa, izmantojot Bootstrap 3.3.4 " Nosūtiet man ziņojumu

Šī ir mūsu pamata HTML veidne, no kuras mēs izveidosim veidlapas saturu. Varat redzēt, ka esam apvienojuši visus nepieciešamos CSS un JavaScript failus (ņemiet vērā, ka šim konkrētajam piemēram mums nav nepieciešams bootstrap.js). Mēs to iekļāvām, lai atvieglotu darbu ar multivides vaicājumiem programmā Bootstrap. JavaScript tika ierakstīts faila apakšā, lai pirmā tiktu ielādēta galvenā veidlapas daļa.

Pamata tagā esam iekļāvuši div ar klasi col-sm-6 col-sm-offset-3 . Tas būtībā nozīmē, ka mazos (mazos) ekrānos mēs vēlamies attēlot 50% platu kolonnu (maks. 12 kolonnas). Klase col-sm-offset-3 pievieno kreiso piemali 25%, tādējādi izveidojot izkārtojumu, kas aizņem pusi no pieejamā ekrāna un ir līdzināts centrā. Šeit mēs esam pievienojuši h3 tagu, un tas ir mūsu veidlapas pamatnes sākums. Noteikti izmantojiet ID šai veidlapai, lai mēs vēlāk varētu saistīt jQuery notikumu.

Kas neriskē, tas nedzer šampanieti

Veidojot veidlapas elementus, varam kopēt/ielīmēt vai tagos ierakstīt šādu kodu:

Vārds E-pasts Ziņa Iesniegt Ziņa ir iesniegta!

Lietotājs mijiedarbosies ar visiem šiem laukiem un pogām. Vecāki div, kam piešķirta klases rinda — klasiskā Bootstrap sintakse, izveido col elementu rindu. Bootstrap kolonnas veido iekšējo polsterējumu vai atstarpi — pievienojot ap tām līniju, tiks noņemts kreisais un labais polsterējums, un kolonnas lieliski iekļaujas galvenajā konteinerā.

Mēs esam izveidojuši divas kolonnas ar klasi col-sm-6 (50%), ko izmantosim, lai atdalītu savu veidlapu. Pirmajā kolonnā col-sm-6 mēs izveidojām etiķeti un lauku nosaukumam, otrajā kolonnā e-pasta lauku. Katrā no tiem ir etiķete ar atbilstošu atribūtu, kas atsaucas uz atbilstošo lauku. Katra no šīm kolonnām ir iesaiņota veidlapu grupā, kas semantiski sagrupē etiķeti un lauku kopā, kā arī pievieno nelielu rezervi apakšā.

Tipogrāfija

Bootstrap ļauj izmantot H1-H6 galvenes klases. Šīs klases palīdz mums izmantot iekļautos elementus, nepievienojot papildu polsterējumu vai neveidojot bloku elementus. Uzlīmēm piemērojām H4 klasi, ātri palielinot to izmēru un padarot tās skaidrākas.

Katram ievades laukam lietotā formas vadības klase ļauj tai aptvert visu konteinera garumu (100%). Tas arī pievieno dažādus stilus, lai uzlabotu teksta lasāmību (palielinot teksta augstumu, pievienojot apmali utt.).

Pēc šīm kolonnām mēs pievienojam ziņojuma teksta lauku. Atkal mēs to iekļaujam veidlapu grupas klasē un etiķetes un teksta laukam piemērojam līdzīgus stilus, kā to darījām iepriekš.

Aicinājums uz darbību

Visbeidzot pievienojam pogu. Bootstrap ir vairākas klases dažādām pogām ar dažādām krāsām un stāvokļiem. Mēs nolēmām izmantot pogu "veiksmes" (btn-success), kas pēc noklusējuma ir zaļā krāsā. Turklāt mums ir jāpievieno btn klase, lai atiestatītu noklusējuma pogu stilus (apmale, polsterējums, teksta līdzinājums, fonta svars). Mēs izmantojām btn-lg klasi, kas palielina pogu, un, visbeidzot, velk pa labi klasi, lai izlīdzinātu pogu pa labi.

Pēc mūsu pogas mēs pievienojām div ar ID #msgSubmit un piemērojām šādas klases: "h3 text-center paslēpts". h3 izveido lielāku virsrakstu, teksta centrs (jūs to uzminējāt) liek teksta centru līdzināt, un visbeidzot mēs iestatām slēpto klasi, kas iestata gan displeja rekvizītu nav, gan redzamības rekvizītu uz slēptu (displejs: nav; redzamība: slēpts ;).

Sūtīšanas funkcijas pievienošana

Kā redzat savā pārlūkprogrammā, esam izveidojuši Bootstrap veidlapu bāzi. Bet līdz šim viņa nedara pilnīgi neko. Nākamais solis ir izveidot funkciju, kas ņem lietotāja ievadi un nosūta to asinhroni mūsu PHP pasta klasei.

Atveriet scripts.js un kopējiet šādu kodu:

$("#contactForm").submit(function(event)( // atceļ veidlapas iesniegšanas notikumu.preventDefault(); submitForm(); ));

Šis koda fragments ir jQuery fragments, kas pieņem iesniegšanas funkciju mūsu #contactForm ID (kā definēts iepriekš). Izmantojot šo funkciju, mēs parsējam notikuma mainīgo, kas saglabā veidlapas iesniegšanas darbību funkcijai. Notikums notikums.preventDefault(); aptur veidlapas datu iesniegšanu kā parasti, lai atsvaidzinātu lapu, jo veidlapas darbība nav iestatīta. Visbeidzot, tiek izsaukta funkcija submitForm(); .

iesniegt formu();

Tālāk mēs izveidosim funkciju submitForm(); :

Funkcija submitForm())( // Iniciēt mainīgos ar formas saturu var name = $("#name").val(); var email = $("#email").val(); var message = $("# ziņojums ").val(); $.ajax(( tips: "POST", url: "php/form-process.php", dati: "name=" + nosaukums + "&email=" + email + "&message= " + ziņojums, veiksme: function(teksts)( if (teksts == "veiksme")( formSuccess(); ) ) ) function formSuccess())( $("#msgSubmit").removeClass("slēpts"); )

Trīs mainīgie satur visu formas ievades vērtības un piešķir tās JavaScript mainīgajam, kas tiks izmantots vēlāk.

Mēs inicializējam AJAX objektu programmā jQuery un iestatām pieprasījuma veidu uz izlikšanu , URL ir saite uz PHP failu, datiem, ko vēlamies nosūtīt, un, ja tie tiek veiksmīgi apstrādāti, tiek aktivizēta veiksmes funkcija. Dati ietver visus trīs mainīgos, kas apvienoti ar atbilstošo ID/iezīmi. Atzvanīšanas funkcija tiek izsaukta, kad Ajax objekts veiksmīgi saņem informāciju no PHP skripta. Funkcija salīdzina atgriezto tekstu un pārbauda, ​​vai tas ir vienāds ar virkni "veiksmi". Ja viss ir pareizi, tiek palaista funkcija formSuccess.

Funkcija formSuccess noņem slēpto klasi no div ar id #msgSubmit, ko izmantojām iepriekš, tādējādi atklājot tekstu.

PHP pasta funkcijas savienošana

Viss, kas mums jādara, ir jāuzraksta PHP skripts, lai saņemtu datus un nosūtītu mūsu informāciju, izmantojot iebūvēto PHP pasta funkciju. Atveriet process.php un pievienojiet šādu kodu:

Līdzīgi kā iepriekš minētajā jQuery koda fragmentā, mēs izveidojam un saglabājam mainīgos, kurus vēlamies izmantot. No funkcijas post mēs saņemam trīs ievades mainīgos un ierakstām to vērtības tajos pašos PHP mainīgajos. Mainīgais $EmailTo ir iepriekš definēta e-pasta adrese, kas ir norādīta skriptā un nosūtīta uz jūsu e-pastu no veidlapas. $Subject ir virkne, kas tiek izmantota kā e-pasta tēma.

Pamatziņojums ir izveidots no trim mainīgajiem. Vispirms norādiet, no kura ir sūtīts ziņojums “Vārds:”, un pēc tam pievienojiet jaunrindas rakstzīmi /n. (jauna rinda/rindas pārtraukums). Tas tiek atkārtots un apvienots ar mainīgo $body.

Lai beidzot nosūtītu ziņojumu, mēs rakstām funkciju, lai nosūtītu ziņojumu. Mainīgajā $success mēs atgriežam nosūtīšanas rezultātu, kas ietver: adresātu, tēmu, pamattekstu un sūtītāju.

Lai sāktu e-pasta sūtīšanas procesu, mēs varam to izsaukt if paziņojumā. Tas arī palīdz pārbaudīt, vai viss ir izdevies vai nē. Ja pasta funkcija atgrieza vērtību “true”, skripts atgriezīs vērtību “success”, un, ja false, tad “invalid”.

Šis rezultāts tiks atgriezts AJAX objektā un apstrādāts atpakaļ klienta pusē. AJAX skaistums ir tāds, ka tas viss notiek asinhroni klienta pusē, ļaujot klientam izmantot vietni, kamēr tiek nosūtīts ziņojums.

Perfekta kārtība

Kad šīs apmācības pirmajā pusē ir apskatīta mūsu veidlapas pamatstruktūra un funkcionalitāte, mēs tagad runāsim par to, kā sniegt lietotāju atsauksmes, izmantojot dažādas papildu funkcijas, ko varam pievienot. Jo īpaši mēs apskatīsim atsauksmju veidlapu, izmantojot kļūdu apstrādi gan klienta, gan servera pusē.

Vēlreiz mēs izmantosim dažus rīkus, lai apstiprinātu veidlapu. Tie ietver:

Pievienojiet tos arī projektam, tāpat kā mēs to darījām iepriekš ar Bootstrap un jQuery. Šie rīki palīdzēs sniegt lietotāju atsauksmes, iesniedzot veidlapu. Veidlapu apstiprināšanai ir daudz rīku un ietvaru (tostarp iebūvētais HTML5 validators), taču es izmantoju Bootstrap Validator, jo tas labi integrējas mūsu pašreizējā veidlapā.

Projekta struktūrai tagad vajadzētu izskatīties apmēram šādi:

Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── animēt.css ├── images/ ├── js/ ├──├─── skripts.js vaicājums- 1.11.2.min.js ├── validator.min.js ├── php/ ├── process.php ├── index.html

Mūsu veidlapas pārbaude

Sāksim ar validatora izveidi, lai apstiprinātu veidlapu, kad tiek noklikšķināts uz pogas. Atgriežoties failā scripts.js, mums ir jārediģē pirmais koda fragments, kas, iesniedzot veidlapu, izsauc funkciju submitForm().

Tagad kods izskatās šādi:

$("#contactForm").validator().on("iesniegt", funkcija (event) ( if (event.isDefaultPrevented()) ( // apstrādājiet nederīgo formu... ) else ( // viss izskatās labi! event.preventDefault();

Šis jaunais koda fragments pārbauda, ​​vai Bootstrap Validator nav atradis kļūdas un apturējis procesu. Ja tā nav, mēs turpināsim. Mums joprojām ir jānovērš noklusējuma darbība (lapas atsvaidzināšana), kad veidlapa ir veiksmīgi iesniegta, tāpēc mēs to saglabāsim.

Tagad, nospiežot uz veidlapas pogas Iesniegt, kad tā nav pilnībā aizpildīta, tiks pārbaudīta veidlapas pareizība un lauki tiks iezīmēti sarkanā krāsā, norādot, kas jāievada, tas ir vienkārši!

Šīs pārbaudes pievienošanas procesā tika noņemta vai atspējota vietējā HTML5 pārbaude. Mēs varam uzlabot savu validāciju, iekļaujot kļūdu ziņojumus. Bootstrap Validator ir lieliska funkcija, kas ļauj diezgan viegli parādīt kļūdu ziņojumus blakus katram ievades laukam. Lai to pievienotu, jums jāieraksta papildu HTML kods.

Katrā veidlapu grupā zem ievades laukiem ir jāievieto šāds html kods:

Piemēram, laukiem Vārds un E-pasts ir pievienots papildu divzīme:

Vārds E-pasts

Tagad, atkārtoti iesniedzot veidlapu, ja lauki ir atstāti tukši, pēc noklusējuma jāparādās kļūdas ziņojumam "Lūdzu, aizpildiet šo lauku.". Pievienojot ievades laukam atribūtu “data-error”, varat pievienot pielāgotu kļūdas ziņojumu. Piemēram:

Ir vairākas citas funkcijas, piemēram, regulārās izteiksmes modeļi, ko var lietot Bootstrap pārbaudītājam. Vairāk varat redzēt vietnē Github.

Animācijas pievienošana

Mūsu klientu apstiprināšana izskatās ļoti labi; mums ir glīti izcelti tukši lauki sarkanā krāsā. Tomēr būtu jauki pievienot veidlapai papildu animācijas un pievienot papildu ziņojumus, lai lietotājs zinātu, kas notiek. Šobrīd mums ir ziņa "Ziņojums iesniegts!", kas parādās veiksmīgas iesniegšanas gadījumā, bet kā ar kļūdas ziņojumu?

Mēs mainīsim savu kodu, lai tas būtu vispārīgāks, mainot veiksmes ziņojumu, lai pieņemtu arī kļūdu ziņojumus.

Vispirms noņemsim tekstu “Ziņojums ir iesniegts!” no HTML koda un vienkārši atstājiet div bloku tukšu:

Tagad mums ir jāizveido jauna funkcija, lai apstrādātu ziņojuma statusu. Pievienojiet šo funkciju sava skripta scripts.js beigām

Funkcija submitMSG(valid, msg)( var msgClasses; if(valid)( msgClasses = "h3 text-center tada animated text-success"; ) else ( msgClasses = "h3 teksta centra teksta bīstamība"; ) $("# msgSubmit").removeClass().addClass(msgClasses).text(msg); )

Šai funkcijai ir divi argumenti. derīgs būs Būla mainīgais: ja tas ir patiess, tiek parādīts veiksmes ziņojums, ja false, tiek parādīts kļūdas ziņojums. msg satur ziņojumu, kas jāparāda div.

Pirmkārt, funkcija pārbauda, ​​vai tā ir veiksmīga vai neizdodas, pārbaudot derīgu vērtību. Jebkurā gadījumā mainīgajam tiek ierakstīti nepieciešamie CSS klašu nosaukumi (jums atkal jāiekļauj h3 un text-center, jo vēlāk mēs tos noņemsim pēc noklusējuma).

Piezīme. Mēs izmantojam dažas animate.css klases. Tada klase izmantos animāciju, kad ziņojums tiks veiksmīgi nosūtīts.

Visbeidzot, funkcija noņem visas klases no #msgSubmit (izvairieties no konfliktējošām klasēm), pēc tam pievieno iepriekš instalētās klases un pēc tam pievieno ziņojuma tekstu elementā div.

Mūsu validācijas veidlapā, kuru atjauninājām šīs sadaļas sākumā, mēs varam pievienot šādu funkcijas izsaukumu if priekšrakstam, ja tas ir patiess.

SubmitMSG(false, "Vai pareizi aizpildījāt veidlapu?");

Iesniedzot veidlapu ar tukšiem laukiem, jāparādās kļūdas ziņojumam "Vai jūs pareizi aizpildījāt veidlapu?"

Pēdējais solis šai jaunajai sendMSG funkcijai ir tās izsaukšana, kad ziņojums ir veiksmīgi iesniegts. Atjauniniet formuSuccess() funkciju šādi:

$("#contactForm").reset(); sendMSG (true, "Ziņojums iesniegts!")

Pirmkārt, mēs vēlamies atiestatīt veidlapas datus un notīrīt lauku vērtības veiksmīgas iesniegšanas gadījumā, pēc tam izsauciet mūsu iesniegšanaMSG funkciju tāpat kā iepriekš. Veiksmīgai iesniegšanai tagad vajadzētu parādīt ziņojumu ar tada animācijas efektu no animate.css .

Kratīt

Vēl viena animācija, vai ne? Ziņojot par kļūdu, pievienosim vēl vienu animāciju visai veidlapai, animētajam "trīcei" vajadzētu izskatīties ļoti labi!

Izveidojiet jaunu funkciju tūlīt pēc formSuccess() un nosauciet to par formError()

Funkcijas formError())( $("#contactForm").removeClass().addClass("shake animated").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function())( $(this).removeClass(); )) ;)

Šī funkcija izmanto pieeju, kas atrodama animate.css demonstrācijas lapā, kas ļauj elementam pievienot animāciju un pēc tam to atkal un atkal izsaukt/pievienot. Ar CSS animācijām ir viena neliela problēma: ja elementam vienreiz pievienojat animāciju un pēc tam noņemat stilus un pēc tam pievienojat tos vēlreiz, animācija neatkārtosies. Šī funkcija palīdz atiestatīt klases, kad animācija ir pabeigta, un pēc tam ļauj tās atkārtoti pievienot. Kad lietotājs noklikšķina uz pogas Iesniegt veidlapā, kas nav pilnībā aizpildīta, mēs vēlamies, lai animācija satricinātu. Un ja forma joprojām nepareizi aizpildīta, animācijai atkal jādarbojas.

Mēs varam izsaukt šo funkciju formError () virs funkcijas submitMSG (). Piemēram:

FormError(); sendMSG(false, "Vai pareizi aizpildījāt veidlapu?");

Tagad, kad mēs iesniedzam tukšu veidlapu, tā satricinās, informējot lietotāju, ka kaut kas nogāja greizi.

papildu pārbaude

Visa šī klienta puses validācija izskatās lieliski, taču jebkurš lietotājs var atspējot šos pasākumus un iesniegt veidlapu ar tukšiem laukiem, rediģējot kodu savā pārlūkprogrammā. Tāpēc ir vērts pievienot servera puses validāciju, lai tvertu visu, kas paslīd cauri.

Atveriet mūsu process.php failu, mums tas nedaudz jāmaina, jāpievieno tukšu lauku pārbaude; Ja tie nav tukši, mēs nosūtām ziņojumu atpakaļ uz priekšgalu. Mēs izveidosim mainīgo ar nosaukumu $errorMSG, lai reģistrētu kļūdas, un pēc tam iespējosim papildu $_POST pārbaudi.

Šis PHP kods pārbauda, ​​vai lauki ir tukši pirms rakstīšanas attiecīgajos mainīgajos (aizstāj esošo kodu, iestatot mainīgos no $_POST). Ja tie ir tukši, mēs izveidojam bāzes ziņojumu, ko nosūtīt atpakaļ klientam. Mēs varam pārbaudīt pat rūpīgāk, nekā tikai pārbaudīt lauku tukšumu (ja vērtība ir par īsu/garu, tad pārbaudām ar regulārām izteiksmēm) PHP un JavaScript. Tomēr vienkāršības labad mēs aprobežosimies tikai ar tukšuma pārbaudi.

Jums ir jāatgriež ziņojums AJAX funkcijai, kas tiks parādīta pārlūkprogrammā. Mēs rediģēsim iepriekš izveidoto if nosacījumu PHP faila apakšā.

Ja nosacījumā mēs arī pārbaudām, vai mainīgais $errorMSG ir tukšs (""), ko mēs izmantojām mainīgajā $success. Citā stāvoklī mēs iekļāvām papildu pārbaudi. Šeit tā ir tikai pārbaude, ja mainīgajā $success tiek atgriezts rezultāts false, tad tas tiek atgriezts "Kaut kas nogāja greizi:(". Pretējā gadījumā mēs parādām ziņojumu, kas tika apkopots, pārbaudot tukšas vērtības.

Pēdējais solis ir pieņemt jauno ziņojumu AJAX un parādīt to veidlapā. Mums ir jāatjaunina Ajax objekts failā scripts.js šādi:

$.ajax(( tips: "POST", url: "php/form-process.php", dati: "name=" + nosaukums + "&e-pasts=" + e-pasts + "&message=" + ziņojums, veiksme: function( teksts)( if (teksts == "veiksmes")( formSuccess(); ) else ( formError(); submitMSG(false,text); ) ) ));

Mēs tikko atjauninājām nosacījumu else, kas pārbauda, ​​vai teksts == veiksmīgs . Citā gadījumā mēs saucām par formError() funkciju, kas aktivizē kratīšanas animāciju, funkcija submitMSG() parāda ziņojuma tekstu no PHP faila. Atgrieztais teksts būs vai nu "Kaut kas nogāja greizi:(", vai dati par tukšiem laukiem.

Secinājums

Dodieties uz Github, lai redzētu visu mūsu uzrakstīto kodu!

Mūsu veidlapa tagad sniedz lietotājiem atsauksmes un parāda, kuri lauki ir aizpildīti nepareizi vai ir tukši. Veidlapā mēs nodrošinājām kontekstuālos ziņojumus, pamatojoties uz PHP faila atgrieztās vērtības statusu, un ieviesām papildu servera puses validācijas līmeni, tverot tos lietotājus, kuri vēlējās apiet priekšgala validāciju.

Kopumā tagad jūsu rokās ir ļoti dinamiska forma, kas ir gatava stila veidošanai un integrēšanai jūsu vietnē. Ceru, ka jums patika šī apmācība, lūdzu, atstājiet visus jautājumus vai domas zemāk esošajos komentāros!

Pamatā parametru nodošanai tiek izmantotas POST un GET metodes.
Galvenā atšķirība starp POST un GET metodēm ir informācijas pārsūtīšanas veids. GET metodē parametri tiek nodoti caur adreses joslu (URL), t.i. HTTP pieprasījuma galvenē, savukārt POST metodē parametri tiek pārsūtīti caur HTTP pieprasījuma pamattekstu un netiek atspoguļoti adreses joslā.

1. Pogas – Tag

Tags izveido tīmekļa lapā pogas, un tā darbība atgādina rezultātu, kas iegūts, izmantojot tagu (ar parametru type="button | reset | submit"). Atšķirībā no šī taga, tas piedāvā papildu opcijas pogu izveidei. Piemēram, uz šādas pogas varat ievietot jebkurus HTML elementus, ieskaitot attēlus. Izmantojot stilus, varat definēt pogas izskatu, mainot fontu, fona krāsu, izmēru un citus parametrus.
Teorētiski tagam jāatrodas elementa iestatītajā formā. Tomēr pārlūkprogrammas nerāda kļūdas ziņojumu un darbojas pareizi ar tagu, ja tas tiek atklāts atsevišķi. Tomēr, ja jums ir jānosūta uz serveri uz pogas, noklikšķinot uz pogas, tas ir jāievieto konteinerā. Noslēguma atzīme ir nepieciešama.
Iespējas:
atspējots – bloķē piekļuvi un elementa modifikāciju.
tips – pogas veids
vērtība — pogas vērtība, kas tiks nosūtīta serverim vai nolasīta, izmantojot spritus.

Poga ar tekstu
IZSLĒGTS parametrs
Bloķē piekļuvi pogai un tās modificēšanu. Šajā gadījumā tas tiek parādīts pelēkā krāsā, un lietotājs to nevar aktivizēt. Turklāt šāda poga nevar iegūt fokusu, nospiežot tabulēšanas taustiņu, izmantojot peli vai citādi. Tomēr šo pogas stāvokli var mainīt, izmantojot skriptus.

Aktīvā poga Neaktīva poga

TYPE parametrs
Definē pogas veidu, kas nosaka tās darbību veidlapā. Dažādu veidu pogas pēc izskata nekādā veidā neatšķiras, taču katrai pogai ir savas funkcijas. Noklusējuma vērtība: poga.
Argumenti:
poga – parastā poga.
atiestatīt – poga, lai notīrītu ievadītos veidlapas datus un atgrieztu vērtības to sākotnējā stāvoklī.

Iesniegt — poga veidlapas datu nosūtīšanai uz serveri.

Notīrīt veidlapu Iesniegt veidlapu

Parametrs VALUE Norāda pogas vērtību, kas tiks nosūtīta uz serveri. Pāris “name=value” tiek nosūtīts uz serveri, kur nosaukumu norāda taga nosaukuma parametrs, bet vērtību norāda vērtības parametrs. Nozīme var sakrist ar tekstu uz pogas vai būt neatkarīga. Vērtības parametrs tiek izmantots arī, lai piekļūtu datiem, izmantojot skriptus.

Iesniegt formu

1.1. Poga (ievades veids=poga) 1.2. Poga ar attēlu (ievades veids = attēls) Poga ar attēlu

Pogas ar attēliem savā darbībā ir līdzīgas pogai Iesniegt, taču tās attēlo attēlu. Lai to izdarītu, iestatiet type=image un src="image.gif" .

Kad lietotājs noklikšķina uz jebkura attēla, atbilstošā forma tiks iesniegta serverim ar diviem papildu mainīgajiem - sub_x un sub_y . Tie satur lietotāja, noklikšķinot uz attēla, koordinātas. Pieredzējuši programmētāji var pamanīt, ka pārlūkprogrammas nosūtītajos mainīgo nosaukumos patiesībā ir punkts, nevis pasvītra, bet PHP automātiski pārvērš punktu par pasvītrojumu.

1.3. Veidlapas iesniegšanas poga (ievades veids=iesniegt)

Izmanto veidlapas iesniegšanai skriptā. Veidojot pogu veidlapas iesniegšanai, jānorāda 2 atribūti: type="submit" un value="Button text" . Атрибут name необходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки. !}

Nav nepieciešams PHP skripts.

1.4. Pogu masīvs (iesniegt), lai izvēlētos 2. darbības opciju. Veidlapas atiestatīšanas poga (Atiestatīt)

Noklikšķinot uz atiestatīšanas pogas, visi veidlapas elementi tiks iestatīti stāvoklī, kas tika norādīts noklusējuma atribūtos, un veidlapa netiks iesniegta.

Nav nepieciešams PHP skripts.

3. Izvēles rūtiņa

Izvēles rūtiņas piedāvā lietotājam vairākas iespējas un ļauj veikt patvaļīgu atlasi (nevienu, vienu vai vairākas no tām).

Balts
Zaļš
Zils
sarkans
Melns

2. piemērs.
// pirmais pogu komplekts
// otrais pogu komplekts
// trešais pogu komplekts

5. Teksta lauks (teksts)

Veidojot parastu teksta lauku ar lieluma izmēru un maksimālo atļauto rakstzīmju garumu maxlength, atribūts type iegūst vērtību text . Ja vērtības parametrs ir norādīts, laukā tiks parādīta mainīgajā norādītā vērtība. Veidojot lauku neaizmirsti norādīt lauka nosaukumu, jo... šis atribūts ir nepieciešams.

6. Paroles lauks

Tieši tāds pats kā teksta lauks, izņemot to, ka lietotāja ievadītās rakstzīmes ekrānā netiks rādītas.

7. Slēpts teksta lauks (slēpts)

Ļauj skriptam nodot daļu pakalpojuma informācijas, to nerādot lapā.

8. Nolaižamais saraksts (atlasiet)

Tags ir nolaižams vai izvērsts saraksts, un vienlaikus var atlasīt vienu vai vairākas rindas. Bet vērtība tiks nodota pēdējai atlasītajai pogai.
Saraksts sākas ar pārī savienotiem tagiem. Tagi ļauj definēt saraksta saturu, un vērtības parametrs nosaka virknes vērtību. Ja atlasītais parametrs ir norādīts tagā, tad sākotnēji tiks atlasīta rinda. Lieluma parametrs norāda, cik rindas aizņems saraksts. Ja izmērs ir 1 , saraksts būs nolaižamais saraksts. Ja ir norādīts vairāku atribūts, var atlasīt vairākus elementus no saraksta. Bet šī shēma praktiski netiek izmantota, un ar izmēru = 1 nav jēgas.

Balts Zaļš Zils Sarkans Melns

Ja jums ir jāizveido nolaižamā izvēlne ar paredzamu secību. Piemēram, saraksts ar gadiem no 2000. līdz 2050. Tad tiek izmantota šāda tehnika.

9. Vairāku rindiņu teksta ievades lauks (teksta apgabals)

Vairāku rindiņu teksta ievades lauks ļauj nosūtīt ne tikai vienu rindiņu, bet vairākas vienlaikus. Ja nepieciešams, var norādīt tikai lasāmo atribūtu, kas aizliedz rediģēt, dzēst un mainīt tekstu, t.i. teksts būs tikai lasāms. Ja ir nepieciešams, lai teksts sākotnēji tiktu parādīts vairāku rindiņu ievades laukā, tad tas jāievieto starp tagiem.
Ir aptīšanas parametrs - līnijas aptīšanas iestatīšana. Iespējamās vērtības:
izslēgts – atspējo līniju aptīšanu;
virtuals – parāda rindiņu pārtraukumus, bet nosūta tekstu tādu, kāds tas tika ievadīts;
fiziskais – rindiņu pārtraukumi ir atstāti to sākotnējā formā.
Pēc noklusējuma tags izveido tukšu lauku, kura platums ir 20 rakstzīmes un sastāv no 2 rindiņām.

Lai vairāku rindiņu teksta lauks atbilstu html formatējumam (rindu aplaušana, izmantojot tagu
vai
), pēc tam izmantojiet funkciju nl2br():

Sākotnēji ievietotā 1. rindiņa Sākotnēji ievietotā 2. rindiņa Sākotnēji ievietotā 3. rindiņa

10. Poga failu augšupielādei (pārlūkot)

Kalpo, lai īstenotu failu augšupielādi serverī. Veidojot teksta lauku, jānorāda arī lauka veids kā "fails" .

Augšupielādēt failu:

Veidi, kā pārlūkprogramma sazinās ar serveri

HTTP protokols nodrošina dažas metodes. Šī ir svarīga informācija. Citu veidu nav. Praksē tiek izmantoti divi:
GET ir tad, kad dati tiek nosūtīti adreses joslā, piemēram, kad lietotājs noklikšķina uz saites.
POST – kad viņš noklikšķina uz pogas uz formas.

GET metode

Lai pārsūtītu datus, izmantojot GET metodi, HTML lapā nav jāizveido veidlapa (neviens neaizliedz izmantot veidlapas pieprasījumiem, izmantojot GET metodi) - pietiek ar saiti uz dokumentu, pievienojot vaicājuma virkni, kas var izskatīties kā mainīgais=vērtība. Pāri tiek savienoti, izmantojot simbolu &, un virkne tiek pievienota lapas URL, izmantojot jautājuma zīmi “? "
Bet jums nav jāizmanto atslēgas =vērtības pāri, ja jānodod tikai viens mainīgais — lai to izdarītu, aiz jautājuma zīmes ir jāieraksta mainīgā VĒRTĪBA (nevis nosaukums).
Šādas parametru nodošanas priekšrocība ir tāda, ka klienti, kuri nevar izmantot POST metodi (piemēram, meklētājprogrammas), joprojām var vienkārši sekot saitei, lai nosūtītu parametrus skriptam un izgūtu saturu.
Trūkums ir tāds, ka, vienkārši mainot parametrus adreses joslā, lietotājs var pagriezt skriptu neparedzamā veidā, un tas rada milzīgu drošības robu kombinācijā ar nedefinētiem mainīgajiem un register_globals on vai kāds var uzzināt skripta vērtību. svarīgs mainīgais (piemēram, sesijas ID), vienkārši skatoties monitora ekrānā.
:
- piekļūt publiskām lapām ar nododamiem parametriem (palielināta funkcionalitāte)
- informācijas pārsūtīšana, kas neietekmē drošības līmeni
:
- piekļūt aizsargātām lapām ar parametru pārsūtīšanu
- pārsūtīt informāciju, kas ietekmē drošības līmeni
- lai pārsūtītu informāciju, kuru lietotājs nevar mainīt (daži pārraida SQL vaicājumu tekstu.

POST metode

Varat iesniegt datus, izmantojot POST metodi, tikai izmantojot veidlapu HTML lapā. Galvenā atšķirība starp POST un GET ir tāda, ka dati tiek pārsūtīti nevis pieprasījuma galvenē, bet gan pamattekstā, tāpēc lietotājs tos neredz. To var mainīt, tikai mainot pašu veidlapu.
Priekšrocība :
- lielāka pieprasījumu drošība un funkcionalitāte, izmantojot veidlapas, izmantojot POST metodi.
Trūkums:
- mazāka pieejamība.
Kādiem nolūkiem to vajadzētu izmantot:
- liela apjoma informācijas pārsūtīšanai (teksts, faili ..);
- pārsūtīt jebkuru svarīgu informāciju;
- ierobežot piekļuvi (piemēram, navigācijai izmantot tikai veidlapu - opcija, kas nav pieejama visām robotu programmām vai satura satvērējiem).
Ko nevajadzētu lietot:

PHP spēj pieņemt failu, kas lejupielādēts, izmantojot jebkuru pārlūkprogrammu. Tas ļauj augšupielādēt gan teksta, gan bināros failus. Apvienojumā ar PHP autentifikācijas un failu sistēmas funkcijām jums ir pilnīga kontrole pār to, kam ir atļauts augšupielādēt failus un ko darīt ar failu, kad tas ir augšupielādēts.
Faila augšupielādes lapu var ieviest, izmantojot īpašu veidlapu, kas izskatās apmēram šādi:

//Veidlapa failu augšupielādei Nosūtīt šo failu:

Iepriekš minētajā piemērā " URL" jāaizstāj ar saiti uz PHP skriptu. Slēptam laukam MAX _FILE_SIZE (vērtība jānorāda baitos) ir jābūt pirms faila atlases lauka, un tā vērtība ir akceptētā faila maksimālais atļautais lielums. noteikti norādiet enctype=" veidlapas atribūtos multipart/form-data" , pretējā gadījumā faili netiks augšupielādēti serverī.
Uzmanību
Opcija MAX _FILE_SIZE ir pārlūkprogrammas ieteikums, pat ja PHP arī pārbaudītu šo nosacījumu. Pārlūkprogrammas pusē apiet šo ierobežojumu ir diezgan viegli, tāpēc jums nevajadzētu paļauties uz šo funkciju, lai bloķētu visus lielākos failus. Tomēr nav iespējams apiet PHP maksimālā izmēra ierobežojumu. Jebkurā gadījumā jums vajadzētu pievienot mainīgo MAX _FILE_SIZE formā, jo tas neļauj lietotājiem uztraukties, pārsūtot milzīgus failus, lai uzzinātu, ka fails ir pārāk liels un pārsūtīšana patiešām neizdevās.

Kā definēt pieprasījuma metodi?

Tieši:

Getenv("REQUEST_METHOD");

atgriezīs GET vai POST.

Kura metode būtu jāizmanto?

Ja veidlapa tiek izmantota, lai pieprasītu kādu informāciju, piemēram, meklēšanas laikā, tad tā jānosūta, izmantojot GET metodi. Lai lapa būtu atjaunināta, varat to pievienot grāmatzīmēm un/vai nosūtīt saiti draugam.
Ja veidlapas iesniegšanas rezultātā dati tiek ierakstīti vai mainīti serverī, tad tie jānosūta, izmantojot POST metodi, un pēc veidlapas apstrādes obligāti jāpāradresē pārlūkprogramma, izmantojot GET metodi. Tāpat POST var būt nepieciešams, ja uz serveri ir jāpārsūta liels datu apjoms (GET tas ir ļoti ierobežots), kā arī tad, ja pārsūtītie dati nav jāparāda adreses joslā (ievadot pieteikumvārdu un paroli, piemēram).
Jebkurā gadījumā pēc POST apstrādes jums vienmēr jāpāradresē pārlūkprogramma uz kādu lapu, kaut vai to pašu, bet bez formas datiem, lai pēc lapas atsvaidzināšanas tie netiktu ierakstīti vēlreiz.

Kā pārsūtīt datus uz citu failu tieši no PHP programmas korpusa, izmantojot GET un POST metodes?

Piemērs, lai demonstrētu datu sūtīšanu, izmantojot POST un GET metodes vienlaikus, un atbildes saņemšanu no servera.

Viens no praksē izplatītākajiem uzdevumiem ir atgriezeniskās saites veidlapas ieviešana. Jūs domājat tā HTML koda rakstīšanu, noformēšanu CSS, PHP skripta izveidošanu, kas apstrādātu no lietotāja saņemtos datus un nosūtītu tos uz mūsu pastu, JS skripta rakstīšanu, kas pārbaudītu formu ievadīto datu atbilstību, aizsargā mūsu brainchild no surogātpasta, lai mūsu pastkastīte nesabruka no botu uzbrukumiem.

Visi iepriekš minētie punkti tiks apspriesti mūsu pārskatā un detalizēti komentēti.

Tātad, sāksim veidot atsauksmju veidlapu:

HTML

Pirmkārt, mēs rakstām HTML kodu, kas norāda laukus, kurus lietotājs aizpildīs. Nākotnē tie tiks formalizēti. Veidlapas kods izskatās šādi:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Vārds:< input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Tālrunis:< input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-pasts:< input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Ziņa:< textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Sūtīt" />

Un vizuāli tas tagad izskatās šādi:

Piekrītu, pagaidām viss ir neglīts un nekas nav skaidrs, bet mēs tikko sākām.

Apskatīsim iepriekš minēto kodu sīkāk:

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

  
  Lai izveidotu veidlapu, ir jāizmanto formas tags. Tas ir tas, kurš nosaka koda tulka formas sākumu un beigas. Tam, tāpat kā jebkuram tagam, ir vesels atribūtu komplekts, taču, lai veidlapa darbotos, ir nepieciešami tikai divi, tie ir metode (pieprasījuma nosūtīšanas metode serverim, pastu izmanto kā standartu veidlapām) un darbība ( norāda ceļu uz veidlapas apstrādātāja failu, proti, šajā failā būs PHP skripts, kas pēc tam nosūtīs mums lietotāja ievadītās vērtības. Mūsu gadījumā mēs redzam, ka šis fails tiek saukts par mail.php un tā atrodas tajā pašā vietnes direktorijā, kurā atrodas lapa, kuru apsveram).

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

  
  Tālāk mums ir ievades. Tie faktiski ir paši veidlapas lauki, kuros lietotāji ievadīs mums nepieciešamo informāciju (type="text" norāda, ka tas būs teksts). Atribūts maxlength norāda, cik rakstzīmju lietotājs var ievadīt noteiktā formas laukā. Vissvarīgākais atribūts ir nosaukums – tas norāda konkrēta lauka nosaukumu. Ar šiem nosaukumiem PHP skripts vēlāk apstrādās tajā ievadīto informāciju. Ja vēlaties, varat iestatīt arī viettura atribūtu, kas laukā parāda tekstu, kas pazūd, kad kursors tiek ievietots tajā. Viena no viettura problēmām ir tā, ka dažas vecākas pārlūkprogrammas to neatbalsta.

• < label for = "name" >Vārds:

  
  Izmanto, ja esam atteikušies no vietturiem. Parasts lauka paraksts, atribūts for norāda, uz kuru konkrētu lauku šis paraksts attiecas. Vērtība norāda mūs interesējošā lauka nosaukumu.

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

  
  Tāpat kā ievade, tā ir paredzēta lietotājam informācijas ievadīšanai, tikai šoreiz lauks ir pielāgots gariem ziņojumiem. Rindas norāda lauka lielumu rindās, kolonnas rakstzīmēs. Kopumā viņi nosaka mūsu lauka augstumu un platumu.

• < input type= "submit" value= "Sūtīt" />

  
  Type="submit" norāda, ka šī ir poga veidlapas iesniegšanai, un vērtība norāda tekstu, kas būs šīs pogas iekšpusē.

• < div class = "right" >

  
  tiek izmantoti tikai turpmākajam veidlapas vizuālajam noformējumam.

CSS

Lai mūsu atsauksmju veidlapa izskatītos reprezentabla, tā ir jāformatē. Lai iegūtu šādu rezultātu:

Mēs izmantojām šo kodu:

forma ( fons: #f4f5f7; polsterējums: 20px; ) forma . pa kreisi, forma . pa labi ( displejs: iekļauts bloks; vertikāls līdzinājums: augšpusē; platums: 458 pikseļi; ) forma . pa labi ( polsterējums- pa kreisi: 20 pikseļi; ) etiķete ( displejs: bloks; fonta izmērs: 18 pikseļi; teksts- līdzinājums: centrā; mala: 10 pikseļi 0 pikseļi 0 pikseļi 0 pikseļi; ) ievade, teksta apgabals ( apmale: 1px solid #82858D; polsterējums: 10 pikseļi; fonta izmērs: 16 pikseļi; platums: 436 pikseļi; teksta apgabals (augstums: 98 pikseļi; mala — apakšdaļa: 32 pikseļi; ) ievade[ type= "submit"] (platums: 200 pikseļi; pludiņš: nav; fons: #595B5F; krāsa: #fff - teksta pārveidošana: lielie burti;

Es neredzu jēgu detalizēti aprakstīt CSS. Es pievērsīšu jūsu uzmanību tikai galvenajiem punktiem:

Veidlapā nav jāraksta dizains katrai birkai. Mēģiniet izveidot atlasītājus tā, lai jūs varētu izveidot visus nepieciešamos elementus pāris koda rindiņās.

Neizmantojiet nevajadzīgas tipa atzīmes, lai pārtrauktu līnijas un izveidotu atkāpes< br>, < p>utt. CSS ar displeju: bloks un mala ar polsterējuma īpašībām lieliski tiek galā ar šiem uzdevumiem. Vairāk par to, kāpēc to nevajadzētu izmantot< br>izkārtojumā vispār var lasīt rakstā Tag br, bet vai tas tiešām ir vajadzīgs? .

Veidlapām nevajadzētu izmantot tabulas izkārtojumu. Tas ir pretrunā ar šī taga semantiku, un meklētājprogrammas mīl semantisko kodu. Lai veidotu dokumenta vizuālo struktūru, mums ir nepieciešami tikai tagi div un CSS norādītie displeja rekvizīti: inline-block (sakārto blokus pēc kārtas) un vertical-align: top (neļauj tiem izkliedēties pa ekrānu) , iestatiet tos vajadzīgajā augstumā un voila, nekas lieks un viss atrodas tā, kā mums vajag.

Tiem, kas vēlas ietaupīt savu laiku mājaslapu dizainam, varu ieteikt, veidojot mājas lapas, īpaši pašu rakstītās, izmantot CSS ietvarus. Mana izvēle šajā ziņā ir Twitter Bootstrap. Varat noskatīties nodarbību, kā noformēt veidlapas, izmantojot to.

PHP

Nu, ir pienācis laiks likt mūsu formai darboties.

Mēs ejam uz mūsu vietnes saknes direktoriju un izveidojam tur mail.php failu, kuram iepriekš norādījām ceļu formas taga atribūtā action.

Galu galā viņa kods izskatīsies šādi:

Jūsu ziņojums ir veiksmīgi nosūtīts

Varat izlaist šī dokumenta HTML un CSS daļu apspriešanu. Būtībā šī ir parasta vietnes lapa, kuru varat veidot atbilstoši savām vēlmēm un vajadzībām. Apskatīsim tā vissvarīgāko daļu - PHP skriptu formas apstrādei:

$atpakaļ = "

Atgriezies

" ;

Ar šo rindiņu mēs izveidojam saiti, lai atgrieztos iepriekšējā lapā. Tā kā mēs iepriekš nezinām, no kuras lapas lietotājs nokļūs šajā, tas tiek darīts, izmantojot nelielu JS funkciju. Nākotnē mēs vienkārši piekļūsim šim mainīgajam, lai parādītu to vajadzīgajās vietās.

ja (! tukšs ($_POST [ "vārds" ] ) un ! tukšs ($_POST [ "tālrunis" ] ) un ! tukšs ($_POST [ "pasts" ] ) un ! tukšs ($_POST [ "ziņa" ] ) ) ( //apdarinātāja iekšējā daļa ) else ( echo "Lai nosūtītu ziņojumu, aizpildiet visus laukus! $back " ; iziet ; )

Šeit mēs pievienojam veidlapas pārbaudi, lai pārliecinātos, ka lauki ir pilni. Kā jūs uzminējāt, $_POST["nosaukums"] daļā pēdiņās mēs ierakstām mūsu ievades atribūta nosaukuma vērtību.

Ja visi lauki ir aizpildīti, skripts sāks apstrādāt datus savā iekšējā daļā, bet, ja nav aizpildīts vismaz viens lauks, tad lietotāja ekrānā tiks parādīts ziņojums ar lūgumu aizpildīt visus veidlapas lauki atbalsojas “Lai nosūtītu ziņojumu, aizpildiet visus laukus $back” un saite, lai atgrieztos iepriekšējā lapā, kuru izveidojām ar pašu pirmo rindiņu.

Tālāk mēs ielīmējam veidlapas apstrādātāja iekšējā daļā:

$nosaukums = apgriezt(sloksnes_tags($_POST["nosaukums"])); $phone = apgriezt(sloksnes_tags($_POST["tālrunis"])); $ pasts = apgriezt(sloksnes_tags($_POST["pasts"])); $ziņojums = trim(strip_tags($_POST["ziņojums"]));

Tādējādi mēs notīrījām lietotāja ievadītos datus no html tagiem un papildu atstarpēm. Tas ļauj mums pasargāt sevi no ļaunprātīga koda saņemšanas mums nosūtītajos ziņojumos.

Pārbaudes var padarīt sarežģītākas, taču tas ir jūsu ziņā. Mēs jau esam uzstādījuši minimālu aizsardzību servera pusē. Pārējo darīsim klienta pusē, izmantojot JS.

Es neiesaku pilnībā atteikties no veidlapu aizsardzības servera pusē par labu JS, jo, lai arī ļoti reti, ir unikāli, kuriem pārlūkprogrammā ir atspējots JS.

Pēc atzīmju tīrīšanas pievienojiet īsziņas nosūtīšanu:

pasts ("[email protected]" , "Vēstule no_jūsu_vietnes_adreses" , "Es jums rakstīju: " . $name . "
Viņa numurs: " . $phone ."
Viņa e-pasts: " . $ pasts ."
Viņa ziņojums: " . $message, "Content-type:text/html;charset=windows-1251" ) ;

Tieši šī līnija ir atbildīga par ziņojuma ģenerēšanu un nosūtīšanu mums. To aizpilda šādi:

“[email protected]” — šeit starp pēdiņām ievietojat savu e-pastu

“Vēstule no jūsu_vietnes_adreses” ir ziņojuma tēma, kas tiks nosūtīta uz jūsu e-pastu. Šeit jūs varat rakstīt jebko.

"Rakstīja jums: ".$name."< br />Viņa numurs: ".$phone."< br />Viņa e-pasts: ".$mail."< br />Viņa ziņojums: ".$message – veidojam pašu ziņojuma tekstu. $name – ievietojam lietotāja aizpildīto informāciju, piekļūstot laukiem no iepriekšējā soļa, pēdiņās aprakstam, ko šis lauks nozīmē, ar tagu< br />Mēs pārtraucam līniju, lai ziņojums kopumā būtu lasāms.

Content-type:text/html;charset=windows-1251 — beigās ir skaidra norāde par ziņojumā pārsūtīto datu tipu un tā kodējumu.

SVARĪGS!

Kodējums, kas norādīts dokumenta “galvenā” (< meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" />), kodējumam no ziņojuma Content-type:text/html;charset=windows-1251 un vispār PHP faila kodējumam ir jāsakrīt, pretējā gadījumā pa pastu saņemtajos ziņojumos tiks rādīti “traki vārdi” nevis krievu vai Angļu burti.

Daudzi cilvēki nepārprotami nenorāda sūtāmā ziņojuma kodējumu, taču dažos e-pasta klientos tas var radīt problēmas nākotnē (uz pastu tiek nosūtīti nelasāmi e-pasta ziņojumi), tāpēc iesaku to norādīt jebkurā gadījumā.

Veidlapas pārbaude par ievadīto datu atbilstību

Lai lietotāji netīšām nepalaistu garām laukus un visu aizpilda pareizi, ir vērts pārbaudīt ievadītos datus.

To var izdarīt gan PHP servera pusē, gan JS klienta pusē. Izmantoju otro variantu, jo tādā veidā cilvēks var uzreiz noskaidrot, ko izdarījis nepareizi, un kļūdu izlabot, neveicot papildu lapas pārejas.

Mēs ielīmējam skripta kodu tajā pašā failā, kur mums ir veidlapas HTML daļa. Mūsu gadījumā tas izskatīsies šādi:

< script>funkcija checkForm(form) ( var nosaukums = forma. nosaukums. vērtība; var n = nosaukums. match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Ja- z ] + $/ ) ; if (! n) ( alert("Vārds ir ievadīts nepareizi, lūdzu, izlabojiet kļūdu") ; return false ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ; if (! p) ( alert("Tālrunis ievadīts nepareizi") ; return false ; ) var mail = veidlapa . 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] + $/ ) ( brīdinājums("E-pasts ir ievadīts nepareizi , lūdzu, izlabojiet kļūdu" ) ; return false;) return true;)

Nu, tagad parastā analīze:

Lai mēs varētu pārbaudīt veidlapu, noklikšķinot uz pogas Iesniegt, veidlapas tagam pievienojam skripta palaišanu:

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

Tagad pieņemsim kontrolsarakstu pa punktiem:

Kā redzat, šāds mini čeks ir rakstīts katram mūsu laukam. Ekrānuzņēmumā es atzīmēju vienu lauku ar sarkanu kvadrātu, un citiem laukiem ir līdzīga struktūra, un, ja ir nepieciešams pievienot vai noņemt lauku, tagad varat to viegli izdarīt.

Viena no lieliskajām PHP lietām ir veids, kā tā darbojas ar HTML formām. Šeit galvenais ir tas, ka katrs formas elements automātiski kļūst pieejams jūsu PHP programmām. Detalizētu informāciju par veidlapu izmantošanu PHP lasiet sadaļā. Šeit ir HTML veidlapas piemērs:

1. piemērs Vienkāršākā HTML veidlapa

Tavs vārds:

Tavs vecums:

Šajā formā nav nekā īpaša. Šī ir parasta HTML veidlapa bez īpašiem tagiem. Kad lietotājs aizpilda veidlapu un noklikšķina uz pogas Iesniegt, tiks izsaukta lapa action.php. Šim failam var būt kaut kas līdzīgs:

2. piemērs Veidlapas datu parādīšana

Sveiki, .
Tu esi vecs.

Šīs programmas izvades piemērs:

Sveiks, Sergej. Jums ir 30 gadi.

Ja neņem vērā koda daļas ar htmlspecialchars() un (int), šī koda darbības principam jābūt vienkāršam un saprotamam. htmlspecialchars() nodrošina, ka "īpašās" HTML rakstzīmes ir pareizi kodētas, lai jūsu lapā netiktu ievietots ļaunprātīgs HTML vai Javascript. Vecuma lauks, kuram, kā mēs zinām, ir jābūt skaitlim, mēs varam vienkārši pārvērst par veselu skaitli, kas automātiski atbrīvos no nevēlamajām rakstzīmēm. PHP to var izdarīt arī automātiski, izmantojot filtra paplašinājumu. Mainīgos $_POST["nosaukums"] un $_POST["vecums"] automātiski iestata PHP. Iepriekš mēs izmantojām $_SERVER superglobālo mainīgo, bet šeit mēs līdzīgi izmantojām $_POST superglobālo mainīgo, kas satur visus POST datus. ievērojiet, tas nosūtīšanas metode(metode) mūsu veidlapā ir POST. Ja mēs izmantotu metodi GŪT, tad mūsu veidlapas informācija būtu superglobālajā mainīgajā $_GET . Varat arī izmantot mainīgo $_REQUEST, ja datu avotam nav nozīmes. Šis mainīgais satur GET, POST, COOKIE datu sajaukumu.

pirms 15 gadiem

Saskaņā ar HTTP specifikāciju jums ir jāizmanto POST metode, kad izmantojat veidlapu, lai mainītu kādas lietas stāvokli servera galā. Piemēram, ja lapai ir veidlapa, kas ļauj lietotājiem pievienot savus komentārus, piemēram, šo Ja noklikšķināt uz "Atkārtoti ielādēt" vai "Atsvaidzināt" lapā, kuru sasniedzāt, izmantojot POST, tā gandrīz vienmēr ir kļūda — jums nevajadzētu publicēt vienu un to pašu komentāru divreiz. tāpēc šīs lapas nav pievienotas grāmatzīmēm vai kešatmiņā.

Jums vajadzētu izmantot GET metodi, ja jūsu veidlapa kaut ko noņem no servera un faktiski neko nemaina. Piemēram, meklētājprogrammas veidlapā jāizmanto GET, jo, meklējot tīmekļa vietnē, nevajadzētu mainīt neko, kas varētu interesēt klientu, un meklētājprogrammas vaicājuma rezultātu pievienošana grāmatzīmēm vai kešatmiņai ir tikpat noderīga kā grāmatzīmju vai kešatmiņas saglabāšana. statiska HTML lapa.

pirms 1 gada

Ir vērts precizēt:

POST nav drošāka par GET.

Iemesli, kāpēc izvēlēties GET vai POST, ir saistīti ar dažādiem faktoriem, piemēram, pieprasījuma nolūku (vai jūs "iesniedzat" informāciju?), pieprasījuma lielumu (ir ierobežojumi, cik ilgi URL var būt, un GET parametri tiek nosūtīti URL) un cik viegli vēlaties, lai darbība būtu koplietojama. Piemēram, Google meklēšana ir GET, jo tā ļauj viegli kopēt un kopīgot meklēšanas vaicājumu ar kādu citu, vienkārši kopīgojot URL.

Drošība šeit tiek ņemta vērā tikai tāpēc, ka GET ir vieglāk kopīgot nekā POST. Piemērs: jūs nevēlaties, lai GET nosūtītu paroli, jo lietotājs var kopīgot iegūto URL un netīšām atklāt savu paroli.

Tomēr GET un POST ir vienlīdz viegli pārtvert labi novietota ļaunprātīga persona, ja jūs neizvietojat TLS/SSL, lai aizsargātu pašu tīkla savienojumu.

Visas veidlapas, kas nosūtītas, izmantojot HTTP (parasti ports 80), ir nedrošas, un šodien (2017. gadā) nav daudz labu iemeslu, lai publiska vietne neizmantotu HTTPS (kas būtībā ir HTTP + transporta slāņa drošība).

Kā bonuss ir tas, ka, ja izmantojat TLS, tiek samazināts risks, ka jūsu lietotājiem tiks ievadīts kods (AD), ko neesat ievietojis jūs.

Laba diena visiem. Aleksejs Guļiņins sazinās. Pēdējā rakstā jūs uzzinājāt par to, kas ir serializācija php. Šajā rakstā es vēlētos runāt par to, kā strādāt ar veidlapām PHP. PHP valoda ir paredzēta tīmekļa skriptu programmēšanai, un veidlapu apstrāde, iespējams, ir vissvarīgākā vieta šajā procesā. Mūsdienās pat nevar atrast vietnes, kurās nav, piemēram, reģistrācijas vai atsauksmju veidlapas, vai anketas. Forumi, interneta veikali, komentāra pievienošana, ziņas nosūtīšana sociālajā tīklā – tas viss ir veidlapas laukos ievietoto datu apstrāde. Izmantosim piemēru, lai noskaidrotu, kā apstrādāt veidlapas PHP.
Īstenosim vienkāršu uzdevumu: jāizveido 2 lauki (vārds un uzvārds), jānodod šie dati action.php skriptam, un rezultātā jāparādās sveicienam “Laipni lūdzam, uzvārds vārds”. Tiem, kas ir aizmirsuši, kā tiek veidotas formas un kādi lauki ir, var ieskatīties. Izveidosim failu test.html:

Vārds Uzvārds:

Lūdzu, ņemiet vērā, ka failam action.php (mūsu gadījumā) ir jāatrodas tajā pašā mapē kā failam test.html. Šeit var norādīt gan relatīvos, gan absolūtos ceļus. Esiet piesardzīgs, jo daudzas kļūdas ir saistītas ar nepareizu ceļa norādīšanu uz veidlapas apstrādātāja skriptu.

Izveidosim failu action.php ar šādu saturu:

Ja tagad atveram failu test.html, aizpildīsim veidlapas laukus un noklikšķināsim uz pogas, mēs nonāksim failā action.php, kur tiks parādīts ziņojums. Šādā gadījumā pārlūkprogramma piekļūst action.php skriptam un nodod to caur "?" visas nosaukuma atribūtu vērtības, kas atrodas tagos, atdalītas ar & . Lūdzu, ņemiet vērā, ar ko tiek aizstāts $_SERVER.

Mēs varam atrisināt savu problēmu, parsējot virkni QUERY_STRING, izmantojot standarta funkcijas darbam ar virknēm PHP, taču labāk ir izmantot citu mehānismu - izmantojot $_REQUEST masīvu. PHP visus datus, kas saņemti no veidlapas laukiem, ievieto masīvā $_REQUEST neatkarīgi no tā, kā dati tika pārsūtīti: POST vai GET (jūs varat uzzināt, izmantojot $_SERVER["REQUEST_METHOD"]). Ļaujiet man atgādināt, kā šīs metodes atšķiras:

GET metode ir publiska, POST metode ir privāta, t.i. tie atšķiras pēc parametru nodošanas veida. Piemērs:

1) Ja mēs izmantojam pasta metodi: mysite.ru/request.php.
2) Ja mēs izmantojam iegūšanas metodi: mysite.ru/request.php?myname=”Alex”&surname=”Guļiņins”.

Papildus masīvam $_REQUEST PHP izveido arī $_GET un $_POST masīvus. Tagad īstenosim savu uzdevumu, pamatojoties uz iegūtajām zināšanām:

Ja tagad aizpildīsim veidlapu un noklikšķināsim uz pogas, mēs redzēsim, ka action.php skripts mūs sveic ar uzvārdu un vārdu. Viss darbojas pareizi.

Šeit viss ir kārtībā, taču, ja mainīsim skripta nosaukumu, mums būs jāveic izmaiņas failā test.html. Modificēsim failu action.php, lai, piekļūstot tam, tas parādītu vai nu veidlapu, kad neko neesam iesnieguši, vai sveicienu, kad noklikšķināsim uz pogas: