Resurse pentru a începe cu formularele HTML5

Acest articol explorează unele dintre noile funcții de formular HTML5 și modul în care a îmbunătățit semnificativ introducerea textului, casetele de căutare și alte câmpuri de formular, oferind controale mai bune și mai curate pentru validarea datelor, permițându-vă să creați formulare complicate cu mult mai puțin cod.

Acest articol prezintă unele dintre cele mai utile referințe de formulare HTML5 și CSS3, resurse și tutoriale care vă vor îmbunătăți înțelegerea și cunoașterea formularelor HTML5 și vă vor face viața de dezvoltare mult mai ușoară.

Referințe și resurse pentru formulare HTML5 și CSS3

Noi funcții de formular în HTML5

Iată un articol Dev.Opera care oferă o scurtă prezentare a unora dintre noile controale și funcționalități de formulare care au fost introduse în HTML5. Trece peste noi controale de formular, noi atribute, noi mecanisme de ieșire, validare și suport între browsere. De asemenea, acoperă stilul unui formular HTML5 cu unele dintre noile proprietăți CSS3.

Scufundarea în HTML5: O formă de nebunie

A Form of Madness este un capitol despre formularele HTML5 din cartea web ultra-elegant a lui Mark Pilgrim Diving Into HTML5 . Acesta acoperă textul substituent, câmpurile de focalizare automată, adresele de e-mail, adresele web, numerele sub formă de casete de selectare, numere ca glisoare, selecționare de date, casete de căutare, selecție de culori, validare de formulare, câmpuri obligatorii.

Starea actuală a formularelor HTML5

Această resursă Wufoo Forms este un ghid de referință rapid pentru dezvoltatorii web, care detaliază compatibilitatea actuală a browserului pentru tehnologiile de formulare HTML5. Acesta acoperă tipuri, atribute și elemente și oferă opțiunea de a afla mai multe despre fiecare într-un mod clar și ușor de înțeles.

Validarea formularului de gândire anticipată

Iată un articol despre A List Apart despre utilizarea HTML5 și CSS3 pentru a crea un validator de formulare bazat pe CSS, care are suport bun pentru browser. Acesta acoperă formularele HTML5 și noile sale tipuri de intrare și atribute care fac posibile constrângerile de validare și acoperă modulul UI de bază al CSS3 care oferă câteva pseudo-clase pentru a ajuta stările de validare a stilului - și pentru a schimba aspectul unui câmp de formular pe baza acțiunilor unui utilizator.

Tutoriale și tutoriale pentru formulare HTML5 și CSS3

Distracție cu formularele HTML5

Un tutorial despre Think Vitamin care arată cum să utilizați HTML5 pentru a crea un formular de înscriere prin e-mail distractiv, elegant și foarte utilizabil. Vă ține de mână și vă ghidează pas cu pas în crearea textului substituent, a câmpurilor de formular obligatorii, a câmpurilor de e-mail + web + telefon, a unui selector de date, a unei liste de date și a numerelor.

Cum să construiți formulare HTML5 între browsere

Un tutorial NetTuts+ despre cum să construiți un formular HTML5 între browsere. Acest tutorial de nivel mediu spre dificil vă arată cum să creați un formular elegant și extrem de utilizabil cu un glisor, un rotisor numeric, selector de date și culori, câmpuri de text și un buton de trimitere. Sunt utilizate următoarele instrumente: Webforms2, Modernizr și folosește jQuery pentru funcționalitatea sa fantastică.

Construiește un formular de contact cu HTML5

Un tutorial NetsTuts+ despre cum să construiți un formular de contact elegant, bazat pe HTML5. Acest tutorial de nivel mediu de dificultate începe cu HTML5 Boilerplate, iar apoi vă arată cum să creați un formular de contact curat și elegant, cu câmpurile standard: nume, e-mail, telefon, meniu derulant pentru întrebări, mesaj și trimiteți. Pe lângă HTML5, sunt folosite și următoarele instrumente: jQuery, Modernizer, AJAX și PHP.

Aveți o zi de teren cu formulare HTML5

