Share
În timp ce există multe modificări pentru mai bine în specificația HTML5, nu există niciun bang mai bun pentru dolar pentru site-ul bazat pe date decât transformarea formularelor. Aceste schimbări simple vor transforma modul în care introduceți, validați, procesați și chiar afișați intrările. Veți putea crea mai multe aplicații web cu mai puțin cod și mai puține confuzii.
"În trecutul recent, majoritatea inovațiilor în forme au provenit din utilizarea JavaScript, mai degrabă decât HTML de modă veche. În timp ce nu există nimic în neregulă cu utilizarea JavaScript pentru a îmbunătăți formularele, aceasta aduce propriile sale utilizabilități, împreună cu multe dureri de cap în dezvoltare. "
HTML 5 este în continuare în curs de modificări înainte de a fi finalizat. Dacă vă uitați la spec., Veți vedea că există încă un ultim apel pentru comentarii împreună cu declarații, cum ar fi, Implementatorii ar trebui să fie conștienți de faptul că această specificație nu este stabilă. Mai mult decât atât, în special în scopul acestui tutorial, concentrându-se asupra schimbărilor formelor, implementarea browser-ului este puțin mai puțin controversată. Acestea fiind spuse, schimbările de pe orizont merită examinate astăzi. În timp ce schimbările sunt importante, implementarea pentru dezvoltatori pare a fi destul de ușoară. În acest tutorial, vom face o trecere în revistă la nivel înalt a acestor schimbări de bază și vom gândi la modul în care acestea vor avea impact asupra naturii utilizării datelor de către utilizator.
În trecut, modificările formularelor au fost relativ mici. Dacă vă întoarceți la specificația HTML 3.2, finalizată în 1997, veți vedea aceleași intrări de bază pe care le utilizați astăzi. Selectați, textarea, radioul, casetele de selectare și textul au fost disponibile atunci. O generație de dezvoltatori web au crescut în scris la aceleași standarde. În timp ce versiunile mai târzii ale caietului de sarcini au adus modificări formularelor, cum ar fi acțiunea de formare, etichetă, legendă și formă, cum ar fi onsubmit sau onchange, modul în care ne ocupăm de intrarea utilizatorilor a rămas oarecum static. În trecutul recent, majoritatea inovațiilor în forme au provenit din utilizarea JavaScript, mai degrabă decât HTML vechi. Deși nu este nimic în neregulă cu utilizarea JavaScript pentru a îmbunătăți formularele, aceasta aduce propria sa utilitate, împreună cu multe dureri de dezvoltare de dezvoltare. De exemplu, există multe modalități diferite de validare a formularelor utilizând JavaScript, dar ce se întâmplă când un utilizator nu are activat JavaScript? În plus, trebuie să aplicăm logica scripturilor de pe server. În cele din urmă, avem un mod nu atât de consecvent de manipulare a datelor introduse de utilizatori. HTML 5 nu abordează toate durerile de cap din inovare pentru formularele din ultimii 13 ani, dar ne dă o mulțime de instrumente
face munca noastră mult mai ușoară și ne permite să producem forme mult mai coerente.
Există trei modificări de bază pe care ar trebui să le examinăm. În primul rând, vom examina schimbările aduse elementelor de intrare, cum ar fi autocompletarea sau focalizarea automată. Al doilea este schimbările la stările de intrare și există destul de puține! În cele din urmă, vom examina noile elemente de formă. Este important să se precizeze că specificația este în flux; așa că nu aș fi surprins dacă, în viitor, vor exista schimbări subtile la ceea ce discutăm. Asta face acest lucru distractiv!
Atributele de intrare sunt acele elemente pe care le plasați în intrări pentru a explica ce face intrarea. De exemplu:
În exemplul de mai sus, atributele de intrare sunt valoare, dimensiune și maxlength. Acestea au fost în jur de ceva timp. HTML 5 nu modifică conceptul de a avea elemente de intrare, ci adaugă mai multe. Se pare că există cel puțin o scădere, sau mai degrabă o înlocuire, și aceasta este schimbarea persoanelor cu handicap acum pare să devină readonly. Speculația nu merge în detaliu la schimbare, dar dacă aș fi fost un om de pariuri, schimbarea ar permite focurilor de evenimente, cum ar fi onblur, să declanșeze foc - ceea ce un element cu handicap împiedică.
Noile atribute includ autofocus, autocomplete, listă, cerută, multiple, șablon, min și max, pas și substituent. Cred ca acestea sunt doua arome diferite de elemente. Prima aromă îmbunătățește experiența pentru utilizator, iar cea de-a doua îmbunătățește experiența de dezvoltare. Ceea ce vreau să spun prin aceasta este autofocalizarea, completarea automată, lista, multiplele și înlocuitorul, care ajută experiența utilizatorilor în selectarea elementelor sau, probabil, oferind o descriere a ceea ce caută formularul sau că ajută la completarea formularului. necesare, min și max, model și pas adăugați la experiența de dezvoltare prin a spune ce ar trebui să fie în forma în sine.
Ce face fiecare dintre aceste atribute noi este relativ ușor de înțeles. De exemplu:
Deasupra, elementul de focalizare automată se concentrează pe introducerea textului la încărcarea paginii. Aceasta înseamnă că, de îndată ce pagina se încarcă, această introducere de text este gata să facă o intrare. Puteți începe să tastați imediat, deoarece acest element are în centrul atenției documentul. Ceva pe care l-am folosit în JavaScript într-o linie sau cam asa ceva, se poate face acum cu un singur cuvânt.
În exemplul de mai sus, dezactivând autocompletarea, păstrați browserul în completarea câmpului de formular de la o valoare anterioară. Nimic nu mă deranjează mai mult decât să-mi văd numărul cardului meu de credit ajungând într-o formă de îndată ce introduc o cifră. Valoarea implicită pentru completarea automată trebuie să fie activată, astfel încât singura dată când trebuie să utilizați acest element este când doriți să împiedicați completarea câmpului de formular din intrările anterioare. Aceasta adaugă experienței utilizatorilor prin păstrarea informațiilor sensibile doar prin "apariția".
Atributul listă este foarte cool. În esență, furnizați un datalist și va crea o meniuri în jos de la introducerea textului. Gândește-te la asta ca pe o mașină naturală completă. Luați-o mai departe și, în loc să adăugați o bibliotecă JavaScript pentru o căutare rapidă, bazată pe intrări cheie, puteți adăuga cu ușurință un manipulator de eveniment "onchange", cu un post AJAX și veți termina cu o picătură în jos, care devine mai specific ca tipul de utilizatori în cutie. Cu HTML 5, această funcție este creată doar cu câteva linii.
Atributul multiplu vă permite să selectați mai multe elemente din lista dvs. de date. De exemplu, este posibil să aveți un formular care trimite mesaje de pe site-ul dvs. Web. Prin utilizarea elementului multiplu, puteți permite utilizatorului să selecteze mai mulți destinatari pentru a trimite acel mesaj. Din nou, aceasta este ceva ce putem realiza cu un pic de JavaScript acum, dar cu HTML 5, trebuie doar să adăugăm o singură comandă la formular.
Atributul de substituent este ceva ce am făcut de mai mulți ani cu un pic de JavaScript. Ceea ce face acest lucru este, de îndată ce intrarea este focalizată, Type Here va dispărea. Dacă nu a avut loc nicio modificare a textului la estompare, apăsați din nou tasta Enter Here. Încă o dată, vom scoate JavaScript din imagine pentru a îmbunătăți experiența utilizatorului.
Aceste noi atribute noi toate sporesc dezvoltarea noastră. Cu excepția "pasului", fiecare ajută la validarea intrărilor de utilizator.
Atributul necesar este exact așa cum se pare. Eu, dezvoltatorul acestei pagini web, vă cereți să completați acest formular înainte de a apăsa trimiteți. Aceasta este validarea formularului de bază pe care îl folosim astăzi cu JavaScript. Ceea ce a luat o bibliotecă înainte de a adăuga o intrare necesară, acum ia un singur cuvânt în formă.
Dintre toate atributele noi de formă, acesta este cel mai entuziasmat. Dle Forme, permiteți-mi să vă prezint prietenului meu bun, Regex. În acest caz, putem valida intrările de formulare bazate pe expresii regulate. În timp ce aceasta va fi mistică la început, pe măsură ce învățați expresia regulată, posibilitățile de validare devin acum nelimitate.
Am concluzionat ultimele trei într-un exemplu, deoarece acestea se ocupă cu validarea numerelor - sau cu gama de numere pe care le putem include.
Fiecare dintre acestea se ocupă de valori numerice. Nu le confundați cu maxlength, care se referă la numărul de caractere pe care le va lua o intrare. Elementul de pas este la fel cum sună. Pe măsură ce alegeți o valoare numerică, măriți-o cu 5 sau 5 cu 5, ceea ce înseamnă că acest tip de intrare va avea valori posibile de 1, 1,5, 2, 2,5 și așa mai departe.
Încă de acum, din câte știu, suportul browser-ului este oarecum neclar la aceste atribute. Este un grafic rapid care arată ce am putut găsi în implementări.
Există opt noi tipuri de intrări, fără a lua în calcul toate tipurile de date și de timp noi, care, pentru scopurile noastre, mă concentrez într-una. Este important să rețineți că browserele care nu au implementat noile tipuri de intrări se vor degrada la un tip de text pe fiecare dintre acestea pe care le-am testat. Ceea ce aduce noile tipuri de intrări este capacitatea de a valida intrarea utilizatorului în funcție de tipul pe care îl utilizați. Există și mai multe valabilități care vor fi discutate în următoarele două secțiuni. Fiecare dintre noile tipuri de intrări ne permite să separăm un câmp de text de ceva mai specific. De exemplu, pentru a lua valori întregi sau float înainte de HTML 5, am folosit cel mai mult un tip de text de intrare. Doar din adnotare, este contra intuitivă pentru începători. Prin faptul că suntem mai specifici, avem un control vizual mai bun asupra interfeței noastre, cu cât elementul HTML este mai specific, cu cât aveți mai mult control din cadrul CSS și cu atât este mai ușor să definiți elementele vizuale. În plus, cu noile tipuri de intrări specifice, browserele au acum posibilitatea de a regla finele ce ar trebui să fie domeniul de intrare. În sfârșit, odată cu apariția computerelor mobile, suntem capabili să facem elemente de formă de aplicație web care pot fi folosite ca aplicații naturale sau pot modela tastatura pe care o folosim.
Să ne uităm mai întâi la tratarea numărului:
Fiecare dintre aceste tipuri de intrări ne permite să jucăm cu numere și atunci când trimitem formularele, trebuie să fim siguri că avem acele valori flotante pentru prelucrarea de pe partea noastră de server fără validarea JavaScript adăugată. Pur și simplu, pentru fiecare dintre aceste tipuri, așteptăm ca numerele să revină în intervalul pe care îl definim și cu pasul pe care îl dorim. Diferența dintre cele două tipuri este modul în care sunt afișate. În timp ce aștept să vadă implementarea tipului de număr, m-aș aștepta fie la o rulare, fie la o casetă text sau, eventual, la un tip selectat cu numere. Tipul de domeniu este un pic diferit, deoarece arată ca o valoare de alunecare, similar cu ceea ce v-ați aștepta să vedeți pentru un control al volumului.
O altă mare ușurare pentru a vă standardiza dezvoltarea backend-ului este noul tip de dată și dată de introducere. Din implementarea Opera pe care am văzut-o, fiecare afișează o meniură calendaristică, care permite utilizatorului să selecteze o dată. Din nou, putem valida pe pagina noastră web că intrarea este în formatul pe care îl așteptăm. Fiecare face exact ceea ce credeți; selectați o lună, o săptămână, o zi sau o oră. Cel care este puțin diferit este data-local, care arată data și ora fără compensarea zonei dvs. de fus orar. De exemplu, dacă selectați un zbor, datatime-local ar arăta ora și data în orașul în care mergeți, ceea ce nu este neapărat fusul orar în care vă aflați în prezent.
Fiecare dintre aceste tipuri de intrări este descriptivă. Tipurile de adresă URL și de e-mail au validări ale modelelor url valide și ale modelelor de e-mail valide. Telefonul nu se conformează totuși unui model specific. Pur și simplu frânează liniile. Dacă doriți să impuneți un model de validare pe câmpul telefonic, puteți utiliza întotdeauna elementul de model. Fiecare dintre aceste elemente minus culoare va lua de asemenea atributul listă, minus culoare. Culoarea este ciudat de ciorchine; Pot să văd folosirea practică a acestuia, unde puteți selecta o culoare dintr-o trageți în jos, care arată culorile, și impune introducerea textului de ceva de genul # 000000, dar nu se potrivește cu restul modificărilor, după părerea mea. Este ca jocul, care nu este ca ceilalți.
Ca și atributele, implementarea browserului de tip de intrare este destul de neclară. IPhone-ul meu pare să sprijine mai multe dintre acestea decât Safari, ceea ce este un pic amuzant pentru mine. Acesta este cel mai bun pe care l-am putut găsi, ca să-l susțin.
Numărul de modificări aduse elementelor de formular nu este la fel de drastic ca atributele și tipurile de intrări. Acestea fiind spuse, există câteva elemente noi care trebuie să fie conștiente. Am acoperit deja datalistul - așa definim ce va fi selectat dintr-un apel al elementului de listă - dar nu am văzut cheie, ieșire, progres sau metru. În afara cheii. acestea nu sunt la fel de explicative ca noile atribute. Permite să se sapă în ele doar un pic.
Acesta este un pic confuz. Nu generează o cheie publică pentru tine. În schimb, este un control al generatoarelor de perechi de chei. Odată ce formularul este trimis, acesta ambalează perechea de chei pentru a stoca cheia privată în magazia de chei locale și trimite cheia publică înapoi la server. Acesta va genera certificatul clientului și îl va oferi înapoi utilizatorului pentru descărcare. Odată descărcate și stocate cu cheia privată, puteți autentifica apoi servicii, cum ar fi autentificarea SSL sau certificatul.
+ =
Gândiți-vă la elementul de ieșire ca zonă de text pentru steroizi. Ce puteți face este să calculați din două intrări de text de tip numeric și să ieșiți la acel calcul, fără a trimite niciodată formularul înapoi la server. Dacă tocmai returnați false, în exemplul de mai sus, va calcula numărul_1 plus numărul_2 și vă va oferi răspunsul. Ca multe lucruri discutate în acest tutorial, acest lucru este ceva pe care îl putem realiza astăzi cu JavaScript, dar acest lucru micșorează într-adevăr cantitatea de cod pe care trebuie să o scriem în viitor.
12cm
Cele două noi elemente finale sunt progresul și contorul. Ele sunt similare, dar cu o singură diferență. Progresul trebuie utilizat pentru a măsura progresul unei sarcini specifice. De exemplu, dacă ați putea avea încă cinci pagini pe care să le finalizați înainte de a efectua un studiu, ați arăta elementul de progres în acea zonă. Contorul, pe de altă parte, este o măsurătoare a ceva. S-ar putea să doriți să afișați restul spațiului pe disc pe care l-a lăsat un utilizator. Utilizați contorul pentru a afișa acea măsurătoare. Există noi elemente limită, cum ar fi cele scăzute, ridicate și optime. Acestea înlocuiesc elementele min sau max; astfel încât, dacă le depășesc, ele devin noile limite inferioare și superioare ale formei.
La fel ca restul formularului HTML 5, implementarea browserului este slabă în acest moment. Heres ceea ce pare să funcționeze și ce nu (la momentul acestei scrieri).
Din câte văd, nu există niciun motiv să nu începeți să utilizați formularele HTML5. Elementele de intrare și tipurile de toate se degradează frumos, chiar și în IE6, unde ele sunt fie ignorate ca elemente, fie degradate la intrările de text. Va trebui să așteptăm o perioadă pentru ca atributele de validare să devină o realitate, dar cu ceea ce am spus, există și astăzi unele utilizări fără aceste avantaje. De exemplu, iPhone modifică tastatura dacă utilizați tipurile de adresă URL, de e-mail sau de număr. Tipul de intrare pentru interval este deja acceptat în browserele WebKit, astfel încât să fiți primul copil din bloc cu un cursor de număr care funcționează fără JavaScript. Specificațiile se finalizează rapid, iar browserele se apropie destul de repede de schimbările paradigmei. Nu este niciun moment ca prezentul să înceapă cel puțin să se joace cu aceste noi jucării! Tu ce crezi?
Accentsconagua