Adu-ți formularele la zi cu validarea CSS3 și HTML5

Să ne uităm la modul de a crea o formă funcțională care să valideze datele utilizatorilor, pe partea clientului. Cu aceasta, vom acoperi frumosul folosind CSS, inclusiv unele CSS3!

Înainte de a începe, vă recomandăm să utilizați unul dintre temele HTML5 sau CSS pentru următorul proiect - adică dacă aveți nevoie de o soluție rapidă și profesională. Sau puteți obține ajutor de la un expert pe Envato Studio.

În caz contrar, este timpul să începeți acest tutorial pas cu pas.

Pasul 1: Funcționalitatea conceptualizării

Mai intai vrem sa conceptualizam ce forma noastra va arata si cum va functiona. Pentru acest exemplu, să creăm un simplu formular de contact care solicită utilizatorilor următoarele informații:

• Nume
• E-mail
• website
• Mesaj

Vrem să ne asigurăm că utilizatorul introduce corect informațiile. Pentru a realiza acest lucru, vom folosi noile tehnici de validare din partea clientului HTML5. Ce se întâmplă cu utilizatorii care nu au capabilități HTML5? Puteți utiliza pur și simplu validarea de la server, dar aceasta va depăși domeniul de aplicare al acestui articol.

Pasul 2: Formularul de concepție

Să vedem ce vrea să arate forma noastră prin crearea unui stare brută să batjocorească.

După cum puteți vedea, următoarele elemente formează forma noastră:

• Titlul formularului Câmp obligatoriu de notificare
• Forme de etichete
• Intrări de formă Text de înlocuire
• Formularele pentru câmpuri
• Buton de trimitere

Acum, că am specificat ce elemente formează formularul nostru, putem crea marcajul HTML.

Pasul 3: Codul de inițiere HTML

Să creăm marcajele HTML de bază din conceptul de formă pe care l-am creat.

Până în acest moment, fișierul HTML va apărea în continuare în browser. Acesta este doar un cod de pornire pentru o pagină HTML5.

Pasul 4: Formular HTML

Să creați formularul HTML (vom lăsa acum pentru moment o metodă de acțiune, deoarece validarea de la server nu va fi acoperită în acest tutorial):

Pasul 5: Formulare HTML

Pentru a păstra organizarea și structurarea conținutului formularului, vom înfășura elemente de formular (eticheta, intrare, etc) într-o listă. Deci, să începem prin crearea antetului de formular și a primului element de intrare:

 
 
Contacteaza-ne
 * Reprezintă câmp obligatoriu 
 
 Nume:  
 

Sfaturi pentru formular

Așa cum se vede în mockup-ul nostru, vom avea sugestii de formatare pentru câmpurile "email" și "website". Deci, vom adăuga sugestiile noastre sub intrare acolo unde este necesar, și le dau o clasă, astfel încât să le putem modela mai târziu.

 E-mail:  Formatul corect "[email protected]" 

Restul Intrare element

