Crearea de formulare HTML. Stocarea datelor pe partea clientului. Exemplu de creare a unui formular de înregistrare
Sunt într-o plimbare savantă zilele astea
Îți voi câștiga încrederea prin serviciul meu,
Îmi scrii un bilet la ordin,
Ca să nu am nicio îndoială cu privire la plată.
Mefistofel, în Faust de Goethe
Formularele au fost introduse pe scurt în capitolul anterior ca o modalitate de a transmite informațiile introduse de utilizator prin HTTP. Ele au fost dezvoltate pe web înainte de apariția JavaScript, cu așteptarea ca interacțiunea cu serverul să aibă loc atunci când treceți pe o altă pagină.
Dar elementele lor fac parte din DOM, ca și restul paginii, iar elementele DOM care reprezintă câmpuri de formular acceptă mai multe proprietăți și evenimente pe care alte elemente nu le fac. Acest lucru face posibilă vizualizarea și manipularea câmpurilor de intrare din programele JavaScript și adăugarea de funcționalități la formularele clasice sau utilizarea formularelor și câmpurilor ca bază pentru construirea unei aplicații.
Câmpuri Un formular web constă din orice număr de câmpuri de intrare înconjurate de o etichetă. HTML oferă multe câmpuri diferite, de la simple casete de selectare pornit/dezactivat până la liste derulante și câmpuri de introducere a textului. Această carte nu va discuta în detaliu toate tipurile de domenii, dar vom oferi o scurtă prezentare generală a acestora.Multe tipuri de câmpuri de introducere folosesc o etichetă. Atributul său de tip este utilizat pentru a selecta stilul câmpului. Iată câteva tipuri comune:
câmp text text pe o singură linie
parola este aceeași cu textul, dar ascunde intrarea
caseta de selectare pornire/oprire
radio parte a câmpului cu posibilitatea de a alege dintre mai multe opțiuni
fișierul permite utilizatorului să selecteze un fișier pe computerul său
Câmpurile de formular nu trebuie să apară în interiorul unei etichete. Ele pot fi plasate oriunde pe pagină. Informațiile din astfel de câmpuri nu pot fi transmise serverului (acest lucru este posibil doar pentru întregul formular), dar atunci când facem câmpuri pe care le procesează JavaScript, de obicei nu trebuie să transmitem informații din câmpuri prin trimitere.
(text)
(parola)
(Caseta de bifat)
(radio)
(fişier)
Interfața JavaScript pentru astfel de elemente variază în funcție de tip. Ne vom uita la fiecare dintre ele puțin mai târziu.
Câmpurile de text cu mai multe rânduri au propria etichetă. Eticheta trebuie să aibă o etichetă de închidere și să folosească textul din interiorul acelor etichete în loc să folosească atributul value.
unu, doi, trei
Și eticheta este folosită pentru a crea un câmp care permite utilizatorului să selecteze una dintre opțiunile date.
Clatite Caserola Inghetata
Când valoarea unui câmp se modifică, evenimentul „modificare” este declanșat.
Focus Spre deosebire de majoritatea elementelor document HTML, câmpurile de formular pot primi focalizarea de la tastatură. Când faceți clic pe ele sau selectați în alt mod, acestea devin active, adică. receptorii principali de intrare de la tastatură.Dacă documentul are un câmp de text, atunci textul pe care îl tastați va apărea în el numai dacă câmpul are focus de intrare. Alte câmpuri răspund diferit la tastatură. De exemplu, încearcă să treacă la o opțiune care conține text pe care îl introduce utilizatorul și, de asemenea, răspunde la tastele săgeți prin mutarea selecției opțiunii în sus și în jos.
Puteți controla focalizarea din JavaScript folosind metodele de focalizare și estompare. Primul mută focalizarea către elementul DOM de la care este numit, iar al doilea elimină focalizarea. Valoarea document.activeElement corespunde elementului curent care primește focus.
document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → CORP
Unele pagini solicită utilizatorului să înceapă imediat să lucreze la unul dintre câmpurile formularului. La Ajutor JavaScript Este posibil să se concentreze acest câmp atunci când documentul este încărcat, dar HTML are și un atribut de focalizare automată care obține același rezultat, dar spune browserului care sunt intențiile noastre. În acest caz, browserul poate suprascrie acest comportament în cazuri adecvate, cum ar fi atunci când utilizatorul a mutat focalizarea în altă parte.
Browserele permit în mod tradițional utilizatorului să mute focus folosind tasta Tab. Putem influența ordinea de navigare prin atributul tabindex. În exemplu, documentul va muta focalizarea din câmpul de text la butonul OK, în loc să parcurgă mai întâi linkul de ajutor.
(ajutor) OK
În mod implicit, majoritatea tipurilor elemente HTML nu te concentra. Dar adăugarea unui tabindex la un element face posibil ca acesta să primească focalizare.
Câmpuri dezactivate Toate câmpurile pot fi dezactivate cu atributul dezactivat, care există și ca proprietate a elementului obiect DOM.Sunt bine, sunt leșinat
Câmpurile dezactivate nu acceptă focalizarea sau modificarea și, spre deosebire de câmpurile active, de obicei apar gri și estompate.
Când un program este în proces de procesare a unui clic pe un buton sau alt element, care poate necesita comunicarea cu serverul și poate dura mult timp, este o idee bună să dezactivați elementul până la finalizarea acțiunii. În acest caz, atunci când utilizatorul își pierde răbdarea și dă din nou clic pe element, acțiunea nu se va mai repeta.
Întregul formular Când un câmp este conținut într-un element, elementul său DOM va avea o proprietate de formular care se referă la formular. Elementul, la rândul său, are o proprietate elemente care conține o colecție de câmpuri asemănătoare matricei.Atributul nume al unui câmp specifică modul în care va fi determinată valoarea acestui câmp atunci când este trimis către server. Poate fi folosit și ca nume de proprietate atunci când accesați proprietatea elementelor formularului, care acționează atât ca un obiect asemănător matricei (accesat prin număr) cât și ca hartă (accesat după nume).
Nume:
Parola:
Autentificare var form = document.querySelector("form"); console.log(form.elements.type); // → parola console.log(form.elements.password.type); // → parola console.log(form.elements.name.form == form); // → adevărat
Un buton cu un atribut de tip egal cu trimiterea trimite formularul atunci când este făcut clic. Presare Introduceți cheileîn interiorul unui câmp de formular are același efect.
Trimiterea unui formular înseamnă de obicei că browserul navighează la pagina desemnată în atributul de acțiune al formularului, folosind fie o solicitare GET, fie o solicitare POST. Dar înainte de asta, proprietatea „submit” este dezactivată. Poate fi gestionat în JavaScript, iar handlerul poate preveni comportamentul implicit apelând evenimentul preventDefault pe obiect.
Valoare: Save var form = document.querySelector("form"); form.addEventListener("submit", function(event) ( console.log("Salvarea valorii", form.elements.value.value); event.preventDefault(); ));
Interceptarea evenimentelor „trimite” este utilă în mai multe cazuri. Putem scrie cod care verifică validitatea valorilor introduse și afișează imediat o eroare în loc să transmitem datele din formular. Sau putem dezactiva trimiterea implicită a formularului și lăsăm programul să se ocupe de intrarea în sine, de exemplu folosind XMLHttpRequest pentru a trimite date către server fără a reîncărca pagina.
Câmpuri de text Câmpurile cu etichete și tipuri de text și parolă, precum și etichete, au o interfață comună. Elementele lor DOM au o proprietate de valoare care conține conținutul lor curent ca șir de text. Setarea acestei proprietăți la o valoare modifică conținutul câmpului.Proprietățile câmpului text selectStart și selectionEnd conțin informații despre poziția cursorului și selecția textului. Când nu este selectat nimic, valoarea lor este aceeași și este egală cu poziția cursorului. De exemplu, 0 indică începutul textului, 10 indică faptul că cursorul se află la al 10-lea caracter. Când este selectată o parte a unui câmp, proprietățile sunt sensuri diferite, și anume începutul și sfârșitul textului selectat. De asemenea, puteți introduce o valoare în aceste câmpuri.
De exemplu, imaginați-vă că scrieți un articol despre Khasekhemwy, dar aveți probleme cu ortografia corectă a numelui lui. Următorul cod atribuie un handler de evenimente etichetei care, atunci când este apăsat F2, inserează șirul „Khasekhemwy”.
var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) ( // Tasta cod pentru F2 se întâmplă să fie 113 dacă (event.keyCode == 113) ( replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); ) )); funcția replaceSelection(câmp, cuvânt) ( var de la = field.selectionStart, la = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Pune cursorul după cuvântul field.selectionStart = field.selectionEnd = din + cuvânt.lungime; );
Funcția înlocuireSelectare înlocuiește textul selectat curent cu cuvântul specificat și mută cursorul într-o poziție după acel cuvânt, astfel încât să puteți continua să tastați.
Evenimentul „modificare” pentru un câmp de text nu se declanșează de fiecare dată când este introdus un singur caracter. Se declanșează după ce câmpul își pierde focalizarea și valoarea sa a fost modificată. Pentru a răspunde instantaneu la modificările dintr-un câmp de text, trebuie să înregistrați un eveniment „de intrare”, care se declanșează de fiecare dată când introduceți un caracter, ștergeți text sau manipulați în alt mod conținutul câmpului.
În exemplul următor vedem un câmp de text și un contor care arată lungimea curentă a textului introdus.
lungime: 0 var text = document.querySelector("input"); var output = document.querySelector("#lungime"); text.addEventListener("input", function() ( output.textContent = text.value.length; ));
Casete de selectare și butoane radio Caseta de selectare este un simplu buton radio binar. Valoarea sa poate fi preluată sau modificată prin proprietatea verificată, care conține o valoare booleană.Faceți pagina violet var checkbox = document.querySelector("#purple"); checkbox.addEventListener("schimbare", function() ( document.body.style.background = checkbox.checked ? "mediumpurple" : ""; ));
O etichetă este folosită pentru a asocia o bucată de text cu un câmp de introducere. Atributul for trebuie să se potrivească cu id-ul câmpului. Făcând clic pe etichetă, se activează câmpul de introducere, acesta primește focus și schimbă valoarea - dacă este o bifă sau un buton radio.
Un buton radio este similar cu o bifă, dar este legat de alte butoane radio cu același nume, astfel încât doar unul dintre ele poate fi selectat.
Culoare: Violet Verde Albastru var butoane = document.getElementsByName("culoare"); funcția setColor(event) ( document.body.style.background = event.target.value; ) pentru (var i = 0; i< buttons.length; i++) buttons[i].addEventListener("change", setColor);
Metoda document.getElementsByName returnează toate elementele cu date atributul numelui. Exemplul iterează prin ele (prin o buclă for obișnuită, nu o forEach, deoarece colecția returnată nu este o matrice reală) și înregistrează un handler de evenimente pentru fiecare element. Rețineți că obiectele eveniment au o proprietate țintă care se referă la elementul care a declanșat evenimentul. Acest lucru este util pentru a crea handlere de evenimente - handlerul nostru poate fi apelat de diferite elemente și trebuie să aibă o modalitate de a accesa elementul curent care l-a numit.
Selectați câmpuri Câmpurile selectate sunt similare cu butoanele radio - vă permit, de asemenea, să selectați dintre mai multe opțiuni. Dar dacă butoanele radio ne permit să controlăm aspectul opțiunilor, atunci tipul de câmp este determinat de browser.Câmpurile selectate au o opțiune care seamănă mai mult cu o listă de casete de selectare decât cu butoane radio. Dacă atributul multiplu este prezent, eticheta vă va permite să selectați orice număr de opțiuni, nu doar una.
Clatite Caserola Inghetata
În majoritatea browserelor, aspectul câmpului va fi diferit de un câmp cu o singură alegere, care de obicei arată ca un meniu derulant.
Atributul dimensiune al etichetei este folosit pentru a seta numărul de opțiuni care sunt vizibile în același timp - în acest fel puteți influența aspectul abandonului. De exemplu, atribuind dimensiunea 3, veți vedea trei linii simultan, indiferent dacă opțiunea multiplă este prezentă.
Fiecare etichetă are o semnificație. Poate fi definit prin atributul value, dar dacă nu este specificat, atunci valoarea etichetei determină textul aflat în interiorul etichetei... Proprietatea de valoare a elementului reflectă opțiunea selectată în prezent. Pentru un câmp cu capacitatea de a selecta mai multe opțiuni, această proprietate nu este deosebit de necesară, deoarece va conține doar una dintre mai multe opțiuni selectate.
Eticheta de câmp poate fi accesată ca obiect asemănător matricei prin proprietatea opțiuni. Fiecare opțiune are o proprietate selectată care indică dacă opțiunea este selectată în prezent. Proprietatea poate fi, de asemenea, modificată pentru a face opțiunea selectată sau deselectată.
Următorul exemplu extrage valorile selectate din câmpul de selectare și le folosește pentru a crea un număr binar din biți. Apăsați Ctrl (sau Command pe un Mac) pentru a selecta mai multe valori simultan.
0001 0010 0100 1000 = 0 var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("schimbare", function() ( var 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; });
Câmp fișier Câmpul fișier a fost inițial destinat încărcării fișierelor de pe un computer printr-un formular. ÎN browsere moderne de asemenea, vă permit să citiți fișiere din JavaScript. Câmpul acționează ca paznic pentru dosare. Scriptul nu poate prelua și deschide pur și simplu un fișier de pe computerul utilizatorului, dar dacă utilizatorul selectează un fișier în acest câmp, browserul permite scriptului să înceapă să citească fișierul.Câmpul fișierului arată de obicei ca un buton etichetat cu ceva de genul „Selectați fișierul”, cu informații despre fișierul selectat lângă el.
var input = document.querySelector("input"); input.addEventListener(„schimbare”, function() ( if (input.files.length > 0) ( var file = input.files; console.log(„Ați ales”, file.name); if (file.type) console.log(„Are tip”, fișier.tip); ) ));
Proprietatea fișierelor elementului este un obiect asemănător matricei (nu o matrice reală) care conține o listă de fișiere selectate. Initial este gol. Elementul nu are proprietate simpla fișier deoarece utilizatorul poate selecta mai multe fișiere simultan atunci când atributul multiplu este activat.
Obiectele din proprietatea fișiere au proprietățile numele (numele fișierului), dimensiunea (dimensiunea fișierului în octeți) și tipul (tipul fișierului în sensul tipului media - text/plat sau imagine/jpeg).
Ceea ce nu are este o proprietate care conține conținutul fișierului. Trebuie să încercați din greu să obțineți conținutul. Deoarece citirea unui fișier de pe disc durează mult, interfața trebuie să fie asincronă, astfel încât documentul să nu înghețe. Vă puteți gândi la constructorul FileReader ca la un constructor XMLHttpRequest, dar pentru fișiere.
var input = document.querySelector("input"); input.addEventListener("schimbare", function() ( Array.prototype.forEach.call(input.files, function(file)) ( var reader = new FileReader(); reader.addEventListener("load", function() (consola .log(„Fișier”, fișier.nume, „începe cu”, reader.result.slice(0, 20)); )); reader.readAsText(fișier); )); ));
Citirea unui fișier are loc prin crearea unui obiect FileReader, înregistrarea unui eveniment „încărcare” pentru acesta și apelarea metodei sale readAsText, pasând fișierul către volum. Când descărcarea este completă, conținutul fișierului este stocat în proprietatea rezultat.
Exemplul folosește Array.prototype.forEach pentru a itera prin matrice, deoarece într-o buclă normală ar fi incomod să obțineți fișierul și obiectele de citire necesare de la handler-ul de evenimente. Variabilele ar fi comune tuturor iterațiilor buclei.
FileReaders are, de asemenea, un eveniment de „eroare” atunci când citirea unui fișier eșuează. obiect de eroare va fi salvat în proprietatea de eroare. Dacă nu vrei să-ți deranjezi capul cu un alt inconvenient circuit asincron, îl puteți încheia într-o promisiune (vezi capitolul 17):
Funcția readFile(fișier) ( return new Promise(funcție (reuși, eșuează) ( var reader = new FileReader(); reader.addEventListener("încărcare", function() (succeed(reader.result); )); reader.addEventListener ("eroare", funcția() ( eșuare(cititor.eroare); )); reader.readAsText(fișier); )); )
Stocarea datelor pe partea clientului Paginile HTML simple cu adăugarea de JavaScript poate fi o bază excelentă pentru mini-aplicații - mici programe de sprijin, automatizarea sarcinilor zilnice. Atașând handlere de evenimente la câmpurile de formular, puteți face totul, de la conversia Fahrenheit în Celsius până la generarea parolelor din parola principală și numele site-ului web.Când o astfel de aplicație trebuie să salveze informații între sesiuni, variabilele JavaScript nu pot fi utilizate - valorile lor sunt aruncate de fiecare dată când pagina este închisă. Puteți configura un server, îl puteți conecta la Internet, iar apoi aplicația ar stoca datele dvs. acolo. Ne vom uita la asta în capitolul 20. Dar vă adaugă muncă și complexitate. Uneori este suficient să stocați date în browser. Dar cum?
Puteți stoca date șir, astfel încât să supraviețuiască reîncărcărilor paginii - pentru a face acest lucru, trebuie să le puneți într-un obiect localStorage. Permite stocarea datelor șirurilor sub nume (care sunt și șiruri), ca în acest exemplu:
LocalStorage.setItem("nume utilizator", "marijn"); console.log(localStorage.getItem(„nume utilizator”); // → marijn localStorage.removeItem("nume utilizator");
Variabila este stocată în localStorage până când este suprascrisă, ștearsă folosind removeItem sau utilizatorul șterge spațiul de stocare local.
Pentru site-urile cu domenii diferite– diferite compartimente din acest depozit. Adică, datele salvate de pe un site web în localStorage pot fi citite sau suprascrise numai de scripturi de pe același site.
Browserele limitează, de asemenea, cantitatea de date pe care o pot stoca, de obicei câțiva megaocteți. Această limitare, cuplată cu faptul că notarea hard disk-uri nu aduce profit oamenilor, împiedică consumarea spațiului pe disc.
Următorul cod implementează un program simplu pentru a lua notițe. Stochează notele ca obiect, asociind titluri cu conținut. Este codificat în JSON și stocat în localStorage. Utilizatorul poate selecta o notă prin câmp și poate modifica textul acesteia. O intrare este adăugată făcând clic pe un buton.
Note: nou
var list = document.querySelector("#list"); function addToList(name) ( var option = document.createElement("option"); option.textContent = name; list.appendChild(option); ) // Luați lista din stocarea locală var notes = JSON.parse(localStorage.getItem ("note")) || ("ce sa cumpar": ""); pentru (nume var în note) if (note.hasOwnProperty(nume)) addToList(nume); function saveToStorage() ( localStorage.setItem("note", JSON.stringify(note)); ) var curent = document.querySelector("#currentnote"); curent.valoare = note; list.addEventListener("schimbare", function() ( current.value = note; )); current.addEventListener("schimbare", function() (note = current.value; saveToStorage(); )); funcția addNote() ( var name = prompt("Numele notă", ""); if (!name) return; if (!notes.hasOwnProperty(name)) (note = ""; addToList(name); saveToStorage() ; ) list.value = nume; current.value = note; )
Scriptul inițializează variabila note cu valoarea din localStorage, iar dacă nu este acolo, cu un obiect simplu cu o singură intrare „ce să cumpere”. O încercare de a citi un câmp lipsă din localStorage va returna null. Transmițând null la JSON.parse, vom primi null înapoi. Prin urmare, puteți utiliza operatorul || pentru valoarea implicită. .
Când datele din notă se modifică (adăugați intrare nouă sau se modifică cea actuală), funcția saveToStorage este apelată pentru a actualiza câmpul stocat. Dacă ne-am aștepta să stocăm mii de înregistrări, ar fi prea scump și ar trebui să venim cu o procedură de stocare mai complexă - de exemplu, un câmp separat pentru fiecare înregistrare.
Când utilizatorul adaugă o înregistrare, codul trebuie să actualizeze câmpul de text, chiar dacă câmpul are un handler de „modificare”. Acest lucru este necesar deoarece evenimentul „modificare” are loc numai atunci când utilizatorul modifică valoarea câmpului, și nu atunci când scriptul o face.
Există un alt obiect similar cu localStorage numit sessionStorage. Diferența dintre ele este că conținutul sessionStorage este uitat la sfârșitul sesiunii, ceea ce pentru majoritatea browserelor înseamnă momentul închiderii.
Rezumatul HTML oferă multe tipuri variate câmpuri de formular – text, casete de selectare, selecție multiplă, selecție fișier.Puteți obține valoarea și manipula aceste câmpuri din JavaScript. La schimbare, acestea declanșează evenimentul „schimbare”, la intrarea de la tastatură – „intrare” și multe alte evenimente diferite de la tastatură. Ele ne ajută să surprindem momentul în care utilizatorul interacționează cu câmpul de introducere. Proprietăți precum valoare (pentru câmpurile de text și selectare) sau bifate (pentru casete de selectare și butoane radio) sunt folosite pentru a citi și scrie conținutul câmpurilor.
Când trimiteți un formular, are loc evenimentul „trimitere”. Managerul JavaScript poate apela apoi preventDefault la acest eveniment pentru a opri transferul datelor. Elementele de formular nu trebuie să fie incluse în etichete.
Când utilizatorul a selectat un fișier cu hard disk Prin câmpul de selecție a fișierelor, interfața FileReader ne va permite să accesăm conținutul fișierului dintr-un program JavaScript.
Obiectele localStorage și sessionStorage pot fi folosite pentru a stoca informații într-un mod care va supraviețui reîncărcărilor paginilor. Primul salvează datele pentru totdeauna (sau până când utilizatorul le șterge în mod specific), iar al doilea – până când browserul este închis.
ExercițiiJavaScript Workbench Creați o interfață care vă permite să scrieți și să executați fragmente de cod JavaScript.Faceți un buton lângă acesta, atunci când faceți clic, constructorul Funcție din capitolul 10 va împacheta textul introdus într-o funcție și o va apela. Convertiți valoarea returnată a funcției sau oricare dintre erorile acesteia într-un șir și imprimați-o după câmpul de text.
returnează „bună”; Să mergem // Codul tău.
Completare automată Completați un câmp de text astfel încât, atunci când introduceți text, sub acesta să apară o listă de opțiuni. Ai o matrice opțiuni posibile, și trebuie să le afișați pe cele care încep cu textul introdus. Când utilizatorul face clic pe o opțiune sugerată, acesta schimbă conținutul câmpului în acea opțiune.// Construiește o matrice de nume de variabile globale, // cum ar fi „alerta”, „document” și „scrollTo” var termeni = ; pentru (nume var în fereastră) terms.push(nume); // Codul tau.
Jocul vieții lui Conway Aceasta este o simplă simulare a vieții pe o grilă dreptunghiulară, fiecare element fiind viu sau nu. Pentru fiecare generație (pas de joc) se aplică următoarele reguli:Fiecare celulă vie al cărei număr de vecini este mai mic de doi sau mai mult de trei moare
- fiecare celulă vie care are doi-trei vecini trăiește până la următoarea mutare
- fiecare celulă moartă care are exact trei vecini prinde viață
Vecinii unei celule sunt toate celulele adiacente acesteia pe orizontală, verticală și diagonală, 8 în total.
Vă rugăm să rețineți că regulile se aplică întregii grile în același timp și nu fiecărei celule pe rând. Adică numărul de vecini se numără cu un moment înainte urmatorul pas, iar modificările care apar în celulele învecinate nu afectează noua stare a celulei.
Implementați jocul folosind orice structuri adecvate. Utilizați Math.random pentru a crea populații inițiale aleatoare. Afișați câmpul ca o grilă de bifă cu un buton „treceți la pasul următor”. Când utilizatorul activează sau dezactivează casetele de selectare, aceste modificări trebuie luate în considerare la calcularea generației următoare.
Următoarea generație // Codul dvs.
JS, sau JavaScript, este un limbaj de scripting care rulează pe partea clientului și nu necesită o reîncărcare a paginii. JavaScript a fost dezvoltat de Netscape în 1995.
Probabil ați văzut pe site-ul meu în cartea de oaspeți sau pe forum, formulare cu care adăugați mesaje butoane speciale. Și, dacă ai vrut să obții același, atunci acest articol este pentru tine.
Bazele JSCodul JavaScript este inserat între etichete și
Dacă codul conține funcții, atunci aceste funcții ar trebui plasate în etichete între etichete și.
Dacă Cod JavaScript este plasat într-un fișier separat cu extensia .js, apoi puteți conecta un astfel de fișier la codul HTML specificând numele fișierului ca parametru src al etichetei
…
Astfel, am conectat un fișier JavaScript la fișierul HTML.
Puteți utiliza JavaScript, de exemplu, ca handler pentru anumite evenimente. De exemplu, când faceți clic pe un element de control cu mouse-ul, are loc evenimentul OnClick.
Pentru ca browserul să „înțeleagă” că trebuie să executăm un script scris în JS, specificăm pseudo-protocolul javascript:
Funcția de alertă (șiruri) afișează o fereastră cu textul și un buton „OK”.
În acest exemplu, când faceți clic pe butonul „Afișați”, va apărea o fereastră cu textul „Ați făcut clic pe butonul” și un buton „OK”.
FormePuteți accesa elementele de formular prin următoarea construcție:
document.|nume_form|.|nume_component|
Pentru elementele de introducere a informațiilor ( și ), proprietatea valoare este disponibilă pentru a accesa în sine informațiile introduse sau neintroduse.
funcția AddText (text) ( document.form1.edit1.value=text; )
În acest exemplu, după ce faceți clic pe butonul „Apăsați-mă”, textul „Acesta este Editați” va apărea în câmpul de introducere a textului. De asemenea, puteți adăuga încă un parametru la funcțiile de acest fel - un obiect în care doriți să scrieți text. De exemplu, avem două câmpuri de intrare informații text si doi nasturi. Când facem clic pe primul buton, vom scrie ceva text în primul câmp de introducere, iar când facem clic pe al doilea buton, vom scrie ceva text în al doilea câmp. Pentru a face acest lucru, nu trebuie să scriem două funcții; este suficient să scriem o funcție, indicând în parametrii acesteia, pe lângă textul pe care dorim să-l adăugăm, și obiectul în care trebuie adăugat acest text.
funcția AddText2 (obiect, text) ( object.value=text; )
Aceasta este toată funcția necesară pentru a schimba orice text din orice element de introducere a textului. Să stocăm această funcție într-un fișier separat numit addtext.js
Și aici este pagina html:
Ei bine, asta este probabil tot ce am vrut să scriu. Dacă aveți întrebări, scrieți-le la mine Adresa de e-mail: [email protected]
Rău Bun
O funcție este o bucată de cod reutilizabilă care poate fi apelată oriunde în program. Acest lucru elimină nevoia din nou și din nou...
Uneori trebuie să activați sau inactiv un câmp de text, butoane radio sau casete de selectare. Cum să faci asta în mod dinamic fără a reîncărca pagina? Pentru asta poți…
O zi bună, fanilor dezvoltării web și celor care doresc să-și creeze propriul site. Înainte de asta, toate publicațiile mele erau dedicate elementelor de bază ale limbajului, modalităților de a crea diverse obiecte de conținut, formatării, structurii acestora etc. După ce stăpâniți subiectele anterioare, puteți crea deja un site web destul de bun. Cu toate acestea, va fi incomplet fără subiectul de astăzi: „Crearea de formulare în html”.
Această secțiune a limbii este foarte importantă. Prin urmare, acordați o atenție deosebită studierii acestuia, altfel resursa web pe care ați creat-o nu va fi lansată în producție. Astfel, după ce ai citit articolul, vei afla de ce trebuie să folosești formulare, ce etichete sunt folosite pentru a crea și vei putea, de asemenea, să încerci exemple concrete în practică. Să începem!
Ce este o formă și cum funcționează?Un formular este unul dintre cele mai importante obiecte, care este destinat schimbului de date de informații între server și utilizator.
Mai simplu spus, dacă doriți să creați un magazin online cu posibilitatea de a comanda produse pe site, solicitați înregistrarea pe o resursă web și lucrați cu conturile sau furnizați clienților părere cu managerii de companie, atunci nu te poți lipsi de formulare.
Formularul este specificat folosind un element special al limbajului html.
Rețineți că un document de cod poate conține mai multe declarații de etichetă, dar o singură solicitare poate fi trimisă către server pentru prelucrarea datelor. De aceea, informațiile introduse de utilizator în câmpurile prevăzute pentru aceasta și care se referă la diferite formulare nu ar trebui să fie dependente. De asemenea, nu este permisă cuibărirea formelor una în cealaltă.
Pentru cei care sunt nerăbdători și dornici să arunce o privire rapidă asupra reprezentării codului, am atașat un exemplu simplu de utilizare a unui panou cu un câmp de text pentru o parolă cu un buton:
| 1 2 3 4 5 6 7 8 9 10 11 12 | Exemplu |
Exemplu
Poate că acum nu este foarte clar ce și cum interacționează în asta program mic, totuși, vă garantez că după ce ați citit întreg acest articol, veți putea crea aplicații mult mai complexe.
Trimiterea datelor pe partea serveruluiPentru a trimite informațiile tastate (sau selectate) în caseta de dialog, trebuie să utilizați mecanismul standard - butonul Trimitere.
Codul pentru o astfel de metodă arată astfel:
Când rulați linia prezentată, va apărea un buton cu inscripția: „Trimite”.
O altă modalitate de a trimite date către server este să apăsați tasta Enter din caseta de dialog.
După confirmarea expedierii informatii specificate, nu ajunge imediat pe server. În primul rând, este procesat de browser, rezultând forma „nume=valoare”.
Numele este parametrul atributului de tip al etichetei, iar valoarea sunt datele introduse de utilizator. Apoi, șirul convertit este transmis handler-ului, care este cel mai adesea specificat în atribut de acțiune element .
Parametrul de acțiune în sine nu este necesar și, în unele cazuri, nu este deloc necesar. De exemplu, dacă o pagină de site este scrisă cu folosind php sau js, apoi procesarea are loc pagina curentași nu sunt necesare linkuri.
Pentru o mai bună înțelegere a întregii imagini a funcționării site-ului, aș dori să adaug că pe server, datele sunt prelucrate folosind alte limbi. Asa de, limbi pe partea serverului luate în considerare: Python, php, limbaje asemănătoare C (C#, C etc.), Java și altele.
Acum aș vrea să mă opresc și să vorbesc mai mult despre element. Dacă explicați într-un limbaj simplu, apoi trebuie să creați câmpuri de text, butoane radio, diverse butoane, câmpuri ascunse, casete de selectare și alte obiecte.
Eticheta nu trebuie să fie asociată cu , cu toate acestea, dacă trebuie să procesați înregistrările utilizatorilor sau să le introduceți, de exemplu, într-o bază de date, atunci nu vă puteți lipsi de un container.
Principalele atribute ale acestui element de limbaj marcare hipertext sunt:
- Text – creează un câmp de text;
- Submit – creează un buton pentru trimiterea datelor către server;
- Imagine – responsabil pentru un buton cu o imagine;
- Resetare – setează un buton pentru a șterge formularul;
- Parolă – setează un câmp de text special pentru parole;
- Checkbox – responsabil pentru câmpurile cu casete de selectare;
- Radio – responsabil de domenii cu selectarea unui element;
- Buton – creează un buton;
- Hidden – folosit pentru câmpuri ascunse;
- Fișier – specifică câmpul responsabil pentru trimiterea fișierelor.
Există 2 moduri de a transfera datele utilizatorului pe partea serverului: Obțineți și Postați. Aceste metode efectuează aceeași acțiune, dar diferă semnificativ unele de altele. Prin urmare, înainte de a menționa vreuna dintre ele, să ne familiarizăm cu caracteristicile lor.
| Post | obține | |
| Dimensiunea documentelor transmise | Limitat la partea serverului. | Maxim – 4 KB. |
| Cum sunt afișate informațiile trimise | Disponibil numai atunci când este vizualizat prin extensii de browser sau alte produse software speciale. | Imediat disponibil pentru toată lumea. |
| Utilizarea marcajelor | Nu există nicio modalitate de a adăuga la marcaje, deoarece solicitările nu sunt repetate (toate paginile leagă la o singură adresă). | Orice pagină cu o solicitare poate fi salvată ca marcaje și returnată la ea mai târziu. |
| Memorarea în cache | Pe baza paragrafului anterior, toate cererile sunt pe o singură pagină. | Fiecare pagină poate fi memorată în cache separat. |
| Scop | Folosit pentru a trimite fișiere mari (cărți, imagini, videoclipuri etc.), mesaje, comentarii. | Excelent pentru a căuta valorile solicitate pe o resursă web sau pentru a trimite mesaje text scurte. |
Pentru a indica care dintre cele două metode de transfer de date ar trebui să utilizeze browserul, elementul folosește parametrul de metodă furnizat (de exemplu, method="post" ).
Să ne uităm la al doilea exemplu. Să creăm un formular în care trebuie să introduceți datele personale (numele și prenumele, data nașterii) și să creați o parolă. Apoi trimitem toate acestea către server folosind metoda Post.
Introduceți informațiile dvs. personale!
De exemplu, pentru a introduce o dată, există comutatoare pentru numărul fiecărui parametru (zi, lună și an), precum și un panou derulant cu calendarul în sine, pentru confort.
Crearea unui panou de înregistrareAu fost acoperite etichetele și atributele de bază. De aceea, este timpul să creați un formular de înregistrare cu drepturi depline utilizând marcajul în stil CSS și validând datele introduse. Desigur, nu vom putea vedea cum serverul funcționează cu ei, dar vom oferi designul și detaliile importante.
| 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 | Inregistrare Inregistreaza-te pe site Nume: Nume de familie: E-mail: Parola: Repetați parola: |
Corpul de înregistrare ( background-color:#98FB98; background-attachment: fix; ) form( background-color:#AEEEE; Culoare: #006400; font-size:15px; ) h4 (culoare: roșu; text-align: center; ) p ( text-align: center; ) input ( Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; ) Înregistrare pe site Pentru ulterioare funcţionare corectăîn serviciul nostru, vă rugăm să introduceți date veridice!
Nume:
Nume de familie:
E-mail:
Parola:
Repetați parola:
Vă sfătuiesc să economisiți acest cod programe într-un document cu extensia .html și codificare utf-8 și deschideți-l pe acesta din urmă într-o fereastră de browser. Veți vedea un panou de înregistrare în toată splendoarea lui cu câmpuri pentru introducerea numelui, prenumelui, e-mailului și a parolei repetate. Observați că atunci când lansați pagina, cursorul este imediat poziționat în primul câmp de text. Această tehnică este realizată prin atributul autofocus.
Începeți să completați câmpurile, lăsând unul neschimbat și faceți clic pe butonul „Înregistrare”. După cum ați observat deja, formularul nu va fi trimis, deoarece fiecare element< input>este specificat atributul cerut. Setează câmpurile marcate ca obligatorii.
Un alt punct interesant este specificarea tipului="email" , care a apărut în . Când utilizați acest tip de câmp, informațiile introduse sunt verificate automat pentru corectitudine. În caz de erori, formularul nu este trimis la server.
Așa că publicația a ajuns la final. În ea am încercat să colectez suma maxima cunoștințe importante și relevante cu privire la formulare. Sper ca ti-a fost de folos! V-aș fi foarte recunoscător dacă v-ați alătura rândurilor abonaților mei și le-ați spune prietenilor despre blog.
Pa! Pa!
Cu stima, Roman Chueshov
Citește: de 333 de ori
Formularele HTML sunt elemente complexe de interfață. Acestea includ diverse elemente functionale: câmpuri de introducere și liste, sfaturi cu instrumente etc. Tot codul formularului este conținut în .
Majoritatea informațiilor din formularele web sunt transmise folosind . Pentru a introduce o singură linie de text, se folosește elementul; pentru mai multe linii, se folosește elementul. Elementul creează o listă derulantă.
Elementul creează etichete pentru câmpurile de formular. Există două moduri de a grupa etichetele și câmpurile. Dacă câmpul se află în interiorul unui element, atunci nu este necesar să fie specificat atributul for.
Nume Nume Nume
Câmpurile formularului pot fi împărțite în blocuri logice folosind elementul. Fiecare secțiune poate primi un nume folosind elementul.
Informații de contact Nume Email 
Orez. 1. Gruparea câmpurilor formularului
Pentru a face formularul mai ușor de înțeles pentru utilizatori, textul este adăugat în câmpurile formularului pentru a oferi un exemplu de date de intrare. Acest tip de text se numește text wildcard și este creat folosind atributul substituent.
Câmpurile obligatorii trebuie de asemenea evidențiate. Înainte de HTML5, simbolul asterisc * era folosit lângă numele câmpului. Noua specificație introduce un atribut obligatoriu special, care vă permite să marcați un câmp obligatoriu la nivel de marcare. Acest atribut indică browserului (presupunând că acceptă HTML5) să nu trimită date după ce utilizatorul dă clic pe Trimite până când câmpurile specificate sunt completate.
Pentru a schimba aspectul unui câmp de text atunci când primiți focalizarea, utilizați pseudoclasa de focalizare. De exemplu, puteți întuneca fundalul câmpului curent sau puteți adăuga rama colorata pentru a-l face să iasă în evidență de restul:
Intrare: focus ( fundal: #eaeaea; )
Un alt atribut HTML5 util este atributul autofocus. Vă permite să setați automat focalizarea pe câmpul inițial dorit pentru elemente și (doar un element din fiecare formular).
Exemplu de creare a unui formular de înregistrareMarcaj HTML
Înregistrare Nume Sex bărbat femeie E-mail Țară Selectați țara de reședință Rusia Ucraina Belarus Trimiteți
Notă
action="form.php" - link către fișierul de gestionare a formularelor. Creați un fișier în codificare UTF-8, încărcați-l pe server și înlocuiți action="form.php" cu calea către fișierul de pe serverul dvs.
Orez. 2. Aspect forme implicite După cum puteți vedea din figură, fiecare element de formular are stiluri implicite de browser. Să ștergem stilurile și să stilăm elementele de formular.
Form-wrap ( lățime: 550px; fundal: #ffd500; chenar-rază: 20px; ) .form-wrap *(tranziție: .1s liniar) .profile ( lățime: 240px; float: stânga; text-align: center; umplutură) : 30px; ) form ( fundal: alb; float: stânga; lățime: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; culoare: #7b7b7b; ) .form-wrap:after, form div:after (conținut: ""; afișare: tabel; clar: ambele; ) form div ( margin-bottom: 15px; poziție: relativ; ) h1 ( font-size: 24px; font-weight: 400; poziție: relativ ; margin-sus: 50px; ) h1:după (conținut: „\f138”; dimensiunea fontului: 40px; familia de fonturi: FontAwesome; poziție: absolut; sus: 50px; stânga: 50%; transformare: translateX(-50) %); ) /************************ stilul elementelor de formular ******************** * **/ etichetă, span ( afișare: bloc; dimensiunea fontului: 14px; marginea inferioară: 8px; ) introducere, introducere ( lățime chenar: 0; contur: niciunul; marjă: 0; lățime: 100%; umplutură: 10px 15px; fundal: #e6e6e6; ) input:focus, input:focus (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio etichetă ( poziție: relativă; padding-left: 50px; cursor: pointer; lățime: 50%; float: stânga; line-height: 40px; ) .radio input (poziție: absolut; opacitate: 0; ) .radio -control (poziție: absolut; sus: 0; stânga: 0; înălțime: 40px; lățime: 40px; fundal: #e6e6e6; chenar-rază: 50%; text-align: center; ) .male:before ( conținut: " \f222"; font-family: FontAwesome; font-weight: bold; ) .female:before (conținut: "\f221"; font-family: FontAwesome; font-weight: bold; ) .radio label:hover input ~ . control radio, .radiol input:focus ~ .radio-control (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:verificat ~ .radio-control (culoare: roșu; ) selectați ( lățime: 100%; cursor: indicator; umplutură: 10px 15px; contur: 0; chenar: 0; fundal: #e6e6e6; culoare: #7b7b7b; -webkit-appearance: none; /* debifați webkit -browsere */ -moz-appearance: none; /*debifați în Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*unbifați în IE*/ ) .select-arrow (poziția: absolute); sus: 38px; dreapta: 15px; latime: 0; inaltime: 0; pointer-evenimente: niciunul; /*activează afișarea listei când dai clic pe săgeată*/ border-style: solid; lățime chenar: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; Buton ) ( umplutură: 10px 0; lățime chenar: 0; afișare: bloc; lățime: 120px; marjă: 25px automat 0; fundal: #60e6c5; culoare: alb; dimensiune font: 14px; contur: niciunul; text-transform : majuscule; ) /************************ adaugă adaptabilitate la forma ******************** ** **/ @media (lățime maximă: 600 px) ( .form-wrap (marja: 20 px automat; lățime maximă: 550 px; lățime: 100 %;) .profil, form (float: niciunul; lățime: 100% ;) h1 (margin-top: automat; padding-bottom: 50px;) form (border-radius: 0 0 20px 20px;) )
Fișierul Form.php
Notă
În variabila $subject, specificați textul care va fi afișat ca titlu al scrisorii;
Your_name - aici puteți specifica numele care va fi afișat în câmpul „de la cine este scrisoarea”;
înlocuiți your_site_url cu adresa site-ului cu formularul de înregistrare;
înlocuiți your_email cu adresa dvs E-mail;
$headers .= „Bcc: e-mail-ul tău”. „\r\n”; trimite bcc la adresa ta de e-mail.
