Kuidas tagasisidet luua. Veebikujundus ja otsingumootoritele optimeerimine. PHP tagasiside vorm

Vaatame html- ja php-s kirjutatud veebisaidi lihtsa ja kiire tagasiside vormi näidet.

Miks on vorm html-is ja php-s?

CRM-ide jaoks, nagu Wordpress, Joomla ja teised, leiate saidi tagasisidevormi installimiseks erinevaid pistikprogramme. Kuid mis mulle selliste pistikprogrammide puhul ei meeldi, on nende kehv jõudlus ja aeglustab saidi tööd. Kuna need pistikprogrammid toodavad endiselt sama HTML-koodi, soovitan kasutada lihtsat, kuid täielikult toimivat vormi, mida saab ka saidilt tagasi helistamiseks muuta.

Kontaktivorm HTML-is sisestatakse lihtsalt Joomla, OpenCarti administraatoripaneelile ja kui teie sait on ise kirjutatud või kasutate mõnda raamistikku, pole esitatud koodi kasutamine keeruline ja mis kõige tähtsam, sait laaditakse kiiresti nagu enne koodi sisestamist.

Saidi tagasiside korraldamise struktuur

Et kõik toimiks, annan teile struktuuri, mida on vaja kontakt- või kõnevormi toimimiseks?

Lehele sisestatud HTML-kood + css-stiilid.
Php-fail, mis kirja saadab.

Html-kood sisaldab teavet selle kohta, milliseid sisestusvälju tuleb näidata ja nende pealdisi. CSS-stiilid vastutavad vormi enda visuaalse kujunduse ja andmete kuvamise eest. Kui klõpsate saatmisnupule, kutsutakse php fail, mis saadab kirja määratud meilile. Vaatame vormi lähtekoodi hiljem lähemalt.

HTML-i tagasiside vormi kood

Esiteks esitame saidi tagasiside vormi täieliku koodi HTML-vormingus.

Vorm ise asub html-märgendite vahel

. Vormi silt ise

määratud css class="form-zvonok", mida kasutatakse vormi kuvamise seadistamiseks css-stiilide kaudu.

Vormi atribuudid autocomplete="off" – vormi automaatne täitmine on keelatud. Vormi atribuut on action="http://site.com/email.php" , see määrab faili aadressi, millele helistatakse ja kuhu vormi andmed edastatakse pärast nupule “Saada” klõpsamist.

Atribuut method="post", sel juhul saadetakse andmed peidetuna ja neid ei kuvata aadressiribal, teine Get meetod saadab vormi andmed läbi aadressiriba. Arvestades saidi SEO optimeerimise vajadust, on saidi tagasisidevormi puhul parem saata andmed posti meetodil, kuna Get meetodi puhul on saidil sisuliselt saadaval palju sarnaseid lehti , mis erinevad vaid mõne väiksema parameetri poolest.

Selle div sees on silte sisaldavad divid Ja , ja päris lõpus - esitamisnupp, millele vajutades saadetakse vormi andmed.

Kirja saatmine php skriptiga

Siin on lihtne skript kirja saatmiseks

Kirja saatmiseks nõutavale meilile asendage muutuja $to väärtus [e-postiga kaitstud] vajalikule aadressile. Muutuja $subject on sõnumi teema, mida näitavad e-posti programmid tähtede loendite vaatamisel. $sõnum on kirja sisu, see on sõnum ise. $headers - kirja päis, see näitab kirja tüüpi, näiteks html, ka kirja kodeeringut, kellelt kiri saadeti ja millisele meilile vastus saata.

CSS-i veebisaidi jaoks tagasihelistamisvormi kujundamine

Siin on saidi tagasiside vormi CSS-i kujunduskood.

