Nagu paljud veebiarendajad, kulutan ka mina palju aega testimisele kasutajaliides saidid, millel ma töötan.

Automaattestimine on selles protsessis loomulikult hea abimees, kuid liidese “valupunkte” on sageli võimatu tuvastada muul viisil peale saidi kasutamise. Uuesti ja uuesti. See protsess võib väga kiiresti igavaks muutuda. Eriti vormide täitmine.

Sattusin ise sellesse olukorda paar kuud tagasi, kui lisasime Wufoos väljaregistreerimisel toetatavatele valuutadele Briti naela.

Kontrollimiseks oli vaja täita paljud väljad nimede, aadresside, krediitkaardinumbrite ja kõige muuga, mis arvutusprotsessis eeldab. Muidugi ei oleks tohtinud olulist osa nendest andmetest korrata:

Lõpuks tegin järjehoidja jaoks kiire täitmine vormid testiandmetega. (Järjehoidja on brauseris järjehoidjana loodud JavaScripti programm, ingliskeelsete sõnade "järjehoidja" - järjehoidja ja "aplet" - hübriid - väike rakendus. – ca. tõlge.)

Valisin järjehoidja vormi, kuna:

• seda on lihtne kasutajale edastada;
• seda on lihtne uuendada ilma kasutaja sekkumiseta;
• see töötab mis tahes platvormil ilma muudatusteta.

Järjehoidja saate hõlpsalt luua, luues CodePenis uue "pliiatsi" ja lisades HTML-i midagi sellist:

Kasutaja peab lihtsalt lohistama saadud lingi oma brauseri järjehoidjate alale. Järjehoidjal klõpsamisel käivitatakse kood praegusel lehel.

Selle projekti puhul toetusin jQueryle, et muuta kood võimalikult loetavaks ja brauseriüleseks ühilduvaks. Kui keegi vajab versiooni puhas JavaScript, kirjuta mulle kommentaar – proovin midagi välja mõelda.

Juhuslike andmete loomiseks kasutasin imelist Fakeri raamatukogu. Selle JavaScripti teostuse leiate siit.

Järjehoidja põhitõed

Saame kogu koodi otse lingile panna. Kuid seda valikut on ebamugav lugeda ja hooldada. Lisaks soovisin, et oleks võimalik koodis muudatusi teha, sundimata kasutajaid järjehoidjat värskendama. Seega on parem jätta järjehoidjasse link aadressile väline fail.

Järjehoidja ise näeb välja selline:

Minu järjehoidja

Selles laadime skripti lehe kehasse ja lisame sinna lingi välisele JavaScripti failile. Tuleb tähele panna, et kui järjehoidjaga testitakse https-i kaudu laaditud lehte, siis tuleb ka välist JS-faili serveerida https-i kaudu, vastasel juhul viskab brauser turvavea.

On täiesti võimalik, et järjehoidjakomplekti arendamisel soovite kasutada kohalikku serverit. Sel juhul asendage skripti levitamisel kindlasti lingis olev aadress tõelise serveri aadressiga.

Väljade täitmine

Nüüd, kui oleme skripti laadiva järjehoidjaga valmis saanud, saame liikuda edasi skripti enda juurde.

Meie jaoks on kõige olulisem ülesanne mitte midagi rikkuda lehel, mida meie skript testib.

Seega ühendame selle isetöötavasse anonüümsesse funktsiooni. See piirab vastavalt meie funktsioonide ja muutujate ulatust:

Mulle meeldib väga pseudojuhuslike arvude generaatori funktsioon, mille Chris Coyler selles artiklis pakub. Kasutame seda vastavalt vajadusele:

var _rand = funktsioon(min, max) ( return Math.floor(Math.random() * (max - min + 1)) + min; )

Nüüd laadime alla FakerJS-i. Kuna meie skript sõltub jQueryst, saame kasutada selle laiska laadimismehhanismi, kasutades funktsiooni $.getScript:

Nüüd, kui meile on lubatud juurdepääs Fakerile, saame selle meetodite abil luua mitmesuguseid usutavaid nimesid, kohti, aadresse ja muid testiandmeid.

Järgmine konstruktor annab meile loodud andmete taaskasutamise:

