Atribute globale HTML. Atributele globale Atribute formează HTML5
De la autor: Fără îndoială, interacționați în fiecare zi în rețea cel puțin o formă. Căutați conținut sau introduceți contul dvs. pe pagina Facebook - pe formularele de aplicații web este una dintre cele mai frecvente sarcini. Pentru designeri și dezvoltatori, crearea de forme se caracterizează printr-o anumită monotonie, în special scripturile de validare a datelor pentru ei. HTML5 reprezintă multe atribute noi, tipuri de intrare și alte elemente ale setului de instrumente Markup.
În acest articol, ne vom concentra pe studierea noilor atribute, iar în cele ce urmează vor lua în considerare tipurile de introducere a datelor.
Se va vedea că noi proprietăți vor facilita foarte mult viața noastră atunci când aveți impresii asupra utilizatorilor. Care este cel mai atractiv? Le puteți folosi acum. Vom începe cu o istorie foarte scurtă a formelor HTML5.
Acest articol - un extras din capitolul 6 din cărți începe învățarea HTML5 și CSS3: Evoluția rețelei (începând cu HTML5 și CSS3: Web evolved) Christopher Murphy, Olya Stadhilma, Richard Clark și Divia Noan (Christopher Murphy, Oli Studic, Richard Clark și Divya Manian) Publicat de Editura Apress.
Notă: Deoarece acest articol este un extras din carte, din momentul creării capturilor de ecran, browserul de atribute și tipurile de introducere a datelor se pot schimba. În plus, din momentul publicării, suportul browserului ar putea să se extindă, așa că în ceea ce privește problema stării sale actuale, vă rugăm să consultați legăturile date la final.
Istoria formularelor HTML5
Secțiunea Formulare din HTML5 a fost inițial o specificație numită Web Forms 2.0, care a adăugat noi tipuri de instrumente de control al formei. A început în Opera și editată de Opera Opera Ayan Hickson (Ian Hickson), a fost aprobată de W3C la începutul anului 2005. Lucrarea a fost inițial efectuată de W3C. Apoi a fost combinată cu specificațiile Web Applications 1.0 pentru a crea fundamentul specificației HTML5 a grupului de lucru al tehnologiei de aplicație HyperText Web (Whatwg).
Aplicarea principiilor de design HTML5
Una dintre cele mai bune caracteristici ale formularelor HTML5 este că puteți aplica imediat aproape toate tipurile noi de introducere a datelor și atributele. Ele nu necesită chipsuri suplimentare, hack-uri și alte patch-uri. Nu că acestea sunt toate "susținute", dar în browserele moderne care le susțin cu adevărat, sunt capabili să facă lucruri minunate - și frumos degradate în acele browsere care nu le înțeleg. Toate acestea se datorează principiilor de proiectare ale HTML5. În acest caz, ne vom referi în special la principiul degradării frumoase. În general, este ca un complicat să nu începeți imediat aplicarea acestor funcții. De fapt, va însemna că sunteți în fața planetei.
Atribute ale formularelor HTML5
În acest articol vom lua în considerare următoarele 14 atribute noi.
plasat.
Primul este atributul de substituenți, care ne permite să stabilim agregarea textului, care până de curând a fost făcută în HTML4 utilizând atributul valoric. Se poate aplica numai pentru descrieri scurte. Pentru mai mult, utilizați atributul de titlu. Diferența față de HTML4 este că textul este afișat numai când câmpul este gol și nu este focalizat. De îndată ce câmpul intră în focalizare (de exemplu, când faceți clic pe mouse-ul sau instrucțiunea pe câmp) și începeți imprimarea, textul dispare pur și simplu. Foarte similar cu câmpul de căutare din Safari.
Să ne dăm seama cum să executăm atributul de substituenți.
<
input
type
=
"text"
name
=
"user-name"
id
=
"user-name"
placeholder
=
"cel puțin 3 caractere"
>
Ca aceasta! Am auzit cum crezi: "Ce este acest lucru remarcabil? Mi-am făcut toată viața în JavaScript. Da, exact. Cu toate acestea, cu HTML5, devine parte a browserului, ceea ce înseamnă că este necesar să scrieți mai puțin script pentru a obține o soluție mai accesibilă a browserului (chiar și cu JavaScript dezactivat). Figura prezintă funcționarea atributului de text agregat în crom.
Browserele care nu acceptă atributul de substituent ignoră, deci nu se va efectua. Cu toate acestea, transformarea acestuia, îmbunătățiți impresia acestor utilizatori ale căror browsere oferă sprijinul său, și garantează, de asemenea, site-ul dvs. promițător. Toate browserele moderne susțin textul agregat.
autofocus.
Autofocusul face exact ce înseamnă. Adăugarea acesteia la intrare se concentrează automat pe câmp când este afișată pagina. Ca și în cazul unui substituent, am folosit JavaScript în trecut pentru autofocus.
Cu toate acestea, metodele tradiționale JavaScript au probleme grave de utilizare. De exemplu, dacă utilizatorul începe să completeze formularul până când scriptul este complet descărcat, acesta va fi (neplăcut) returnat după încărcarea la primul formular de câmp. Atributul Autofocus din HTML5 ocupă această problemă, concentrându-se ca descărcări de documente, nu este nevoie să așteptați ca încărcătura JavaScript. Cu toate acestea, vă recomandăm să îl aplicați pentru a preveni abordarea problemelor numai pentru acele pagini a căror scop este un formular (tip Google).
Acesta este un atribut boolean (cu excepția cazului în care scrieți xhtml5, a se vedea nota) și executat ca aici:
<
input
type
=
"text"
name
=
"first-name"
id
=
"first-name"
autofocus
>
Acesta este susținut de toate browserele moderne și, cum ar fi substituentul, care nu efectuează browsere automate, pur și simplu o ignoră.
Notă: Unele atribute noi de formare HTML5-Bully. Pur și simplu înseamnă că sunt instalate dacă există și nu sunt instalate, dacă nu. În HTML5, ele pot fi înregistrate în mai multe moduri diferite.
Cu toate acestea, atunci când scrieți XHTML5, trebuie să aplicați stilul Autofocus \u003d "Autofocus".
autocomplete.
Atributul Autocomplete îi ajută utilizatorii să completeze formularele pe baza introducerii datelor anterioare. Atributul este utilizat de la IE5.5 ori, dar a fost în cele din urmă standardizat ca parte a HTML5. În mod implicit, este activ. Aceasta înseamnă că practic nu trebuie să o aplicăm. Cu toate acestea, dacă doriți să insistați asupra introducerii în câmpul formular de fiecare dată după completarea (spre deosebire de câmpul de browser automat), apoi urmați-l după cum urmează:
<
input
type
=
"text"
name
=
"tracking-code"
id
=
"tracking-code"
autocomplete
=
"off"
>
Câmpul câmpului câmpului anulează orice stare autocompletă instalată pe elementul formular.
necesar.
Atributul necesar nu necesită depunerea; La fel ca autofocusul, el face exact ceea ce vă așteptați de la el. Când îl adăugați în câmpul Formular de browser, solicitați utilizatorului să introducă datele în acest câmp înainte de a trimite formularul. Înlocuiește validarea de formă de bază, în acest moment fiind executată utilizând JavaScript, făcându-l să devină mai convenabil și economisiți un timp mai mare de dezvoltare. Necesar este atributul boolean ca autofocus. Să ne uităm la ea în acțiune.
<
input
type
=
"text"
id
=
"given-name"
name
=
"given-name"
required
>
În prezent, necesar este implementat numai în Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 și Chrome 5+, astfel încât până la timp, va trebui să continuați să scrieți script-uri pentru a completa câmpurile din partea clientului a altor browsere ( * KHE-KHE * IE!). Opera, Chrome și Firefox prezintă utilizatorul când trimiteți un formular de mesaje de eroare. Cele mai multe browsere de eroare sunt apoi localizate pe baza unei limbi declarate. Safari nu prezintă un mesaj de eroare când trimiteți și, în schimb, puneți acest câmp în focalizare.
Afișarea mesajului de eroare implicit "Necesar" depinde de un browser separat; În prezent, "Bubble" cu un mesaj de eroare în toate browserele nu poate fi numit stiluri CSS. Chrome, cu toate acestea, are propria proprietate care poate fi utilizată pentru a atribui un mesaj de eroare stilurilor. De asemenea, puteți atribui stiluri pentru introducerea datelor utilizând Pseudo-Class: Necesar. Alternativa este de a anula formularea și stilurile din JavaScript utilizând metoda SetCustomVality (). De asemenea, este foarte important să nu uitați că o astfel de validare a browserului nu înlocuiește validarea serverului.
model.
Atributul modelului vă îngrijorează, de obicei, mulți dezvoltatori (bine, atât de mult îi pasă cum orice atribut de formă). Aceasta definește expresia regulată JavaScript pentru câmpul a cărui valoare trebuie verificată. Modelul facilitează-ne pentru a aplica un control separat al codurilor, numere de cont și așa mai departe. Caracteristicile modelului sunt extinse, iar aici este doar un exemplu simplu utilizând numărul produsului.
<
label
> NUMĂRUL PRODUSULUI:
<
input
pattern
=
"{3}"
name
=
"product"
type
=
"text"
title
=
"O singură cifră urmată de trei litere majuscule"./
>
<
/
label
>
Acest șablon prescrie că numărul produsului trebuie să fie o cifră urmată de trei litere mari (3). Puteți vedea mai multe șabloane pe site-ul templatelor HTML5, unde există o listă de expresii obișnuite convenționale de șabloane de stil pentru a vă ajuta să începeți să lucrați cu ei.
Ca și în cazul necesar, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 și Chrome 5+ sunt singurele browsere care susțin în prezent șabloanele. Cu toate acestea, restul se va întoarce în curând din cauza promovării rapide a pieței browserului.
Listă și elemente Dataliste
Atributul listei oferă utilizatorului posibilitatea de a asocia lista opțiunilor cu un câmp separat. Valoarea atributului listei liste trebuie să fie aceeași cu ID-ul elementului Datalist în același document. Elementul Datalist pentru HTML5 este nou și reprezintă o listă predefinită de opțiuni pentru controlul formei. Funcționează în mod similar cu câmpurile de căutare intrabauurice, completează automat cuvintele la introducerea textului.
Următorul exemplu arată modul în care sunt combinate lista și datatalistul.
<
option
value
=
"Coacăze."
> Coacăze.<
/
option
>
<
!
--
…--
>
<
/
datalist
>
Daca sunt altele, va rugam specificati:
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
>
<
/
label
>
Prin adăugarea elementului Select în Datalist, puteți oferi o degradare excelentă, pur și simplu aplicând elementul de opțiune. Iată șablonul marcajului elegant creat de Jeremy Kate (Jeremy Keith), ideal pentru principiile degradării treptate a HTML5.
<
option
value
=
"Coacăze."
> Coacăze.<
/
option
>
<
!
--
…--
>
<
/
select
>
Daca sunt altele, va rugam specificati:
<
/
datalist
>
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
>
<
/
label
>
Lista și asistența browserului Datalist este în prezent limitată la Opera 9.5+, Chrome 20+, Internet Explorer 10 și Firefox 4+.
multiplu
Puteți să vă promovați lista și Datalist la pas înainte prin aplicarea atributului multiplu Boolel, astfel încât să puteți introduce mai mult de o valoare din lista de date. Iată un exemplu.
<
option
value
=
"Coacăze."
> Coacăze.<
/
option
>
<
!
--
…--
>
<
/
select
>
Daca sunt altele, va rugam specificati:
<
/
datalist
>
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
multiple
>
<
/
label
>
Cu toate acestea, multiple nu se aplică exclusiv cu Datalist. Un alt exemplu de utilizare a mai multor pot fi adrese de e-mail la trimiterea elementelor la un atașament prieten sau fișier, după cum se arată aici:
<
label
> Încărca fișiere:
<
input
type
=
"file"
multiple
name
=
"upload"
>
<
/
label
>
multiple este acceptată în Firefox 3.6+, Safari 4+, Opera 11,5+, Internet Explorer 10 și Chrome 4+.
novalidate și formulovalidate.
Atributele Nevaluted și Formnovalidate indică faptul că atunci când trimiteți un formular, nu este nevoie să verificați corectitudinea datelor. Sunt ambii - atribute boolean. Formnovalidatul poate fi aplicat la intrare-am cu un tip de suport sau imagine. Atributul Nevaluat poate fi instalat numai la elementul de formă.
Un exemplu de utilizare a atributului formovalidat poate fi afișat pe butonul "Save Draft", unde formularul are câmpuri necesare pentru a trimite schițe, dar nu este necesar pentru a salva proiectul. Novalidatul va fi aplicat în cazurile în care nu este nevoie să efectuați validarea formularului, dar trebuie să atingeți avantajele unei interfețe mai convenabile de utilizator oferite de noile tipuri de introducere a datelor.
Utilizarea formulelor poate fi văzută în următorul exemplu:
<
form
action
=
"process.php"
>
<
label
for
=
"email"
> E-mail:<
/
label
>
<
input
type
=
"text"
name
=
"email"
value
=
"\u003ca href \u003d"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f7ffe2f4ffd0f5e8f1fde0fcf5bef3fffd">[E-mail protejat]"
>
<
input
type
=
"submit"
formnovalidate
value
=
"Trimite"
>
<
/
form
>
Iar acest exemplu arată aplicarea novalidătului:
<
form
action
=
"process.php"
novalidate
>
Atributele furnizează informații suplimentare despre element, în timp ce acestea sunt întotdeauna definite în eticheta inițială, indiferent de pereche, aceasta este o etichetă sau unică.
În HTML există o serie de atribute care universal și pot fi aplicate la aproape orice etichete, prin urmare atributele incluse în acest grup sunt numite atribute globale.
Atributele globale se vor întâlni adesea în exemplele acestui manual, vă sugerez să repetați atributele pe care le-am luat deja în considerare și să vă familiarizăm cu atributele globale care vor fi luate în considerare în cele mai apropiate articole:
Întrebări și sarcini pe această temă
Înainte de a trece la studiul temei următoare, treceți o sarcină practică:
Sfat: Nu uitați să determinați limba paginii și a elementelor unde este necesar. După ce efectuați un exercițiu, inspectați codul paginii prin deschiderea unui exemplu într-o fereastră separată pentru a vă asigura că sunteți executat corect.
La HTML5, deși toate browserele moderne sprijină deja acest standard. Începând cu decembrie 2011, standardul este încă într-o stare de dezvoltare.
În HTML5 adaugă multe noi caracteristici sintactice - . Aceste elemente sunt concepute pentru a facilita implementarea și gestionarea obiectelor grafice și multimedia pe web fără a fi nevoie să se adreseze propriilor pluginuri și API-uri. Alte elemente noi, cum ar fi , , și Concepute pentru a îmbogăți conținutul semantic al documentului (pagini).
