Përkthim: Vlad Merzhevich
Të gjithë dinë për format e internetit, apo jo? Ne fusim një etiketë, disa, ndoshta, i plotësojmë të gjitha me një buton dhe ju keni mbaruar.
Ju nuk e dini gjysmën e saj. HTML5 përcakton mbi një duzinë lloje të reja fushash që mund t'i përdorni në format tuaja. Dhe kur them "përdor", dua të them se ato mund të përdoren menjëherë - pa asnjë mashtrim, hak apo zgjidhje. Mos u shqetësoni shumë, nuk po them që të gjitha këto veçori të reja emocionuese mbështeten në të vërtetë në çdo shfletues. Absolutisht jo, nuk e kam fjalën për të gjithë. Në shfletuesit modernë, po, format tuaja do të tregojnë gjithçka që ata janë në gjendje. Por në shfletuesit e vjetër, format tuaja do të vazhdojnë të funksionojnë, megjithëse jo në potencialin e tyre të plotë. Kjo do të thotë, këto veçori degradojnë me hijeshi në çdo shfletues. Edhe në IE6.
Teksti i shpejtë| I.E. | Firefox | Safari | krom | Opera | iPhone | Android |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Përmirësimi i parë HTML5 në lidhje me format është aftësia për të vendosur tekst të shpejtë në fushën e hyrjes. Ky tekst shfaqet në fushën e hyrjes nëse fusha është bosh dhe nuk ka fokus. Sapo klikoni në fushën e hyrjes (ose lundroni në të përmes Tab), teksti i këshillës zhduket.
Ju ndoshta e keni parë tekstin e shpejtë më parë. Për shembull, Mozilla Firefox përfshin tekst sugjerues në shiritin e adresave që thotë "Kërko faqeshënuesit dhe historikun".
Kur klikoni në shiritin e adresave, teksti i këshillës zhduket.
Ja se si mund të përfshini tekst sugjerues në format tuaja.
Shfletuesit që nuk e mbështesin atributin mbajtës të vendeve thjesht e injorojnë atë. Asnjë dëm apo shkelje.
Pyete profesorin Markup☞ P. A mund të përdor shënjimin HTML për atributin mbajtës të vendit? Dua të fus një foto ose ndoshta të ndryshoj ngjyrat.
A. Atributi vendmbajtës mund të përmbajë vetëm tekst, pa kod HTML. Megjithatë, ka shtesa të veçanta CSS që ju lejojnë të vendosni stilin e tekstit në disa shfletues.
Fushat e fokusimit automatik| I.E. | Firefox | Safari | krom | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Uebsajtet mund të përdorin JavaScript për të përqendruar automatikisht në fushën e formës së parë. Për shembull, në faqen kryesore Google.com Fusha për futjen e fjalëve kyçe të kërkimit ka fokusim automatik. Ndërsa kjo është e përshtatshme për shumicën e njerëzve, mund të jetë e bezdisshme për përdoruesit e avancuar dhe njerëzit me nevoja të veçanta. Nëse shtypni hapësirën ndërsa prisni që faqja të lëvizë, nuk do të ketë lëvizje sepse fokusi është në fushën e hyrjes së formularit (ajo do të shkruajë hapësirë në fushë në vend që të lëviz). Nëse e zhvendosni fokusin në një fushë tjetër hyrëse ndërsa faqja po ngarkohet, skripti i fokusimit automatik të sajtit mund ta kthejë "në mënyrë të dobishme" fokusin përsëri në fushën e hyrjes origjinale, duke ndërprerë shkrimin tuaj dhe duke ju bërë të shkruani në vendin e gabuar.
Për shkak se fokusimi automatik funksionon përmes JavaScript, mund të ketë vështirësi në trajtimin e këtyre rasteve ekstreme dhe opsione të vogla për ata njerëz që nuk duan që një faqe ueb t'ua "vjedhë" fokusin.
Për të zgjidhur këto probleme, HTML5 prezanton atributin e fokusimit automatik për të gjithë elementët e formës. Atributi i fokusimit automatik bën pikërisht atë që tingëllon: sapo ngarkohet faqja, ajo zhvendos fokusin në fushën e specifikuar. Por meqenëse kjo është vetëm shënim dhe jo një skrip, sjellja do të jetë e qëndrueshme në të gjitha sajtet. Për më tepër, prodhuesit e shfletuesit (ose autorët e shtesave) mund t'u ofrojnë përdoruesve një mënyrë për të çaktivizuar fokusimin automatik.
Ja se si mund të vendosni një fushë formulari në fokusim automatik.
Shfletuesit që nuk e mbështesin atributin e fokusimit automatik do ta injorojnë atë.
Cfare ndodhi? Thoni që dëshironi që fokusimi automatik të funksionojë kudo, jo vetëm në shfletuesit e zbukuruar HTML5? Mund ta lini skriptin aktual me fokus automatik, thjesht bëni dy ndryshime të vogla:
- shtoni atributin e fokusimit automatik në kodin HTML;
- Kontrolloni nëse shfletuesi mbështet atributin e fokusimit automatik dhe nëse jo, ekzekutoni skriptin tuaj.
Autofokus me alternativë
if (!("autofokus" në document.createElement("input")) ) (
dokument.getElementById("q").focus();
}
Shumë faqe ueb presin që window.onload të aktivizohet dhe të vendoset fokusi. Por ngjarja window.onload nuk do të aktivizohet derisa të jenë ngarkuar të gjitha imazhet. Nëse faqja juaj ka shumë imazhe, skriptet e tilla naive potencialisht do të ndryshojnë fokusin pasi përdoruesi të ketë filluar të ndërveprojë me një pjesë tjetër të faqes tuaj. Kjo është arsyeja pse përdoruesit e fuqishëm i urrejnë skriptet e fokusimit automatik.
Për shembull, në seksionin e mëparshëm, skripti i fokusimit automatik u vendos menjëherë pas fushës së formularit që iu referua. Kjo është zgjidhja optimale, por mund të ofendojë ndjeshmëritë tuaja duke vendosur një bllok kodi JavaScript në mes të faqes (ose më e zakonshme, sistemi juaj mund të mos jetë aq fleksibël). Nëse nuk mund të futni një skript në mes të faqes, duhet të vendosni fokusin nëpërmjet një ngjarjeje të personalizuar si $(document).ready() në jQuery në vend të window.onload .
Fokusimi automatik përmes jQuery
$(document).ready(function() (
$("#q").fokus();
}
});
Ngjarja e personalizuar e jQuery ndizet sapo të aksesohet DOM - domethënë, ai pret që teksti i faqes të ngarkohet, por nuk pret që të gjitha imazhet të ngarkohen. Kjo nuk është një qasje optimale - nëse faqja është jashtëzakonisht e madhe ose lidhja e rrjetit është e ngadaltë, përdoruesi mund të vazhdojë të ndërveprojë me faqen përpara se të ekzekutohet skripti i fokusit. Por është akoma shumë më mirë sesa të presësh që të ndodhë ngjarja window.onload.
Nëse jeni dakord dhe jeni të gatshëm të futni një skrip me një deklaratë të vetme në kodin e faqes tuaj, ky është një kompromis që është më pak i keq se opsioni i parë dhe më i mirë se i dyti. Mund të përdorni ngjarje të personalizuara jQuery për të vendosur ngjarjet tuaja, të themi autofocus_ready. Më pas mund ta aktivizoni këtë ngjarje manualisht sapo fusha e fokusimit automatik të jetë e disponueshme. Faleminderit E.M. Shtenberg që më mësoi këtë teknikë.
Fokusimi automatik me ngjarje të personalizuar alternative
$(document).bind("autofocus_ready", funksion() (
if (!("autofokus" në document.createElement("input"))) (
$("#q").fokus();
}
});
$(dokument).trigger ("autofocus_ready");
Kjo zgjidhje është optimale, ashtu si qasja e parë. Fokusi do të vendoset në fushën e formularit sa më shpejt të jetë e mundur teknikisht ndërsa teksti i faqes është ende duke u ngarkuar. Një pjesë e logjikës së aplikacionit (përqendrimi në fushën e formës) është zhvendosur nga trupi i faqes në seksion. Ky shembull bazohet në jQuery, por koncepti i ngjarjeve të personalizuara nuk është unik për jQuery. Biblioteka të tjera JavaScript si YUI dhe Dojo ofrojnë aftësi të ngjashme.
Le të përmbledhim.
- Vendosja e saktë e fokusit është e rëndësishme.
- Nëse është e mundur, lërini shfletuesin të përdorë atributin e fokusimit automatik në fushën ku dëshironi të fokusoheni.
- Nëse po përdorni kod alternativ për shfletues të vjetër, përcaktoni mbështetjen për atributin e fokusimit automatik në mënyrë që skripti të funksionojë vetëm në shfletues të vjetër.
- Vendosni fokusin sa më shpejt që të jetë e mundur. Fusni skriptin e fokusit në kod menjëherë pas fushës së formularit. Nëse kjo nuk ju shqetëson, futni një bibliotekë JavaScript që mbështet ngjarje të personalizuara dhe ngrini ngjarjen në kod menjëherë pas fushës së formularit. Nëse kjo nuk është e mundur, përdorni një ngjarje si $(document).ready() nga jQuery.
- Në asnjë rrethanë nuk duhet të prisni që window.onload të përqendrohet.
Për më shumë se një dekadë, formularët përmbajnë vetëm disa lloje fushash. Më të zakonshmet janë të mëposhtmet.
Të gjitha këto lloje fushash ende funksionojnë në HTML5. Nëse "përmirësoni në HTML5" (ndoshta duke ndryshuar !DOCTYPE ), nuk do t'ju duhet të bëni një ndryshim të vetëm në format tuaja. Epo për pajtueshmërinë e pasme!
Megjithatë, HTML5 përcakton 13 lloje të reja fushash dhe nuk ka asnjë arsye për të mos filluar përdorimin e tyre.
E para nga këto lloje të reja të adresave të postës elektronike. Duket diçka si kjo.
Unë do të shkruaja një fjali që filloi "në shfletues që nuk mbështesin type="email" ..." por ndaloi. Pse? Sepse nuk jam i sigurt nëse shfletuesit nuk mbështesin type="email" . Të gjithë shfletuesit "mbështesin" type="email" . Ata mund të mos bëjnë asgjë të veçantë, por shfletuesit që nuk e njohin llojin = "email" do ta trajtojnë atë si "text" dhe do ta kthejnë atë si një fushë teksti normal.
Unë do të theksoj se sa e rëndësishme është kjo. Ka miliona formularë në internet që ju kërkojnë të shkruani adresën tuaj të emailit dhe të gjithë përdorin . Ju shihni një kuti teksti, futni adresën tuaj të emailit në të dhe kjo është ajo. Dhe më pas vjen HTML5, i cili përcakton type="email" . A po çmenden shfletuesit? Nr. Çdo shfletues në Tokë e trajton atributin e tipit të panjohur si type="text" - madje edhe IE6. Kështu që ju mund të "rifreskoni" format tuaja duke përdorur type="email" tani.
Çfarë ndodh nëse themi se shfletuesi mbështet type="email" ? Epo, mund të nënkuptojë çdo gjë. Specifikimi HTML5 nuk kërkon ndonjë ndërfaqe specifike të përdoruesit për llojet e reja të fushave. Opera shton një ikonë të vogël në fushën e formës. Shfletues të tjerë HTML5 si Safari dhe Chrome paraqiten si një fushë teksti - njësoj si type="text" - kështu që përdoruesit tuaj nuk do ta vërejnë ndryshimin (derisa të shohin kodin burimor).
Dhe pastaj është iPhone.
iPhone nuk ka tastierë fizike. E gjithë "shtypja" bëhet duke klikuar në tastierën në ekran që shfaqet në kohën e duhur, për shembull, kur shkoni në një fushë formulari në një faqe interneti. Apple bëri diçka të zgjuar me shfletuesin e iPhone. Ai njeh disa fusha të reja HTML5 dhe ndryshon në mënyrë dinamike tastierën në ekran për të optimizuar hyrjen.
Për shembull, një adresë emaili është tekst, apo jo? Sigurisht, por ky është një lloj teksti i veçantë. Kështu, pothuajse të gjitha adresat e emailit përmbajnë simbolin @ dhe të paktën një pikë (.), por nuk ka gjasa të përmbajnë një hapësirë. Pra, kur jeni duke përdorur një iPhone dhe shkoni te , do të merrni një tastierë në ekran që përfshin një shirit më të vogël hapësinor si dhe çelësa të dedikuar për simbolet. Dhe @.
Më lejoni ta përmbledh. Nuk ka asnjë pengesë për të konvertuar menjëherë të gjitha fushat tuaja të emailit në type="email" . Pothuajse askush nuk do ta vërejë këtë, përveç përdoruesve të iPhone, të cilët ndoshta nuk do ta vënë re. Por ata që e vërejnë do të buzëqeshin në heshtje dhe do t'ju falënderojnë që ua lehtësoni pak punën.
Adresat e internetitNjë adresë ueb-e cila standarde i quan geeks URL-të, me përjashtim të disa pedantëve që thirrën URI-të - është një lloj tjetër teksti i specializuar. Sintaksa e një adrese ueb është e kufizuar në standardin përkatës të internetit. Nëse dikush ju kërkon të vendosni një adresë uebi në një formular, ata presin diçka si "http://www.google.com/", jo "125 Farwood Road". Vizatimet e prera janë të zakonshme - madje edhe faqja kryesore e Google ka tre prej tyre. Pikat janë gjithashtu të zakonshme, por hapësirat janë të ndaluara. Dhe çdo adresë ueb ka një prapashtesë domeni si ".com" ose ".org".
Dhe kështu... (rrokullisni daulle ju lutem)... . Në iPhone duket kështu.
IPhone ka ridizajnuar tastierën e tij virtuale ashtu siç bëri për emailin, por tani e optimizon atë për të shtypur një adresë ueb. Shiriti i hapësirës është zëvendësuar plotësisht nga tre çelësa virtualë: pjerrët, pikë dhe ".com" (mund të mbani të shtypur tastin ".com" për të zgjedhur një prapashtesë të ndryshme si ".org" ose ".net").
Shfletuesit që nuk mbështesin HTML5 do të trajtojnë type="url" si type="text" , kështu që nuk ka asnjë pengesë për të përdorur këtë lloj për të gjitha fushat ku duhet të futni një adresë ueb.
Numrat si numëruesHapi tjetër: numrat. Kërkimi i një numri është më kompleks sesa kërkesa për një email ose adresë ueb. Para së gjithash, numrat janë më kompleks se sa mendoni. Zgjidhni shpejt një numër. -1? Jo, kisha parasysh një numër midis 1 dhe 10.7 ½? Jo, jo, mos u bëj një fraksion, budalla. π? Tani ju thjesht zgjodhët një numër irracional.
Unë do të doja të vërej se nuk ju kërkohet shpesh "vetëm një numër". Ka më shumë gjasa që ata të kërkojnë një numër në një gamë të caktuar. Ju mund të dëshironi vetëm disa lloje numrash brenda atij diapazoni - ndoshta numra të plotë, por jo thyesa ose dhjetore ose diçka më ekzotike si shumëfishat e 10. HTML5 mbulon të gjitha këto.
Zgjidhni një numër, pothuajse çdo
Le të shohim një atribut në një kohë.
- type = "number" do të thotë se kjo është një fushë numerike.
- min="0" specifikon vlerën minimale të lejuar për këtë fushë.
- max="10" është vlera maksimale e lejuar.
- step="2" në kombinim me vlerën minimale përcakton numrat e vlefshëm në rangun: 0, 2, 4 e kështu me radhë, deri në vlerën maksimale.
- vlera = "6" vlera e paracaktuar. Nëse duket e njohur, ky është i njëjti atribut që përdoret gjithmonë për të përcaktuar vlerat e fushave të formës. Unë e përmend këtë këtu si një pikënisje, që HTML5 ndërtohet në versionet e mëparshme të HTML. Ju nuk duhet të mësoni përsëri për të bërë atë që keni bërë tashmë.
Ky është kodi për një fushë numerike. Mbani në mend se të gjitha këto atribute janë opsionale. Nëse keni një minimum, por jo një maksimum, mund të specifikoni atributin min por jo atributin maksimal. Vlera e paracaktuar e hapit është 1 dhe ju mund të hiqni atributin hap derisa të nevojitet një vlerë tjetër hapi. Nëse nuk ka vlerë të paracaktuar, atëherë atributi i vlerës mund të jetë vargu i zbrazët ose edhe të hiqet fare.
Por HTML5 nuk ndalet me kaq. Për të njëjtin çmim të ulët lirie, ju merrni këto teknika të dobishme JavaScript.
- input.stepUp(n) rrit vlerën e fushës me n.
- input.stepDown(n) zvogëlon vlerën e fushës me n.
- input.valueAsNumber kthen vlerën aktuale si një numër me pikë lundruese (vetia input.value është gjithmonë një varg).
Probleme me shfaqjen? Epo, ndërfaqja e saktë për menaxhimin e numrave zbatohet ndryshe në shfletues. Në iPhone, ku shtypja është e vështirë, shfletuesi përsëri optimizon tastierën virtuale për futjen e numrave.
Në versionin desktop të Operas, fusha type="number" shfaqet si numërues me shigjeta të vogla lart e poshtë që mund të klikoni për të ndryshuar vlerat.
Opera respekton atributet min, max dhe hap, kështu që gjithmonë do të arrini një vlerë numerike të pranueshme. Nëse e rritni vlerën në maksimum, shigjeta lart në numërues bëhet gri.
Ashtu si me të gjitha fushat e tjera të hyrjes që kam diskutuar në këtë kapitull, shfletuesit që nuk mbështesin type="number" do ta trajtojnë atë si type="text" . Vlera e paracaktuar do të shfaqet në fushë (siç ruhet në atributin vlera), por atributet e tjera si min dhe max do të shpërfillen. Ju jeni të lirë t'i zbatoni ato vetë ose të përdorni një kornizë JavaScript që tashmë zbaton menaxhimin e kundërve. Kontrolloni këtu së pari.
nëse (! .inputtypes.number) (
// nuk ka mbështetje vendase për llojin e fushës=numër
// mund të provojë Dojo ose një kornizë tjetër JavaScript
}
Një numërues nuk është mënyra e vetme për të përfaqësuar hyrjen e numrave. Ju ndoshta keni parë gjithashtu një rrëshqitës që duket kështu.
Tani mund të keni edhe një rrëshqitës në formë. Kodi duket çuditërisht i ngjashëm me një fushë numëruesi.
Të gjitha atributet e disponueshme janë të njëjta si për type="number" - min , max , step , value - dhe nënkuptojnë të njëjtën gjë. Dallimi i vetëm është ndërfaqja e përdoruesit. Në vend të një fushe hyrëse, shfletuesit pritet të shfaqin tipin = "range" si një rrëshqitës. Në kohën e shkrimit, versionet më të fundit të Safari, Chrome dhe Opera punojnë me këtë. Fatkeqësisht, iPhone shfaqet si një fushë e thjeshtë teksti; ai as nuk e optimizon tastierën e tij në ekran për futjen e numrave. Të gjithë shfletuesit e tjerë thjesht e trajtojnë fushën si type="text" , kështu që nuk ka asnjë arsye për të filluar përdorimin e këtij lloji menjëherë.
HTML 4 nuk përfshin zgjedhjen e datës përmes kalendarit. Kornizat JavaScript ju lejojnë ta shmangni këtë (Dojo, jQuery UI, YUI, Biblioteka e Mbylljes), por, natyrisht, secila prej këtyre zgjidhjeve kërkon "zbatimin" e kornizës për çdo kalendar të integruar.
HTML5 më në fund përcakton një mënyrë për të aktivizuar zgjedhësit e datave amtare pa ndonjë skriptim. Në fakt janë gjashtë prej tyre: data, muaji, java, ora, data + ora dhe data + ora me zonën kohore.
Deri më tani, mbështetja është... e pakët.
| shkruani = "data" | 9.0+ | - |
| tip = "muaj" | 9.0+ | - |
| tip = "javë" | 9.0+ | - |
| tip = "koha" | 9.0+ | - |
| shkruani "koha e datës" | 9.0+ | - |
| type = "datetime-local" | 9.0+ | - |
Ja se si shfaqet Opera:
Nëse keni nevojë për kohë së bashku me datën, Opera gjithashtu mbështet:
Nëse ju duhet një muaj plus një vit (për shembull, data e skadimit të një karte krediti), Opera mund të shfaqë:
Më pak e zakonshme, por e disponueshme, është zgjedhja e javës së vitit nëpërmjet:
E fundit por jo më pak e rëndësishme është koha me:
Zgjedhësi i datës me alternativë
...
var i = dokument.createElement("input");
i.setAttribute("lloji", "data");
nëse (i.type == "tekst") (
// Nuk ka mbështetje për zgjedhjen e datave :(
// Përdor Dojo/jQueryUI/YUI/Closure për ta krijuar atë,
// pastaj zëvendësoni në mënyrë dinamike elementin
}
Ka të ngjarë që shfletuesit e tjerë përfundimisht t'i mbështesin këto lloje. Ashtu si type="email" dhe lloje të tjera, këto fusha formulari do të shfaqen si tekst i thjeshtë në shfletues që nuk njohin tipin "datë" dhe variantet e tij. Nëse dëshironi, thjesht mund të përdorni , t'i bëni përdoruesit e Opera të lumtur dhe të prisni që shfletuesit e tjerë të arrijnë. Është më realiste ta përdorni këtë, por kontrolloni nëse shfletuesi ka mbështetje për zgjedhësin e datave dhe përfshini një zgjidhje alternative në formën e një skripti sipas zgjedhjes suaj (Dojo, jQuery UI, YUI, Biblioteka e Mbylljes ose opsione të tjera).
Dritarja e kërkimitPra, kërkoni. Jo vetëm kërkime nga Google ose Yahoo (epo, edhe ato). Mendoni për çdo kuti kërkimi, në çdo faqe, në çdo faqe interneti. Amazon ka një kuti kërkimi, Yandex ka një kuti kërkimi, shumica e blogeve gjithashtu. Si janë bërë? , ashtu si çdo fushë tjetër teksti në ueb. Le ta rregullojmë këtë.
Kërkoni për një brez të ri
Në disa shfletues nuk do të vini re ndonjë ndryshim nga një fushë e zakonshme teksti. Por nëse po përdorni Safari në Mac OS X, do të duket kështu.
E gjetët ndryshimin? Fusha e hyrjes ka qoshe të rrumbullakosura! E di, e di, vështirë se mund t'i përmbash ndjenjat. Por prisni, ka edhe më shumë! Kur filloni të shkruani type="search" në fushë, Safari do të fusë një buton të vogël "x" në anën e djathtë të dritares. Klikimi në "x" pastron përmbajtjen e fushës. Google Chrome, i cili ka të njëjtën teknologji nën kapuç, sillet në të njëjtën mënyrë. Të dyja këto truke të vogla duken dhe sillen të ngjashme me kërkimin vendas në iTunes dhe aplikacionet e tjera të klientit Mac OS X.
Apple.com përdor kërkimin e faqes për të ndihmuar faqen të përcjellë një ndjenjë "dashuruese të makaut". Por këtu nuk ka asgjë specifike për Mac-et. Është thjesht kod, kështu që çdo shfletues në çdo platformë mund të zgjedhë se si të jepet sipas konventave të platformës. Ashtu si me të gjitha llojet e tjera të reja, shfletuesit që nuk e njohin type="search" do ta trajtojnë atë si type="text" , kështu që nuk ka absolutisht asnjë arsye të mos filloni të përdorni type="search" për të gjitha kutitë tuaja të kërkimit sot.
thotë profesor MarkupSi parazgjedhje, Safari nuk aplikon shumicën e stileve. Nëse dëshironi ta detyroni Safari-n të trajtojë fushën e kërkimit si një fushë të rregullt teksti (kështu që ju mund të aplikoni stilet tuaja), shtoni këtë rregull në fletën tuaj të stilit.
hyrje (
-webkit-pamja:fushë teksti;
}
Faleminderit John Lane që më mësoi këtë truk.
Zgjedhja e ngjyraveHTML5 gjithashtu përcakton një fushë që ju lejon të zgjidhni një ngjyrë dhe e kthen atë në heksadecimal. Asnjë shfletues nuk mbështet përzgjedhësit e ngjyrave, gjë që është turp sepse më kanë pëlqyer gjithmonë paletat e Mac OS. Ndoshta nje dite.
shënim përkthyes Opera 11 e mbështet këtë funksion.
Vleresimi i formularitNë këtë kapitull, unë fola për elementë të rinj të formës dhe veçori të reja si fokusimi automatik, por nuk përmenda ndoshta pjesën më emocionuese të formave HTML5: vërtetimin automatik të hyrjes. Le të shohim problemet e zakonshme me futjen e një adrese emaili në një formular. Ju ndoshta keni vërtetim nga ana e klientit përmes JavaScript, i ndjekur nga vërtetimi nga ana e serverit përmes PHP, Python ose një gjuhë tjetër nga ana e serverit. HTML5 nuk do të zëvendësojë kurrë vërtetimin nga ana e serverit, por një ditë mund të zëvendësojë vërtetimin nga ana e klientit.
Ekzistojnë dy probleme të mëdha me vërtetimin e adresës së emailit në JavaScript:
Seriozisht, ju do të merrni adresën e gabuar. Përcaktimi që një grup karakteresh të rastit është një adresë e vlefshme emaili është tepër e vështirë. Sa më vështirë të shikoni, aq më e vështirë bëhet. A e përmenda se kjo është shumë, shumë e vështirë? A nuk është më e lehtë ta varësh këtë dhimbje koke në shfletuesin tënd?
Opera kontrollon tipin = "email"
Këtu është një pamje nga Opera 11, megjithëse funksionaliteti ka qenë i pranishëm që nga Opera 9. Kodi përfshin vendosjen e vlerës së emailit për atributin tip. Kur një përdorues i Opera përpiqet të dërgojë një formular me , shfletuesi kontrollon automatikisht adresën e emailit, edhe nëse skriptet janë të çaktivizuara.
HTML5 gjithashtu ofron vërtetimin e adresave të internetit me fushë dhe numra me . Vleresimi i numrit merr parasysh vlerat e atributeve min dhe max, kështu që shfletuesit nuk do t'ju lejojnë të dorëzoni formularin nëse vendosni një numër shumë të madh.
Nuk ka asnjë kod që mundëson vërtetimin e formularit në HTML5, ai bëhet si parazgjedhje. Për të çaktivizuar vërtetimin, përdorni atributin novalidate.
Mos më testo
Shfletuesit kanë qenë të ngadalshëm për të përfshirë mbështetjen për vërtetimin e formularit në HTML5. Firefox 4 do të ketë mbështetje të plotë. Fatkeqësisht, Safari dhe Chrome janë zbatuar vetëm pjesërisht: ata vërtetojnë elementët e formularit, por nuk shfaqin asnjë mesazh të dukshëm kur një fushë formulari dështon në vërtetimin. Me fjalë të tjera, nëse futni një datë të pasaktë (ose të shkruar gabim) në type="date" , Safari dhe Chrome nuk do ta dorëzojnë formularin, por nuk do t'ju tregojnë pse jo. Ata do të vendosin fokusin në fushën që përmban një vlerë të pavlefshme, por nuk do të shfaqin një mesazh gabimi si Opera ose Firefox 4.
Fushat e kërkuara| I.E. | Firefox | Safari | krom | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Vlefshmëria e formularit në HTML5 nuk kufizohet në llojin e secilës fushë. Ju gjithashtu mund të specifikoni që disa fusha janë të nevojshme, fusha të tilla duhet të kenë një vlerë përpara se të mund të dorëzoni formularin.
Kodi për fushat e kërkuara është aq i thjeshtë sa mund të jetë.
Shfletuesit mund të ndryshojnë pamjen origjinale të një fushe të kërkuar. Ja një shembull se si duket në Mozilla Firefox 4.0.
Për më tepër, nëse përpiqeni të dërgoni një formular pa plotësuar një vlerë të kërkuar, Firefox-i do të shfaqë një shirit informacioni që thotë se fusha kërkohet dhe nuk mund të jetë bosh.
Ditë të mbarë për të gjithë. Alexey Gulynin është në kontakt. Në artikullin e fundit, mësuat për elementët e rinj strukturorë në HTML5. Në këtë artikull do të doja t'ju tregoja se çfarë na solli HTML5 i ri kur punojmë me forma. Para së gjithash, ky është kontrollimi i fushave për pajtueshmërinë me kushte të caktuara, pa përdorur Javascript. Më parë, ne specifikuam të gjitha fushat e hyrjes me një etiketë me atributin type="text". Më pas javascript kontrolloi që fusha nuk ishte bosh dhe plotësonte disa kërkesa (për shembull, emailin e përdoruesit). Me ardhjen e HTML5, e gjithë kjo procedurë është bërë më e lehtë. Le të fillojmë me një shembull. Le të krijojmë një formular dhe të shtojmë një etiketë me një atribut të ri type="email" (ky atribut do të na pengojë të dorëzojmë formularin derisa të futet adresa e saktë e emailit):
Format në HTML5
Në këtë rast, ne specifikuam llojin e fushës si email, dhe në thelb, derisa të futim një adresë të vlefshme emaili, formulari nuk duhet të dorëzohet. Shfletuesi Yandex shfaq një sugjerim shumë interesant kur futim disa marrëzi në këtë fushë. Hyra "123" dhe u përpoqa të dërgoja. Shfaqet një mesazh që thotë se kërkohet simboli "@".
Ato. nëse fut "@", atëherë formulari duhet të dorëzohet. E cila është pikërisht ajo që ndodhi. Prandaj, unë nuk rekomandoj përdorimin e këtij lloji të fushës, përveç nëse shtoni një atribut tjetër në të - model .
Ky atribut kontrollon nëse ajo që kemi futur përputhet me atë që është në model. Kjo kërkon njohuri të shprehjeve të rregullta. Le të bëjmë që formulari ynë të dorëzohet vetëm pasi të kemi futur një adresë emaili NORMAL, dhe jo vetëm rreshtin që përmban "@" :
Email:
Nëse nuk e dini se çfarë janë shprehjet e rregullta, është në rregull. Ato do të diskutohen në një nga artikujt vijues.
Tani fusha jonë po punon normalisht.
Atributi i kërkuar është i nevojshëm në mënyrë që të mos dërgohet një shprehje boshe (kërkohet - kërkohet të plotësohet).
Ekziston gjithashtu një atribut tipi me vlerën tel, i cili ju lejon të vendosni një numër telefoni:
Këtu përsëri duhet të specifikoni modelin që kjo fushë të funksionojë normalisht, sepse formati i telefonit të secilit është i ndryshëm. Për shembull, këtu është formati:
Telefoni: Shembull i një numri të saktë 937-12-12
Derisa numri i telefonit të futet në mënyrën e duhur, formulari nuk do të dërgohet askund. Gjithashtu vërej se modeli mund të përdoret gjithashtu në fusha të thjeshta teksti (type="text" ).
Një tjetër tipar i ri me vlerën url , i cili ju lejon të kontrolloni nëse url-ja e futur është e vlefshme. Shembull:
Url:
. Punon si duhet në shfletuesin Yandex.Një tjetër element i ri është rrëshqitësi, i cili specifikohet nga atributi tip me diapazonin e vlerave .
Ky element ka një vlerë minimale dhe maksimale, të cilat më pas mund të kalohen diku. Detyrat e shtëpisë menjëherë:
Krijoni një fushë teksti pranë këtij rrëshqitësi në të cilin vlera e rrëshqitësit do të shfaqet kur të ndryshojë.
Nëse keni ndonjë vështirësi, mund të shihni kodin më poshtë:
Puna me një rrëshqitës në HTML5
|
varg varg = document.getElementById("myrange"); var tekst = dokument.getElementById("mytext"); range.addEventListener("ndryshim", funksion())( //subscribe në ngjarjen e ndryshimit text.value = range.value; ));Elementi tjetër i ri është numri. Më lejoni t'ju jap një shembull dhe gjithçka do të bëhet e qartë:
Në këtë rast, ne mund të zgjedhim elementë nga 5 në 100 me rritje prej 5. Ky element është larg të qenit i përsosur. Jo vetëm që duket ndryshe në shfletues të ndryshëm, por mund të futni manualisht një vlerë në të (disa shfletues e trajtojnë këtë). Megjithëse shfletuesi im e përpunoi këtë fushë mjaft normalisht (Unë përdor një shfletues Yandex). Unë nuk e rekomandoj ende përdorimin e tij, përveç nëse bëni kontrolle në Javascript. Një detyrë tjetër e detyrave të shtëpisë (pa kod këtë herë):
Kontrolloni në Javascript që vlera e futur në këtë fushë duhet të jetë shumëfish i 5 (përdorni ngjarjen e ndryshimit).
Deri më tani kemi shqyrtuar vetëm një atribut, të kërkuar. Por ka edhe të tjerë:
Atributi i fokusimit automatik përdoret për të siguruar që kur shkoni në një faqe të caktuar, fokusi bie në këtë fushë të veçantë.
Atributi vendmbajtës shërben si këshillë veglash. Sapo të filloni të shkruani diçka, kërkesa do të zhduket. Për shembull:
Email:
Në këtë artikull, mësuat se cilat elementë të rinj për të punuar me forma u shfaqën në HTML5. Kjo ishte pjesa 1 e artikullit, në artikullin tjetër do të shikojmë elementë të tjerë të punës me formularët, abonohuni që të mos e humbisni.
Alexey Gulynin ishte në kontakt, lini komentet tuaja, shihemi në artikujt e ardhshëm.
Një formular HTML është një pjesë e një dokumenti që lejon përdoruesin të fusë informacionin me interes, i cili më pas mund të pranohet dhe përpunohet nga ana e serverit. Me fjalë të tjera, formularët përdoren për të mbledhur informacionin e futur nga përdoruesit.
Për të përcaktuar se cilit element forme i përket etiketa aktuale, duhet të përdorni atributin for të etiketës. Vlera e atributit for duhet të përputhet me vlerën e atributit global të elementit të formës për të cilin do të aplikohet etiketa. Atributi for mund të mos përdoret nëse elementi do të jetë brenda një elementi.
Le të shohim një shembull përdorimi:
Shembull i përdorimit të një etikete Po JoJo ne te vertete
Në këtë shembull ne:
- Brenda së pari forma:
- Postuar dy butonat e radios ( ) për të zgjedhur nga një numër i kufizuar opsionesh. Ju lutemi vini re përsëri se për butonat e radios brenda të njëjtit formular duhet të specifikoni të njëjtin emër; ne kemi specifikuar vlera të ndryshme. Për së pari checked , i cili specifikon se elementi duhet të zgjidhet paraprakisht kur faqja ngarkohet (në këtë rast, një buton radio me vlerën po). Përveç kësaj, ne kemi specifikuar atributet globale për butonat e radios, të cilët përcaktojnë një identifikues unik për elementin.
- Ne vendosëm dy elementë që përcaktojnë etiketat e tekstit për fushat tona të tekstit. Vini re se kemi përdorur atributin for për të përcaktuar se cilit element forme i përket etiketa aktuale. Vlera e atributit for korrespondon me vlerën e atributit global të butonit të radios që na nevojitet.
- Brenda e dyta forma:
- Postuar dy butonat e radios ( ) për të zgjedhur nga një numër i kufizuar opsionesh. Për e dyta Për butonat e radios, ne kemi specifikuar një atribut të kontrolluar, i cili tregon se elementi duhet të zgjidhet paraprakisht kur faqja ngarkohet (në këtë rast, një buton radio me vlerën nr.). Për më tepër, ne specifikuam vlera unike për butonat e radios brenda formularit dhe emrat e njëjtë.
- Vendosëm dy elementë, brenda tyre vendosëm butonat tanë të radios. Ndryshe nga metoda e mëparshme, nuk ka nevojë të specifikoni atributet globale (identifikuesin për elementin) për butonat e radios dhe të përdorni atributin for për etiketat e tekstit për t'iu referuar atyre (të bëni një lidhje).
Në shfletues, të dy opsionet (metodat) për përdorimin e etiketave të tekstit duken identike:
Këshillë mjeti për fushat e hyrjesLe të shohim një shembull përdorimi:
Një shembull i përdorimit të atributit të mbajtësit të vendndodhjes Login:Fjalëkalimi:
Me tutje
Në këtë shembull, ne specifikuam për një element me tip tekst (fushë teksti me një rresht) dhe fjalëkalim (fushë fjalëkalimi) një aluzion teksti për përdoruesin (atributi mbajtës i vendndodhjes) që përshkruan vlerën e pritur për hyrjen.
Rezultati i shembullit tonë:
Pyetje dhe detyra mbi temënPërpara se të kaloni në temën tjetër, plotësoni detyrën praktike:
- Duke përdorur njohuritë që keni marrë, krijoni formularin e mëposhtëm të porosisë:
Një paralajmërim: në fushat ku pritet përzgjedhja, duhet të jetë e mundur të zgjidhet duke klikuar në tekst dhe jo vetëm në vetë elementin.
Pasi të keni përfunduar ushtrimin, inspektoni kodin e faqes duke hapur shembullin në një dritare të veçantë për t'u siguruar që keni bërë gjithçka në mënyrë korrekte.
Ky është i pari nga tre artikujt rreth HTML5 Web Forms. Përpara se të kalojmë te stilimi dhe vlefshmëria e JavaScript nga ana e klientit, do t'i hedhim një vështrim shënimit bazë. Unë ju rekomandoj ta lexoni këtë artikull edhe nëse tashmë jeni njohur me format - ka shumë atribute dhe të mira të reja të përshkruara këtu!
Format HTML mund të duken të thjeshta, por ato janë thelbësore për shumicën e faqeve të internetit dhe aplikacioneve. Në HTML4, llojet e fushave hyrëse ishin të kufizuara në listën e mëposhtme:
- lloji i hyrjes = "tekst"
- lloji i hyrjes = "kutia e kontrollit"
- lloji i hyrjes = "radio"
- lloji i hyrjes = "fjalëkalimi"
- Lloji i hyrjes = "fshehur" - për të dhënat që janë të padukshme për përdoruesin
- Lloji i hyrjes = "skedar" - për ngarkimin e skedarëve
- textarea - për futjen e sasive të mëdha të tekstit
- zgjidhni - për listat rënëse
- butoni - zakonisht përdoret për të dorëzuar të dhënat e formularit, por mund të përdoret gjithashtu lloji i hyrjes = "submit" dhe lloji i hyrjes = "imazh"
Përveç kësaj:
- Opsionet e stilimit me CSS janë të kufizuara
- elementët e avancuar, si elementët për zgjedhjen e datës dhe ngjyrës, duhet të zbatohen në mënyrë të pavarur duke përdorur kodin
- Vlefshmëria nga ana e klientit kërkon JavaScript
HTML5 prezantoi një numër të madh të llojeve të reja të fushave. Ato ofrojnë ndihmës të hyrjes dhe vërtetimit vendas pa ndonjë kod JavaScript.
| Lloji | Përshkrim |
| duke futur adresën e emailit | |
| tel | futja e një numri telefoni - nuk ka sintaksë strikte, por ndërprerjet e linjës do të hiqen |
| url | shkruani URL |
| kërkimi | fusha e kërkimit me ndërprerje rreshtash hiqet automatikisht |
| numri | numër me pikë lundruese |
| varg | kontrolli për futjen e një vlere të përafërt, që zakonisht paraqitet duke përdorur rrëshqitës |
| datë | duke futur ditën, muajin dhe vitin |
| ora e datës | Futja e ditës, muajit, vitit, orës, minutës, sekondës dhe mikrosekondës në lidhje me zonën aktuale kohore |
| datakoha-lokale | duke futur datën dhe orën pa zonën kohore |
| muaj | duke hyrë në muajin dhe vitin pa zonën kohore |
| javë | duke futur një numër javor pa një zonë kohore |
| koha | duke hyrë në orën pa zonë kohore |
| ngjyrë | përzgjedhja e ngjyrave |
Përveç atyre të listuara më sipër, fushat e hyrjes mund të kenë cilindo nga atributet specifike të formës. Disa janë lloje boolean, që do të thotë se nuk kërkojnë vlera, për shembull:
Sigurisht, ju mund t'i shtoni ato nëse ju pëlqen sintaksa e stilit XHTML, për shembull
| atribut | Përshkrim |
| emri | emri i fushës së hyrjes |
| vlerë | kuptimi origjinal |
| kontrolluar | bën të zgjedhur një kuti zgjedhjeje ose buton radioje |
| gjatesia maksimale | Gjatësia maksimale e vargut të tekstit të hyrjes. Në HTML5 mund të aplikohet edhe në fushat e zonës së tekstit |
| gjatësia e minierës | Gjatësia minimale e linjës. Kjo veçori është e dokumentuar, por në kohën e shkrimit, mbështetja e shfletuesit është e dobët dhe vlerësuesit HTML ankohen. Një rast përdorimi alternativ është model=".(3,)", i cili do të kontrollojë për të paktën tre karaktere në vargun e hyrjes |
| vendmbajtes | aluzion pa vëmendje brenda fushës |
| fokusim automatik | vendos fokusin në elementin e specifikuar (i dukshëm) kur faqja ngarkohet |
| kërkohet | tregon që një vlerë duhet të futet në fushë (jo fushë boshe) |
| model | kontrollon një vlerë kundrejt një shprehjeje të rregullt |
| min | vlera minimale e lejuar (numerike dhe data) |
| maksimumi | vlera maksimale e lejuar (numerike dhe datë) |
| hap | hapi i ndryshimit të vlerës. Për shembull, futja e tipit = "number" min="10" max="19" step="2" do të lejojë vetëm vlerat 10, 12, 14, 16 ose 18 |
| plotësimi automatik | I tregon shfletuesit një sugjerim për plotësimin automatik, për shembull "kontrollimi i llogarisë", ose mund të vendoset në "on" ose "off" për të aktivizuar/çaktivizuar plotësimin automatik |
| modaliteti i hyrjes |
tregon metodën e hyrjes. Karakteristikat më të dobishme:
|
| madhësia | madhësia në numrin e karaktereve për fusha si teksti ose fjalëkalimi, ose numri i pikselëve për fusha si emaili, tel, url ose kërkimi. Ndoshta ia vlen të shmangni dhe përdorni stilin CSS |
| rreshtave | Numri i rreshtave të tekstit (vetëm tekstarea) |
| cols | numri i rreshtave të karaktereve (vetëm tekstarea) |
| listë | i referohet një liste opsionesh |
| kontrolli drejtshkrimor | vendoset në true ose false për të aktivizuar/çaktivizuar kontrollin e caktimit për një fushë |
| formë | ID e formularit të cilit i përket kjo fushë. Në përgjithësi, fushat duhet të vendosen brenda formularit, por ky atribut ju lejon të vendosni fushën jashtë formularit, kudo në faqe |
| formimi | specifikon një URI që anashkalon veprimin e formularit kur dorëzon të dhënat (vetëm për butonat e dorëzimit/imazhit) |
| metodë e formës | specifikon GET ose POST, anulon atributin e metodës së formularit (vetëm për butonat e dorëzimit/imazhit) |
| formenctipi | specifikon llojin e përmbajtjes kur dorëzohet (tekst/e thjeshtë, shumëpjesësh/formë-të dhëna ose aplikacion/x-www-form-urlencoded, vetëm për butonat dhe imazhet e paraqitjes) |
| formtarget | specifikon dritaren/kornizën e synuar për të anashkaluar atributin e synuar të formularit në dorëzim (vetëm për butonat/imazhet e dorëzimit) |
| Lexo vetem | vlera e fushës nuk mund të ndryshohet, megjithëse do të vërtetohet dhe dërgohet |
| me aftësi të kufizuara | çaktivizon fushën e hyrjes - nuk do të dorëzohet asnjë verifikim dhe asnjë të dhënë |
Vini re se fushat e datës duhet të përdorin formatin VYYY-MM-DD për atributet e vlerës, min dhe maksimale.
Shembulli i mëposhtëm tregon një fushë që kërkon një email që mbaron me @mysite.com, tek e cila fokusi zhvendoset kur ngarkohet faqja.
Listat e të dhënave
Lista e të dhënave përmban një grup vlerash të përshtatshme për çdo lloj fushe, për shembull:
Nëse lista e të dhënave mbështetet, shfletuesi ofron një listë vlerash për t'u plotësuar automatikisht sapo të filloni të shkruani të dhënat në një fushë. Lista e plotë zakonisht shfaqet duke klikuar në shigjetën poshtë (nëse ka një të tillë). Ndryshe nga një listë standarde rënëse, përdoruesi mund të fusë vlera arbitrare në fushë.
Është e mundur të specifikohen vlerat dhe shpjegimet tekstuale për vlerat, për shembull:
Internet Explorer
por ia vlen të kujtojmë se zbatimi ndryshon në shfletues të ndryshëm. Për shembull, Firefox-i plotëson automatikisht tekstin (Internet Explorer), ndërsa Chrome plotëson automatikisht vlerat (IE), dhe teksti tregohet me një font më të vogël gri:
Listat e të dhënave mund të plotësohen duke përdorur JavaScript nëse dëshironi t'i merrni ato nëpërmjet AJAX.
Çaktivizimi i vërtetimitJu mund të çaktivizoni vërtetimin e të gjithë formularit duke vendosur atributin novalidate në elementin e formës. Përveç kësaj, mund të vendosni atributin formnovalidate në butonin/imazhin e paraqitjes së formularit.
Mos harroni se vendosja e atributit të çaktivizuar në një fushë do të çaktivizojë vërtetimin e asaj fushe.
Fushat e daljesNe diskutuam fushat e hyrjes më herët, por HTML5 gjithashtu ofron fushat e daljes.
- output - rezultat i llogaritjes së veprimeve të përdoruesit
- progres - shiriti i progresit (atributet e vlerës dhe maksimale vendosin gjendjen)
- metër - një shkallë që mund të ndryshojë ngjyrën e saj në mes të gjelbër, të verdhë dhe të kuqe në varësi të vlerave të përcaktuara të vlerës së atributeve, min, max, e ulët, e lartë dhe optimale.
Sipas specifikimit, çdo element i formës konsiderohet një paragraf dhe ndahet nga pjesët e tjera nga elementi
Interesante. Unë përdor divs për qëllime ndarjeje, megjithëse dyshoj se ka shumë ndryshim. Etiketa p është më e shkurtër, përveçse ju duhet të aplikoni një stil shtesë për të hequr kufijtë.
Më e rëndësishmja, etiketat duhet të përdoren ose duke rrethuar elementin e formës ose duke i vendosur ato pranë njëri-tjetrit dhe duke i lidhur me një atribut for në fushat përkatëse, për shembull:
Emri
Mbiemri
Adresa e emailit
Regjistrohu në buletinin tonë
Kontrollet nuk janë të standardizuaraNuk ka udhëzime të projektimit për elementët e formularit që prodhuesit e shfletuesit duhet të ndjekin. Kjo është e qëllimshme: elementi standard i formës së zgjedhësit të datave të orientuar nga miu mund të jetë shumë i vogël për një përdorues të pajisjes celulare, kështu që prodhuesi mund të kujdeset për krijimin e një versioni alternativ të elementit të formularit për ndërfaqet me prekje.
Mbështetja e shfletuesitJo të gjitha llojet dhe atributet e fushave mbështeten në të gjithë shfletuesit. Në përgjithësi, të gjithë shfletuesit modernë që fillojnë me IE10+ përfshijnë mbështetje për llojet bazë të fushave si emailet ose fushat numerike. Por në kohën e shkrimit, fushat e datës/orarit mbështeten vetëm në shfletues të bazuar në motorët Webkit dhe Blink.
Për llojet e fushave të pambështetura, shfletuesi do të kthehet në një fushë standarde të futjes së tekstit dhe do të injorojë atributet e pambështetura dhe vlerat e tyre.
Përdorni gjithmonë llojin e duhur!Është e rëndësishme të përdoret lloji i duhur i fushës për llojin e pritur të të dhënave hyrëse. Mund të jetë e qartë, por do të ketë situata ku duhet të përdorni një fushë të thjeshtë teksti.
Le të shohim datat. Mbështetja e shfletuesit është e paqartë, gjë që çon në sfida të zbatimit.
Një zgjidhje e thjeshtë do të ishte ndalimi i përdorimit të fushës së datës HTML5, kthimi në një fushë teksti dhe zbatimi i kontrollit tuaj të datës. Mos e bëj atë. Nuk do të krijoni kurrë një zgjedhës të duhur të datës që funksionon në të gjitha pajisjet, të gjitha rezolucionet e ekranit, mbështet tastierën, miun dhe prekjen dhe vazhdon të punojë me JavaScript të çaktivizuar. Përveç kësaj, shfletuesit celularë kanë mjetet e tyre për përpunimin e kontrolleve të dizajnuara për kontrollin me prekje.
Llojet e fushave të hyrjes HTML5 janë e ardhmja. Përdorni ato, dhe nëse është e nevojshme, përdorni një zëvendësim JavaScript në situata që kërkojnë pajtueshmëri të mirë të ndërthurjes së shfletuesve. Por mbani mend se çfarë kërkohet ...
Vleresimi nga ana e serveritVleresimi nga ana e shfletuesit nuk është i garantuar. Edhe nëse i keni detyruar të gjithë të përmirësojnë në versionin më të fundit të Chrome, përsëri nuk mund të shmangni:
- gabime të shfletuesit ose gabime JavaScript që lejojnë kalimin e të dhënave të pasakta
- përdoruesit që modifikojnë DOM-in ose skriptet duke përdorur veglat e shfletuesit
- dërgimi i të dhënave nga sistemet që ju nuk i kontrolloni
- përgjimi i të dhënave gjatë rrugës nga shfletuesi në server (zakonisht përmes HTTP)
Vërtetimi nga ana e klientit nuk ka qenë dhe nuk do të jetë kurrë një zëvendësim për vlefshmërinë nga ana e serverit. Vlerësimi i të dhënave të përdoruesit në anën e serverit është i një rëndësie të madhe. Vërtetimi nga ana e klientit është një veçori shtesë e dobishme.
Së fundi, mbani mend se datat mund të merren në formate të ndryshme, qofshin VYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY dhe të tjera. Kontrolloni për numrat në katër karakteret e para ose përdorni mjetet e integruara të analizimit dhe kontrollit të gjuhës/kornizës së përdorur nëse është e nevojshme.
Në këtë artikull, unë fola për shumë aspekte të shënjimit të formularit HTML5. Në artikullin vijues, ne do të shohim vetitë e CSS që lidhen me format.
Që nga ky shkrim, mbështetja për të gjitha format e reja, elementet hyrëse, atributet dhe llojet është shumë specifike për shfletuesin. Zbatimi i të njëjtit funksion në shfletues të ndryshëm mund të ndryshojë ndjeshëm. Thënë kështu, peizazhi i mbështetjes së formularit HTML5 po ndryshon me shpejtësi dhe vazhdon të përmirësohet. Në momentin e shkrimit, tabelat më aktuale janë këto, të cilat ofrojnë informacion të detajuar në lidhje me mbështetjen e shfletuesve të ndryshëm për format HTML5.
Pasqyrë e risive Elemente të rejaHTML5 prezanton pesë elementë të rinj që lidhen me futjen e të dhënave dhe format.
| progresin | Paraqet ecurinë e një detyre. | Elementi i progresit mund të përfaqësojë statusin e shkarkimit të një skedari. |
| metër | Përfaqëson një vlerë të shkallëzuar brenda një diapazoni të njohur. | Elementi i njehsorit mund të përdoret për të matur temperaturën ose peshën, për shembull. |
| listën e të dhënave | Përfaqëson një grup elementësh opsionesh që mund të përdoren në kombinim me atributin e listës së re për të krijuar menytë rënëse. | Kur përdoruesi shkon për të futur të dhëna në zonën e lidhur me listën e të dhënave, shfaqet një meny rënëse me vlerat nga lista e të dhënave. |
| keygen | Një kontroll për krijimin e çifteve të çelësave. | Kur dorëzoni një formular, çelësi privat ruhet në ruajtje lokale dhe çelësi publik dërgohet te serveri. |
| prodhimit | Shfaq rezultatet e llogaritjes. | Një shembull i përdorimit të elementit dalës do të ishte shfaqja e shumës së vlerave të dy elementeve hyrëse. |
HTML5 prezanton 13 elemente të reja hyrëse. Në shfletuesit që nuk i mbështesin ato, ato bëhen elemente të rregullta të futjes së tekstit.
| tel | Futja e një numri telefoni. | Elementi tel nuk e detyron tekstin të futet në një format specifik: për ta bërë këtë mund të përdorni elementin e modelit ose metodën setCustomValidity(), e cila kryen vërtetim shtesë. |
| kërkimi | Kërkon nga përdoruesi të fusë tekstin që do të gjendet. | Dallimi midis kërkimit dhe tekstit është kryesisht në dizajn. Për llojin e kërkimit, fusha e hyrjes mund të projektohet në përputhje me fushat e kërkimit të një platforme të caktuar. |
| url | Fut një URL. | Elementi url përdoret për të futur një URL të vetme absolute që përfaqëson një gamë mjaft të gjerë vlerash. |
| Futni një adresë të vetme emaili ose listë adresash. | Nëse specifikohet atributi i shumëfishtë, mund të futni disa adresa emaili të ndara me presje. | |
| ora e datës | Futni datën dhe orën në zonën kohore UTC. | |
| datë | Futja e një date pa një zonë kohore. | |
| muaj | Fut një datë me vitin dhe muajin, por pa zonën kohore. | |
| javë | Fut një datë që përbëhet nga një numër javor dhe një vit, por pa një zonë kohore. | Një shembull i këtij formati është 2011-W05 për javën e pestë të 2011. |
| koha | Vendosni kohën me orë, minuta, sekonda dhe fraksione sekondash, por pa zonën kohore. | |
| datatime-lokale | Futja e datës dhe orës pa zonën kohore. | |
| numri | Futja e të dhënave numerike. | Vlerat e vlefshme janë numra me pikë lundruese. |
| varg | Futja e të dhënave numerike (ndryshe nga lloji i numrit, vetë numri nuk ka rëndësi). | Zbatimi i këtij kontrolli të diapazonit në shumicën e shfletuesve që e mbështesin është një rrëshqitës. |
| ngjyrë | Zgjedhja e një ngjyre duke përdorur rrotën e ngjyrave. | Vlera duhet të jetë një ngjyrë e vlefshme e thjeshtë e shkronjave të vogla, si p.sh. #ffffff. |
HTML5 gjithashtu prezanton disa atribute të reja për elementët e hyrjes dhe formës.
| fokusim automatik | Fokusoni hyrjen në një element kur faqja është e ngarkuar. | Atributi i fokusimit automatik mund të aplikohet në elementet e hyrjes, zgjedhjes, zonës së tekstit dhe butonit. |
| vendmbajtes | Sugjeron përdoruesin për llojin e të dhënave që do të futen. | Vlera e mbajtësit të vendndodhjes shfaqet në tekst të lehtë derisa elementi të theksohet dhe përdoruesi të futë të dhëna. Ky atribut mund të specifikohet në elementet hyrëse dhe të zonës së tekstit. |
| formë | Përcakton një ose më shumë forma të cilave i përket elementi hyrës. | Me atributin e formës, mund të vendosni elemente hyrëse kudo në faqe, jo vetëm objektin e formës. Përveç kësaj, një element i vetëm mund të shoqërohet me forma të shumta. |
| kërkohet | Një atribut Boolean që tregon se elementi kërkohet. | Atributi i kërkuar është i dobishëm kur kryeni vërtetim të bazuar në shfletues pa përdorur kod të veçantë JavaScript. |
| plotësimi automatik | Ju lejon të specifikoni që fusha nuk duhet të përdorë plotësimin automatik dhe nuk duhet të zëvendësojë vlerat e futura më parë nga përdoruesi. | Atributi i plotësimit automatik është i dobishëm për fusha të tilla si numri i kartës së kreditit ose fjalëkalimi një herë që nuk duhet të plotësohet automatikisht. Si parazgjedhje, atributi i plotësimit automatik është vendosur në aktiv. Për ta çaktivizuar, çaktivizoni. |
| model | Kontrollimi i vlerës së një elementi bazuar në një shprehje të rregullt. | Nëse përdoret atributi model, duhet të jepni gjithashtu një vlerë titulli që përshkruan modelin e synuar të hyrjes për përdoruesit. |
| diremër | Projektuar për të dërguar informacionin e drejtimit të kontrollit së bashku me formularin. | Për shembull, nëse përdoruesi ka futur tekst nga e djathta në të majtë dhe elementi i hyrjes përmban atributin dirname, atëherë parametri i drejtimit do të dërgohet së bashku me vlerën e futur. |
| novalidoj | Nëse ky atribut specifikohet në një element formulari, verifikimi i paraqitjes së formularit çaktivizohet. | |
| formimi | Mbështetja e atributit të veprimit në një element të formës. | |
| formenctipi | Mbështetja e atributit enctype në një element të formës. | Ky atribut mbështetet në elementët e hyrjes dhe të butonit. |
| metodë e formës | Mbështetja e atributit të metodës në një element të formës. | Ky atribut mbështetet në elementët e hyrjes dhe të butonit. |
| formnovalidate | Mbështetja e atributit novalidate në një element formular. | Ky atribut mbështetet në elementët e hyrjes dhe të butonit. |
| formtarget | Mbështetja e atributit të synuar në një element të formës. | Ky atribut mbështetet në elementët e hyrjes dhe të butonit. |
Një nga përmirësimet në teknologjinë XMLHttpRequest është prezantimi i objektit FormData. Me FormData, mund të krijoni dhe dorëzoni grupe çiftesh dhe skedarësh çelësi/vlerash duke përdorur XMLHttpRequest. Kur përdoret kjo metodë, të dhënat dorëzohen në të njëjtin format si metoda e formularit submit() me llojin e kodimit multipart/form-data .
Objekti FormData ju lejon të krijoni shpejt forma HTML në JavaScript dhe t'i dërgoni ato duke përdorur metodën XMLHttpRequest.send(). Më poshtë është një shembull i thjeshtë.
Var formData = new FormData(); formData.append("pjesa_num", "123ABC"); formData.append("pjes_çmimi", 7.95); formData.append("pjesë_imazh", somefile) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);
Ju gjithashtu mund të përdorni objektin FormData për të futur të dhëna shtesë në një formular ekzistues përpara se ta dërgoni atë.
Var formElement = dokument.getElementById("someFormElement"); var formData = new FormData(formElement); formData.append("pjes_përshkrimi", "Pjesa më e mirë ndonjëherë!"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);
Verifikimi i bazuar në shfletuesPa dyshim, kontrollimi i të dhënave të formularit është një detyrë mjaft e mërzitshme, por nuk mund të shmanget. Sot, kodi JavaScript ose një bibliotekë e veçantë përdoret zakonisht në anën e klientit për të kontrolluar vlefshmërinë e të dhënave të futura dhe praninë e tyre në fushat e kërkuara të formularit përpara se t'i dërgoni ato.
Atributet e reja të hyrjes si të kërkuara dhe modeli, të kombinuara me përzgjedhësit pseudo-klasa CSS, e bëjnë më të lehtë shkrimin e kontrolleve dhe ofrimin e komenteve për përdoruesit. Ka metoda të tjera të avancuara të vërtetimit që ju lejojnë të përdorni kodin JavaScript për të specifikuar rregullat dhe mesazhet e personalizuara, si dhe për të përcaktuar nëse një element është i pavlefshëm dhe pse është i pavlefshëm.
atributi i kërkuarNëse specifikohet atributi i kërkuar, fusha duhet të përmbajë një vlerë kur formulari dorëzohet. Më poshtë është një shembull i një fushe të kërkuar të hyrjes së adresës së emailit që kontrollon nëse vlera e futur është një adresë e vlefshme emaili, siç përshkruhet.
atribut model
Atributi model specifikon shprehjen e rregullt të përdorur për të vërtetuar fushën e hyrjes. Ky shembull tregon një fushë të kërkuar të futjes së tekstit për një numër pjesë. Supozohet se një numër i tillë përbëhet nga tre shkronja të mëdha dhe katër numra. Përdorimi i atributeve të kërkuara dhe të modelit ju lejon të siguroheni që një vlerë e futur në një fushë përputhet me këtë format. Nëse përdoruesi qëndron pezull mbi fushë, një mesazh shfaqet në atributin e titullit.
Duke modifikuar pak shembullin e mëparshëm, mund të nënvizoni me të kuqe fushën e hyrjes nëse në të është futur një numër i pavlefshëm i pjesës. Gjithçka që duhet të bëni është të shtoni një stil CSS që vendos fushën e hyrjes në një kornizë të kuqe nëse vlera është e pavlefshme.
:invalid (kufi: 2px solid #ff0000; )
atribut formnovalidateAtributi formnovalidate mund të aplikohet në elementet hyrëse dhe të butonit. Ai përfshin verifikimin e paraqitjes së formularit. Më poshtë është një shembull ku dërgimi i një formulari duke përdorur butonin Submit kërkon një vlerë të vlefshme, por dërgimi i tij duke përdorur butonin Ruaj nuk kërkon një të tillë.
API-ja e kontrollit të kufizimeve
API-ja e Kontrollit të Kufizimeve ofron mjete të përshtatshme për kryerjen e kontrolleve specifike. Ju lejon të zgjidhni probleme të tilla si vendosja e një gabimi të personalizuar, kontrollimi i vlefshmërisë së një elementi dhe përcaktimi i arsyes së pavlefshmërisë së tij. Më poshtë është një shembull që hedh një mesazh gabimi personal nëse vlerat në dy fusha nuk përputhen.
Email: Përsëritni adresën e emailit: kontrolloni funksionin (input) ( if (input.value != document.getElementById("email_addr").value) (input.setCustomValidity("Dy adresat e emailit duhet të përputhen."); ) tjetër ( / / hyrja është e vlefshme -- rivendosni mesazhin e gabimit input.setCustomValidity(""); ) )
KuvendiMë poshtë është një shembull i një formulari të kërkesës për rezervim që përdor lloje të ndryshme të elementeve hyrëse, vërtetimin e formularit dhe përzgjedhësit dhe stilet CSS.