Să mergem mai departe și să ne creăm elementele de formă rămase, amintindu-le să înfășurăm fiecare secțiune într-un element de listă.

 Site-ul:  Formatul corect "http://someaddress.com" 
 
 Mesaj:  </li> <li> <button type="submit">Trimiteți formularul</button> </li></pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_4.png">  <h2>Pasul 6: Adăugarea atributului Placeholder </h2> <p>Una dintre primele îmbunătățiri pe care HTML5 le aduce formularelor web (una cu care probabil sunteți deja familiarizată) este abilitatea de a seta textul cu substituent. Textul de înlocuire este afișat când câmpul de introducere este gol sau nu este focalizat.</p> <p>Să adăugăm atributul substituentului nostru <code>intrare</code> elemente. Acest lucru va ajuta utilizatorul să înțeleagă ce trebuie să intre în fiecare domeniu.</p> <pre><input type="text" name="name" placeholder="John Doe" /> <input type="text" name="email" placeholder="john_doe@example.com" /> <input type="text" name="website" placeholder="http://johndoe.com/" required/></pre> <h3>Sfat rapid: Stilul tău <code>înlocuitor</code> Text</h3> <p>Iată un sfat rapid, dacă doriți să stylizați textul cu substituent, există câteva prefixe de browser care să vă ajute:</p> <pre>: -moz-placeholder culoare: albastru;  :: - webkit-input-placeholder culoare: albastru; </pre> <p>Suportul atributului placeholder este destul de bine stabilit în browserele moderne (cu excepția IE9, îmi pare rău). Dacă într-adevăr aveți nevoie să îl aveți acceptat în toate browserele, există câteva soluții de javascript pe care le puteți examina.</p> <h2>Pasul 7: CSS de bază</h2> <p>Să adăugăm câteva CSS de bază pentru a da structurii noastre forma. Te voi trece prin reguli:</p> <h3>Elimina <code>: focus</code> Stil</h3> <p>Webkit adaugă automat un anumit stil pentru elementele de intrare atunci când sunt focalizate. Deoarece vom adăuga propriile noastre stiluri, dorim să ignorăm aceste valori prestabilite:</p> <pre>*: focus outline: none;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_5.png">  <h3>Tipuri tipografice</h3> <p>Să adăugăm câteva stiluri tipografice elementelor noastre de formă:</p> <pre>"Lucida Sans Unicode", sans-serif; .contact_form h2, .contact_form etichetă font-family: Georgia, Times, Times New Roman, serif; .form_hint, .required_notification font-size: 11px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_6.png">  <h3>Listeaza stiluri</h3> <p>Să formăm elementele din listă pentru a da structurii noastre o structură:</p> <pre>.contact_form ul lățime: 750px; list-style-type: none; list-style-position: în afara; margin: 0px; padding: 0px;  .contact_form li umplutură: 12px; frontieră-fund: 1px solid #eee; Poziția: relativă; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_7.png">  <p>De asemenea, să adăugăm o ușoară margine la secțiunile de sus și de jos ale formularului. Putem realiza acest lucru folosind <code>:primul copil</code> și <code>:ultimul copil</code> selectoare. Acestea selectează, așa cum sugerează și numele, primul și ultimul element din <code><ul></code> listă.</p> <p>Aceasta adaugă o secțiune vizuală utilă formularului nostru. Rețineți că aceste selectori CSS nu sunt acceptate în browserele mai vechi. Deoarece acest lucru nu este vital pentru funcționalitatea cheie, ne recompensăm pe cei care utilizează browserele actuale.</p> <pre>.contact_form li: prim-copil, .contact_form li: ultimul copil border-bottom: 1px solid # 777; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_8.png">  <h3>Formularul Antet</h3> <p>Să stilizăm secțiunea antet a formularului nostru. Aceasta include eticheta de titlu și notificarea care informează utilizatorii că asteriscul (*) indică câmpurile obligatorii.</p> <pre>.contact_form h2 margine: 0; afișare: inline;  .required_notification culoare: # d45252; marja: 5px 0 0 0; display: inline; float: right; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_9.png">  <h3>Elemente de intrare a formularului</h3> <p>Să formăm toate elementele noastre de bază, cele utilizate pentru colectarea informațiilor despre utilizatori.</p> <pre>.eticheta contact_form width: 150px; margin-top: 3px; display: inline-block; plutește la stânga; padding: 3px;  input .contact_form height: 20px; lățime: 220px; padding: 5px 8px;  .contact_form textarea padding: 8px; lățime: 300px; .contact_form buton margin-left: 156px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_10.png">  <p>Acum, să adăugăm câteva stiluri CSS suplimentare vizuale. Unele dintre acestea sunt stiluri CSS3 care recompensează utilizatorii care utilizează browsere moderne.</p> <pre>.intrarea contact_form, .contact_form textarea border: 1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius: 2px;  .contact_form introducere: focus, .contact_form textarea: focus background: #fff; frontieră: 1px solid # 555; box-shadow: 0 0 3px # aaa;  / * Stilul butonului * / button.submit background-color: # 68b12f; fundal: -webkit-gradient (liniar, stânga sus, stânga jos, de la (# 68b12f), la (# 50911e)); fundal: -webkit-gradient linear (top, # 68b12f, # 50911e); fundal: -moz-linear-gradient (sus, # 68b12f, # 50911e); fundal: -ms-gradient linear (sus, # 68b12f, # 50911e); fundal: -o-gradient linear (top, # 68b12f, # 50911e); fundal: gradient linear (top, # 68b12f, # 50911e); frontieră: 1px solid # 509111; frontieră de fund: 1px solid # 5b992b; raza de graniță: 3 pixeli; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-raza de graniță: 3px; -o-border-radius: 3px; box-shadow: inset 0 1px 0 0 # 9fd574; -webkit-box-shadow: 0 1px 0 0 # 9fd574 inset; -moz-box-shadow: 0 1px 0 0 # 9fd574 inset; -ms-box-shadow: 0 1px 0 0 # 9fd574 inset; -o-box-shadow: 0 1px 0 0 # 9fd574 inset; culoare albă; font-weight: bold; padding: 6px 20px; text-align: centru; text-umbra: 0 -1px 0 # 396715;  button.submit: treceți opacity: .85; cursor: pointer;  buton.submit: activ border: 1px solid # 20911e; box-shadow: 0 0 10px 5px # 356b0b inset; -webkit-box-shadow: 0 0 10px 5px # 356b0b inset; -moz-box-shadow: 0 0 10px 5px # 356b0b inset; -ms-box-shadow: 0 0 10px 5px # 356b0b inset; -o-box-shadow: 0 0 10px 5px # 356b0b inset; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_11.png">  <h2>Pasul 8: Adăugați o anumită interacțiune cu CSS3</h2> <p>Să adăugăm un pic de interactivitate. Vom face ca câmpul selectat în prezent să se extindă prin adăugarea unor elemente de umplutură.</p> <pre>.intrarea contact_form: focus, .contact_form textarea: focus / * adăugați la stilul deja existent * / padding-right: 70px; </pre> <p>Acum, pentru browserele care o susțin, să facem extinderea câmpului o tranziție lină folosind CSS3.</p> <pre>.input_contact_form, .contact_form textarea / * adăugați-l la stilul deja existent * / -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-tranziție: padding .25s; tranziție: padding .25s; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_12.png">  <h2>Pasul 9: The <code>necesar</code> Atribuiți în HTML5</h2> <p>Acum este timpul pentru ceea ce așteptam cu toții: instrumentele de manipulare a formei HTML5.</p> <p>Adăugarea <code>necesar</code> atributul la orice element de intrare / textarea va indica browser-ului că este necesară o valoare înainte ca formularul să poată fi trimis. Astfel, un formular nu poate fi depus dacă a <code>necesar</code> câmpul nu a fost completat.</p> <p>Deci, hai să mergem mai departe și să adăugăm <code>necesar</code> atribuiți tuturor elementelor noastre de formă (pentru că vrem să fie completate cu toții).</p> <pre><input type="text" name="name" required /> <input type="text" name="email" required /> <input type="text" name="website" required /> <textarea name="message" cols="40" rows="6" required >

