Tipuri de intrare HTML5: Unde sunt acestea acum?
Publicat: 2022-03-10 Una dintre caracteristicile principale ale HTML5 pentru mulți designeri și dezvoltatori a fost adăugarea unui număr de noi tipuri de introducere a formularelor care ar putea fi utilizate. De ani de zile, ne-am limitat să folosim intrări de text pe o singură linie ( type="text" ) și să folosim JavaScript și instrucțiuni pentru utilizator pentru a încerca să captăm cu exactitate date valide de diferite tipuri prin acel câmp nesofisticat.
HTML5 a adus cu sine noi valori ale atributului type care ne-au permis să fim mult mai specifici cu privire la tipurile de date pe care trebuia să le captăm prin câmp, promisiunea fiind că browserul va oferi apoi interfața și validarea necesare pentru a constrânge utilizatorul. pentru a completa domeniul cu acuratețe.
De la URL-uri la e-mailuri și de la câmpurile de căutare la date, speranța era că, în loc să fie nevoie să scriem JavaScript greoaie pentru a încerca să validăm acele câmpuri, să lăsăm browserului să facă această muncă grea pentru noi. În plus, adăugând ceea ce știe despre contextul utilizatorului (tip de dispozitiv, tip de interacțiune, fusuri orare și așa mai departe), browserul ar putea face o treabă mult mai bună de a adapta interfața pentru a satisface nevoile utilizatorului pe care le-am avut vreodată. ar putea ca autori de pagini.
Lectură recomandată : UX și HTML5: Să ajutăm utilizatorii să completeze formularul dvs. mobil
A avea articole noi într-o specificație este un lucru, dar nu înseamnă prea mult decât dacă browserele pe care publicul nostru le folosește acceptă aceste funcții. Aceste noi valori ale atributului type au avut marele avantaj de a reveni la type="text" dacă browserul nu avea suport, dar acest lucru poate să fi venit și cu prețul eliminării imperativului producătorilor de browsere atunci când a fost vorba de implementarea noilor tipuri în produsele lor.
Este începutul anului 2019, iar HTML5 este versiunea actuală a HTML acum de mai bine de patru ani. Care dintre aceste noi tipuri au fost implementate, pe care le putem folosi și ar trebui să le evităm?
- Câmpuri de căutare
- Câmpuri pentru numărul de telefon
- Câmpuri URL
- Câmpuri de e-mail
- Câmpuri numerice
- Câmpuri de interval
- Câmpuri de culoare
- Câmpurile de dată
1. Câmpuri de căutare
Intrarea type="search" este destinată a fi utilizată pentru câmpurile de căutare. Din punct de vedere funcțional, acestea sunt foarte asemănătoare cu câmpurile de text de bază, dar având un tip dedicat permite browserului să aplice stiluri diferite. Acest lucru este util în special dacă sistemul de operare al utilizatorului are un stil stabilit pentru câmpurile de căutare, deoarece acest lucru permite browserului să stileze câmpurile de căutare de pe paginile web pentru a se potrivi.
Specificația afirmă că diferența dintre search și text este pur stilistică, așa că poate fi cel mai bine să evitați acest lucru dacă intenționați oricum să modificați câmpul cu CSS. Nu pare să existe niciun avantaj semantic în utilizarea sa.
Recomandare
Utilizați type="search" dacă intenționați să lăsați stilul câmpului de căutare în sarcina browserului.
2. Câmpuri pentru numărul de telefon
Intrarea type="tel" este utilizată pentru introducerea numerelor de telefon. Acestea sunt ca numele de utilizator unice folosite de Whatsapp. Dacă nu ești sigur, întreabă-ți bunicii.
La nivel internațional, numerele de telefon au o mulțime de formate diferite, atât din motive tehnice, cât și din motive de localizare. Din acest motiv, intrarea tel nu încearcă să valideze formatul unui număr de telefon. Puteți utiliza instrumentele de validare asociate, cum ar fi atributul pattern de pe etichetă sau metoda JavaScript setCustomValidity() pentru a impune un format, dacă este necesar.
Pe browserele desktop, utilizarea câmpurilor telefonice pare să aibă un impact redus. Pe dispozitivele cu tastaturi virtuale, totuși, acestea pot fi cu adevărat utile. De exemplu, pe iOS, focalizarea introducerii pe un câmp de telefon afișează o tastatură numerică pregătită pentru introducerea unui număr. În plus, mecanismele de completare automată ale dispozitivului se activează și sugerează numere de telefon care pot fi completate automat cu o singură atingere.
Recomandare
Utilizați type="tel" pentru orice câmpuri ale numărului de telefon. Este foarte util acolo unde este implementat și nu are niciun cost atunci când nu este.
3. Câmpuri URL
Câmpul type="url" poate fi folosit pentru captarea adreselor URL. Puteți utiliza acest lucru atunci când cereți unui utilizator să introducă adresa site-ului său web pentru un director de afaceri, de exemplu. Lucrul curios despre câmpul URL este că necesită numai adrese URL complete, absolute . Nu există nicio opțiune pentru a putea captura doar un nume de domeniu sau doar o cale, de exemplu. Acest lucru îi limitează utilitatea în unele privințe, deoarece îmi imaginez că dezvoltatorii de aplicații web și CMS ar fi găsit o mulțime de utilizări pentru un domeniu care acceptă și validează căi relative.
Deși aceasta ar fi o adresă URL absolută validă:
https://twitter.com/drewmAmbele nu ar trece validarea câmpului:
smashingmagazine.com /2019/01/css-multiple-column-layout-multicol/ Se simte ca o oportunitate ratată că diferite părți ale unei adrese URL nu pot fi specificate, dar asta este ceea ce avem. Suportul pentru browser este destul de grozav, cu dispozitive cu tastatură virtuală care oferă o anumită personalizare pentru introducerea adreselor URL. iOS își personalizează tastatura cu . , / și un buton de completare automată pentru TLD-uri obișnuite, cum ar fi .com și pentru localitatea mea, .co.uk . Acesta este un exemplu bun al browserului care poate oferi mai multe alegeri inteligente decât putem noi ca dezvoltatori web.
Recomandare
Utilizați type="url" ori de câte ori trebuie să colectați o adresă URL completă, absolută. Suportul pentru browser este excelent, dar rețineți că nu este bun pentru componentele URL individuale.
4. Câmpuri de e-mail
Posibil, una dintre cele mai frecvent utilizate opțiuni mai noi este type="email" pentru adresele de e-mail. La fel cum am văzut cu numerele de telefon și adresele URL, dispozitivele cu tastaturi virtuale personalizează tastele (pentru a include lucruri precum butoanele @ ) și permit completarea automată din baza lor de date de contacte.
Browserele desktop folosesc și acest lucru, Safari pe macOS permițând și completarea automată pentru câmpurile de e-mail, pe baza datelor din aplicația Contacte de sistem.
Adresele de e-mail par adesea să urmeze un format foarte simplu, dar variațiile le fac de fapt destul de complexe. O încercare naivă de a valida adresele de e-mail poate duce la marcarea unei adrese perfect bune ca nevalidă, așa că este grozav să te poți baza pe metodele de validare mai sofisticate și mai bine testate ale browserului pentru a verifica formatul.
În mod util, atributul multiple poate fi adăugat la câmpurile de e-mail pentru a colecta o listă de adrese de e-mail. În acest caz, fiecare adresă de e-mail din listă este validată individual.
<input type="email" multiple> Recomandare
Folosiți type="email" pentru câmpurile adresei de e-mail ori de câte ori este posibil.
5. Câmpuri numerice
Câmpul type="number" este conceput pentru valori numerice și are câteva atribute foarte utile împreună cu el sub forma min , max și step . O valoare validă pentru un câmp numeric trebuie să fie un număr în virgulă mobilă între orice valoare minimă și maximă specificată de atributele min și max .
Dacă step este setat, atunci o valoare validă este divizibilă cu valoarea pasului.
<input type="number" min="10" max="30" step="5"> Intrarea validă pentru câmpul de mai sus ar fi 10 , 15 , 20 , 25 și 30 , orice altă valoare fiind respinsă.
Suportul pentru browser este larg, din nou, tastaturile virtuale utilizând adesea implicit un mod de introducere numerică pentru introducerea valorilor.
Unele browsere desktop (inclusiv Chrome, Firefox și Safari, dar nu Edge) adaugă butoane de comutare pentru a deplasa valorile în sus și în jos cu valoarea step , sau dacă nu este specificat niciun pas, pasul implicit pare să fie 1 în fiecare implementare.
Recomandare
Utilizați type="number" pentru orice numere cu virgulă mobilă, deoarece este acceptat pe scară largă și poate ajuta la prevenirea introducerii accidentale.
6. Câmpuri de interval
Mai puțin evident în utilizare că unele dintre celelalte tipuri, type="range" poate fi considerată ca fiind o alternativă pentru type="number" în care utilizatorului nu îi pasă de valoarea exactă.
Câmpurile de interval preiau și vor folosi adesea aceleași atribute min , max și step ca și câmpurile numerice, iar browserele afișează aproape universal acest lucru ca un glisor grafic. Utilizatorul nu poate vedea neapărat valoarea exactă pe care o setează.
Câmpurile de interval ar putea fi utile pentru astfel de întrebări din formulare precum „Cât de probabil este să recomandați acest lucru unui prieten?” cu „Probabil” la un capăt și „Improbabil” la celălalt. Utilizatorul poate glisa cursorul oriunde consideră că reprezintă opinia sa și sub capota care este trimisă ca valoare numerică pe care o puteți stoca și procesa.
Suportul pentru browser este bun, deși aspectul variază între implementări.
Recomandare
Utilizările pentru type="range" ar putea fi puțin de nișă, dar suportul este bun și glisorul oferă o metodă de introducere ușor de utilizat, acolo unde este cazul.
7. Câmpuri de culoare
Câmpul type="color" este proiectat pentru captarea culorilor RGB în notație hexazecimală, cum ar fi #aabbcc . Specificația HTML numește acest lucru „control al culorii”, cu intenția ca browserul să ofere un selector de culori ușor de utilizat.
Unele browsere oferă acest lucru, în special Chrome și Firefox, ambele oferind acces la selectorul de culori de sistem printr-un mic eșantion de culoare.
Nici IE, nici Safari nu oferă nicio asistență aici, lăsând utilizatorul să-și dea seama că ar trebui să introducă singur un număr hexadecimal de 7 cifre.
Câmpurile de culoare s-ar putea folosi în tematică pentru personalizare și în utilizarea CMS, dar dacă utilizatorii nu sunt suficient de tehnici pentru a face față codurilor de culoare hexadecimale, poate fi mai bine să nu vă bazați pe browserul care oferă o interfață de utilizare frumoasă pentru acestea.
Recomandare
Dacă nu știți că utilizatorii dvs. vor fi bucuroși să recurgă la introducerea codurilor de culoare hexazecimale, cel mai bine este să nu vă bazați pe browsere care acceptă type="color" .
8. Câmpuri de dată
HTML5 a introdus o serie de valori de type diferite pentru a crea intrări pentru date și ore. Acestea au inclus date , time , datetime-local , month si week .
La prima vedere, acestea par a fi trimise de cer, deoarece colectarea datelor într-un formular este o experiență dificilă atât pentru dezvoltator, cât și pentru utilizator și sunt necesare destul de frecvent.
Promisiunea aici este că noile tipuri de câmpuri permit browserului să ofere o interfață de utilizator standardizată, accesibilă și consecventă pentru a captura datele și orele de la utilizator cu ușurință. Acest lucru este foarte important, deoarece formatele de dată și oră variază în întreaga lume, în funcție de limbă și localitate, și astfel, o interfață prietenoasă a browserului care traduce o selecție de dată ușor de utilizat într-un format tehnic clar de dată sună într-adevăr ca soluția ideală. .
Ca atare, intrarea validă pentru câmpul type="date" este o valoare neechivocă an-lună-zi , cum ar fi 2019-01-16 . Dezvoltatorilor le plac aceștia, deoarece mapează destul de mult la formatul de dată ISO 8601, care este utilizat în majoritatea contextelor tehnice. Din păcate, puține ființe umane obișnuite folosesc acest format de dată și probabil că nu îl vor ajunge atunci când li se cere să furnizeze o dată într-un singur câmp de text gol.
Și, desigur, un singur câmp de text gol este ceea ce îi este prezentat utilizatorului dacă browserul său nu oferă o interfață de utilizator pentru alegerea datelor. În aceste cazuri, atunci devine foarte dificil pentru un utilizator să introducă o valoare de dată validă, cu excepția cazului în care se întâmplă să fie familiarizat cu formatul necesar sau dacă intrarea este adnotată cu instrucțiuni clare.
Cu toate acestea, multe browsere oferă o interfață de utilizator bună pentru alegerea datelor. Firefox are un selector de date cu adevărat excelent, iar Chrome și Edge au, de asemenea, interfețe destul de bune. Cu toate acestea, nu există suport în vechiul IE sărac și nici în Safari, ceea ce ar putea fi o problemă.
Recomandare
Deși este convenabil acolo unde funcționează, modul de eroare al type="date" și al tipurilor asociate de dată și oră este foarte slab. Acest lucru îl face o alegere riscantă care ar putea lăsa utilizatorii să se lupte să îndeplinească criteriile de validare.
Concluzie
S-au schimbat multe în peisajul browserului în cei patru ani de când specificația HTML5 a devenit o recomandare. Suportul pentru noile tipuri de intrare este destul de puternic – în special în dispozitivele mobile cu tastaturi virtuale, cum ar fi tabletele și telefoanele. În cele mai multe cazuri, aceste intrări sunt sigure de utilizat și oferă un util suplimentar utilizatorului.
Există câteva excepții notabile, dintre care cea mai gravă fiind câmpurile de dată și oră, care nu numai că nu au utilitate, dar au și mai mult suport pentru browsere neregulate. Când suportul nu este disponibil, modul de rezervă al acestor câmpuri este slab. În aceste cazuri, cel mai bine ar fi să rămâneți la soluții bazate pe JavaScript pentru îmbunătățirea progresivă a câmpurilor de intrare type="text" de bază.
Dacă doriți să citiți mai multe, aș recomanda cu atenție documentele web MDN despre aceste tipuri de câmpuri și, ca întotdeauna, specificația W3C.