Obratnuj-zvonok( laius: 100%; maksimaalne laius: 350 pikslit; ) .form-zvonok( laius: 100%; ekraan: painduv; painduv suund: veerg; polster: 0 20 pikslit; kasti suurus: ääris-kast; ) .form-zvonok div( padding: 15px 0; ) .bot-send-mail( box-sizing: border-box; width: 100%; ) .form-zvonok label,.form-zvonok input( display: block; width : 100%; kasti suurus: ääris-kast; ) .form-zvonok label( margin-alumine: 5px; font-weight: bold; ) .form-zvonok input( polster: 10px 15px; margin-top: 10px; ) .form-zvonok label span(värv: punane; ) .form-zvonok .bot-send-mail( polster: 15px; margin-top: 10px; taust: puudub; ääris: puudub; teksti teisendus: suurtähed; värv: # fff; fondi kaal: paks; taustavärv: #009b97; kursor: kursor; ääris: 3px #009b97 ühtlane; äärise raadius: 5px; ) .form-zvonok .bot-send-mail:hover( värv: #009b97 ; taustavärv: #fff; )

Muutke lahtri laius võrdseks emaploki laiusega ja piirake maksimaalset laiust 350 piksliga; kui laiem, näeb HTML-vorm välja venitatud:

Obratnuj-zvonok (laius: 100%; maksimaalne laius: 350 pikslit; )

Väljade ja esitamisnupu korrastamiseks mässime need lahtrisse div, paneme kuva painduma ja määrame kuvamissuunaks veeru. Ilu huvides lisage üla- ja alaossa 20 piksli polster:

Vorm-zvonok (laius: 100%; ekraan: painduv; painutussuund: veerg; polsterdus: 0 20 pikslit; kasti suurus: ääris-kast; )

Pealkiri ja sisestusväli on ümbritsetud div-ga:

nimi *

Selle divisjoni jaoks määrame täidised:

Vorm-zvonok div (polster: 15 pikslit 0; )

Määrake saatmisnupu laius võrdseks emaploki laiusega ja määrake äärisele kasti suurus nii, et see ei ulatuks üle emaploki:

Bot-send-mail (kasti suurus: ääris-kast; laius: 100%; )

Samamoodi siltide ja sisestusväljade puhul:

Form-zvonok label,.form-zvonok input (kuva: plokk; laius: 100%; kasti suurus: ääris-kast; )

Kohandame allkirjade ja sisestusväljade ilusat välimust:

Vormi-zvonoki silt (veeris-alumine: 5 pikslit; fondi kaal: paksus kirjas; ) .vorm-zvonoki sisend (polster: 10 pikslit 15 pikslit; veeris-ülaosa: 10 pikslit; )

Tee täht punaseks:

Vormi-zvonoki sildi pikkus (värv: punane; )

Loome saatmisnupu:

Form-zvonok .bot-send-mail( polster: 15px; ülemine veeris: 10px; taust: puudub; ääris: puudub; teksti teisendus: suurtähed; värv: #fff; fondi kaal: paks; taustavärv: # 009b97; kursor: kursor; ääris: 3px #009b97 tahke; äärise raadius: 5px; )

Kui hõljutate kursorit nupu kohal, määrake värvimuutus:

Form-zvonok .bot-send-mail:hover( värv: #009b97; taustavärv: #fff; )

Looge tagasiside vorm

Tagasisidevormi loomine kodulehel

Veebisaidi reklaamimise protsessis koos külastusstatistika uurimisega on eriti oluline teave veebisaidi kohta külastajatelt endilt. Üks lihtsamaid viise sellise teabe hankimiseks on paigutada veebisaidile leht, millel on tagasiside vorm. Külastaja jätab sõnumi ja see saadetakse teie e-posti aadressile või mõnele muule teie määratud aadressile. Sel juhul ei pea külastaja kasutama oma meiliprogrammi, tal ei pea olema isegi oma e-posti.

Selle vormi lihtsaim näide on näidatud joonisel 1. (See on täiesti töötav näidis ja saate seda kasutada mulle tänukirja saatmiseks.)

Joonis 1. Lihtne tagasiside vorm

Sellise tagasisidevormi veebisaidile paigutamiseks vajate ainult põhiteavet HTML-i kohta ja võimalust kasutada kahte käsku - Kopeeri Ja Sisesta. Vaatleme toimingute jada tagasisidevormi loomiseks (joonis 1) saidi HTML-lehel.

1. Kontrollige, kas teie hostimisplaan (kontor, kus teie saiti majutatakse) toetab PHP-d. Kui ei, siis peate suure tõenäosusega lisatasu maksma, et lülituda teisele sama PHP-d toetavale tariifile. Te ei pea otsima selle lühendi tähendust, kuna te ei vaja PHP-teadmisi.

2. Valime lehe, kuhu soovime tagasisidevormi paigutada ja kleebime õigesse kohta järgmise koodi:
Sinu nimi:

Teie e-post (vastamiseks):

Sinu sõnum:

Nagu näete, loob kogu vorm sildi

atribuutidega action=mail.php(viit saidi lehele, kus asub sisestatud andmete töötlemise skript) ja meetod=postitus(andmete serverisse saatmise meetod). Sildi abil loodud üksikud read täiesti mõistetavate omadustega. Üksikute vormielementide, teksti, fontide jms asukoht. saate seda muuta vastavalt oma saidi kujundusele. Sildis </b> seatakse teate teksti sisestamise ala mõõdud: ridade ja veergude arv (rows="3" cols="25").</p> <p><b>3. </b> Teeme uue lehe <b>mail.php</b>, mis sarnaneb tavalisele HTML-ile, kuid laiendiga .php. Täielik lehe kood on näidatud joonisel 2:</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br> <title>Tagasiside</title><br> </head><br> <body><br><?php <br>if (isset($_POST["nimi"])) ($nimi = $_POST["nimi"];) <br>if (isset($_POST["e-post"])) ($email = $_POST["e-post"];) <br>if (isset($_POST["sega"])) ($mess = $_POST["segadus"];)</p><p>$to = "pupkin@rambler.ru"; /*Sisesta oma emaili aadress*/ <br>$headers = "Sisutüüp: tekst/lihtne; charset=utf-8"; <br>$subject = "Sõnum teie saidilt"; <br>$message = "Saatja nimi: $nimi \nE-posti aadress: $email \nSõnum: $mess"; <br>$saada = post($saataja, $teema, $sõnum, $päised); <br>if ($send == "true") <br> {<br>kaja" <b>Täname sõnumi saatmise eest! <p>";<br>kaja" <a href=index.html>Klõpsake</a> avalehele naasmiseks"; <br> } <br>muidu <br> {<br>kaja" <p><b>Viga. Sõnumit ei saadetud!"; <br> } <br>?> <br> </body><br> </html></p> <h5><i>Joonis 2.</i> Tagasiside vormi töötlemise lehe kood</h5> <p>Nende linkide aadressid, millele peate tähelepanu pöörama, on punasega esile tõstetud:</p> <ul><li>pupkin@rambler.ru - asendage Pupkini aadress oma e-posti aadressiga, kuhu saadetakse sõnumeid nii saidi külastajatelt kui ka väsimatutelt rämpspostitajatelt. Muide, nende eest kaitsmiseks sisestatakse vormi sageli nn captcha. <b>CAPTCHA</b>- Täielikult automatiseeritud avalik Turingi test arvutite ja inimeste eristamiseks – täielikult automatiseeritud avalik Turingi test arvutite ja inimeste eristamiseks). Tavaliselt on need väga moonutatud numbrid ja tähed, mis palutakse teil enne sõnumi saatmist sisestada. Räägime captchast ühes järgmistest artiklitest. <br>Kui soovite saata kirju mitmele aadressile, loetlege need lihtsalt komadega eraldatuna.</li> <li>a href=index.html - saidi peamise (kodu)lehe aadress.</li> </ul><p>Leht loodud <b>mail.php</b> tuleb paigutada samasse saidi kataloogi (kataloog, kaust), kus asub tagasiside vormiga leht.</p> <p>Kontrollige tagasisidevormi funktsionaalsust. Kui kõik on hoolikalt tehtud, siis pärast vormi täitmist ja vajutamist <b>saada sõnum</b> Ilmuma peaks järgmine tekst: " <b>Täname sõnumi saatmise eest. avalehele naasmiseks</b>". Pärast seda leiate oma postkastist (või teisest, mille määrasite tagasisidevormi loomisel) oma sõnumi oma kallimale.</p> <blockquote> <p><b><i>Kommentaar:</i> </b> mõnel hostisaidil ei hakka uus (just saidile paigaldatud) tagasisidevorm kohe tööle ning esimesed kirjad ei jõua üldse kohale või jõuavad kohale 1-2-päevase hilinemisega. Tõenäoliselt toimub "käikude lihvimine" ja siis töötab kõik hästi. Lisaks ei jõua mõnede hostimissaitide kirjad teatud aadressidele, näiteks oli mul Rambleri ja Mail.ru postkastiga probleeme. Nende probleemide lahendamiseks võtke ühendust oma majutajaga – tavaliselt nad aitavad.</p> </blockquote> <p>Mõnikord tekib kirjeldatud tagasisidevormi kasutamisel probleeme kodeerimisega. Kui sissetulevas kirjas koosneb tekst omakeelse kirillitsa asemel “hulludest koodidest” ehk tühjadest ruutudest, siis tuleb kodeering käsitsi valida, mis on muidugi ebamugav. Selle vältimiseks kontrollige, kas teie tagasisidevormiga leht on kodeeritud <b>charset=utf-8</b>. Kui kasutate programmi <b>Adobe Dreamweaver</b>, siis selleks peate valima menüüjaotise <b>Redigeerimine – lehe omadused – kodeering</b>.</p> <p>Saidifailide kodeerimise probleemi käsitletakse üksikasjalikumalt artiklis Probleemid kodeerimisega tagasiside vormis.</p> <p>Kirjeldatud näites kuvatakse lihtsuse huvides teade kirja saatmise kohta tühjal lehel. Loomulikult võite selle paigutada oma saidi mis tahes lehele, et külastaja saaks navigeerimise (menüü) abil valida, mida edasi teha. Selleks sisestage PHP-kood (see, mis asub<<b>?php</b> enne <b>?> </b>) soovitud asukohta menüülehel ja muutke selle nimeks mail.php.</p> <p>Lisaks tagasiside vormi enda postitamisele on soovitatav kontrollida, kas külastaja on selle väljad õigesti täitnud. Seda tuleb teha selleks, et sa ei saaks tühje kirju ja sinu postkast ei oleks ummistunud prügiga, mille on saatnud naljamehed, kes armastavad lihtsalt nuppu vajutada <b>saada sõnum</b>. Meetodid tagasiside vormi täitmise kontrollimiseks ja rämpsposti eest kaitsmiseks on kirjeldatud artiklites "</p> <p><b>Tagasiside vorm saidi kohta</b>, mida ma teile näitan, põhineb Ajaxi tehnoloogia kasutamisel. Kuid ärge muretsege, te ei pea seda teadma, kõik on juba valmis, peate vaid selle vormi installima ja enda jaoks kohandama!</p> <p>Poisid, stsenaarium on juba ammu aegunud. Mõne jaoks see töötab, teiste jaoks mitte. Ja ma olen liiga laisk, et seda välja mõelda, rääkimata selle värskendamisest. Nii et katsetage oma äranägemise järgi.</p> <h2>PHP tagasiside vorm saadetud meili teel</h2> <p>See <i>veebisaidi tagasiside vorm</i> on iseenesest väga funktsionaalne, sellega on ühendatud mitmed pluginad, mis loovad atraktiivse välimuse ja kontrollivad sinu sisestatud andmete kehtivust (loe õigsust). Need pistikprogrammid töötavad suure ja võimsa peal! Ja neid nimetatakse nii:</p> <ol><p>1. <i>JQTransform</i>– pistikprogramm, mis võimaldab muuta meie tagasiside vormi ilusaks!</p> <p>2. <i>formValidator</i>– ja see plugin kontrollib kontaktivormi sisestatud teabe õigsust ja kui midagi juhtub, kuvab vihjeid!</p> </ol><p>Selle vormi täielikuks toimimiseks kasutatakse klassi PHPMailer. Peetakse üheks parimaks!</p> <p>Märkus nutikamatele:</p><p>Saidi tagasisidevormi saab teha HTML-is! Kuid see hakkab tööle ainult PHP abiga! Ja ei midagi muud!</p> <p>See on mina neile, kes otsivad tagasisidevormi ainult HTML-is. Sa teed seda, aga see ei tööta!</p> <p>Seetõttu peab teie oma toetama PHP-d ja selle kontaktivormi jaoks peab PHP olema vähemalt versioon 5. Loodan, et tegin asja selgeks? Lisaks toetab neid tingimusi nüüd iga tavaline hostimine!</p> <p>Kaevasin selle tagasiside vormi kodulehelt www.tutorialzine.com, link viib otse algsele lehele, st. selle vormi autori veebisait!</p> <p>Seal on kõik inglise keeles, nii et pidime Sashaga veidi nokitsema, et seda kontaktivormi ja sellega ühendatud pluginaid endid venestada.</p> <p>Ausalt öeldes askeldasime selle “ankeedi” kallal kaks päeva, sest hakkasid esile kerkima erinevad vead ja me ei tahtnud postitada tagasisideankeeti, mis polnud lõpuni täidetud, eriti nii ilusat! Nii et kui armastate kõike ise teha ja see mõte torkab teie helgeima peaga - selle vormi ise venestamiseks annan teile paar näpunäidet, kuna te ei piirdu ainult fraaside tõlkimisega:</p> <ol><p>1. See tagasisidevorm on loodud kodanluse jaoks ja laaditi sealt alla, nii et see saadab teile tavaliste vene tähtede asemel krakozyabl. Saage aru kodeerimisest. Ja üldiselt seostatakse sellega kõik "hülged"!</p> <p>2. Valideerimisskript ei saa esialgu meie tähtedest aru, seega tuleb need sinna kirjutada!</p> <p>3. Isegi pärast neid samme, kui määrate kirja teema vene keeles, saabub kiri koos teemaga - Teema puudub (loodan, et kirjutasin õigesti), seda saab ravida, kui määrata kodeering PHPMailer klassi failis .</p> <p>4. Algsel kujul suruti sisestusväljadel olev tekst alla, mitte keskele. See on JQTransformi pistikprogrammi tõrge.</p> </ol><p>Tundub, et kõik oli välja kirjutatud ja hoiatatud. Liigume edasi!</p> <p>Tere, kallis lugeja, täna valmistasin teile ette maitsva html-i tagasiside vormi, mis töötab ilma Ajaxi tehnoloogia abil lehte uuesti laadimata + võimas päästik, mis motiveerib teie külastajaid vormi kasutama. Minu ajaveebi lugejad arutasid väga aktiivselt minu eelmist artiklit sihtlehel, nüüd hindame ja vaatame valmis uut vormi. Kõik vajalik <i><span>artiklile lisatud lähtekood ja demo</span> </i>, analüüsime ka töö ja ühenduse struktuuri.</p> <p><b>UPD:</b> Parandatud viga teemareal oleva nimekodeeringuga. Nüüd kuvatakse kõik õigesti. Täname lugejat (Ekaterina Karacheva)</p> <p>Vormi enda vorming sisaldab ka PHP-s käitleja faili, lisaks on tööks vaja jquery teeki ja skripte, aga esiteks, ma ei laadi seda liiga kauaks - liigume edasi ülevaate juurde ja meie tagasiside analüüs.</p> <h3>HTML tagasiside vorm – töö struktuur</h3> <p>Meie vorm näeb välja selline:</p> <p>Mis mõtet siin on? Paremal pool on selline vorm, aga vasakusse serva tegin spetsiaalse ploki, mis julgustab Sinu külastajat oma kontaktandmed kohe sisestama! Saladus on lihtne: kas näete vasakpoolses plokis kuupäeva ja kellaaega? Kogu aeg kuvatakse tänane kuupäev, aja jooksul arvutatakse nende kahe tunni vahemik praegusest tunnist, oletame, et kui teie kell on praegu 13:14, siis on tunnivahemik: 12-14. Vaata, kuidas see töötab)))</p> <p>Külastaja näeb: vau, täna on allahindlus ja ma olin just õigel ajal, on ka allahindlus! Peab kohe võtma! - See on meie päästik.</p> <p><img src='https://i0.wp.com/vpluce.ru/wp-content/uploads/2015/01/demo.png' height="50" width="136" loading=lazy loading=lazy><img src='https://i2.wp.com/vpluce.ru/wp-content/uploads/2015/01/skachat-ishodniki.png' height="50" width="272" loading=lazy loading=lazy></p> <p>Laadisin alla html-i tagasiside vormi lähtekoodi, vaatasin demo - arvan, et olen piisavalt mänginud)) Nüüd kõige olulisemast, tööpõhimõttest:</p> <p><img src='https://i0.wp.com/vpluce.ru/wp-content/uploads/2015/06/shema-rabotu-formu.jpg' align="center" height="600" width="406" loading=lazy loading=lazy></p> <p>Sisestusvormi väljade valideerimine toimub töötleja failis <b>kontakt.php</b> Allpool näete programmikoodi loendis, et vormil endal ilmub teade vigade ja kirja eduka saatmise kohta, selline näeb see välja pärast saatmist:</p> <p><img src='https://i2.wp.com/vpluce.ru/wp-content/uploads/2015/06/forma-otpravleno1.jpg' align="center" height="218" width="374" loading=lazy loading=lazy></p> <h3>Vormitöötleja lähtekood</h3> <p>Kleepige ritta <b>52 </b> oma e-posti, nii et kõik kirjad saadetakse määratud e-posti aadressile.</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 </td><td class="code"> <?php $post = (!empty($_POST)) ? true: false; if($post) { $email = trim($_POST["email"]); $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $message = htmlspecialchars($_POST["message"]); $tel = htmlspecialchars($_POST["tel"]); $error = ""; if(!$name) { $error .= "Пожалуйста введите ваше имя.<br /><br /><br /> < 1) { $error .= "Введите ваше сообщение.<br /> <".$tel."> <div class="notification_error">".$error."</div>"; } } ?> </td> </tr></table><p><?php $post = (!empty($_POST)) ? true: false; if($post) { $email = trim($_POST["email"]); $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $message = htmlspecialchars($_POST["message"]); $tel = htmlspecialchars($_POST["tel"]); $error = ""; if(!$name) { $error .= "Пожалуйста введите ваше имя.<br />"; ) // Telefoni kinnitusfunktsioon ValidateTel($valueTel) ( $regexTel = "/^(7,12)$/"; if($valueTel == "") ( return false; ) else ( $string = preg_replace( $regexTel, "", $valueTel); ) return tühi($string) ? true: false; ) if(!$tel) ( $error .= "Palun sisesta telefoninumber. <br />"; ) if($tel && !ValidateTel($tel)) ( $error .= "Sisesta kehtiv telefoninumber. <br />"; ) if(!$error) // Kontrolli sõnumit (pikkust) if(!$message || strlen($message)< 1) { $error .= "Введите ваше сообщение.<br />";// See rida seab tähtede kirjutamisele minimaalse piirangu. ) if(!?utf-8?b?". base64_encode($name) ."?="; $message ="\n\nNimi: " .$ nimi."\n\nTelefoninumber: " .$tel."\n\nSõnum: ".$sõnum."\n\n"; $mail = mail("teie_email@gmail.com", $subject, $message , "Saatja: ".$name_tema."<".$tel.">"."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion()); if($mail) ( echo "OK"; ) ) else ( echo " <div class="notification_error">".$error."</div>"; } } ?></p> <h3>Vormi jõudlus</h3> <p>Postkasti kirjade saamiseks muutke ülalmainitud rida. Soovitan kasutada gmail.com posti, vormilt genereeritud kirja saamisel ei teki viivitusi ega ummikuid. Ma hoiatasin sind, sest... Lugejatel oli palju küsimusi (aadressile mail.ru kirjad ei jõua). Olge sellega ettevaatlik.</p> <p>Täidame kõik väljad, pange tähele, et telefoninumber on sisestatud 8-ga - kirjutasin spetsiaalselt vihjesse kaheksaga numbri "89251122333". Tähemärgi sisestamisel <b>«+» </b> Ilmub veateade. Kui kellelgi seda vaja on, on see lihtne töötlejasse lisada <b>«+» </b>.</p> <p><i>Täidetud vorm testiandmetega</i> </p> <p><img src='https://i1.wp.com/vpluce.ru/wp-content/uploads/2015/06/proverka-formu.jpg' align="center" height="414" width="369" loading=lazy loading=lazy></p> <p><i>Kiri postkasti</i> </p> <p>Nagu näete, saime kirja kõigi kolme väljaga, mis olid täidetud ja saadetud. Käsitlejas muutub kirja “Taotlus saidilt” päis <b>kontakt.php</b></p> <p><img src='https://i1.wp.com/vpluce.ru/wp-content/uploads/2015/06/mail2.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Kõik toimib hästi, tore on kommentaarides kuulda teie tagasisidet (konstruktiivset kriitikat), kui teil on raskusi ja ei saa millegagi hakkama, siis kirjutage mulle VK-sse (leiate selle kontaktandmetest ). Loodan, et teile meeldis selle tagasisidevormi (teenuste tellimine, rakendus) ja tegevusele kutsuva päästiku sümbioosi disain ja funktsionaalsus. Edu kõigile töös ja positiivset suhtumist, hüvasti))</p> <p><b>Valmistatud toetusel</b></p> <p>Praktikas on üks levinumaid ülesandeid tagasisidevormi rakendamine. Peate silmas selle HTML-koodi kirjutamist, CSS-is kujundamist, PHP-skripti loomist, mis töötleks kasutajalt saadud andmeid ja saadaks need meie postile, JS-skripti kirjutamist, mis kontrolliks vormi sisestatud andmete adekvaatsust, kaitsmist meie vaimusünnitus rämpspostist, nii et meie postkast ei kukkunud robotirünnakute tõttu kokku.</p> <p>Kõiki ülaltoodud punkte käsitletakse meie ülevaates ja kommenteeritakse üksikasjalikult.</p> <p>Alustame siis tagasisidevormi loomisega:</p> <h3>HTML</h3> <p>Kõigepealt kirjutame HTML-koodi, mis määrab väljad, mida kasutaja täidab. Need vormistatakse tulevikus. Vormi kood näeb välja selline:</p> <p>< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Nimi:</ label> < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefon:</ label> < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-post:</ label> < input maxlength= "30" type= "text" name= "mail" /> </ div> < div class = "right" > < label for = "message" >Sõnum:</ label> < textarea rows= "7" cols= "50" name= "message" ></ textarea> < input type= "submit" value= "Saada" /> </ div> </ form> </p> <p>Ja visuaalselt näeb see nüüd välja selline:</p> <p><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/forma-html.png' width="100%" loading=lazy loading=lazy></p> <p>Olen nõus, siiani on kõik kole ja midagi pole selge, aga me alles alustasime.</p> <p>Vaatame ülaltoodud koodi üksikasjalikult:</p> <ul><li><p>< form method= "post" action= "mail.php" > … </ form> </p><br>Vormi loomiseks peate kasutama vormisilti. Tema määrab kooditõlgi jaoks vormi alguse ja lõpu. Sellel, nagu igal sildil, on terve hulk atribuute, kuid vormi töötamiseks on vaja ainult kahte, need on meetod (serverile päringu saatmise meetod, vormide standardina kasutatakse postitust) ja tegevus ( näitab vormitöötleja faili teed, nimelt jaotises See fail sisaldab PHP-skripti, mis saadab seejärel kasutaja sisestatud väärtused meile meili teel. Meie puhul näeme, et selle faili nimi on mail.php ja see asub samas saidikataloogis, kus leht, mida me kaalume).</li> <li><p>< input maxlength= "30" type= "text" name= "name" /> </p><br>Järgmisena on meil sisendid. Need on tegelikult vormiväljad ise, kuhu kasutajad sisestavad meile vajaliku teabe (type="text" näitab, et see on tekst). Atribuut maxlength määrab, mitu tähemärki saab kasutaja antud vormiväljale sisestada. Kõige olulisem atribuut on nimi – see määrab konkreetse välja nime. Nende nimede järgi töötleb PHP skript hiljem talle sisestatavat teavet. Soovi korral saab määrata ka kohahoidja atribuudi, mis kuvab välja sees teksti, mis kaob, kui kursor selle sisse asetada. Üks kohahoidjaga seotud probleeme on see, et mõned vanemad brauserid seda ei toeta.</li> <li><p>< label for = "name" >Nimi:</ label> </p><br>Kasutatakse, kui oleme kohahoidjatest loobunud. Tavalise välja allkiri, atribuut for ütleb, millisele konkreetsele väljale see allkiri viitab. Väärtus näitab meid huvitava välja nime.</li> <li><p>< textarea rows= "7" cols= "50" name= "message" ></ textarea> </p><br>Nii nagu sisestus, on ka see mõeldud kasutajale teabe sisestamiseks, ainult seekord on väli kohandatud pikkade sõnumite jaoks. Rows määrab välja suuruse ridades, veerud tähemärkides. Üldiselt määravad nad meie põllu kõrguse ja laiuse.</li> <li><p>< input type= "submit" value= "Saada" /> </p><br>Type="submit" ütleb meile, et see on vormi esitamise nupp ja väärtus määrab selle nupu sees oleva teksti.</li> <li><p>< div class = "right" > </ div> </p><br>kasutatakse ainult vormi edasiseks visuaalseks kujundamiseks.</li> </ul><h3>CSS</h3> <p>Selleks, et meie tagasisidevorm näeks esinduslik välja, tuleb see vormindada. Järgmise tulemuse saamiseks:</p> <p><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/oformlenie-formi.png' width="100%" loading=lazy loading=lazy></p> <p>Kasutasime seda koodi:</p> <p>vorm ( taust: #f4f5f7; polster: 20px; ) vorm . vasakule, vorm . paremale (kuva: inline-blokk; vertikaaljoondus: ülemine; laius: 458 pikslit; ) vorm . parem ( täidis- vasak: 20 pikslit; ) silt ( ekraan: plokk; fondi suurus: 18 pikslit; tekst- joondus: keskel; veeris: 10 pikslit 0 pikslit 0 pikslit 0 pikslit; ) sisend, tekstiala ( ääris: 1px solid #82858D; polster: 10px; fondi suurus: 16 pikslit; laius: 436 pikslit; ) tekstiala ( kõrgus: 98 pikslit; veeris- alumine: 32 pikslit; ) input[ type= "submit" ] ( laius: 200 pikslit; hõljumine: paremal; ääris: puudub; taust: #595B5F; värv: #fff; teksti teisendus: suurtähed; )</p> <p>Ma ei näe mõtet CSS-i üksikasjalikult kirjeldada; juhin teie tähelepanu ainult põhipunktidele:</p> <ol><li>Vormi iga sildi jaoks ei ole vaja kujundust kirjutada. Proovige oma selektorid üles ehitada nii, et saaksite kujundada kõik vajalikud elemendid paari koodireaga.</li> <li>Ärge kasutage joonte katkestamiseks ja taande loomiseks tarbetuid tüübisilte <span>< br>, < p> </span> jne. Ekraaniga CSS: plokk ja veeris koos polsterdusomadustega saavad nende ülesannetega hästi hakkama. Lisateavet selle kohta, miks te ei peaks seda kasutama <span>< br> </span> küljenduses üldiselt saate lugeda artiklist Tag br, aga kas see on tõesti vajalik? .</li> <li>Vormides ei tohiks kasutada tabelipaigutust. See on vastuolus selle sildi semantikaga ja otsingumootorid armastavad semantilist koodi. Dokumendi visuaalse struktuuri kujundamiseks vajame ainult div-märgendeid ja CSS-is määratud kuvamise atribuute: inline-block (korrastab plokid ritta) ja vertikaalne joondamine: top (takistab nende hajumist üle ekraani) , seadke need vajalikule kõrgusele ja voila, ei midagi üleliigset ja kõik asub nii nagu vaja.</li> </ol><p>Neile, kes soovivad säästa oma aega veebilehe kujundamisel, võin soovitada veebisaitide loomisel kasutada CSS-i raamistikke, eriti omakirjutatud. Minu valik selles osas on Twitter Bootstrap. Saate vaadata õppetundi, kuidas selle abil vorme kujundada.</p> <h3>PHP</h3> <p>Noh, on aeg oma vorm tööle panna.</p> <p>Läheme saidi juurkataloogi ja loome seal faili mail.php, mille tee määrasime eelnevalt vormimärgendi action atribuudis.</p> <p>Lõppkokkuvõttes näeb tema kood välja selline:</p> <p><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Sinu sõnum on edukalt saadetud</title> </head> <body> <?php $back = "<p><a href=<span>\" javascript: history.back()\" >Mine tagasi</a></p>" </span>; if (! tühi ($_POST [ "nimi" ] ) ja ! tühi ($_POST [ "telefon" ] ) ja ! tühi ($_POST [ "mail" ] ) ja ! tühi ($_POST [ "sõnum" ] ) ) ( $nimi = trimmi (riba_sildid ($_POST [ "nimi" ] ) ) ; $telefon = trimmi (riba_sildid ($_POST [ "telefon" ] ) ) ; $mail = trimmi (riba_sildid ($_POST [ "mail" ] ) ) ; $teade = trimmi (riba_sildid ($_POST [ "sõnum" ] ) ) ; mail (, , "Ma kirjutasin teile: " . $nimi ." <br />Tema number: " . $phone ." <br />Tema post: " . $mail . <span>"<br />Tema sõnum: "</span>. $sõnum, ) ; kaja <span>"Sinu sõnum on edukalt saadetud! <Br>Varsti saate vastuse <Br>$tagasi"</span>; väljumine; ) else ( kaja ; väljuma ; ) ?></body> </html></p> <p>Võite selle dokumendi HTML- ja CSS-i osade arutelu vahele jätta. Oma olemuselt on see tavaline veebileht, mida saad kujundada vastavalt oma soovidele ja vajadustele. Vaatame selle kõige olulisemat osa - PHP-skripti vormi töötlemiseks:</p> <p>$tagasi = " <p><a href=<span>\" javascript: history.back()\" >Mine tagasi</a></p>" </span>; </p> <p>Selle reaga loome lingi eelmisele lehele naasmiseks. Kuna me ei tea ette, milliselt lehelt kasutaja sellele lehele jõuab, tehakse seda väikese JS-funktsiooni abil. Tulevikus pääseme sellele muutujale lihtsalt juurde, et kuvada seda vajalikes kohtades.</p> <p>if (! tühi ($_POST [ "nimi" ] ) ja ! tühi ($_POST [ "telefon" ] ) ja ! tühi ($_POST [ "mail" ] ) ja ! tühi ($_POST [ "sõnum" ] ) ) ( <span>//käitleja sisemine osa</span>) muidu ( kaja <span>"Sõnumi saatmiseks täitke kõik väljad! $tagasi"</span>; väljumine; )</p> <p>Siia lisame vormikontrolli, et veenduda väljade täitumises. Nagu arvasite, kirjutame $_POST["nimi"] osas jutumärkidesse oma sisendite atribuudi nimi väärtuse.</p> <p>Kui kõik väljad on täidetud, hakkab skript töötlema andmeid oma sisemises osas, kuid kui vähemalt üks väli on täitmata, siis kuvatakse kasutaja ekraanile teade, mis palub tal kõik täita. vormi väljad kajavad vastu "Sõnumi saatmiseks täitke kõik väljad! $tagasi" ja link naasmiseks eelmisele lehele, mille lõime kõige esimese reaga.</p> <p>Järgmisena kleepime vormitöötleja sisemisse ossa:</p> <p>$nimi = trimmi(riba_sildid($_POST["nimi"])); $telefon = trimmi(riba_sildid($_POST["telefon"])); $post = trimmi(riba_sildid($_POST["post"])); $teade = trimmi(riba_sildid($_POST["sõnum"]));</p> <p>Seega puhastasime kasutaja sisestatud andmed html-märgenditest ja lisatühikutest. See võimaldab meil kaitsta end meile saadetud sõnumites pahatahtliku koodi saamise eest.</p> <p>Kontrolli saab muuta keerulisemaks, kuid see on teie äranägemisel. Oleme serveri poolele juba paigaldanud minimaalse kaitse. Ülejäänu teeme kliendi poolel JS-i abil.</p> <p>Ma ei soovita serveripoolsest vormikaitsest JS-i kasuks täielikult loobuda, sest kuigi äärmiselt harva, on unikaalseid, mille JS on brauseris keelatud.</p> <p>Pärast siltide puhastamist lisage sõnumi saatmine:</p> <p>mail ( <span>"mail_to_receive_messages@gmail.com"</span>, <span>"Kiri teie_saidi_aadressilt"</span>, "Kirjutas sulle: " . $nimi . " <br />Tema number: " . $phone ." <br />Tema post: " . $mail . <span>"<br />Tema sõnum: "</span>. $sõnum <span>"Content-type:text/html;charset=windows-1251"</span>) ; </p> <p>Just see liin vastutab sõnumi loomise ja meile saatmise eest. See täidetakse järgmiselt:</p> <ol><li>"mail_to_receive_messages@gmail.com" – siia sisestate oma meili jutumärkide vahele</li> <li>"Kiri teie_saidi_aadressilt" on teie meilile saadetava sõnumi teema. Siia võib kirjutada mida iganes.</li> <li>"Ma kirjutasin teile: ".$nimi." <span>< br /> </span> Tema number: ".$phone." <span>< br /> </span> Tema email: ".$mail." <span>< br /> </span> Tema sõnum: ".$message – moodustame sõnumi teksti enda. $nimi – sisestame kasutaja poolt täidetud info, sisenedes eelmise sammu väljadele, jutumärkides kirjeldame, mida see väli tähendab, koos märgendiga <span>< br /> </span> Katkeme joone nii, et sõnum tervikuna oleks loetav.</li> <li>Content-type:text/html;charset=windows-1251 – lõpus on selge märge sõnumis edastatava andmetüübi ja selle kodeeringu kohta.</li> </ol><p><b>TÄHTIS!</b></p> <p>Dokumendi peas määratud kodeering ( <span>< meta http- equiv= "Content-Type" content= <span>"text/html; charset=windows-1251"</span> /> </span>), kodeering sõnumist Content-type:text/html;charset=windows-1251 ja üldiselt PHP faili kodeering peab kattuma, vastasel juhul kuvatakse posti teel saabunud kirjades vene keele asemel “hullud sõnad” või Ingliskeelsed tähed.</p> <p><img src='https://i2.wp.com/vaden-pro.ru/sites/default/files/kodirovka-faila.png' width="100%" loading=lazy loading=lazy></p> <p>Paljud inimesed ei näita otsesõnu saadetava kirja kodeeringut, kuid mõne e-posti kliendi puhul võib see tulevikus probleeme tekitada (postile saadetakse loetamatud kirjad), seega soovitan see siiski täpsustada.</p> <h3>Vormi kontrollimine sisestatud andmete adekvaatsuse osas</h3> <p>Et kasutajad kogemata väljad vahele ei jätaks ja kõik õigesti täidaksid, tasub sisestatud andmed üle kontrollida.</p> <p>Seda saab teha nii PHP-s serveri poolel kui ka JS-is kliendi poolel. Kasutan teist varianti, sest nii saab inimene koheselt teada, mis ta valesti tegi ja vea parandada ilma täiendavaid leheküljeüleminekuid tegemata.</p> <p>Kleepime skriptikoodi samasse faili, kus meil on vormi HTML-osa. Meie puhul näeb see välja järgmine:</p> <p>< script>funktsioon checkForm(vorm) ( var nimi = vorm. nimi. väärtus; var n = nimi. vaste(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Jaa- z ] + $/ ) ; if (! n) ( hoiatus( <span>"Sisestatud nimi on vale, palun parandage viga"</span>) ; tagastama vale ; ) var telefon = vorm. telefon. väärtus; var p = telefon. vaste(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) ( hoiatus( <span>"Telefoninumber sisestati valesti"</span>) ; tagastama vale ; ) var mail = vorm. mail. väärtus; var m = post . match(/ ^[ 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] + $/ ) ; if (! m) ( hoiatus( <span>"Sisestatud meiliaadress on vale, palun parandage viga"</span>) ; tagastama vale ; ) tagasta tõene ; )</script> </p> <p>Noh, nüüd tavaline analüüs:</p> <p>Selle eest, <b>nii et kui klõpsate vormi esitamise nupul, kontrollime seda</b> Lisame oma skripti käivitamise vormisildile:</p> <p>< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" > </p> <p>Võtame nüüd kontrollnimekirja punktide kaupa:</p> <p><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/proverka-formi.png' width="100%" loading=lazy loading=lazy></p> <br><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/soobchenie-o-oshibke.png' width="100%" loading=lazy loading=lazy><p>Nagu näete, on selline minitšekk kirjutatud iga meie välja kohta. Tõstsin ekraanipildil ühe välja kontrolli punase ruuduga esile, teiste väljade puhul on sellel sarnane struktuur ja kui on vaja välja lisada või eemaldada, saate seda nüüd hõlpsalt teha.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> <section class="likes likes-default"> <h2 class="title-section"><span>Meeldis?</span></h2> <p>Klõpsake nuppu, kui teile artikkel meeldis, see aitab meil projekti arendada. Aitäh!</p> <div> <ul class="social-likes"> <li class="vkontakte"></li> <li class="facebook"></li> <li class="odnoklassniki"></li> <li class="twitter"></li> </ul> </div> </section> </main> <aside class="sidebar" role="complementary" data-mh="layout"> <div class="sticky"> <section class="widget popular_posts-2 widget_popular_posts"><h2 class="title-section"><span>Trendid</span></h2><div class="widget-body"> <article class="primary"> <a href="https://rsasite.ru/et/notebooks/sos-rasshifrovka-anglo-russkii-slovar-po-obshchei-leksike-kak-rasshifrovyvaetsya-abbreviatura-sos-na-a/"> <div class="thumb"><img width="360" height="240" src="/uploads/302aa12fce45350f2c315984bc7f1fec.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Inglise-vene üldsõnavara sõnaraamat Kuidas tähistab lühend sos inglise keeles" sizes="(max-width: 360px) 100vw, 360px" / loading=lazy loading=lazy></div> <h3>Inglise-vene üldsõnavara sõnaraamat Kuidas tähistab lühend sos inglise keeles</h3> <div class="summary">Sektsiooni on väga lihtne kasutada. Sisestage lihtsalt soovitud sõna vastavale väljale ja me...</div> </a> </article>  <article class="secondary"> <a href="https://rsasite.ru/et/mobile/chislovye-tipy-dannyh-v-paskale-turbo-pascal-tipy-dannyh-o-preobrazovanii-chislovyh/"> <div class="row"> <div class="col col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/6c5dc87b66da052da4d51020d50faff5.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Numbrilised andmetüübid Pascalis" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Numbrilised andmetüübid Pascalis</h5> </div> </div> </a> </article> <article class="secondary"> <a href="https://rsasite.ru/et/programs/kak-ustroen-morskoi-kompas-princip-raboty-magnitnogo-kompasa-ustroistvo-i/"> <div class="row"> <div class="col col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/ee0dd03fd30d9d14a275fe75df962b88.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Magnetkompassi tööpõhimõte Meremagnetkompasside projekteerimine ja tööreeglid" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Magnetkompassi tööpõhimõte Meremagnetkompasside projekteerimine ja tööreeglid</h5> </div> </div> </a> </article> <article class="secondary"> <a href="https://rsasite.ru/et/programs/kakie-tegi-zadayut-razmer-tegi-upravleniya-shriftom-v-html-kak-pravilo-on/"> <div class="row"> <div class="col col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/8ac53826c9999134ffbe4b684fd40834.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Fondi juhtsildid HTML-is" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Fondi juhtsildid HTML-is</h5> </div> </div> </a> </article> <article class="secondary"> <a href="https://rsasite.ru/et/computer/mga-kakoi-smotret-chto-takoe-mga-v-drugih-slovaryah-vosstavshaya-iz/"> <div class="row"> <div class="col col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/91291808c4425a8e4d0121d6b8e9b8f8.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Vaata, mis see on"МГА" в других словарях" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Vaadake, mis on "MGA" teistes sõnaraamatutes</h5> </div> </div> </a> </article> <article class="secondary"> <a href="https://rsasite.ru/et/notebooks/upravlenie-odnoi-formoi-iz-drugoi-otkrytie-vtoroi-formy-i-peredacha-dannyh-v/"> <div class="row"> <div class="col col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/66fbefaac52a390f6ea377a9fbf86759.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Teise vormi avamine ja andmete edastamine põhivormile Kuidas avada teise vormi vormi c" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Teise vormi avamine ja andmete edastamine põhivormile Kuidas avada teise vormi vormi c</h5> </div> </div> </a> </article> </div></section><section class="widget recent_posts-2 widget_recent_posts"><h2 class="title-section"><span>Praegune</span></h2><div class="widget-body"> <article> <a href="https://rsasite.ru/et/computer/buhuchet-info-buhuchet-info-nastroika-1s-predpriyatie-8-3-s-nulya/"> <div class="row"> <div class="col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/e5aa11610ea1600ab4c55a7b6f6d8b20.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Raamatupidamisteave Seaded 1s ettevõte 8" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Raamatupidamisteave Seaded 1s ettevõte 8</h5> </div> </div> </a> </article> <article> <a href="https://rsasite.ru/et/mobile/rezultaty-na-kazloto-5-iyunya-kazlotto-ne-otvechaet-za-kazloto---vseloterei-serii/"> <div class="row"> <div class="col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/22cb155168ad2541df44f7d9bb4afc84.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Kazlotto ei vastuta Kazloto - vseloterei eest" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Kazlotto ei vastuta Kazloto - vseloterei eest</h5> </div> </div> </a> </article> <article> <a href="https://rsasite.ru/et/notebooks/muzykalno-kompyuternye-tehnologii-laboratoriya-referat-informacionnye/"> <div class="row"> <div class="col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/ee73c20eff7e0f000f62b5ee0a34220b.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Kokkuvõte: Infotehnoloogiad muusikas Informatiseerumine kui tegur kaasaegse muusikahariduse arengus" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Kokkuvõte: Infotehnoloogiad muusikas Informatiseerumine kui tegur kaasaegse muusikahariduse arengus</h5> </div> </div> </a> </article> <article> <a href="https://rsasite.ru/et/notebooks/doklad-primenenie-informacionno---kommunikacionnyh-tehnologii-ikt-na/"> <div class="row"> <div class="col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/e161c367d97749650595a3ea59578046.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Kaasaegsete info- ja kommunikatsioonitehnoloogiate liigid ja neile esitatavad nõuded Viitab IKT haridusele" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Kaasaegsete info- ja kommunikatsioonitehnoloogiate liigid ja neile esitatavad nõuded Viitab IKT haridusele</h5> </div> </div> </a> </article> <article> <a href="https://rsasite.ru/et/mobile/nsportal-socialnaya-set-rabotnikov-obrazovaniya-vserossiiskaya-socialnaya-set/"> <div class="row"> <div class="col-xs-4"> <div class="thumb"><img width="100" height="75" src="/uploads/f3aa5052fcaf85c9871205c20edfb9b4.jpg" class="attachment-col-2-crop size-col-2-crop wp-post-image" alt="Ülevenemaaline haridustöötajate sotsiaalvõrgustik Koolieelse haridustöötajate sotsiaalvõrgustikud" sizes="(max-width: 100px) 100vw, 100px" / loading=lazy loading=lazy></div> </div> <div class="col-xs-8"> <h5>Ülevenemaaline haridustöötajate sotsiaalvõrgustik Koolieelse haridustöötajate sotsiaalvõrgustikud</h5> </div> </div> </a> </article> </div></section> </div> </aside> </div> </div> <footer role="contentinfo"> <div class="row"> <div class="col col-sm-2"> <h3 class="title-footer">Sektsioonid</h3><ul class="list-unstyled"> <li class="menu-den-svadby"><a href="https://rsasite.ru/et/category/os/">OS</a></li> <li class="menu-den-svadby"><a href="https://rsasite.ru/et/category/programs/">Programmid</a></li> <li class="menu-den-svadby"><a href="https://rsasite.ru/et/category/computer/">Arvuti</a></li> <li class="menu-den-svadby"><a href="https://rsasite.ru/et/category/mobile/">Mobiilne</a></li> </ul> </div> <div class="col col-sm-2"> </div> <div class="col col-sm-2"> <h3 class="title-footer">Oleme sotsiaalvõrgustikes</h3> <ul class="list-unstyled"> <li> <a href="https://vk.com/share.php?url=https://rsasite.ru/programs/kak-sozdat-obratnuyu-svyaz-veb-dizain-i-poiskovaya-optimizaciya-forma-obratnoi/">Kokkupuutel</a> </li> <li> <a href="https://www.facebook.com/sharer/sharer.php?u=https://rsasite.ru/programs/kak-sozdat-obratnuyu-svyaz-veb-dizain-i-poiskovaya-optimizaciya-forma-obratnoi/">Facebook</a> </li> <li> <a href="https://www.twitter.com/share?url=https%3A%2F%2Frsasite.ru%2Fet%2Fprograms%2Fkak-sozdat-obratnuyu-svyaz-veb-dizain-i-poiskovaya-optimizaciya-forma-obratnoi%2F">Twitter</a> </li> </ul> </div> </div> </footer> <noscript></noscript> <script type='text/javascript' src='https://rsasite.ru/wp-content/plugins/wp-postviews/postviews-cache.js?ver=1.68'></script> <script type='text/javascript' src='https://rsasite.ru/wp-content/themes/alpha/dist/js/scripts.min.js?97dcb82ba08eedf6370ca2a8683cd79b'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.8'></script> <div class="hidden"> </div> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>