Pagina de conectare Tutorial HTML5 cu formular HTML5

HTML5 aduce multe caracteristici și îmbunătățiri formulare web, există noi atribute și tipuri de intrări introduse în principal pentru a face viața dezvoltatorilor web mai ușoară și pentru a oferi o experiență mai bună utilizatorilor web.

Deci, în acest post vom crea o pagină de conectare folosind Formulare HTML5 pentru a vedea cum funcționează noile funcții adăugate.

• Demo
• Descărcați sursa

Intrare HTML5

Să aruncăm o privire la următorul marcaj.

 
 
 
 
E-mail 
 
Parola 
 
 
 
 
 
 

Dacă ați lucrat cu formulare HTML înainte, acest lucru va arăta familiar. Dar, veți observa și diferențe acolo. Intrările au înlocuitor și necesar atribute, care sunt atribute noi în HTML5.

Substitut

înlocuitor atributul ne permite să dăm textul inițial în intrare care va dispărea atunci când acesta este într-o concentra stat sau completat. Anterior, am obișnuit să o facem cu JavaScript, dar acum devine mult mai ușor cu acest atribut nou.

Atributul necesar

necesar atributul va seta câmpul să fie obligatoriu și, prin urmare, nu trebuie lăsat gol înainte ca formularul să fie trimis, astfel că atunci când utilizatorul nu a completat câmpul, apare următoarea eroare.

Selectorul nou este introdus și în CSS3, :necesar pentru a direcționa câmpurile cu necesar atribut. Iată un exemplu;

 intrare: obligatorie border: 1px solid red;  

Tipul de intrare pentru e-mail

Primul tip de intrare este e-mail care este de fapt un nou tip de câmp adăugat și în HTML5. e-mail tip va oferi validarea adresei de e-mail de bază în câmp. Când utilizatorul nu umple câmpul cu o adresă de e-mail, browserul va afișa următoarea notificare;

Utilizarea tipurilor de intrări de e-mail poate oferi, de asemenea, o experiență mai bună pentru utilizatorii de telefonie mobilă, cum ar fi utilizatorii iPhone și Android, în cazul în care va afișa email optimizat pe ecran cu un dedicat “@” pentru a ajuta la introducerea mai rapidă a adresei de e-mail.

Coborâșurile

Noile caracteristici ale formularului oferite în HTML5 sunt puternice și ușor de implementat, dar ele sunt încă lipsite de anumite domenii. De exemplu;

înlocuitor atribut, este acceptat numai în browserele moderne - Firefox 3.7+, Safari 4+, Chrome 4+ și Opera 11+. Deci, dacă aveți nevoie de aceasta pentru a lucra în browsere nesuportate, puteți utiliza acest polyfills împreună cu Modernizr.

Același lucru este valabil și pentru necesar atribut. Notificarea de eroare nu poate fi personalizată, eroarea va rămâne “Te rog sa completezi acest spatiu” Decat “Vă rugăm să completați numele dvs.”, acest suport de atribute este, de asemenea, limitat la cele mai recente browsere.

Prin urmare, utilizarea JavaScript pentru a valida câmpul obligatoriu este (până acum) o opțiune mai bună.

 funcția validateForm () var x = document.forms ["login"] ["nume de utilizator"]. dacă (x == null || x == "") alert ("Vă rugăm să completați numele de utilizator"); return false;  

Modelarea formularelor

Bine, acum să decorez formularul de autentificare cu CSS. Mai întâi vom da fundalului un model de lemn în html etichetă.

 html (fundal: url ('wood_pattern.png'); font-size: 10pt;  

Apoi, trebuie să eliminăm cârligul și marginea implicită în ul etichetă care înfășoară întregul intrări și plutește Li la stânga, astfel încât intrările vor fi afișate orizontal, unul lângă celălalt.

 .adresa de autentificare ul padding: 0; marja: 0;  .loginform li afișare: inline; plutește la stânga;  

Din moment ce plutim Li, părinții se vor prăbuși, așa că trebuie să ștergem lucrurile în jurul părintelui cu hack-ul clar.

 etichetă display: bloc; culoare: # 999;  .cf: înainte, .cf: după content: ""; afișare: tabel;  .cf: după clar: ambele;  .cf * zoom: 1; : focalizare contur: 0;  

În CSS3 avem selectorul de negație. Deci, o vom folosi pentru a viza intrări altele decât a depune tip, care în acest caz va viza introducerea prin e-mail și parolă;

 .intrări de intrare: nu ([type = submit]) padding: 5px; marginea-dreapta: 10px; margine: 1px solid rgba (0, 0, 0, 0.3); raza de graniță: 3px; box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);  

În cele din urmă, vom oferi o decorare puțin stil pentru A depune , după cum urmează.

 .intrarea în formă de intrare [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); fundal: # 64c8ef; / * Browseruri vechi * / background: -moz-linear-gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + / fundal: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # 64c8ef), oprire color (100%, # 00a2e2)); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / fundal: -ms-gradient linear (top, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / fundal: gradient liniar (spre fund, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / culoare: #fff; padding: 5px 15px; margin-dreapta: 0; margin-top: 15px; raza de graniță: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0.3);  

Asta este, acum puteți încerca formularul de autentificare de la următoarele link-uri.

• Demo
• Descărcați sursa

Cuvintele finale

În acest tutorial am analizat câteva caracteristici noi în formularele HTML5:înlocuitor, necesar și e-mail tipuri de intrări pentru a crea o pagină de autentificare simplă. De asemenea, am trecut prin dezavantajele atributelor, astfel încât să putem decide o abordare mai bună care să fie aplicată.

În următoarea postare vom examina alte noi caracteristici ale formularului HTML5, deci stați la dispoziție.