Faceți clic pe Resetare și completați comanda.
Numele dumneavoastră:
Adresa ta:
Trimite:
Dacă procesați acest cod HTML cu un browser, va fi afișată o pagină web, care poate fi văzută pe ecranul monitorului:
Utilizatorul face clic pe un buton „Resetare” , iar câmpurile își iau valorile implicite. Formularul este completat de către utilizator și la un clic pe un buton "Trimite comanda" trimis la Această adresă de e-mail este protejată de spamboți. Pentru a-l vedea, trebuie să aveți JavaScript activat. De obicei, browserul nu trimite formularul în sine, ci încredințează această lucrare programului de e-mail instalat implicit pe sistemul de operare al computerului (de exemplu, Outlook). Scrisoarea se trimite sub forma:
subiect: Formular transmis de la Microsoft Internet Explorator
nume = Prohorov Viktor Sergheevici
value= Această adresă de e-mail este protejată de spamboți. Pentru a-l vizualiza, trebuie să aveți JavaScript activat
obj = „Orientări”
Scrisoarea este compusă din perechi nume=valoare , care sunt selectate în ordine din câmpurile de formular.
Să aruncăm o privire mai atentă la următorul exemplu.
Listare form_1.html
etichetele definesc limitele formularului. Indicarea lor este obligatorie.
Atributele etichetei containerului
? acțiune --un atribut a cărui valoare este URL -adresa (completa sau relativa) a celui solicitat CGI -programe. Acest program va prelucra datele conținute în formular. Este acceptabil să folosiți intrarea MAILTO:URL. În acest caz, formularul va fi trimis prin e-mail. Dacă atributul acțiune nu specificati, continutul formularului va fi trimis catre URL adresa de la care a fost încărcată această pagină web, adică „pentru sine”. Aceasta este o abreviere convenabilă, dar conform standardului atribut HTML acțiune necesar.
? metodă -- definește o metodă HTTP , folosit pentru a trimite date de formular din browser către server. Atribut metodă poate lua două sensuri: obține sau post:
¦ obține - trimiterea datelor formularului în bara de adrese. Este posibil să fi observat pe diferite site-uri web prezența unui „?” la sfârșitul adresei URL. și următoarele date în format parametru=valoare. Aici "parametru" se potrivește cu valoarea atributului Nume elemente de formular (vezi mai jos despre etichetă "sens" - continutul de atribut valoare (conține, de exemplu, introducerea utilizatorului într-un câmp de text al aceleiași etichete
De exemplu, încercați să căutați ceva în Yandex și acordați atenție barei de adrese a browserului dvs. Aceasta este calea obține.
¦ post - datele formularului sunt trimise în corpul cererii. Dacă nu este complet clar (sau complet neclar) ce este aceasta, nu vă faceți griji, vom reveni la această problemă în curând.
Dacă atributul metodă nespecificat - subînțeles "obține" .
? enctype -- atribut opțional. Specifică tipul de conținut al formularului utilizat pentru a determina formatul de codificare la trimiterea acestuia. ÎN HTML două sunt definite valori posibile pentru atribut enctype :
¦ APPLICATION/X-WWW-FORM-URLENCODED (Mod implicit).
¦ MULTIPARTE/FORM-DATE.
Etichetă etichetă finală . Atribute și caracteristici de utilizare
Etichetă tip :
¦ Înțeles "text" specifică un câmp de introducere a textului cu o singură linie.
¦ Înțeles "Trimite" specifică un buton care, atunci când este apăsat, trimite formularul către server.
Alte valori sunt posibile (și
Deci, ce se întâmplă când se face clic pe butonul OK?
1. Browserul se uită la elementele incluse în formular și le creează din atributele acestora Nume Și valoare datele formularului. Să presupunem că numele este introdus Vasia . În acest caz, datele formularului: nume=Vasya&okbutton=OK.
2. Browserul stabilește o conexiune cu serverul, trimite o cerere către server pentru documentul specificat în atribut acțiune etichetă metodă (în acest caz - OBȚINE ), transmiterea datelor din formular în cerere.
3. Serverul analizează cererea primită, generează un răspuns, îl trimite către browser și închide conexiunea.
4. Browserul afișează documentul primit de la server.
Trimiterea aceleiași solicitări manual (folosind telnet ) arată astfel (presupunând că numele de domeniu al site-ului este www.example.com ).
Multe aplicații web folosesc formulare pentru a colecta date și a trimite datele către server. Formularele conțin de obicei mai multe elemente pentru introducerea datelor tipuri variate , cum ar fi numele, adresa, data nașterii Adresa de e-mail și așa mai departe. HTML acceptă mai multe tipuri de elemente de introducere, inclusiv câmpuri de text, butoane radio și casete de selectare. HTML5 a adăugat mai multe elemente speciale, cum ar fi e-mailul, câmpul de parolă, selecția culorilor, widget-uri pentru dată și oră și glisoare.
Exemplul principal al acestui tutorial conține o parte client și o parte server. Partea clientului folosește Polymer pentru a oferi interfața cu utilizatorul (formele conțin multe tipuri de elemente de intrare) și o interfață de sincronizare a datelor cu Dart. Clientul și serverul comunică folosind unele clase din diferite biblioteci, inclusiv fluxuri, fluxuri, HttpRequest și așa mai departe. Serverul folosește anteturi CORS pentru a activa cererile pe mai multe domenii.
cometariu Acest articol se bazează pe ceea ce ați citit în secțiunile: Crearea de elemente personalizate, Utilizarea API-ului Futures, Procesarea dinamică a datelor și ar trebui să vă familiarizați cu biblioteca Polymer, futures, JSON și HttpRequest.
Informații generale despre formulare
Formularele au o proprietate acțiune , care este adresa URL pentru a trimite datele formularului și metodă care determină modul în care trebuie trimise datele. Proprietățile acțiunii și metodei pot fi definite direct în HTML, sau pentru un caz mai complex sau pentru a obține mai mult control, puteți scrie cod Dart și utiliza bibliotecile Dart pentru a expune aceste proprietăți în mod programatic
Să începem cu elementele de bază, doar cu formularele HTML, pentru a înțelege proprietățile de acțiune și metodă ale elementelor de intrare și pentru a înțelege comportamentul standard al formularelor. Formularul de mai jos, inclus într-o etichetă
Utilizarea atributelor de acțiune și metodă.
Și aici este codul HTML care adaugă trei elemente de intrare în formular - un câmp de text, un buton de trimitere și o casetă de selectare.
Caseta de selectare este înfășurată într-o etichetă de etichetă, așa că puteți da clic atât pe caseta de selectare, cât și pe titlu, pentru a modifica valoarea.
Acest cod HTML oferă un comportament automat.
**
Creează un buton special care, atunci când este apăsat, determină trimiterea datelor din formular. Pe baza atributelor acțiunii și metodei, butonul generează o solicitare și o trimite către server la adresa URL specificată.
**name=q** **name="sitesearch"**
definește numele câmpului de text și numele casetei de selectare.
Pentru elementele dintr-un formular care au un nume specificat, acestea furnizează date pentru formularul respectiv. ÎN în acest exemplu , valoarea furnizată câmp de text aceasta este valoarea pentru q , iar caseta de selectare oferă valoarea pentru cautare site , ambii acești parametri fac parte din adresa URL corectă pentru interogare Google . Când utilizatorul face clic pe butonul, numele și valoarea corespunzătoare sunt adăugate la adresa URL de căutare. Iată un exemplu de cerere:
Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org
Acest exemplu a fost creat în întregime fără niciun cod Dart sau Javascript. Deoarece este foarte simplu, poate folosi comportamentul normal al HTML: URL-uri accesibile public și ușor de format, precum și o solicitare GET obișnuită. Pentru formularele care conțin un numar mare de date, sau pentru aplicații web , care comunică cu un server specializat, de obicei trebuie să procesați formularul în mod programatic.
Următorul exemplu arată mai multe formă complexă , care trimite în mod programatic date către server folosind o solicitare POST.
Exemplu de slambook în special
Această secțiune include două programe ca exemple de bază.
Primul este un program de server obișnuit numit slambookserver, care ascultă calculator local portul 4040 și procesează cererile POST și OPȚIUNI prin crearea de mesaje și trimiterea confirmării către client. Serverul folosește anteturi CORS pentru a permite aplicației să utilizeze cererile trimise de la alte servere.
Al doilea este un program client numit slambook, care oferă un formular în care utilizatorul poate introduce informații. Acest program folosește Polymer pentru legarea dublă a datelor, între elementele de intrare și variabilele Dart. Când utilizatorul face clic pe buton, codul Dart convertește datele într-un șir JSON, trimite o solicitare OPTIONS pentru a obține permisiunea serverului și apoi trimite o solicitare POST pentru a trimite datele. Când se primește o solicitare de la server, aceasta este afișată clientului.
Următoarea diagramă arată secvența comunicării dintre server și client în acest exemplu.
Incearca-l! Introduceți orice date și faceți clic pe butonul Trimite .
Notă de versiune . Aplicația slambook este compatibilă cu polymer.dart 0.9.
Solicitarea returnează mesajul „Fără server” deoarece nu ați pornit serverul pe computer. Să reparăm asta.
Pornirea serverului
Codul sursă al programului de server principal slambookserver.dart poate fi descărcat din exemplele tutorialului
Alerga program server din Linie de comanda
% dart slambookserver.dart Ascultare pentru GET și POST pe http://127.0.0.1:4040
Acum puteți încerca din nou să trimiteți datele din aplicația slambook de mai sus.
cometariu : Dacă un alt program folosește deja portul 4040, serverul va returna un mesaj de eroare și va termina execuția. Programul de pe această pagină se așteaptă ca slambookserver să fie localizat pe mașina locală, portul 4040. Prin urmare, pentru ca aplicația să funcționeze, trebuie să opriți un alt proces și să porniți din nou slambookserver. Sau puteți schimba numărul portului în programul server și client. Evitați să utilizați 3030, deoarece Dart Editor îl folosește. Apoi rulați clientul și serverul pe computerul local.
Restul acestui tutorial explică codul serverului și clientului.
Despre partea client veți afla despre:
Trimiterea datelor din formular
Resetare formular
Utilizarea polimerului pentru a lega datele de formă
Partea de server din această secțiune va vorbi despre:
Antetele CORS
Procesarea cererilor OPTIONS
Gestionarea cererilor POST
Trimiterea datelor din formular
În primul rând, să aruncăm o privire la modul în care datele sunt trimise către server.
Amintiți-vă că exemplul search_form s-a bazat pe utilizarea atributelor acțiune și metodă pentru a specifica scopul și metoda de trimitere a formularului. De asemenea, rețineți că exemplul search_form se bazează pe comportamentul automat al unui buton special de trimitere. Pe de altă parte, exemplul de slambook este implicat direct în procesul de depunere:
În primul rând, nici acțiunea, nici metoda nu sunt definite în formă
În al doilea rând, butonul de trimitere are un handler de clic în Dart
În al treilea rând, gestionarea clicurilor înlocuiește comportamentul automat al butonului de trimitere
În cele din urmă, datele formularului sunt trimise către server folosind bibliotecile Dart
Forma din exemplul slambook este reprezentată de un element personalizat tute-slambook-form , care este reprezentat de următorul cod HTML:
Observați absența atributelor de acțiune și metodă. În schimb, comportamentul butonului de trimitere este definit în gestionarea de clic pe buton al lui Dart. Mai jos este codul HTML care creează butonul de trimitere și îl leagă de gestionarea Dart.
Și codul în sine pentru manipulatorul de clic pe butonul submitForm():
Să ne uităm la fiecare element al codului de gestionare
Anulați un handler standard
Acesta este un eveniment fără atribute acțiune Și metodă , butonul de trimitere conține un comportament automat care nu este necesar în exemplul slambook. Prin urmare, prima linie a codului de gestionare apelează e.preventDefault() pentru a suprascrie comportamentul implicit al butonului.
Void submitForm(Evenimentul e) ( e.preventDefault(); // Nu faceți trimiterea implicită.… )
Configurarea și trimiterea unei cereri POST
Următoarea bucată de cod creează un obiect HttpRequest . Acest cod folosește new pentru a instanția un obiect HttpRequest, care este folosit pentru a configura și trimite o solicitare POST. Clasa HttpRequest are o funcție getString() corespunzătoare, astfel încât să puteți utiliza și trimite solicitări GET obișnuite către adrese URL.
Următoarea linie oferă obiectului HttpRequest o funcție de apel invers numită onData , care este apelat atunci când se primește un răspuns de la server. Ne vom uita la detaliile declarației funcției onData() mai târziu.
Important : Trebuie să înregistrați o funcție de apel invers înainte de a trimite cererea!
Solicitare = HttpRequest nou (); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());
În cele din urmă, funcția trimite datele formularului către server ca șir JSON. Uneori datele sunt trimise în părți. Dar acest exemplu este suficient de mic încât datele să fie trimise la un moment dat. Această solicitare este asincronă, deci metoda send() se va finaliza imediat ce cererea este trimisă.
Se așteaptă un răspuns de la server
Obiectul HttpRequest comunică cu serverul. Puteți obține statul folosind câmpul readyState Obiect HttpRequest. Starea gata poate dura cinci sensuri diferite : netrimis (netrimis), deschis (deschis), anteturi primite (anteturi primite), încărcare (încărcare) și finalizat (terminat). Când starea gata se schimbă, HttpRequest generează un eveniment și este apelată funcția de apel invers onData().
Să ne amintim linia de cod în care este înregistrat handlerul de evenimente onReadyStateChange :
Request.onReadyStateChange.listen(onData);
Singurul argument necesar pentru metoda listen() este o funcție de apel invers cu semnătură: void onData(T) . Metoda listen() vă permite, de asemenea, să definiți trei argumente suplimentare, cum ar fi un handler de erori.
Mai jos este funcția de apel invers onData():
Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Datele au fost salvate OK. serverResponse = "Server Sez: " + request.responseText; ) else if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Starea este 0... cel mai probabil serverul nu rulează. serverResponse = „Fără server”; ) )
Primul lucru pe care îl arată codul este dacă solicitarea a fost finalizată cu succes. Dacă da, atunci conținutul răspunsului este plasat în rândul numit serverResponse , care este legat de valoarea elementului textarea aplicației slambook. Când o linie este schimbată, interfața cu utilizatorul se va actualiza automat și un mesaj va fi afișat utilizatorului.
Dacă cererea este executată cu o eroare, programul va ieși serverResponse mesaj de eroare care va fi afișat utilizatorului.
Resetarea datelor din formular
Butonul de resetare este element special Intrare HTML, care șterge implicit valorile introduse în acest formular. În schimb, dorim ca butonul să resetați valorile formularului la valorile lor originale. Prin urmare, gestionarea clicurilor pentru butonul de resetare trebuie să înlocuiască comportamentul automat și să completeze în mod explicit datele.
Void resetForm(Eveniment e) ( e.preventDefault(); favoriteThings["pisoi"] = fals; favoriteThings["raindrops"] = fals; favoriteThings["mittens"] = fals; favoriteThings["kittens"] = fals; theData ["firstName"] = ""; theData["favoriteQuote"] = "" theData["favoriteColor"] = "#FFFFFF"] = "2013-01-01"; 0"; theData["catOrDog"] = "pisica"; theData["music"] = 0; theData["zombies"] = false; serverResponse = "Resetarea datelor."; )
Crearea unui backend și ascultarea pe un port
Acum să aruncăm o privire la partea de server, care se numește slambookserver , returnează un răspuns HTTP la o solicitare trimisă de la aplicația client slambook. Codul serverului se bazează pe articolul [Utilizarea Dart pentru a crea servicii web JSON (#)
Serverul ascultă portul 4040 de pe mașina locală și procesează doar cereri precum POST și OPȚIUNI. Ambele tipuri de solicitări folosesc antete CORS pentru a permite accesul. Pentru cererile POST, serverul revine mesaj scurt despre confirmare, care include date în format JSON pe care a primit-o din cerere.
Să aruncăm o privire la cod.
Funcția main() a aplicației slambookserver este prezentată în întregime mai jos. Folosind clasa HttpServer, aplicația slambookserver începe să asculte pe portul 4040 al mașinii locale după apelarea funcției nivel superior lega ()
GAZDA finală = "127.0.0.1"; PORT final = 4040; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, oneError: printError); )
Funcția bind() returnează un viitor care poate fi folosit pentru a obține o valoare în viitor (mai multe informații vor veni în doar un minut). Funcția then() înregistrează două funcții de apel invers ca viitor. Prima funcție, gotMessage(), este apelată atunci când viitorul primește valori. Al doilea printError Apelat atunci când o încercare de conectare eșuează. Poate apărea o eroare, de exemplu, dacă un alt program ascultă deja pe același port.
Filtrați cererile și apelați metodele rămase pentru a gestiona fiecare tip de cerere de funcție gotMessage () mai jos.
Void gotMessage(_server) ( _server.listen((HttpRequest cerere) ( switch (request.method) (case „POST”: handlePost(request); break; case „OPTIONS”: handleOptions(cerere); break; implicit: defaultHandler( cerere);
Pentru a gestiona alte tipuri de solicitări, cum ar fi GET, pur și simplu puteți adăuga mai multe valori la caz De exemplu caz „GET” .
Un pic despre viitor.
Să ne uităm puțin la viitor înainte de a ne uita la codul pentru procesarea solicitărilor POST și OPTIONS.
Un viitor reprezintă o modalitate de a obține o valoare cândva în viitor. Utilizați futures pentru a preveni blocarea unui program în timp ce așteaptă date, de exemplu dacă este necesar un calcul lung pentru a furniza o valoare sau dacă valoarea trebuie citită sau preluată folosind I/O.
Când o funcție care returnează un viitor este apelată, se întâmplă două lucruri
Funcția este pusă în coadă pentru execuție și returnează imediat un obiect futures incomplet.
Ulterior, când valoarea este primită, obiectul futures iese cu valoarea primită sau cu o eroare.
Pentru a obține valoarea returnată de viitor, utilizați metoda apoi () pentru a înregistra apelul invers.
În acest exemplu, atât partea client, cât și partea serverului folosesc futures pentru a trimite cereri și a primi răspunsuri corespunzătoare. Programele client-server folosesc aproape întotdeauna futures pentru comunicare și alte tipuri de I/O asincrone.
Gestionarea cererilor de OPȚIUNI
Folosind o clasă HttpRequest , aplicația client slambook trimite solicitări atunci când utilizatorul face clic pe butonul „trimite”. Ai văzut codul mai devreme în acest articol.
Dacă clientul și serverul sunt de origini diferite, ceea ce este obișnuit în aplicații, o solicitare preflight este trimisă înainte de POST. Cererea preliminară trebuie să conțină mai întâi o solicitare OPȚIUNI pentru a determina ce cereri sunt în general permise. Clasa HttpRequest se ocupă automat de solicitările OPTIONS de zbor prealabil. Nu mai este nevoie să scrieți cod la nivelul clientului pentru asta.
Serverul primește o cerere preliminară de OPȚIUNI înainte de a primi cererea principală. Iată codul pentru aplicația slambookserver care procesează cererile OPȚIUNI.
Void handleOptions(HttpRequest req) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. închide();
Acest cod face următoarele:
Obține un obiect HttpResponse care are grijă ca serverul să trimită un răspuns către client
Adaugă anteturi CORS pentru controlul accesului
Imprimă un mesaj pe consolă
Semnalează că răspunsul nu are conținut
Completează răspunsul care va fi trimis clientului.
Când clientul primește o solicitare, antetul CORS semnalează că cererile POST vor fi acceptate.
Configurarea antetelor CORS
Aplicația server folosește următoarea funcție pentru a adăuga anteturi pentru cererile OPTIONS și POST la răspunsul CORS. Funcția adaugă trei anteturi la răspunsul serverului Controlul accesului (care sunt incluse în HttpResponse).
Void addCorsHeaders(HttpResponse res) ( res.headers.add("Acces-Control-Allow-Origin", "*, "); res.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS" ); res.headers.add("Acces-Control-Allow-Headers", "Origine, X-Requested-With, Content-Type, Accept");
Primele două rânduri ale antetului CORS permit solicitări POST și OPTIONS din orice origine. Al treilea determină tipul de solicitări POST și OPȚIUNI pe care serverul le permite să accepte cereri doar cu anumite antete.
Procesarea cererilor POST
Iată o funcție care se ocupă de solicitările clientului POST.
Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((List buffer) ( // Returnează datele înapoi către client. res.write("Mulțumesc pentru date. Iată ce te-am auzit spunând: "); res.write(new String.fromCharCodes(buffer)); res.close (); onError: printError); )
La fel ca o solicitare OPȚIUNI, slambookserver primește obiectul de răspuns HTTP de la cerere, tipărește un mesaj pe consolă și adaugă anteturi CORS la răspuns.
În continuare, în acest cod, ascultăm datele de la client Solicitare POST . Dacă Toate datele sunt gata, se apelează funcția de apel invers. Această funcție este scrisă în același loc. Argumentul funcției este o listă de numere care include toate datele. Fiecare număr este reprezentat de un cod care poate fi reprezentat ca un caracter UTF-16. Dar nu trebuie să vă faceți griji pentru asta, deoarece puteți apela doar la metoda String.fromCharCodes pentru a converti într-un șir obișnuit.
Obiectul HttpResponse gestionează fluxurile de date pe care serverul le poate folosi pentru a trimite date înapoi către client. În cadrul funcției de apel invers, slambookserver scrie mesaje și date sursă ca șir în acest flux. Serverele mai sofisticate vor face ceva cu aceste date, cum ar fi stocarea lor pe un server, procesarea lor sau poate chiar retragerea banilor din contul dvs. bancar.
Când fluxul este închis, obiectul HttpResponse trimite date către client.
Exemplu aplicație client-server slambook poate servi Punct de start pentru propria dvs. aplicație client-server sau un exemplu despre cum să vă construiți propriile aplicații.
Iată o mostră a ceea ce ar trebui să facă partea client.
Folosiți formulare pentru a colecta date despre utilizatori.
Plasați câmpuri de introducere în formulare pentru a elemente individuale date.
Utilizați polimer pentru părere astfel încât datele din formular să fie sincronizate cu codul Dart.
Trimiteți date direct (proprietățile formularului de acțiune și metodă)
Sau programatic (înlocuind comportamentul implicit al codului butonului de trimitere Dart)
Creați un obiect răspuns pe server dintr-un obiect HttpRequest.
Asta ar trebui să facă serverul.
Utilizați HttpServer pentru a configura serverul și ascultați pe port.
Procesează răspunsurile.
Utilizați antetele CORS pentru a permite fiecare solicitare.
Răspunsul la cerere folosește HttpResponse.
Procesați datele în mod asincron folosind futures.
Utilizați fluxuri pentru a scrie date în răspuns.
Aceste resurse se bazează în mare parte pe biblioteci Dart care oferă suport pentru scrierea clienților și serverelor. Vă rugăm să rețineți că există două clase HttpRequest: una în dart:html (pentru clienți) și al doilea dart:io (pentru servere).
Resursă Bibliotecă Descriere
HttpRequest
dart:html
Partea client a solicitării HTTP
HttpRequest
dart:io
Pe partea de server de solicitare HTTP
HttpServer
dart:io
Partea server procesează comunicarea HTTP cu serverul
HttpResponse
dart:io
Partea de server care se ocupă de trimiterea răspunsurilor la cerere
Fluxuri
dart:async
Flux de date
Viitor
dart:async
O modalitate de a primi date asincron
JSON
dart:convertit
Declarație de conversie JSON implicită
Polimer
Polimer
Date despre elemente personalizate asociate unui șablon
Legare bidirecțională a datelor folosind polimer
Exemplul slambook folosește Polymer pentru feedback, valoarea unui element de intrare cu variabile Dart. Dacă utilizatorul modifică valoarea unui element de intrare, variabila asociată din codul Dart se modifică automat. Sau dacă valoarea se modifică în codul Dart, obiectul element personalizat asociat este actualizat automat. Articolul Definirea elementelor personalizate va oferi mai multe detalii despre legarea datelor și polimer.
Acest exemplu folosește și o declarație de gestionare a evenimentelor pentru a intercepta și procesa funcții pentru elementele de intrare.
Folosind exemplul slambook, puteți lua în considerare utilizarea legăturii de date bidirecționale la diverse elemente intrare, inclusiv noi elemente HTML5. Acest tabel rezumă toate atributele bidirecționale pe care le puteți utiliza cu Polymer:
Utilizarea atributelor valoare în orice element de intrare
Atribut valoare funcționează asupra oricăror elemente de intrare și asociază o valoare cu un șir Dart. Acest exemplu folosește valoare pentru caseta de bifare, caseta de introducere a textului, selectorul de culori, selectorul de date și selectorul de intervale.
(Rețineți că ceva cod în jur, de exemplu a fost eliminat pentru a face codul mai lizibil)
Un dicționar în cod Dart numit datele conține date de formular. Codul obiectului dicționarului este evidențiat folosind @observabil și apeluri toObservable() pentru legare.
Dicționarul conține perechi cheie/valoare pentru fiecare element de intrare, unde cheia este un șir. Valorile elementelor asociate cu valoare sunt șiruri. HTML se referă la elementele dicționarului folosind numele lor (identificatorii) în Dart. De exemplu, valoarea selectorului de culori este asociată cu theData['favoriteColor'] .
Utilizarea selectIndex într-un meniu vertical
Element conţine unul sau mai multe elemente , dar implicit doar unul dintre ele poate fi selectat la un moment dat. Selectarea unui singur element este de obicei declarată ca o listă derulantă. Puteți folosi atributul selectatIndex pentru conexiune variabilă Dart tipul întreg cu o listă derulantă. Numărul afișează indexul elementului selectat. Indicele începe de la 0.
Utilizare verificat în casetele de selectare
Puteți folosi atributul verificat Variabilă booleană Dart cu o casetă de selectare separată. Aici, fiecare casetă de selectare este asociată cu o variabilă booleană separată.
Formularul în sine este de obicei destinat să primească informații de la utilizator pentru a le trimite în continuare către server, unde datele formularului sunt primite de programul de gestionare. Un astfel de program poate fi scris în orice limbaj de programare la nivelul serverului, cum ar fi PHP, Perl etc. Adresa programului este indicată în atributul de acțiune al etichetei
În acest exemplu, datele din formular sunt notate atributul numelui (login și parola) vor fi trimise în fișierul de la /example/handler.php. Dacă nu este specificat atributul de acțiune, atunci transferul are loc la adresa paginii curente.
Transferul pe server are loc în două metode diferite: GET și POST, pentru a seta metoda în etichetă