Pasul 10: Styling necesar Câmpuri

Veți observa probabil că, din punct de vedere vizual, nimic nu sa întâmplat adăugând necesar atribut. Vom crea un câmp obligatoriu folosind CSS. Pentru acest exemplu, vom adăuga un asterisc roșu ca imagine de fundal în fiecare câmp obligatoriu. Pentru a realiza acest lucru, vom dori să adăugăm mai întâi câteva elemente de umplutură pe partea dreaptă a intrării noastre, unde imaginea de fundal va fi (aceasta va împiedica suprapunerea textului dacă intrarea câmpului este un șir lung):

.contact_formă de intrare, .contact_form textarea padding-right: 30px; 

Acum vom folosi pseudo selectorul CSS :necesar pentru a direcționa toate elementele de formular cu un atribut obligatoriu. Am făcut o simplă pictogramă de asterisc roșu de 16x16 pixeli în Photoshop, care va servi drept indicator vizual al unui câmp obligatoriu.

intrare: obligatorie, textarea: necesară background: #fff url (images / red_asterisk.png) no-repeat 98% center; 

Ce se întâmplă după supunere?

În acest moment, diferite browsere vor face diferite lucruri atunci când este trimis un formular care utilizează elemente HTML5. Când se trimite formularul, majoritatea browserelor vor împiedica trimiterea formularului și vor afișa un "indiciu" utilizatorului, marcând primul câmp care este necesar și nu are nicio valoare. Stilul vizual și suportul pentru aceste "câmpuri cu bule" sunt destul de largi. Sperăm că aceste comportamente vor deveni standardizate în viitor.

Puteți vedea suportul actual al browserului pentru necesar atribut la quirksmode.

Sfat rapid:

De fapt, puteți să stilizați mesajul cu bule într-o oarecare măsură în webkit, utilizând următoarele:

:: - webkit-validation-bubble-message padding: 1em; 

Pasul 11: Înțelegerea noului HTML5 tip Atribute și validare pe partea clientului

Validarea HTML5 funcționează în conformitate cu tip atribut setat în câmpurile formularului. De ani de zile, HTML a suportat doar o mână de atribute de tip, cum ar fi type = "text" dar cu HTML5 există mai mult de o duzină de noi tipuri de intrări, inclusiv e-mail și URL-ul pe care o vom folosi în forma noastră.

