Nga autori: duhet të jeni të vetëdijshëm për atributin tip në fushën e hyrjes. Ky atribut specifikon llojin e hyrjes në formën që përdoruesi do të shohë. Nëse atributi mungon, ose nëse përdoret një vlerë e re në një shfletues të vjetër, etiketa do të vazhdojë të funksionojë. Lloji i paracaktuar do të vendoset në type = "text". Kjo është pika kryesore që ju lejon të përdorni formularët HTML5 sot, edhe nëse mbështetni shfletues të vjetër. Nëse keni lloje të reja si emaili ose kërkimi, atëherë shfletuesit e vjetër do të shfaqin një kuti të thjeshtë teksti.
Formulari ynë i regjistrimit përdor 4 nga 10 llojet që ju të gjithë i njihni: kutia e kontrollit, teksti, fjalëkalimi dhe dërgoni. Më poshtë është listën e plotë llojet e disponueshme në HTML5 fushat e hyrjes:
Specifikimi HTML5 thotë rreth 9 lloje të tjera shtesë, me të cilat mund të krijoni elementë specifikë të UI, si dhe të kryeni vërtetimin e të dhënave vendase:
Ekzistojnë katër lloje të tjera të lidhura me datën të përfshira në HTML5.1 dhe WHATWG HTML Living Standard, tre prej të cilave mbështeten mjaft mirë në shfletuesit modernë:
datatime (nuk mbështetet në asnjë shfletues)
Le të hedhim një vështrim më të afërt në secilën prej tyre lloj i ri dhe gjithashtu shikoni se si mund t'i përdorni ato.
Kërko
Kërkimi i llojit të hyrjes (lloji = "kërkim") është një fushë kërkimi, një hyrje me një rresht për të futur një ose më shumë frazat e kërkimit... Nga specifikimet:
"Dallimi midis një lloji teksti dhe një lloji kërkimi është thjesht stilistik: në platformat ku fushat e kërkimit janë të ndryshme nga fushat e zakonshme të tekstit, lloji i kërkimit do të përputhet me të dhënat e stileve të platformës."
Shumë shfletues stilojnë fushat e kërkimit që t'i ngjajnë kutive të kërkimit të shfletuesit ose sistemit operativ. Chrome, Safari, Opera dhe IE kanë shtuar një funksion për të fshirë tekstin duke klikuar në ikonën "x", e cila shfaqet sapo filloni të shkruani (shih Figurën 4.5). Chrome dhe Opera gjithashtu pastrojnë fushat e datës/kohës dhe IE11 shton një "x" pothuajse në të gjitha llojet, duke përfshirë tekstin.
Figura 4.5. fusha e kërkimit është stiluar për fushat e kërkimit të sistemit operativ
Në pajisjet e fushatës Apple, fushat e kërkimit kanë qoshe të rrumbullakosura si parazgjedhje në Chrome, Safari dhe Opera, i cili dublikon pamjen fushat e kërkimit në sistemi operativ... Në tabletët me tastierë dinamike, butoni Go shfaqet si një ikonë kërkimi ose si fjalë kërkimi. E gjitha varet nga pajisja. Nëse shtoni një atribut të personalizuar, një ikonë zmadhuese shfaqet në Chrome dhe Opera.
Ju mund të përdorni tipin = "tekst" në mënyrën e vjetër, por lloji i ri i kërkimit është një çelës vizual për përdoruesit ku duhet të klikojnë për të gjetur një sajt. Përveç kësaj, lloji i ri është shumë i ngjashëm me fushat standarde të kërkimit me të cilat janë mësuar përdoruesit. Nuk ka asnjë kërkim në faqen e HTML5 Herald, por mund të jetë kështu:
< form id = "search" method = "get" > < label for = "s" >Kërko< / label > < input type = "search" id = "s" name = "s" / > < input type = "submit" value = "Kërko" / > < / form > |
Në shfletuesit pa mbështetje, lloji i kërkimit shfaqet si një fushë e rregullt teksti, kështu që nuk ka asnjë arsye për të mos e përdorur atë aty ku është e përshtatshme.
Adresat e emailit
Jo çuditërisht, lloji i emailit (lloji = "email") përdoret për të vendosur një ose më shumë adresat e emailit... Ai mbështet atributin e shumëfishtë Boolean, i cili mund të përdoret për të specifikuar adresa të shumta të ndara me presje (me hapësira).
Le të ndryshojmë formën tonë, të vendosim llojin = "email" në fushat e emailit:
< label for = "email" >Adresa e e-mail-it tim është< / label > < input type = "email" id = "email" name = "email" / > |
Ndryshimi i llojit nga teksti në email nuk bën ndonjë ndryshim vizual. Hyrja ende duket si një fushë e rregullt teksti. Megjithatë, ato janë të ndryshme.
Ndryshimet mund të shihen në pajisjen me prekje. Kur fusha e emailit merr fokus, shumica pajisje me prekje(p.sh. iPad ose Telefon Android me Chromium) do të shfaqë një tastierë të optimizuar për të shkruar një adresë Email... Tastiera do të shfaqë një simbol @, një pikë, një hapësirë, por jo një presje, siç tregohet në figurën 4.6.
Figura 4.6. një fushë e llojit të postës elektronike me një tastierë të personalizuar në pajisjen poshtë Kontrolli i iOS
V Shfletuesit Firefox, Chrome, Opera dhe Internet Explorer 10 nëse posta është futur gabimisht, shfaqet një mesazh gabimi. Kjo ndodh kur po përpiqeni të dorëzoni një formular me tekst që nuk njihet si një ose më shumë URL. Një mesazh tipik gabimi është paraqitur në figurën 4.7.
Figura 4.7. mesazh gabimi për adresën e gabuar të emailit të futur Shfletuesi Opera(majtas) dhe Firefox (djathtas)
Shënim: mesazhe të personalizuara të vërtetimit
Nuk ju pëlqen mesazhi i gabimit të parazgjedhur të shfletuesit? Vendosni tuajën me .setCustomValidity (errorMsg). SetCustomValidity merr vetëm një parametër, mesazhin e gabimit. Nëse keni vendosur mesazhin tuaj të vlefshmërisë, atëherë pas hyrjes së saktë, duhet të pastroni rreshtin me mesazhin (vlera false) për formularin që do të dorëzohet:
funksioni setErrorMessages (formControl) (var validityState_object = formControl.validity; if (validityState_object.valueMissing) (formControl.setCustomValidity ("Ju lutemi caktoni një moshë (kërkohet)");) tjetër nëse (validityState_object.form "rangeUnderset. shumë i ri");) tjetër nëse (validityState_object.rangeOverflow) (formControl.setCustomValidity ("Ti \" je shumë i vjetër");) ndryshe nëse (validityState_object.stepMismatch) (formControl.setCustomValidity (" Po numëron ditëlindjet e gjysmë? " ); else (// nëse hyrja është e vlefshme, duhet të jetë false, ose do të ketë një gabim formControl.setCustomValidity ("");))
Funksioni grup Mesazhet e gabimit (formControl) ( var validityState_object = formControl. vlefshmëria; nëse (validityState_object. vlera Mungon) ( formControl. setCustomValidity ( "Ju lutemi vendosni një moshë (kërkohet)") ; ) else if (validityState_object. rangeUnderflow) ( formControl. setCustomValidity ("Ti \" je shumë i ri "); ) else if (validityState_object. rangeOverflow) ( formControl. setCustomValidity ("Ti \" je shumë i vjetër "); ) else if (validityState_object. stepMosmatch) ( SpecifikimAtributi i kërkuarvleratTabela 1 liston vlerat e mundshme të atributit tip dhe formën që rezulton në fushën e formës.
Vlerat e reja janë shtuar në HTML5 siç tregohet në Tabelën 1. 2. Mbështetja e shfletuesit për këto vlera tregohet në Tabelën 1. 3.
Vlera e paracaktuarHTML5 IE Cr Op Sa Fx
HTML5 IE Cr Op Sa Fx
Etiketë HYRJEështë një nga elementët e formës së gjithanshme dhe ju lejon të krijoni elementë të ndryshëm të ndërfaqes dhe të siguroni ndërveprim me përdoruesit. Kryesisht INPUT është për krijimin e fushave të tekstit, butonave të ndryshëm, butonave të radios dhe kutive të kontrollit. edhe pse Elementi INPUT nuk ka nevojë të vendoset brenda kontejnerit FORM që përcakton formën, por nëse hyrja e përdoruesit do të dërgohet në një server ku përpunohet nga një program CGI, atëherë duhet të specifikohet FORM. E njëjta gjë është edhe për përpunimin e të dhënave me aplikacionet e klientit, për shembull, skriptet në JavaScript. Parametri kryesor Etiketa INPUT, duke përcaktuar llojin e elementit - tip. Ju lejon të pyesni artikujt e mëposhtëm forma: fusha e tekstit (tekst), fusha e fjalëkalimit (fjalëkalimi), kutia e kontrollit (kutia e kontrollit), kutia e kontrollit (buton radio), fusha e fshehur (e fshehur), butoni (butoni), butoni për të dorëzuar formularin (dorëzo), butoni për të pastruar formularin ( reset ), një fushë për dërgimin e një skedari (skedari) dhe një buton me një imazh (imazh). Çdo element ka listën e vet të parametrave që përcaktojnë llojin dhe karakteristikat e tij. Sintaksë Etiketa e fundit Parametrat Shembull 1. Përdorimi i etiketës INPUT Përshkrimi i parametrave të etiketës INPUTParametri ALIGNPërshkrim Sintaksë E aplikueshme Argumentet
Vlera e paracaktuar Shembulli 2. Përafrimi i një fushe me një imazh shënim Parametri ALTPërshkrim Sintaksë Argumentet Vlera e paracaktuar Shembulli 3. Shtimi i tekstit Alt Parametri BORDERPërshkrim Sintaksë Argumentet Vlera e paracaktuar Shembulli 4. Shtimi i një kornize në një imazh shënim Parametri i KontrolluarPërshkrim Sintaksë Argumentet Vlera e paracaktuar Shembulli 5. Shënimi i çelsave Parametri DISABLEDPërshkrim Sintaksë E aplikueshme Argumentet Vlera e paracaktuar Parametri MAXLENGTHPërshkrim Sintaksë Argumentet Vlera e paracaktuar Shembulli 7. Kufizimi i numrit të karaktereve në një fushë Parametri EMRIPërshkrim Sintaksë E aplikueshme Argumentet Vlera e paracaktuar Shembulli 8. Përdorimi i emrit të fushës Parametri READONLYPërshkrim Sintaksë Argumentet Vlera e paracaktuar Shembulli 9. Fusha vetëm për lexim Parametri SIZEPërshkrim Sintaksë Argumentet Vlera e paracaktuar Shembulli 10. Gjerësia e fushës Parametri SRCPërshkrim Sintaksë Argumentet Vlera e paracaktuar Shembulli 11. Rruga drejt një skedari grafik Parametri TYPEPërshkrim Sintaksë Argumentet
|