var FormData = function(faker) ( this.faker = faker; this.randomWord = faker.Internet.domainWord(); this.username = "fake_" + this.randomWord; this.username += _rand(100.9999); // määrake see väärtus teie parool spetsifikatsioonid this.password = "pass1234"; this.name = faker.Nimi.findName(); see.aadress1 = faker.Address.streetAddress(); see.linn = võlts.Aadress.linn(); this.state = faker.random.br_state_abbr(); this.zip = faker.Address.zipCode(); // Chris" tegelik krediitkaardi number this.cc = "4242 4242 4242 4242"; this.exp1 = _rand(1.12); this.exp2 = _rand(14.22); this.cvv = _rand(100.999); );

Hea mõte oleks testida ka meie veebisaidi märkeruutusid ja raadionuppe, valides need sisse juhuslik järjestus. Selleks peame oma konstruktori funktsionaalsust veidi laiendama:

// Vali juhuslikult rippmenüü FormData.prototype.randomizeSelect = function(el) ( var $el = $(el), len = $el.find("valik").length - 1; $el.children("valik") .prop("valitud", false) .eq(_rand(1,len + 1)) .prop("valitud", true ); // Vali juhuslikult raadionupp FormData.prototype.randomizeRadio = function(radios) ( radios.not(""); var len = raadiod.length; raadiod .prop("kontrollitud", false) .eq(_rand(0, len) - 1)).prop("kontrollitud", tõsi); // Lisage tekstialadele loremi teksti FormData.prototype.randomizeParagraph = function(el) ( $(el).val(this.faker.Lorem.sentence(5)); ); // Muuda kõik märkeruutude väljad juhuslikult FormData.prototype.randomizeCheckbox = function(el) ( var $el = $(el); $el.prop("kontrollitud", false); if (_rand(0,1) === 0 ) ( $el.prop("kontrollitud", tõsi); ) ); FormData.prototype.randomizeEmail = function(el) ( // kui soovime kõikidele meiliväljadele erinevaid e-kirju, saame seda muuta $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); );

Lõpuks peame genereeritud andmed kaardistama testitavate vormide erinevatele väljadele. Eraldame oma lehelt kõik vormiväljad ja täidame need andmetega vastavalt nende tüübile ja CS S-klassile.

Sellisel kujul rakendab meie skript suurepäraselt andmete genereerimise mehhanismi ja nende kasutamise mehhanismi eraldamise:

var fillForm = function() ( data = new FormData(window.Faker); $("#nimi").val(andmed.nimi); $("#kasutajanimi").val(andmed.kasutajanimi); $(" #cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("# cvv").val(andmed.cvv); $("#aadress").val(andmed.aadress1); $("#linn").val(andmed.linn); $("#osariik").val (data.state); $("#zip").val("#pw").val(data.password).val(data. parool.randomizeRadio($("") // Juhuslikult vali kõik kastid $("select").each(function() ( data.randomizeSelect(this); )); "input.addEventListener("muuda", setColor);

Meetod document.getElementsByName tagastab kõik antud name atribuudiga elemendid. Näide itereerib neid läbi (tavalise for-tsükli kaudu, mitte forEachi kaudu, kuna tagastatud kogu ei ole päris massiiv) ja registreerib iga elemendi jaoks sündmuste töötleja. Pidage meeles, et sündmuse objektidel on sihtmärk, mis viitab sündmuse käivitanud elemendile. See on kasulik sündmuste käitlejate loomisel - meie käitleja saab helistada erinevad elemendid ja sellel peab olema võimalus pääseda juurde praegusele elemendile, mis seda kutsus.

Väljade valimine Väljad on sarnased raadionuppudega – need võimaldavad teil ka valida mitme valiku vahel. Kuid kui raadionupud võimaldavad meil juhtida valikute paigutust, määrab välja tüübi brauser.

Valitud väljadel on suvand, mis näeb välja pigem märkeruutude kui raadionuppude loendina. Kui atribuut on mitu, võimaldab märgend valida ühe, mitte ühe suvalise arvu valikuid.

Pannkoogid Pajaroog Jäätis

Enamikus brauserites erineb välja välimus ühe valikuga väljast, mis tavaliselt näeb välja nagu rippmenüü.

Märgise size atribuuti kasutatakse korraga nähtavate valikute arvu määramiseks – nii saad mõjutada väljalangemise välimust. Näiteks määrates suuruse 3, näete korraga kolme rida, olenemata sellest, kas valik on mitu.

Igal sildil on tähendus. Seda saab defineerida atribuudi value abil, kuid kui seda pole määratud, siis määrab sildi väärtus sildi sees asuva teksti... Elemendi väärtuse atribuut kajastab praegu valitud valikut. Välja jaoks, millel on võimalus valida mitu valikut, pole see omadus eriti vajalik, kuna see sisaldab ainult ühte mitmest valitud valikust.

Väljamärgendile pääseb juurde massiivilaadse objektina suvandite atribuudi kaudu. Igal valikul on valitud atribuut, mis näitab, kas suvand on praegu valitud. Atribuuti saab muuta ka valiku valimiseks või valimata jätmiseks.

Järgmine näide toob välja valitud väärtused valitud väljalt ja kasutab neid loomiseks kahendnumber bittidest. Mitme väärtuse korraga valimiseks vajutage klahvi Ctrl (või Macis Command).

0001 0010 0100 1000 = 0 var select = document.querySelector("select"); var output = document.querySelector("#väljund"); select.addEventListener("muutus", funktsioon() ( vari number = 0; for (var i = 0; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; });

Failiväli Failiväli oli algselt mõeldud failide laadimiseks arvutist vormi kaudu. IN kaasaegsed brauserid need võimaldavad teil lugeda ka JavaScripti faile. Väli toimib toimikute valvurina. Skript ei saa lihtsalt haarata ja avada faili kasutaja arvutist, kuid kui kasutaja valib sellelt väljalt faili, lubab brauser skriptil faili lugemist alustada.

Failiväli näeb tavaliselt välja nagu nupp, millel on sildiga „Vali fail”, mille kõrval on teave valitud faili kohta.

var input = document.querySelector("sisend"); input.addEventListener("muuda", funktsioon() ( if (sisend.failid.length > 0) ( var fail = sisend.failid; console.log("Valisite", faili.nimi); if (faili tüüp) console.log("Sellel on tüüp", file.type);

Elemendi failide atribuut on massiivilaadne objekt (mitte päris massiiv), mis sisaldab valitud failide loendit. Esialgu on see tühi. Elemendil ei ole lihtsat failiatribuuti, sest kasutaja saab valida mitu faili korraga, kui atribuut mitu on lubatud.

Failide atribuudi objektidel on atribuudi nimi (faili nimi), suurus (faili suurus baitides) ja tüüp (failitüüp meediumitüübi tähenduses - tekst/tavaline või pilt/jpeg).

Sellel puudub atribuut, mis sisaldab faili sisu. Peate kõvasti pingutama, et sisu kätte saada. Kuna faili lugemine kettalt võtab kaua aega, peab liides olema asünkroonne, et dokument ei hanguks. FileReaderi konstruktorit võib pidada XMLHttpRequest konstruktoriks, kuid failide jaoks.

var input = document.querySelector("sisend"); input.addEventListener("change", function() ( Array.prototype.forEach.call(input.files, function(file) ( var reader = new FileReader();); reader.addEventListener("load", function() ( konsool .log("Fail", faili.nimi, "algab", reader.result.slice(0, 20));

Faili lugemine toimub FileReaderi objekti loomisega, selle jaoks laadimissündmuse registreerimisega ja selle meetodi readAsText kutsumisega, edastades faili köitele. Kui allalaadimine on lõppenud, salvestatakse faili sisu tulemuse atribuuti.

Näites kasutatakse massiivi itereerimiseks faili Array.prototype.forEach, kuna tavalises tsüklis oleks ebamugav saada sündmuste käitlejalt vajalikke faile ja lugejaobjekte. Muutujad oleksid ühised kõigi tsükli iteratsioonide jaoks.

FileReadersil on ka "vea" sündmus, kui faili lugemine ebaõnnestub. Veaobjekt salvestatakse veaatribuudis. Kui sa ei taha oma pead järjekordse ebamugavaga vaevata asünkroonne ahel, võite selle mähkida lubadusega (vt 17. peatükki):

Funktsioon readFile(file) ( return new Promise(function(succeed, fail) ( var reader = new FileReader(); reader.addEventListener("load", function()) ( edukas(reader.result); )); reader.addEventListener ("error", function() ( fail(reader.error); ));

Andmete salvestamine kliendi poolel Lihtsad HTML-lehed koos JavaScripti lisamisega võivad olla suurepäraseks aluseks minirakendustele – väikestele tugiprogrammid, igapäevaste toimingute automatiseerimine. Kui lisate vormiväljadele sündmuste töötlejad, saate teha kõike alates Fahrenheiti teisendamisest Celsiuse kraadidesse kuni peamise parooli ja veebisaidi nime põhjal paroolide genereerimiseni.

Kui selline rakendus peab seansside vahel teavet säilitama, JavaScripti muutujad ei saa kasutada - nende väärtused visatakse ära iga kord, kui leht suletakse. Sa võiksid seadistada serveri, ühendada selle Internetti ja seejärel salvestab rakendus teie andmed sinna. Vaatleme seda 20. peatükis. Kuid see lisab teile tööd ja keerukust. Mõnikord piisab andmete salvestamisest brauserisse. Aga kuidas?

Stringiandmeid saab salvestada nii, et need säiliksid lehe uuesti laadimise – selleks tuleb need panna localStorage objekti. See võimaldab salvestada stringiandmeid nimede alla (mis on ka stringid), nagu selles näites:

LocalStorage.setItem("kasutajanimi", "marijn"); console.log(localStorage.getItem("kasutajanimi")); // → marijn localStorage.removeItem("kasutajanimi");

Muutujat hoitakse kohalikus salvestusruumis, kuni see üle kirjutatakse, kustutatakse käsuga removeItem või kuni kasutaja kohaliku salvestusruumi tühjendab.

Saitidele, millel on erinevad domeenid– selles panipaigas erinevad sektsioonid. See tähendab, et veebisaidilt localStorage salvestatud andmeid saab lugeda või üle kirjutada ainult sama saidi skriptidega.

Brauserid piiravad ka salvestatavate andmete hulka, tavaliselt mõne megabaidi. See piirang koos tõsiasjaga, et inimeste kõvaketaste ummistumine ei ole tulus, takistab kettaruumi ammendumist.

Järgmine kood rakendab lihtsat märkmete tegemise programmi. See salvestab märkmeid objektina, seostades pealkirjad sisuga. See on kodeeritud JSON-i ja salvestatud kohalikku salvestusruumi. Kasutaja saab välja kaudu märkme valida ja selle teksti sisse muuta. Kirje lisatakse nupule klõpsates.

Märkused: uus
var list = document.querySelector("#list"); funktsioon addToList(name) ( var option = document.createElement("valik"); option.textContent = nimi; list.appendChild(option); ) // Võtke loend kohalikust salvestusruumist var notes = JSON.parse(localStorage.getItem ( "märkmed")) || ("mida osta": ""); for (var nimi märkustes) if (notes.hasOwnProperty(name)) addToList(name); funktsioon saveToStorage() ( localStorage.setItem("notes", JSON.stringify(notes)); ) var current = document.querySelector("#currentnote"); praegune.väärtus = märkmed; list.addEventListener("muuda", funktsioon() ( praegune.väärtus = märkused; )); current.addEventListener("muuda", funktsioon() ( notes = current.value; saveToStorage(); )); funktsioon addNote() ( var name = prompt("Märkme nimi", ""); if (!name) return; if (!notes.hasOwnProperty(name)) ( notes = ""; addToList(name); saveToStorage() ) list.value = nimi; praegune.väärtus = märkmed)

Skript initsialiseerib märkmete muutuja localStorage'i väärtusega ja kui seda seal pole - lihtne objektühe kirjega “mida osta”. Katse lugeda localStorage'ist puuduvat välja tagastab nulli. Kui edastate nulli failile JSON.parse, saame nulli tagasi. Seetõttu saate vaikeväärtusena kasutada operaatorit ||. .

Kui märkuses olevad andmed muutuvad (lisab uus sissekanne või praegune muutub), kutsutakse salvestatud välja värskendamiseks välja funktsioon saveToStorage. Kui eeldaksime, et salvestame tuhandeid kirjeid, oleks see liiga kulukas ja me peaksime välja mõtlema keerukama salvestusprotseduuri - näiteks iga kirje jaoks eraldi välja.

Kui kasutaja lisab kirje, peab kood tekstivälja värskendama, kuigi väljal on muudatuste töötleja. See on vajalik, kuna sündmus "muuda" toimub ainult siis, kui kasutaja muudab välja väärtust, mitte siis, kui skript seda teeb.

On veel üks localStorage'iga sarnane objekt nimega sessionStorage. Nende erinevus seisneb selles, et sessionStorage'i sisu unustatakse seansi lõpus, mis enamiku brauserite jaoks tähendab sulgemise hetke.

Kokkuvõte HTML pakub palju erinevat tüüpi vormivälju – tekst, märkeruudud, valikvastustega, failivalik.

Saate väärtuse hankida ja neid välju manipuleerida JavaScriptist. Muutmisel käivitavad need sündmuse "muutmine", klaviatuuri sisendil - "sisend" ja palju muid erinevaid klaviatuuri sündmusi. Need aitavad meil tabada hetke, mil kasutaja sisestusväljaga suhtleb. Väljade sisu lugemiseks ja kirjutamiseks kasutatakse selliseid atribuute nagu väärtus (tekstiväljade ja valiku jaoks) või linnuke (märkeruutude ja raadionuppude jaoks).

Vormi esitamisel toimub "esita" sündmus. Seejärel saab JavaScripti töötleja sellel sündmusel helistada preventDefault, et peatada andmete edastamine. Vormielemendid ei pea olema siltide sisse lülitatud.

Kui kasutaja on failivalikuvälja kaudu kõvakettalt faili valinud, võimaldab FileReaderi liides meil pääseda JavaScripti programmi kaudu faili sisule juurde.

Objekte localStorage ja sessionStorage saab kasutada teabe salvestamiseks viisil, mis säilib lehe uuesti laadimise. Esimene salvestab andmed igaveseks (või seni, kuni kasutaja need konkreetselt kustutab) ja teine ​​- kuni brauseri sulgemiseni.

HarjutusedJavaScript Workbench Loo liides, mis võimaldab kirjutada ja käivitada JavaScripti koodi tükke.

Tee selle kõrvale nupp, klõpsamisel mähib 10. peatüki funktsioonikonstruktor sisestatud teksti funktsiooniks ja kutsub selle välja. Teisendage funktsiooni tagastusväärtus või mõni selle viga stringiks ja printige see pärast seda tekstiväli.

tagasta "tere"; Lähme // Sinu kood.

Automaatne täitmine Täitke tekstiväli, nii et teksti sisestamisel kuvatakse selle alla valikute loend. Teil on massiiv võimalikud variandid ja peate näitama neid, mis algavad sisestatud tekstiga. Kui kasutaja klõpsab soovitatud valikul, muudab see välja sisu selle valikuga.

// Koostab globaalsete muutujate nimede massiivi, // nagu "alert", "document" ja "scrollTo" var termid = ; for (vari nimi aknas) termid.push(nimi); // Sinu kood.

Conway elumäng See on lihtne elu simulatsioon ristkülikukujulisel ruudustikul, mille iga element on elus või mitte. Igal põlvkonnal (mänguetapil) kehtivad järgmised reeglid:

Iga elusrakk, mille naabrite arv on alla kahe või rohkem kui kolm, sureb
- iga elusrakk, millel on kaks kuni kolm naabrit, elab kuni järgmise pöördeni
- iga surnud rakk, millel on täpselt kolm naabrit, ärkab ellu

Lahtri naabriteks on kõik sellega horisontaalselt, vertikaalselt ja diagonaalselt külgnevad lahtrid, kokku 8.

Pange tähele, et reeglid kehtivad korraga kogu ruudustikule, mitte igale lahtrile kordamööda. See tähendab, et naabrite arvu loendamine toimub ühel hetkel enne järgmist sammu ja naaberrakkudes toimuvad muutused ei mõjuta raku uut olekut.

Rakendage mängu mis tahes sobivate struktuuride abil. Kasutage juhuslike algpopulatsioonide loomiseks Math.random. Kuvage väli linnukeste ruudustikuna nupuga „Mine järgmise sammu juurde”. Kui kasutaja lülitab märkeruudud sisse või välja, tuleb neid muudatusi järgmise põlvkonna arvutamisel arvesse võtta.

Järgmine põlvkond // Teie kood.

HTML-vormid on keerulised liideseelemendid. Nende hulka kuuluvad erinevad funktsionaalsed elemendid: sisestusväljad ja loendid, vihjed jne. Kogu vormikood sisaldub .

Enamik veebivormide teavet edastatakse kasutades . Ühe tekstirea sisestamiseks kasutatakse elementi mitme rea jaoks. Element loob ripploendi.

Element loob vormiväljadele sildid. Siltide ja väljade rühmitamiseks on kaks võimalust. Kui väli on elemendi sees, siis atribuuti for ei pea määrama.

Perekonnanimi Perekonnanimi Perekonnanimi

Vormi väljad saab elemendi abil jagada loogilisteks plokkideks. Igale jaotisele saab elemendi abil nime anda.

Kontaktandmed Nimi E-post
Riis. 1. Vormiväljade rühmitamine

Vormi kasutajatele arusaadavamaks muutmiseks lisatakse vormi väljadele tekst, mis annab näite sisestatavatest andmetest. Seda tüüpi teksti nimetatakse metamärgitekstiks ja see luuakse kohahoidja atribuudi abil.

Samuti tuleb esile tõsta kohustuslikud väljad. Enne HTML5 kasutati välja nime kõrval tärni * sümbolit. IN uus spetsifikatsioon ilmunud on spetsiaalne nõutav atribuut, mis võimaldab märgistuse tasemel märkida kohustusliku välja. See atribuut juhendab brauserit (eeldusel, et see toetab HTML5) mitte saata andmeid pärast seda, kui kasutaja klõpsab käsul Esita kuni määratud väljad pole täidetud.

Fookuse saamisel tekstivälja välimuse muutmiseks kasutage fookuse pseudoklassi. Näiteks saate praeguse välja tausta tumedamaks muuta või lisada värviline raam et see teistest eristuks:

Sisend:fookus (taust: #eaeaea; )

Veel üks kasulik HTML5 atribuut on automaatse teravustamise atribuut. See võimaldab teil automaatselt määrata fookuse soovitud elementide ja (igast vormist ainult ühe elemendi) algväljale.

Näide registreerimisvormi loomisest

HTML märgistus

Registreerimine Nimi Sugu mees naine E-post Riik Vali elukohariik Venemaa Ukraina Valgevene Saada

Märge
action="form.php" – link vormitöötleja failile. Looge UTF-8 kodeeringus fail, laadige see serverisse ja asendage action="form.php" oma serveris oleva faili teega.

Riis. 2. Välimus vaikevormid

Nagu jooniselt näha, on igal vormielemendil brauseri vaikestiilid. Tühjendame stiilid ja laadime vormielemendid.

Vormi murramine ( laius: 550 pikslit; taust: #ffd500; äärise raadius: 20 pikslit; ) .form-wrap *(üleminek: .1s lineaarne) .profile ( laius: 240 pikslit; hõljumine: vasakule; teksti joondamine: keskel; polsterdus : 30 pikslit; ) vorm ( taust: valge; hõljuv: vasak; laius: calc (100% - 240 pikslit); polster vorm div:after ( sisu: ""; kuva: tabel; selge: mõlemad; ) form div ( veeris-alumine: 15 pikslit; asukoht: suhteline; ) h1 ( fondi suurus: 24 pikslit; fondi kaal: 400; asukoht: suhteline ; veeris ülaosas: 50 pikslit %); /******************* vormielementide stiil ******************** ** / silt, span ( display: block; font-size: 14px; margin-bottom: 8px; ) input, input ( border-width: 0; outline: none; margin: 0; laius: 100%; polster: 10px 15px; background: #e6e6e6 ) input:focus, input:focus ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .raadio silt ( asukoht: suhteline; polsterdus vasakule: 50 pikslit; kursor: kursor; laius: 50%; hõljumine: vasakul; joone kõrgus: 40 pikslit; ) .raadiosisend ( asukoht: absoluutne; läbipaistmatus: 0; ) .raadio -kontroll ( asukoht: absoluutne; ülemine: 0; vasakul: 0; kõrgus: 40 pikslit; laius: 40 pikslit; taust: #e6e6e6; äärise raadius: 50%; teksti joondus: keskel; ) .male:before ( sisu: " ? raadiojuhtimine, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( värv: punane */ -moz-appearance: none /*tühista märge Mozilla Firefoxis*/ ) select::-ms-expand ( display: none; /*uncheck in IE*/ ) .select-nool ( asukoht: absoluutne ; ülemine: 38px; paremal: 15 pikslit; laius: 0; kõrgus: 0; pointer-sündmused: puudub; /*aktiveerib loendi kuva, kui klõpsate noolele*/ border-style: solid; äärise laius: 8 pikslit 5 pikslit 0 5 pikslit; piirivärv: #7b7b7b läbipaistev läbipaistev läbipaistev; ) nupp ( polster: 10 pikslit 0; äärise laius: 0; ekraan: plokk; laius: 120 pikslit; veeris: 25 pikslit automaatne 0; taust: #60e6c5; värv: valge; fondi suurus: 14 pikslit; kontuur: puudub; teksti teisendus : suurtäht ) /********************** lisada vormile kohandatavust ****************** ** **/ @media (maksimaalne laius: 600 pikslit) ( .form-wrap (margin: 20px automaatne; max-width: 550px; laius: 100%;) .profile, vorm (ujuk: puudub; laius: 100% ;) h1 (veeris-ülemine: auto; polsterdus-alumine: 50px;) vorm (äärise raadius: 0 0 20px 20px;) )

Form.php fail

Märge
Muutujas $subject määra tekst, mis kuvatakse kirja pealkirjana;
Teie_nimi - siin saate määrata nime, mis kuvatakse väljal "Kellelt kiri on pärit";
asendage oma_saidi_url registreerimisvormi saidi aadressiga;
asenda oma_e-post oma e-posti aadressiga;
$headers .= "Bcc: your_email". "\r\n"; saadab Pimekoopia oma meiliaadressile.

7. osa: Vormid

Vormi sisestatud teabe kinnitamine

Vorme kasutatakse Internetis laialdaselt. Vormi sisestatud teave saadetakse sageli serverisse tagasi või saadetakse selle kaudu e-mail mõnele aadressile. Probleem seisneb selles, et kasutaja vormi sisestatud teave on õige. Saate seda enne JavaScripti abil Internetti saatmist hõlpsasti kontrollida. Kõigepealt tahaksin näidata, kuidas saate vormi kinnitada. Ja siis vaatame, millised võimalused on üle interneti info saatmiseks.

Kõigepealt peame looma lihtsa skripti. Oletame, et HTML-leht sisaldab kahte tekstisisestuselementi. Esimesse neist peab kasutaja sisestama oma nime, teises elemendis - oma e-posti aadressi. Sinna saate sisestada teatud teabe ja vajutada klahvi. Proovige vajutada ka klahvi ilma vormile teavet sisestamata.

Sisestage oma nimi:

Sisesta oma emaili aadress:

Mis puudutab esimesse elementi sisestatud teavet, siis kui sinna midagi ei sisestatud, saate veateate. Üksuses esitatud teave vaadatakse täpsuse tagamiseks üle. Loomulikult ei garanteeri see, et kasutaja sisestab vale nime. Brauser ei pane isegi numbrite vastu midagi. Näiteks kui sisestate "17", kuvatakse teade "Tere 17!". Nii et see test ei pruugi olla täiuslik.
Teine vormielement on veidi keerulisem. Proovige sisestada lihtne string- näiteks teie nimi. See pole võimalik enne, kui lisate oma nimesse @... Märk, et kasutaja on e-posti aadressi õigesti sisestanud, on @ sümboli olemasolu. Üks täht @ vastab sellele tingimusele, kuigi see on mõttetu. Internetis sisaldab iga e-posti aadress @ sümbolit, seega on selle sümboli kontrollimine asjakohane.

Kuidas skript nende kahe vormielemendiga töötab ja kuidas valideerimine välja näeb? See juhtub nii:

Sisestage oma nimi:

Sisesta oma emaili aadress:

Vaatame esmalt kehaosa HTML-koodi. Siin loome ainult kaks tekstisisestuselementi ja kaks nuppu. Nupud kutsuvad välja funktsioonid test1(...) või test2(...), olenevalt sellest, kumba neist vajutati. Nende funktsioonide argumendina edastame kombinatsiooni see.vorm, mis võimaldab meil hiljem funktsioonis endas käsitleda täpselt neid elemente, mida vajame.
Funktsioon test1(vorm) kontrollib, kas antud rida tühi. Seda tehakse läbi if (vorm.tekst1.väärtus == "").... Siin on "vorm" muutuja, kuhu salvestatakse "this.form"-ist funktsiooni kutsumisel saadud väärtus. Saame taastada kõnealusesse elemendisse sisestatud stringi if vorm.tekst1 määrame "väärtuse". Veendumaks, et string ei oleks tühi, võrdleme seda stringiga "". Kui selgub, et sisestatud string vastab "", tähendab see, et tegelikult ei sisestatud midagi. Ja meie kasutaja saab veateate. Kui midagi oli õigesti sisestatud, saab kasutaja kinnituse – ok.
Järgmine probleem on see, et kasutaja saab vormiväljale sisestada ainult tühikuid. Ja seda aktsepteeritakse õigesti sisestatud teabena! Soovi korral saate loomulikult lisada selle võimaluse tšeki ja selle välistada. Usun, et seda on lihtne teha ainult siin esitatud teabe põhjal.
Vaatleme nüüd funktsiooni test2 (vorm). Siingi võrreldakse sisestatud stringi tühja stringiga - "" (veendumaks, et lugeja on tõesti midagi sisestanud). Küll aga oleme lisanud if-käsku veel midagi. Märgikombinatsioon || helistas VÕI operaatorile. Sissejuhatuse kuuendas osas olete temaga juba tuttavaks saanud.
If-lause kontrollib, kas esimene või teine ​​võrdlus lõpeb. Kui vähemalt üks neist täidetakse, annab üldine if-käsk tõene ja seetõttu täidetakse järgmine skriptikäsk. Lühidalt, saate veateate, kui sisestatud string on tühi või @-sümbol puudub. (Käsu if teine ​​lause tagab, et sisestatud string sisaldab @.)

Teatud märkide olemasolu kontrollimine

Mõnel juhul peate vormile sisestatava teabe piirama ainult teatud märkide või numbrite komplektiga. Piisab, kui meeles pidada telefoninumbrite kohta - esitatud teave peaks sisaldama ainult numbreid (eeldatakse, et telefoninumber sellisena ei sisalda märke). Peame kontrollima, kas sisestatud andmed on arv. Olukorra keerukus seisneb selles, et enamik inimesi sisestab telefoninumbrisse ka erinevaid sümboleid - näiteks: 01234-56789, 01234/56789 või 01234 56789 (mille sees on tühik). Kasutajat ei tohiks sundida selliseid märke sisse jätma telefoninumber. Seetõttu peame oma skripti täiendama numbrite ja mõne sümboli kontrollimise protseduuriga. Probleemi lahendust on näidatud järgmises näites:

Telefon:

Selle skripti lähtekood:

Telefon: funktsioon test() määrab, millised sisestatud tähemärgid loetakse kehtivaks.

Vormi sisestatud teabe esitamine

Millised võimalused on vormile sisestatud teabe edastamiseks? Lihtsaim viis on saata vormi andmed meili teel (vaatame seda meetodit üksikasjalikumalt).
Kui soovid, et vormile sisestatud andmeid jälgiks server, siis tuleb kasutada CGI liides (Ühine värav liides). Viimane võimaldab andmeid automaatselt töödelda. Näiteks võib server luua teabe andmebaasi, mis on mõnele kliendile juurdepääsetav. Teine näide on otsingulehed, nagu Yahoo. Tavaliselt pakuvad need vormi, mis võimaldab teil luua päringu oma andmebaasi otsimiseks. Selle tulemusena saab kasutaja vastuse varsti pärast vastava nupu klõpsamist. Ta ei pea ootama, kuni selle serveri hooldamise eest vastutavad inimesed loevad tema määratud andmed ja leiavad vajaliku teabe. Seda kõike teeb server ise automaatselt. JavaScript ei luba teil selliseid asju teha.
Te ei saa JavaScripti kasutades luua lugejate arvustuste raamatut, kuna JavaScript ei saa kirjutada andmeid serveris olevatesse failidesse. Seda saate teha ainult CGI-liidese kaudu. Loomulikult saate luua arvustuste raamatu, mille kohta kasutajad saadavad teavet e-posti teel. Kuid sel juhul peate arvustused käsitsi sisestama. Seda saab teha, kui te ei oota, et saate iga päev 1000 arvustust.
Vastav skript on tavaline HTML-tekst. Ja siin pole JavaScripti programmeerimist üldse vaja! Muidugi, välja arvatud juhul, kui peate enne saatmist vormi sisestatud andmeid kontrollima - ja siin on teil tõesti vaja JavaScripti. Lisan vaid, et mailto käsk ei tööta igal pool – näiteks Microsoft Internet Explorer 3.0-s puudub sellele tugi.

Kas teile meeldib see leht? Üldse mitte.
Ajaraiskamine.
Halvim sait veebis.
Parameeter enctype="text/plain" kasutatakse lihtsalt teksti saatmiseks ilma kodeeritud osadeta. See muudab selliste kirjade lugemise palju lihtsamaks.

Kui soovite vormi kinnitada enne selle võrku saatmist, saate selleks kasutada sündmuste töötlejat onSubmit. Peate selle programmi kõne märgistama. Näiteks:

Funktsioon validate() ( // kontrollib, kas sisend on ok // ... if (inputOK) return true else return false; ) ... ... Sel viisil koostatud vormi ei saadeta valede sisestuste korral tehtud andmed.

Konkreetse vormielemendi valimine

Meetodit focus() kasutades saate muuta oma vormi kasutajasõbralikumaks. Seega saate valida, milline element esimesena esile tõstetakse. Või võite öelda, et brauser tõstaks esile vormi, kuhu sisestati valed andmed. See tähendab, et brauser ise asetab kursori teie määratud vormielemendile, nii et kasutaja ei peaks enne vormile midagi sisestamist klõpsama. Seda saate teha järgmise skriptifragmendi abil:

Funktsioon setfocus() ( document.first.text1.focus(); )

Selles õpetuses kirjeldatakse, kuidas luua JavaScripti vorm, mis kontrollib enne andmete serverisse saatmist, kas külastaja on väljad õigesti täitnud. Esmalt selgitame, miks vormide kinnitamine on kasulik tehnika, ja seejärel koostame lihtsa näite, mis selgitab selle toimimist.

Miks ma pean kontrollima vormi täitmist?

Vormi kinnitamine on protsess, mille käigus vormiandmeid kontrollitakse enne töötlemist. Näiteks kui teie vormil on väli, kuhu kasutaja peab sisestama e-posti aadress, võiksite enne vormi edasist töötlemist kontrollida, kas väli on täidetud.

Vormi täitmise kontrollimiseks on kaks peamist meetodit: serveri poolel (kasutades CGI skripte, ASP-d jne) ja kliendi poolel (tavaliselt JavaScripti abil). Serveripoolne valideerimine on turvalisem, kuid nõuab enamasti keerukamat koodi, samas kui kliendipoolne valideerimine on lihtsam ja kiirem (brauser ei pea vormi kinnitamiseks serveriga ühendust looma, seega saab kasutaja kohe vastuse, kui puuduvad väljad, mis tuleb täita).

Kliendipoolne vormi kinnitamine. Tavaliselt tehakse manustatud JavaScripti skripti abil.

Serveripoolne vormi valideerimine. Tavaliselt kasutatakse CGI- või ASP-skripti.

IN see õppetund me ehitame lihtne vorm kliendipoolse valideerimisega JavaScripti abil. Seejärel saate seda kohandada vastavalt oma vajadustele.

Lihtne kinnitusega vorm.

Koostame skripti abil täitekontrolliga lihtsa vormi. See vorm on üks tekstiväli "Sinu nimi" ja nupp andmete saatmiseks. Meie skript kontrollib enne andmete serverisse saatmist, kas kasutaja on oma nime sisestanud.

Avage vorm ja vaadake seda tegevuses. Proovige klõpsata nupul "Esita andmed" ilma väljale "Teie nimi" midagi sisestamata.

Leht sisaldab JavaScripti funktsiooni nimega validate_form(). See kontrollib, kas vorm on täidetud. vaatame kõigepealt kuju.

Vorm

Vormi esimene osa on vormimärgend

Vormi nimi on kontakti_vorm. Tema abiga on meil juurdepääs vormile alates JavaScripti funktsioonid kontrollid.

Vorm kasutab andmete saatmiseks stub htm-faili postmeetodit, mis kuvab lihtsalt sõnumi. Tegelikult saate andmeid oma CGI-skripti edastada, ASP leht jne. (näiteks kirja saatmiseks).

Vormimärgend sisaldab ka atribuuti onsubmit, mis kutsub esile JavaScripti valideerimisfunktsiooni validate_form(), kui klõpsate nupul Esita andmed. Funktsioon tagastab Boole'i ​​väärtuse, mille puhul true tähendab "kontroll õnnestus" ja false tähendab "andmed on ootel". Nii saame vältida vormiandmete esitamist, kui kasutaja pole neid õigesti täitnud.

Ülejäänud vormikood lisab sisestusvälja kontakti_nimi ja nupu "Esita andmed":

Palun sisestage oma nimi.

Sinu nimi:

funktsioon validate_form().

Vormi kinnitamise funktsioon validate_form() on sisse ehitatud lehe alguses olevasse peaossa:

Esimene rida () ütleb brauserile, et järgnev on JavaScripti kood ja HTML-i kommentaar (