Prin combinarea contribuției noastre tip atributele cu noul necesar atributul, browserul poate valida acum datele clientului din formular. Dacă browserul unui utilizator nu acceptă noul browser tip atribute, cum ar fi type = "email", acesta va fi pur și simplu implicit la type = "text". Acest lucru este de fapt destul de uimitor. În esență, aveți compatibilitate înapoi în toate browserele de pe pământ!

Deci, dacă browserul suportă de fapt noul tip atribute? Pentru browserele desktop nu există nicio diferență vizuală (dacă nu este specificată de regulile personalizate CSS). A type = "text" câmpul arată la fel ca a type = "email" camp. Cu toate acestea, pentru browserele mobile, există o diferență atunci când vine vorba de interfața cu utilizatorul.

Un exemplu: iPhone

Apple iPhone detectează tipurile de formulare și modifică dinamic tastatura de pe ecran prin furnizarea de caractere contextuale. De exemplu, toate adresele de e-mail necesită următoarele simboluri: "@" și "." Deci, iPhone furnizează acele caractere atunci când tipul de intrare este specificat pentru e-mail.

Pasul 12: Schimbarea tip atribute

Avem deja câmpurile formularului setate la valorile implicite type = "text". Dar acum vrem să schimbăm atributul type de pe câmpurile noastre de e-mail și site-uri pe tipul HTML5 corespunzător.

Pasul 13: Validarea HTML5

După cum sa menționat anterior, validarea HTML5 se bazează pe dvs. tip și este implicit activat. Nu există un marcaj specific necesar pentru a activa validarea formularului. Dacă doriți să îl dezactivați, puteți utiliza funcția novalidate atributul de genul:

 <-- do not validate this form -->  

Câmpul de nume

Să ne uităm la primul câmp care îi cere utilizatorului numele său. Așa cum am descris eariler, am adăugat type = "text" atribut și necesar atribut. Aceasta informează browserul web că acest câmp este obligatoriu și ar trebui să valideze câmpul ca text simplu. Atât timp cât utilizatorul introduce cel puțin un caracter în acest câmp, va valida.

Acum vom crea propriile noastre CSS-uri pentru a introduce intrări de câmp care sunt considerate valide și nevalide de către browser. Dacă vă aduceți aminte, am folosit :necesar în CSS pentru a modela toate elementele de intrare cu un atribut necesar. Acum, putem modela campurile noastre obligatorii care sunt valide sau nevalide prin adăugare :valabil sau :invalid la regulile noastre CSS.

Mai întâi, să zicem câmpurile de stil care sunt nevalide. Pentru acest exemplu, dorim doar ca stilul să fie nevalid când este în focalizare. Vom adăuga o margine roșie, o umbră roșie și o pictogramă roșie creată în Photoshop pentru a indica câmpul nevalid.

.contact_formare_integrare: focus: invalid, .contact_form textarea: focus: invalid / * atunci când un câmp este considerat invalid de browser * / background: #fff url (images / invalid.png) no-repeat 98% center; box-shadow: 0 0 5px # d45252; culoare frontală: # b03535

Acum, să creăm regulile care indică faptul că câmpul este valabil. Vom adăuga o pictogramă de margine verde, umbra verde și pictograma de lăcomie făcută în Photoshop. Aceasta va fi aplicată tuturor câmpurilor valide, indiferent dacă acestea sunt sau nu focalizate.

.contact_formare_de_informații_de_confundare: obligatorie: validă, .contact_form textarea: obligatorie: valid / * atunci când un câmp este considerat valabil de către browser * / background: #fff url (images / valid.png) no-repeat 98% center; box-shadow: 0 0 5px # 5cd053; culoarea frontală: # 28921f; 

Acum când vă concentrați pe un câmp de formular, este afișat stilul roșu invalid. De îndată ce un câmp unic a fost introdus în câmp, acesta este validat și stilurile verzi CSS sunt indicate pentru a indica acest fapt.

Câmpurile de e-mail și URL

Stilurile noastre CSS și regulile de validare sunt deja aplicate câmpului de email pentru că am setat tip și necesar atribute mai devreme.

Pasul 14: Introducerea HTML5 model Atribut

Utilizarea type = "email" atributul ca exemplu, se pare că majoritatea browserelor validează câmpul ca * @ * (orice caracter + simbolul "@" + orice caracter). Acest lucru este, evident, nu foarte limitat, dar împiedică utilizatorii să introducă spații sau valori care sunt în întregime greșite.