Un tutorial în 24 de moduri care vă arată cum să stilați un formular HTML5 frumos folosind unele CSS avansate și cele mai recente tehnici CSS3. Trece peste un marcaj semnificativ, creând o bază bună, făcând formularul să arate frumos, stilând listele și construind controalele formularului. Exemplul de formular este unul din coșul de cumpărături, în care un utilizator își va completa detaliile, adresa de livrare și detaliile cardului de credit.

Creați un formular de contact elegant cu HTML5 și CSS3

Un tutorial Line25 care vă arată cum să creați un formular de contact elegant complet din HTML5 și CSS3. Tutorialul prezintă, pas cu pas, cum să utilizați câteva dintre noile funcții utile din HTML5 pentru a adăuga funcționalități interesante formularului. Și arată cum să utilizați proprietățile interesante CSS3 pentru a stila formularul ca și cum ar fi fost proiectat în Photoshop, dar fără a fi nevoie să folosiți nicio imagine.

Proiectarea casetelor de căutare cu HTML5 și CSS3

Un tutorial de Saddam Azad despre cum să proiectați o casetă de căutare elegantă cu HTML5 și CSS3. Sunt folosite trei exemple diferite, iar codul sursă este dat pentru fiecare. Fiecare dintre cele trei stiluri de casete de căutare sunt diferite, așa că puteți alege pe care vă place cel mai mult sau care se potrivește cel mai bine site-ului dvs. Tutorialul arată ce tehnici sunt folosite pentru fiecare exemplu și vă oferă marcajul și codul CSS. Enumeră toate punctele de care ar trebui să fii conștient.

Creați un formular de conectare curat și elegant cu HTML5 și CSS3

Acest tutorial vă va arăta cum să creați un formular de conectare curat și elegant cu HTML5 și CSS3. Acesta acoperă construirea formei reale, atributele formularului HTML5 și stilul formularului. Capturile de ecran care arată fragmentele de cod au și adnotări scrise de mână în stil contur, astfel încât să puteți vedea cu ușurință ce părți ale codului fac ce anume.

Cum se creează un formular de contact folosind HTML5, CSS3 și PHP

Cu acest tutorial vi se va arăta cum să creați un formular de contact elegant și curat folosind HTML5, CSS3 și PHP. Mai exact, se concentrează pe noile funcții HTML5 care sunt deja acceptate de toate browserele majore și utilizează o degradare grațioasă pentru cele care nu o fac. Tutorialul pas cu pas trece peste designul formularului, marcajul HTML5, CSS și crearea funcționalității cu PHP.

Formular de contact pentru plicuri HTML5 și CSS3

Acest tutorial vă va arăta cum să creați un formular de contact în stil plic HTML5 și CSS3 – nu sunt folosite imagini. Tutorialul trece peste structura HTML a formularului, caracteristicile HTML5 (atributul substituent) și proprietățile CSS3 utilizate pentru a-și crea aspectul de plic. Exemplu de cod este furnizat în fiecare pas.

Cum să creați o casetă de căutare CSS3 cool și utilizabilă

Creați o casetă de căutare CSS3 cool și utilizabilă folosind atributul substituent HTML5 cu acest tutorial. Pentru browserele care nu acceptă acel atribut HTML5, se creează o rezervă folosind detectarea caracteristicilor Modernizr. Exemplu de cod este furnizat în fiecare pas.

Îmbunătățirea progresivă a formularelor HTML5

Un tutorial CSS-Tricks despre cum să vă îmbunătățiți progresiv formularele HTML5. Adică, acest tutorial vă învață cum să creați alternative pentru funcțiile HTML5 pe care anumite browsere ar putea să nu le accepte. În loc să nu afișeze formularul așa cum ați vrut, o alternativă Javascript va apărea în locul său.

Caseta de instrumente pentru formulare HTML5 și CSS3: ce lipsește?

Pentru tine: ce lipsește din această cutie de instrumente pentru formulare HTML5 și CSS3? Ce alte referințe, resurse și/sau tutoriale considerați că sunt esențiale? Simțiți-vă liber să vă împărtășiți favoritele în secțiunea de comentarii de mai jos.