În exemplul type = "url" atribut, se pare că cerința minimă pentru majoritatea browserelor este orice caracter urmat de un colon. Deci, dacă ați introdus "h:" atunci câmpul va valida. Acest lucru nu este extrem de util, dar împiedică utilizatorii să introducă informații irelevante, cum ar fi adresa lor de e-mail sau adresa de domiciliu. Acum, puteți să vă ocupați mai bine cu valorile de intrare în validarea de pe server; totuși, vom vorbi despre cum să facem acest lucru în HTML5.

model Atribut

Atributul de model acceptă o expresie regulată javascript. Această expresie este folosită mai degrabă decât implicit în browser pentru a valida valoarea câmpului. Deci, HTML-ul nostru arată acum:

Acum câmpul nostru va accepta valori care încep cu "http: //" sau "https: //" și un caracter suplimentar. Aceste modele de expresie obișnuită pot fi confuze la început, dar odată ce veți avea timp să le învățați, formele voastre vor fi deschise într-o lume cu totul nouă.

Pasul 15: Indicații privind câmpul de formular (CSS)

Acum, să formalizăm sugestiile formularului care le spun utilizatorului formatul pe care ar trebui să îl folosească la introducerea informațiilor.

.form_hint background: # d45252; raza de graniță: 3px 3px 3px 3px; culoare albă; margin-left: 8px; padding: 1px 6px; z-index: 999; / * sugestii de ședere peste toate celelalte elemente * / poziție: absolută; / * permite formatarea corectă dacă indicația este de două linii * / display: none; 

Noi am stabilit display: none deoarece vom prezenta doar sugestiile când utilizatorul se concentrează pe câmpul de intrare. De asemenea, setăm sfaturile noastre de instrucțiuni în mod implicit la culoarea noastră nevalidă roșie, deoarece acestea sunt întotdeauna considerate nevalide până când informațiile corespunzătoare sunt introduse în.

Utilizarea ::inainte de Selector

Acum vrem să adăugăm un mic triunghi în cutiile noastre de sugestii care ajută direcția și ghidarea ochiului. Acest lucru se poate face folosind imagini, dar în cazul nostru o vom face folosind CSS pur.

Deoarece este doar un element de prezentare care nu este vital pentru funcționalitatea paginii, vom adăuga un triunghi mic care indică stânga folosind ::inainte de pseudo selector. Putem face acest lucru folosind una din formele geometrice unicode.

În mod normal, am folosi formatul HTML Unicode pentru a le afișa în HTML (după cum se arată în imaginea de mai sus). Totuși, pentru că vom folosi ::inainte de Selectorul CSS, trebuie să folosim unicodul triunghiului corespunzător atunci când folosim conţinut:"" regulă. Apoi folosim poziționarea pentru a ajunge acolo unde vrem.

.form_hint :: înainte de content: "\ 25C0"; / * triunghiul punctului stâng în unicode escapat * / color: # d45252; poziția: absolută; sus: 1px; stânga: -6px; 

Utilizarea + Selectorul adiacent

În cele din urmă, vom folosi selectorul CSS adiacent pentru a arăta și a ascunde sugestiile câmpului de formular. Selectorul adiacent (x + y) selectează elementul imediat precedat de elementul anterior. Deoarece indicațiile noastre despre câmp provin imediat după câmpurile de introducere în HTML, putem folosi acest selector pentru a afișa / ascunde sfaturile de instrument.

.intrarea contact_formă: focus + .form_hint display: inline; .contact_form introducere: necesară: valid + .form_hint background: # 28921f; / :: înainte de culoare: # 28921f; / * schimba forma indicatoare săgeată culoare atunci când este valabil * /

După cum puteți vedea din CSS, setăm și sugestiile formularului de a schimba culorile împreună cu marginea intrării atunci când un câmp este valid sau nevalid.

Pasul 16: Stați înapoi și admirați formularul HTML5 frumos

Continuați și aruncați o privire asupra produsului final!

Concluzie

După cum puteți vedea, noile caracteristici ale formularului HTML5 sunt destul de îngrijite! Totul este compatibil cu spatele, încorporând astfel aceste noi caracteristici în site-ul dvs. nu va sparge nimic.

Validarea HTML5 se apropie de înlocuirea validării pe partea clientului, ajutând utilizatorii să completeze corect formularele online. Cu toate acestea, validarea HTML5 nu înlocuiește validarea de la server. Pentru moment, este mai bine să utilizați ambele metode atunci când manipulați informațiile trimise de utilizator. Vă mulțumim pentru lectură!

Aruncati o privire prin template-urile HTML5 sau temele CSS pentru urmatorul proiect - daca aveti nevoie de o solutie profesionala, gata facuta.