Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ

Shembuj të hyrjes HTML. Llojet e elementeve INPUT

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) (

Specifikim

Atributi i kërkuar

vlerat

Tabela 1 liston vlerat e mundshme të atributit tip dhe formën që rezulton në fushën e formës.

Tab. 1. Lloji vlerat
Një lloj Përshkrim Pamje
butonin Butoni.
kutia e kontrollit Kutitë e kontrollit. Ju lejon të zgjidhni më shumë se një opsion nga ato të propozuara. Birrë Çaj Kafe
dosje Fusha për futjen e emrit të skedarit që dërgohet në server.
i fshehur Fushë e fshehur. Nuk shfaqet në asnjë mënyrë në faqen e internetit.
imazh Fusha e imazhit. Kur klikoni në foto, të dhënat e formularit dërgohen në server.
fjalëkalimin Një fushë teksti normale, por e ndryshme nga ajo në atë që të gjithë karakteret tregohen me yll. Është krijuar në mënyrë që askush të mos mund të shikojë fjalëkalimin e futur.
radio Çelësat. Ato përdoren kur është e nevojshme të zgjidhni një opsion nga disa të sugjeruara. Birrë Çaj Kafe
rivendosur Butoni për të kthyer të dhënat e formularit në vlerën e tij origjinale.
paraqesin Butoni për dërgimin e të dhënave të formularit në server.
teksti Fusha e tekstit. Projektuar për futjen e karaktereve duke përdorur tastierën.

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.

Tab. 3. Mbështetja e shfletuesit për vlerat HTML5
Kuptimi Internet Explorer krom Opera Safari Firefox Android iOS
ngjyrë 21.0+ 11.01+
datë 5.0+ 10.62+ 5.0+ 5.0+
ora e datës 5.0+ 10.62+ 5.0+ 5.0+
datatime-lokale 5.0+ 10.62+ 5.0+ 5.0+
email 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
muaj 5.0+ 10.62+ 5.0+ 5.0+
numri 10.0 6.0+ 10.62+ 5.0+ 2.3+ 4.0+
varg 10.0 5.0+ 10.62+ 5.0+ 23.0+ 5.0+
kërkimi 10.0 5.0+ 11.01+ 5.0+ 4.0+ 4.0+
tel 10.0 5.0+ 11.01+ 5.0+ 4.0+ 3.1+
koha 5.0+ 10.62+ 5.0+ 5.0+
url 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
javë 5.0+ 10.62+ 5.0+ 5.0+

Vlera e paracaktuar

HTML5 IE Cr Op Sa Fx

Etiketa hyrëse, tipi atribut

Birrë
Çaj
Kafe

HTML5 IE Cr Op Sa Fx

Etiketa hyrëse, tipi atribut

Ju lutemi shkruani një numër nga 1 në 10

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
Nuk kërkohet.

Parametrat
align - përcakton shtrirjen e imazhit.
alt - tekst alternativ për një buton me një imazh.
kufiri - trashësia e kufirit rreth figurës.
i zgjedhur është një buton radio ose kuti e aktivizuar paraprakisht.
i çaktivizuar - bllokon aksesin dhe modifikimin e elementit.
gjatesia maksimale - shuma maksimale karakteret e lejuara në tekst.
emri - emri i fushës, në mënyrë që procesori i formularit të mund ta identifikojë atë.
vetëm për lexim - vendos që fusha nuk mund të ndryshohet nga përdoruesi.
madhësia - gjerësia e kutisë së tekstit.
src - vlera e elementit.

Shembull 1. Përdorimi i etiketës INPUT



Emri juaj:



Cilin shfletues përdorni kryesisht:



Internet Explorer

Netscape

Opera

Firefox

Mozilla


Një koment








Përshkrimi i parametrave të etiketës INPUT

Parametri ALIGN

Përshkrim
Përcakton se si të përafrohet fusha e imazhit me tekstin ose elementët e tjerë të formës.

Sintaksë

E aplikueshme

Argumentet
Lista 1 e tabelës kuptimi i mundshëm align parametri dhe rezultatin e përdorimit të tij.

Tabela 1. Përdorimi i vlerave të parametrave align
Përafroni vlerën Përshkrim Shembull
absbottom Pjesa e poshtme e figurës është rreshtuar në skajin më të poshtëm linjë aktuale.
absmid Mesi i figurës përafrohet me vijën e mesme të tekstit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
fund ose bazë Kufiri i poshtëm i figurës përafrohet me vijën bazë të linjës së tekstit. Kjo vlerë është vendosur si parazgjedhje. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
majtas Imazhi është i pozicionuar në të majtë të elementit prind. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
e mesme Mesi i figurës përafrohet me vijën bazë të linjës aktuale të tekstit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
drejtë Imazhi është rreshtuar në të djathtë të elementit prind. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
krye teksti Pjesa e sipërme e imazhit është rreshtuar në nivelin më të lartë element teksti linja aktuale. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
krye Kufiri i sipërm i figurës është në linjë me elementin më të lartë të linjës aktuale. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...

Vlera e paracaktuar
fund

Shembulli 2. Përafrimi i një fushe me një imazh




...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...



shënim
Megjithëse të gjitha vlerat e parametrave të rreshtimit mbështeten nga shfletuesit, argumentet absbottom, absmiddle, baseline dhe texttop nuk mbulohen nga specifikimi HTML 4.

Parametri ALT

Përshkrim
Parametri alt vendos tekstin alternativ për fushën e imazhit. Ky tekst ju lejon të merrni informacion teksti rreth një fotografie kur ngarkimi i imazheve është i çaktivizuar në shfletues. Meqenëse imazhet ngarkohen pasi shfletuesi merr informacion rreth tyre, teksti që zëvendëson imazhin shfaqet më herët. Dhe ndërsa ngarkohet, teksti do të zëvendësohet nga një imazh. Shfletuesit shfaqin gjithashtu tekstin alternativ si një këshillë mjeti që shfaqet kur miu rri pezull mbi imazh.

Sintaksë

Argumentet
Çdo të përshtatshme varg teksti... Duhet të mbyllet në thonjëza të dyfishta ose teke.

Vlera e paracaktuar
Nr.

Shembulli 3. Shtimi i tekstit Alt




...
alt = "(! LANG: Paraqisni formularin në server" !}>


Parametri BORDER

Përshkrim
Shfletuesit trajtojnë imazhet e shtuara nëpërmjet etiketës INPUT të ngjashme me imazhet e krijuara duke përdorur Etiketa IMG... Duke përfshirë rreth imazhit, mund të shtoni një kornizë, ngjyra e së cilës përputhet me ngjyrën e tekstit.

Sintaksë

Argumentet
Çdo tërësi numër pozitiv në piksele.

Vlera e paracaktuar
0

Shembulli 4. Shtimi i një kornize në një imazh




...



shënim
Ky cilësim aktualisht mbështetet vetëm nga shfletuesi Netscape, shfletuesit e tjerë e injorojnë atë dhe e japin imazhin pa kufi.

Parametri i Kontrolluar

Përshkrim
Ky parametër përcakton nëse një element i formës, si kutia e kontrollit ose butoni i radios, është i parashënuar. Në rastin e përdorimit të kutive të kontrollit, mund të kontrollohet vetëm një element i grupit, për kutitë e kontrollit (radiobuton) të paktën mund të kontrollohen të gjithë elementët.

Sintaksë

Argumentet
Nr.

Vlera e paracaktuar

Shembulli 5. Shënimi i çelsave




Me të cilat sistemet operative e njihni njëri-tjetrin?

Windows 95/98

Windows 2000

Sistemi X
Linux
X3-DOS


Parametri DISABLED

Përshkrim
Bllokon aksesin dhe modifikimin e fushës së formularit. Në këtë rast, ai shfaqet gri dhe i padisponueshëm për aktivizim nga përdoruesi. Përveç kësaj, një fushë e tillë nuk mund të marrë fokusin duke shtypur tastin Tab, me miun ose në ndonjë mënyrë tjetër. Megjithatë, kjo gjendje e fushës mund të ndryshohet duke përdorur skriptet.

Sintaksë

E aplikueshme
Për të gjithë elementët e formës.

Argumentet
Nr.

Vlera e paracaktuar
Ky opsion është i çaktivizuar si parazgjedhje.









Parametri MAXLENGTH

Përshkrim
Instalon numri maksimal karaktere që mund të futen nga përdoruesi në kutinë e tekstit. Kur arrihet ky numër gjatë telefonimit, nuk është e mundur asnjë hyrje e mëtejshme.

Sintaksë

Argumentet
Çdo numër i plotë pozitiv në karaktere.

Vlera e paracaktuar
Futja e karaktereve nuk është e kufizuar.

Shembulli 7. Kufizimi i numrit të karaktereve në një fushë









Parametri EMRI

Përshkrim
Përcakton një emër unik për elementin e formës. Në mënyrë tipike, ky emër përdoret kur dërgohen të dhëna në server ose për të hyrë në të dhënat e futura të fushës përmes skripteve.

Sintaksë

E aplikueshme
Për të gjithë elementët e formës.

Argumentet
Emri është një grup karakteresh, duke përfshirë numra dhe shkronja. JavaScript është i ndjeshëm ndaj shkronjave të vogla, kështu që kur i referoheni një elementi me emër, përdorni të njëjtën drejtshkrim si për parametrin e emrit.

Vlera e paracaktuar
Nr.

Shembulli 8. Përdorimi i emrit të fushës






Fut tekstin





Parametri READONLY

Përshkrim
Kur parametri vetëm për lexim shtohet në etiketën INPUT, fusha e tekstit nuk mund të modifikohet nga përdoruesi, duke përfshirë futjen e tekstit të ri ose modifikimin e tekstit ekzistues. Përveç kësaj, një fushë e tillë nuk mund të marrë fokusin duke shtypur tastin Tab, me miun ose në ndonjë mënyrë tjetër. Megjithatë, gjendja dhe përmbajtja e fushës mund të ndryshohet duke përdorur skriptet.

Sintaksë

Argumentet
Nr.

Vlera e paracaktuar
Kjo vlerë është e çaktivizuar si parazgjedhje.

Shembulli 9. Fusha vetëm për lexim





Parametri SIZE

Përshkrim
Gjerësia e kutisë së tekstit, e cila përcaktohet nga numri i karaktereve në fontin me një hapësirë. Me fjalë të tjera, gjerësia jepet nga numri i shkronjave ngjitur me të njëjtën gjerësi horizontale. Nëse madhësia e shkronjave ndryshohet duke përdorur stilet, gjerësia gjithashtu ndryshon në përputhje me rrethanat.

Sintaksë

Argumentet
Çdo numër i plotë pozitiv.

Vlera e paracaktuar
20

Shembulli 10. Gjerësia e fushës





Parametri SRC

Përshkrim
Adresa skedar grafik për t'u shfaqur në faqen e internetit në fushën e imazhit. Skedarët më të njohur në Formati GIF dhe JPEG.

Sintaksë

Argumentet
Vlera është e plotë ose rrugë relative në dosje.

Vlera e paracaktuar
Nr.

Shembulli 11. Rruga drejt një skedari grafik



...


Parametri TYPE

Përshkrim
I tregon shfletuesit se çfarë lloji i elementit të formës është.

Sintaksë

Argumentet
Tabela 2 liston vlerën e mundshme të parametrit tip dhe formën rezultuese të fushës së formularit.



Parametri VALUE

Përshkrim
Përcakton vlerën e një elementi formulari që do të dërgohet në server ose do të merret duke përdorur skriptet e klientit. Një çift emër / vlerë dërgohet në server, ku emri specifikohet nga parametri i emrit të etiketës INPUT dhe vlera specifikohet nga parametri i vlerës.

Në varësi të llojit të elementit, parametri i vlerës luan rolin e mëposhtëm:

  • për butonat ( lloji i hyrjes = butoni | rivendosur | paraqesin) vendos një titull teksti mbi to;
  • për fushat e tekstit (lloji i hyrjes = fjalëkalimi | teksti) specifikon vargun e futur më parë. Përdoruesi mund të fshijë tekstin dhe të fusë karakteret e tyre, por kur përdoret në formën e butonit Reset, teksti i përdoruesit pastrohet dhe parametri i futur në vlerë rikthehet;
  • për kutitë e kontrollit dhe butonat e radios (lloji i hyrjes = kutia e kontrollit | radio) identifikon në mënyrë unike çdo element në mënyrë që klienti ose program server mund të përcaktojë pa mëdyshje se cilin artikull ka zgjedhur përdoruesi.

Sintaksë

E aplikueshme
Për të gjithë elementët e formës.

Argumentet
Çdo varg teksti.

Vlera e paracaktuar
Nr.

Shembulli 13. Shtimi i një vlere të fushës



Si mendoni se do të thotë shkurtesa "OS"?

Oficerët

Sistemi operativ

Mizat e mëdha me vija

Llojet e artikujve të rinj

Një nga tiparet e çuditshme të formave HTML është përdorimi i një elementi të vetëm me një emër të paqartë. për të krijuar një sërë kontrollesh, nga kutitë e kontrollit deri te kutitë e tekstit dhe butonat. Pamja specifike e kontrollit varet nga atributi lloji element .

Nëse shfletuesi has lloj i panjohur element , shfletuesi i internetit e trajton atë si një kuti teksti të rregullt. Kjo do të thotë që tre elementët e mëposhtëm trajtohen saktësisht njësoj nga të gjithë shfletuesit:

HTML5 përfiton nga kjo sjellje. Gjegjësisht, në element janë shtuar disa lloje të reja dhe nëse ndonjë shfletues nuk i mbështet ato, do t'i trajtojë si normale kutitë e tekstit... Për shembull, për të futur një adresë emaili, mund të krijoni një fushë lloj i ri email:


Nëse e shihni faqen me këtë kod në një shfletues që nuk e mbështet llojin e emailit për elementin (për shembull, Internet Explorer), kjo fushë do të shfaqet si një fushë e rregullt teksti. Por shfletuesit që mbështesin format HTML5 janë pak më të zgjuar për të bërë sa vijon:

    Ofroni shërbime redaktimi. Për shembull, një shfletues i zgjuar mund të ofrojë një mënyrë për të zgjedhur një adresë emaili nga Libri i adresave dhe ngjiteni në fushën e adresës.

    Parandaloni gabimet e mundshme... Për shembull, shfletuesi mund të mos pranojë shkronja kur shkruan në një fushë numrash, ose mund të mos pranojë data të pavlefshme, ose madje ta detyrojë përdoruesin të zgjedhë data nga një mini-kalendar, gjë që është më e lehtë dhe më e sigurt.

    Kryeni verifikimin. Shfletuesit mund të bëjnë më shumë kontrolle komplekse pasi përdoruesi klikon butonin për të paraqitur të dhënat.

Specifikimi HTML5 nuk u ofron zhvilluesve të shfletuesit ndonjë udhëzim për pikën e parë. Shfletuesit janë të lirë të kontrollojnë shfaqjen dhe modifikimin tipe te ndryshme të dhënat në çfarëdo mënyre të arsyeshme, dhe shfletues të ndryshëm mund të shtojë pajisje të ndryshme të vogla.

Por më e rëndësishme janë aftësitë e kontrollit dhe eliminimit të gabimeve. Si një minimum absolut, një shfletues me mbështetje të formularëve HTML5 duhet të parandalojë paraqitjet e formularëve që përmbajnë të dhëna që shkelin rregullat e llojit të të dhënave. Prandaj, nëse shfletuesi nuk mund të parandalojë gabimet drejtpërdrejt gjatë futjes (sipas artikullit të dytë të listës së mësipërme), ai duhet t'i kontrollojë ato kur përdoruesi përpiqet të dorëzojë formularin (sipas artikullit të tretë).

Fatkeqësisht, jo të gjitha shfletues modern plotësojnë këto kërkesa. Disa njohin lloje të reja të dhënash dhe ofrojnë disa aftësi redaktimi, por jo vërtetim. Shumë shfletues kuptojnë një lloj të dhënash, por jo një tjetër. Shfletuesit celularë janë veçanërisht problematikë në këtë drejtim - ata ofrojnë disa lehtësi modifikimi, por jo aftësi verifikimi.

Tabela më poshtë përmbledh llojet e reja të të dhënave dhe nivelin e mbështetjes së plotë për shfletuesit kryesorë. Mbështetje e plotë do të thotë se në rast të shkeljes së llojit të të dhënave, formulari nuk dorëzohet.

Mbështetje për lloje të reja të të dhënave në shfletuesit kryesorë
Lloji i të dhënave dmth Firefox krom Safari Opera Safari iOS Android
email - 4 10 5 10.6 - -
url - 4 10 5 10.6 - -
kërkimi(pa verifikim)
tel(pa verifikim)
numri - - 10 5 - - -
varg - - 6 5 11 - -
datakoha, data, muaji, java, koha - - 10 - 11 - -
ngjyrë - - - - 11 - -

Ndërsa shfletuesit celularë Safari për iOS dhe Android nuk mbështesin vërtetimin, këta shfletues ofrojnë një lehtësi të konsiderueshme në ofrimin e tastierave të specializuara, kështu që ia vlen të përdorni lloje të personalizuara të të dhënave në aplikacionet për këta shfletues ueb.

Adresat e emailit

Një lloj të dhënat e postës elektronike përdoret për fushat për futjen e adresave të emailit. Në përgjithësi, një adresë emaili përbëhet nga një varg karakteresh (disa karaktere nuk lejohen). Një adresë e vlefshme duhet të përmbajë simbolin @ dhe një pikë, ndërmjet së cilës duhet të ketë të paktën një karakter, dhe pas pikës, të paktën dy karaktere:

Lloji i emailit mbështet atributin të shumëfishta i cili ju lejon të futni adresa të shumta në fushë. Por këto adresa të shumta duken ende si një rresht teksti, i ndarë vetëm me presje.

Mos harroni se vlerat boshe janë duke u testuar. Për të parandaluar një fushë adrese të zbrazët, atributi i kërkuar duhet të futet në elementin e tij.

Url

Një lloj url vlen për fushat e hyrjes së URL-së. Pyetja se çfarë është një URL e vlefshme vazhdon të debatohet ashpër. Por shumica e shfletuesve përdorin një algoritëm vërtetimi relativisht të dobët. Adresa duhet të përmbajë një parashtesë (e cila mund të jetë ose reale, si http: //, ose fiktive, si bonk //) dhe ju lejon të futni hapësira dhe shumicën personazhe të veçanta përveç zorrës së trashë.

Disa shfletues ofrojnë gjithashtu sugjerime të mundshme URL në një listë rënëse, të cilat zakonisht merren nga historia e faqeve të vizituara së fundi nga shfletuesi.

Fushat e kërkimit

Një lloj kërkimi vlen për fushat e kërkimit. Zakonisht ato synohen të shtypen fjalë kyçe, për të cilin më pas kryhet një lloj kërkimi. Ky mund të jetë një kërkim i tërë në internet (si Google), një kërkim i vetëm në faqe ose një procedurë e veçantë kërkimi që shqyrton një katalog informacioni. Në çdo rast, kutia e kërkimit duket dhe sillet pothuajse saktësisht njësoj si një kuti teksti të rregullt.

Në disa shfletues, si Safari, kutia e kërkimit duket paksa e ndryshme dhe ka qoshe të rrumbullakosura. Përveç kësaj, kur përdoruesi fillon të fusë të dhëna në fushën e kërkimit në Shfletuesi Safari ose Chrome, me anën e djathtë fusha shfaq një ikonë të vogël në formë X, duke klikuar mbi të cilën mund të pastroni fushën.

Përveç këtyre dallimeve të vogla, fusha e kërkimit nuk është gjë tjetër veçse një fushë e rregullt teksti. Dallimi kryesor është semantika. Me fjalë të tjera, lloji i të dhënave të kërkimit përdoret për të bërë të qartë emrin e fushës për shfletuesit dhe programet mbështetëse për përdoruesit me aftësi të kufizuara... Ata mund t'i drejtojnë vizitorët në vendndodhjen e dëshiruar në faqe ose të ofrojnë shërbime të tjera, më inteligjente - ndoshta në të ardhmen.

Numrat e telefonit

Lloji i të dhënave tel përdoret për të treguar fushat e hyrjes numrat e telefonit që mund të paraqitet më së shumti formate të ndryshme... Në disa raste, përdoren vetëm numra, në të tjera, hapësira, viza, shenja plus dhe kllapa të rrumbullakëta... Ndoshta kjo mungesë e një formati uniform është arsyeja që standardi HTML5 nuk kërkon që shfletuesit të kontrollojnë numrat e telefonit. Megjithatë, nuk është e qartë pse një fushë si tel nuk refuzon të paktën letrat.

Aktualisht, përfitimi i vetëm i përdorimit të një fushe tel është ofrimi i një specialisti tastierë virtuale për të futur numrat e telefonit në shfletuesit celularë që përmban numra por jo shkronja.

Numrat

HTML5 përcakton dy lloje të të dhënave numerike. Një lloj numri të destinuara për numra të zakonshëm.

Ky lloj i të dhënave ka potencial të dukshëm. Fushat e tekstit të thjeshtë pranojnë fjalë për fjalë gjithçka: numrat, shkronjat, hapësirat, shenjat e pikësimit, etj. Për këtë arsye, një nga detyrat më të zakonshme të vërtetimit është të sigurohet që një vlerë është një numër brenda një diapazoni specifik. Por kur futni të dhëna në një fushë të tipit numër, shfletuesi injoron automatikisht të gjitha karakteret përveç numrave. Më poshtë është një kod shembull për krijimin e një fushe të këtij lloji:


Sigurisht, ka shumë numra që nuk janë të përshtatshëm për çdo lloj të dhënash numerike. Për shembull, në shënimin e mësipërm, lejohet një moshë si 43,000 ose -6 vjeç, e cila është disi në kundërshtim me realitetin. Ky problem zgjidhet me atribute min dhe maksimumi... Kodi i mëposhtëm ofron një shembull të kufizimit të moshës në një interval të arsyeshëm:


Në mënyrë tipike, fushat e numrave pranojnë vetëm numra të plotë dhe thyesat si 30.5 nuk lejohen. (Për më tepër, disa shfletues nuk do të lejojnë as një pikë dhjetore.) Por kjo sjellje mund të ndryshohet gjithashtu duke përdorur atributin hap, që tregon hapin e ndryshimit të numrit (lart ose poshtë). Për shembull, duke vendosur vlerën e hapit në 0.1, mund të futni vlera të tilla si 0.1, 0.2, 0.3 etj. Por provoni të dërgoni formularin me vlerë 0.15 dhe do të merrni mesazhin e njohur të gabimit pop-up. . Vlera e paracaktuar e hapit është 1.


Atributi hap gjithashtu ndikon në mënyrën se si funksionojnë butonat në fushën e numëruesit:

Rrëshqitës

Një tjetër lloj numerik HTML5 është varg... Ashtu si lloji i numrit, ky lloj mund të përfaqësojë vlera të plota dhe thyesore. Gjithashtu mbështet atributet min dhe max për të vendosur gamën e vlerave. Më poshtë është një kod shembull për krijimin e një fushe të këtij lloji:


Dallimi është se si një fushë e intervalit përfaqëson informacionin e saj. Në vend të një numëruesi, si për një fushë të llojit të numrit, shfletuesit inteligjentë shfaqin një rrëshqitës:

Për të vendosur një vlerë të llojit të diapazonit, thjesht duhet të tërhiqni rrëshqitësin në pozicionin e kërkuar midis minimumit dhe vlerat maksimale... Por shfletuesit që mbështesin këtë lloj fushe nuk japin ndonjë informacion të prapambetur rreth vlerë të caktuar... Për të marrë këtë informacion, duhet të shtoni një procedurë JavaScript në shënimin që i përgjigjet ndryshimeve në pozicionin e rrëshqitësit (ndoshta duke trajtuar ngjarjen onChange) dhe më pas shfaq këtë formacion pranë fushës.

Data dhe ora

HTML5 përcakton disa lloje të dhënash që lidhen me kohën. Shfletuesit që mbështesin llojet e datave mund të shfaqin një kalendar të përshtatshëm me zbritje nga i cili përdoruesi mund të zgjedhë datën dhe/ose kohën e dëshiruar. Kjo jo vetëm që heq paqartësitë në lidhje me formatin e saktë të datës, por gjithashtu ju pengon të vendosni aksidentalisht (ose qëllimisht) një datë që nuk ekziston. Shfletues inteligjentë mund të bëjë edhe më shumë, të tilla si mbështetja e integrimit me një kalendar personal.

Një shembull i përdorimit të datave është paraqitur më poshtë:


Tabela më poshtë rendit gjashtë formatet e reja të datës dhe orës HTML5, me një përshkrim të shkurtër:

Shfletuesit që mbështesin llojet e të dhënave për datat dhe kohët gjithashtu mbështesin atributet min dhe max për to, gjë që ju lejon të vendosni datat minimale dhe maksimale për sa kohë që përdorni formatin e duhur të datës. Kjo tregohet në shembullin e mësipërm.

Ngjyrë

Lloji i të dhënave të ngjyrës përdoret për fushat e futjes së ngjyrave. Lloji i të dhënave të ngjyrave është një veçori interesante, megjithëse e përdorur rrallë, e vogël që i lejon një vizitori të faqes në internet të zgjedhë një ngjyrë nga një paletë e ngjashme me paletën me zbritje. redaktues grafik:

Zgjidhni ngjyrën tuaj të preferuar

Disa atribute të pazakonta të elementeve

Standardi HTML5 njeh disa atribute të tjera të përdorura për të kontrolluar shfletuesin kur plotësoni formularët. Jo të gjitha këto atribute mbështeten nga të gjithë shfletuesit. Sidoqoftë, është mirë të eksperimentosh me ta:

Atributi i kontrollit drejtshkrimor

Disa shfletues përpiqen të plotësojnë boshllëqet në njohuritë drejtshkrimore të përdoruesit duke kontrolluar drejtshkrimin e tekstit që ata futin. Problem i dukshëm me këtë shërbim është se jo i gjithë teksti përbëhet nga fjalë të vërteta, dhe lyerja e nënvizave të kuqe me onde mund të shqetësojë shumë shpejt përdoruesit. Për të parandaluar që shfletuesi të kontrollojë drejtshkrimin e tekstit në fushë, vendosni atributin e kontrollit drejtshkrimor në false dhe për ta kontrolluar atë në të vërtetë.

Si parazgjedhje, shfletues të ndryshëm veprojnë ndryshe në lidhje me kontrollin e drejtshkrimit dhe vendosja e atributit të kontrollit të drejtshkrimit rezulton në sjellje të qëndrueshme.

Atributi i plotësimit automatik

Disa shfletues përpiqen të kursejnë kohën e përdoruesit duke sugjeruar, kur futni informacion në një fushë, vlerat që ishin futur më parë në këtë fushë. Kjo sjellje nuk është gjithmonë e dëshirueshme - siç tregohet në specifikimin HTML5, disa informacione mund të jenë konfidenciale (për shembull, kodet për lëshimin e raketave bërthamore;) ose të mbeten të rëndësishme vetëm për një kohë të shkurtër (për shembull, fjalëkalim një herë hyrje në sistemi bankar vetë-shërbim). Për fusha të tilla, vendosni atributin e plotësimit automatik të çaktivizuar për të parandaluar që shfletuesi të kërkojë opsionet e mundshme plotësimi i tekstit të futur në fushë. Dhe për të kryer plotësimin automatik për një fushë specifike, vendosni atributin e saj të plotësimit automatik në aktiv.

Autokorrigjoni dhe autokapitalizoni atributet

Këto atribute përdoren për të kontrolluar aftësitë. rregullim automatik dhe kapitalizimi në disa shfletues celularë, përkatësisht Versionet Safari për iPad dhe iPhone

Atribut i shumëfishtë

Zhvilluesit e uebit përdorën atribute të shumta me element , duke përfshirë llojin e skedarit (për ngarkimin e skedarëve) dhe emailin. Në një shfletues që mbështet këtë atribut, përdoruesi mund të zgjedhë skedarë të ngarkuar të shumtë në të njëjtën kohë ose të ngjisë disa adresa emaili në një fushë.

Përshëndetje për ju, të dashur lexues të faqes së blogut. Sot dua të flas për dikë si Format HTML... Cilido qoftë motori i faqes tuaj (cms), ai patjetër do të përdorë forma të krijuara duke përdorur etiketat Form dhe Input, si dhe atribute dhe parametra Buton, Checked, Value, Checkbox, Radio, Checkbox, Submit ...

Epo, mund t'i shtoni edhe elementë kësaj për të krijuar lista rënëse dhe fusha teksti - Select, Option, Textarea, Label, Fieldset, Legend.

Pse na nevojiten dhe si funksionojnë formularët në faqet moderne të internetit

I njëjti varg i kërkimit të faqes () krijohet duke përdorur këto etiketa, dhe më pas kërkimi në projektin tuaj do të jetë i detyrueshëm. Prandaj, të kuptuarit se si janë rregulluar dhe si punojnë nuk do t'ju dëmtojë aspak punë e suksesshme mbi dizajnin, dhe madje edhe me vetëpromovimi dhe promovimi nuk do të jetë i tepërt.

Pra, me arsyetimin për nevojën e studimit të këtyre elementeve, mendoj se nuk duhet të ketë më pyetje, ndaj është koha që të kalojmë drejtpërdrejt në studimin e opsioneve të tyre të mundshme.

Po, dua t'ju kujtoj gjithashtu se ne kemi shqyrtuar tashmë shumë materiale në temën e gjuhës së shënjimit të hipertekstit, për shembull, tre) dhe.

Në thelb, formularët përbëhen nga elementë, për krijimin e të cilëve, brenda kontejnerit kryesor, nga etiketat Form, futen etiketa të ndryshme - Checked, Value, Checkbox, Radio, Checkbox, Submit etj. Mjafton të vendosim kodin e saj. në çdo vend të përshtatshëm të shabllonit të faqes duke specifikuar, duke përdorur etiketat dhe atributet e tyre, se si duhet të duket.

Kjo mund të jetë një kuti teksti me një buton dërgimi për pyetjen që keni futur, zgjedhje me butonat e radios (ku mund të lini të shtypur vetëm një nga butonat e dhënë), kuti të shumta teksti me një buton dërgimi () dhe më shumë.

Për shembull, në rastin e "kërkimit", duke përdorur atributin Vlera, mund të specifikoni se çfarë saktësisht do të shkruhet në butonin që ndodhet pranë fushës për futjen e një pyetjeje. Të dhënat e futura në formularë duhet të përpunohen më tej në një farë mënyre.

Për shembull, në rastin e feedback-ut, përdoruesi, pasi të plotësojë fushën me emrin e tij, fut e-mail-in e tij dhe tekstin e mesazhit dhe më pas klikon në butonin dërgoni, do të ketë të drejtë të shpresojë të dërgojë të dhëna. nga formulari në E-mailin e autorit të faqes. Por për fat të keq, nuk është e mundur të zbatohet kjo duke përdorur vetëm një gjuhë shënjimi të hipertekstit ().

Për këto qëllime, do t'ju duhet program të veçantë një mbajtës që, pasi përdoruesi të klikojë në butonin e dërgimit, do të marrë të gjitha të dhënat nga fushat e komenteve dhe do t'ia dërgojë pronarit të burimit me email. Cili program do ta bëjë këtë, duhet të specifikoni veten duke përdorur atributin Veprim.

Zakonisht programi i përpunimit është një skrip i shkruar në gjuha PHP... Prandaj, në atributin Veprimi nga etiketa Form, do t'ju duhet të regjistroni shtegun për në skedarin e këtij skripti, i cili ndodhet në serverin e hostit tuaj. Unë do të jap si shembull një abonim në RSS feed blogu im me e-mail:

"name =" titull ">

Pak e pakuptueshme, ndoshta, duket në fillim, por mendoj se gjithçka do të bëhet e qartë me zhvillimin e historisë.

Etiketat e formularit dhe të hyrjes për krijimin e butonave, kutive të kontrollit dhe butonave të radios

Çdo formë duhet të jetë e mbyllur në etiketat hapëse dhe mbyllëse Forma... Ky është një lloj enë për krijimin e tyre. Ky etiketë ka një numër atributesh të detyrueshme dhe opsionale:

  1. Emri - një emër unik që duhet të specifikohet nëse disa forma ueb do të përdoren në skedarin Html ku jeni duke bërë diçka
  2. Veprimi - një atribut i kërkuar që tregon rrugën drejt skriptit, i cili do të marrë të dhëna prej tij për përpunim të mëtejshëm
  3. Metoda - duke përdorur atë ju mund të ndryshoni metodën e transferimit të të dhënave nga kjo formë ueb në skriptin e skedarit mbajtës. Nëse nuk e specifikoni, atëherë si parazgjedhje do të përdoret metoda Get, e cila, në fakt, është menduar kryesisht për variabla dhe mesazhe të shkurtra, dhe, për më tepër, duke transferuar të dhëna në mënyrë të hapur përmes shiritit të adresave të shfletuesit. Për të kaluar të dhënat e formularit në skriptin e mbajtësit, është akoma më mirë të përdoret Metoda POST projektuar posaçërisht për transmetimin e mesazheve me tekst në mënyrë të mbyllur

Le të shqyrtojmë pjesën tjetër të etiketave që ju lejojnë të krijoni një shumëllojshmëri formash në internet. Më i gjithanshëm është Input... Brenda tij duhet të përshkruhet atributi Type, i cili përcakton se çfarë saktësisht do të jetë forma HTML e krijuar me këtë etiketë.

Elementët e mëposhtëm mund të krijohen duke përdorur Input dhe Type:

  1. fushat e tekstit me një rresht (Lloji = "Tekst")
  2. fushat për futjen e një fjalëkalimi (Lloji = "Fjalëkalimi")
  3. kutitë e kontrollit (Lloji = "Kutia e kontrollit")
  4. butonat e radios (Lloji = "Radio")
  5. fushat e fshehura (Lloji = "Fshehur")
  6. butona të rregullt (Lloji = "Buton")
  7. butonat për dërgimin e të dhënave te mbajtësi (Lloji = "Dorëzo")
  8. butonat për sjelljen e webformës në gjendjen e tij origjinale (Lloji = "Rivendos")
  9. fushat për ngarkimin e skedarëve në server (Lloji = "File)
  10. butona me një imazh (Lloji = "Imazhi")

Hyrja nuk ka etiketë fundore. Si do të duket saktësisht forma e internetit e krijuar me të varet tërësisht nga parametri i specifikuar në atributin Type. Nëse Lloji nuk është specifikuar, atëherë një fushë teksti do të krijohet si parazgjedhje.

Shembuj të formave të krijuara në Input me vlera të ndryshme për Type

Atribute të tjera të etiketës Input dhe shembuj të përdorimit të tyre

Le të shohim se për çfarë shërbejnë pjesa tjetër e atributeve:

  1. Emri - nëse të dhënat do të dërgohen në skriptin e programit mbajtës, atëherë duhet të specifikoni parametrin për atributin Emri. Nën këtë emër, të dhënat e dorëzuara nga formulari do të shfaqen në programin e mbajtësit të informacionit.
  2. Madhësia - përdoret për të vendosur madhësinë e fushës së formës së krijuar në internet. Vlera tregohet në numrin e karaktereve që mund të përshtaten në këtë fushë. Nëse Madhësia nuk është e specifikuar, gjerësia e paracaktuar do të jetë 24 karaktere
  3. Maxlength - si parazgjedhje, numri i karaktereve që mund të futen në formën Html nuk është i kufizuar, por duke përdorur Maxlength mund të vendosni këtë kufizim. Nuk do të mund të futni më shumë karaktere sesa do të tregohen në fushë.
  4. Vlera - duke përdorur atë mund të vendosni se çfarë saktësisht do të shkruhet si parazgjedhje në fushë ose në butonin për dërgimin e të dhënave
  5. E zgjedhur është një atribut i flamurit që mund të futet në hyrje për butonat e radios (radio) ose për kutitë e kontrollit (kutia e kontrollit). Në këtë rast, ky buton radio ose kuti kontrolli do të jetë aktiv kur ngarkoni një faqe me një formular ueb (ata tashmë do të kenë një shenjë kontrolli)

Tani le të kalojmë mbi gjithçka shembuj të një formulari me Input... Pamja e fushës së tekstit është e ngjashme me pamjen e fushës për futjen e një fjalëkalimi, kështu që ne do të shqyrtojmë vetëm mundësinë e krijimit të një teksti, për shembull, për të futur një adresë emaili:

Shkruani E-mailin tuaj:

(! GJUHË: Tani le të shohim krijimin e një formulari në internet me butonat e radios (Radio):

A ju pëlqen burimi KtoNanNovenkogo.ru?

Po?
Jo?

Vini re se kjo formë përdor dy herë etiketën Input - një herë për të krijuar secilin nga dy butonat e radios. Për më tepër, secila prej tyre përmban atributin Emri me të njëjtën vlerë (rezultat), dhe vlera Vlera është e ndryshme (PO dhe JO).

Kjo do të thotë se gjatë përpunimit të tij, nëse zgjidhet ndonjë nga butonat e radios, do të dërgohet një variabël, emri i së cilës shkruhet në Emër, por vlera e kësaj variabli do të varet nga cili radio buton është zgjedhur.

Le të shqyrtojmë një shembull të krijimit të një formulari në internet me kutitë e kontrollit (Checkbox):

Cilin motor (s) sajti preferoni?

WordPress
Joomla
SMF

Kutitë e kontrollit ndryshojnë nga butonat e radios nga aftësia për të zgjedhur disa opsione në të njëjtën kohë. Emri përdoret për të përcaktuar në skedarin e mbajtësit se në cilën kuti të kontrollit janë kutitë e kontrollit dhe Vlera vendos vlerën që do t'i dërgohet mbajtësit (nëse Vlera nuk është specifikuar, atëherë teksti që ndodhet pranë kësaj kutie të kontrollit do t'i dërgohet mbajtësit) .

Zgjidh, Option, Textarea, Label, Fieldset, Legend - listat rënëse, zonat e tekstit dhe elementë të tjerë të formave të internetit

Për të filluar, unë dua t'ju kujtoj pak se çfarë janë, në fakt, format e internetit dhe pse ato nevojiten në faqet e faqes. Ato janë krijuar kryesisht për të përsëritur elementet e disponueshme në çdo sistem operativ në një mënyrë miqësore për përdoruesit: butonat, fushat e futjes së tekstit, listat rënëse, kutitë e kontrollit, butonat e radios dhe të ngjashme.

Të gjithë përdoruesit, pa ndonjë shpjegim shtesë, kuptojnë qëllimin e këtyre elementeve dhe nëse shohin butonin Html të formularit, kuptojnë se duhet të klikojnë mbi të.

Për më tepër, të gjithë elementët e tij përbërës (si Select, Option, Textarea, Label, Fieldset, Legend) janë tashmë pjesë pune të përfunduara (kontejnerë), për të futur të cilat do të mjaftojë vetëm përdorimi i etiketës së kërkuar me atributet dhe parametrat e nevojshëm.

Vetë shfletuesit dinë të shfaqin një element të veçantë të një forme ueb. Vërtetë, opsionet për shfaqjen e të njëjtit element të tij në shfletues të ndryshëm mund të ndryshojnë pak nga njëri-tjetri, por, si rregull, nuk është thelbësore.

Se. rezulton se format e ueb-it në Html janë një përpjekje për të transferuar çelësin elementet e përdorur në çdo sistem operativ, në faqet e faqes së internetit. Por pse mund të nevojiten në faqet e sajtit?

Në thelb, për të njëjtin qëllim për të cilin përdoren elementë të ngjashëm në sistemet operative - transferimi i të dhënave nga përdoruesi. Në rastin e formularëve, të dhënat nga përdoruesi transmetohen në server, ku përpunohen nga një program i veçantë (për fat të keq, gjuha e shënjimit të hipertekstit nuk lejon përpunimin e të dhënave).

Megjithëse, të dhënat mund të dërgohen jo vetëm në server, por edhe, për shembull, me e-mail në adresën e specifikuar në atributin Veprim të etiketës Form. Gjatë dërgimit të të dhënave nga Html në E-mail, përdoruesi që plotëson fushat, pasi të shtyp butonin për dërgimin e të dhënave, do të nisë programin e postës që përdoret në kompjuterin e tij si parazgjedhje.

Në këtë rast, etiketa hapëse e Formës duhet të duket diçka si kjo:

Zgjidh dhe Option - etiketat me rënie

Të gjithë elementët e formularit të internetit që krijojnë fusha me lista rënëse formohen në të njëjtën mënyrë. Së pari, kontejneri i kutisë së kombinuar vendoset duke përdorur një etiketë hapëse dhe mbyllëse Html Select. Dhe më pas brenda këtij kontejneri krijohen kontejnerë të veçantë me artikujt (elementet) e kësaj liste. Kjo bëhet duke përdorur etiketat e hapjes dhe mbylljes së opsioneve.

Rezulton diçka si kjo:

Por ky është një ndërtim i thjeshtuar, pasi Zgjidh dhe Option kanë një numër atributesh që përcaktojnë vetitë dhe pamjen e kutisë së listës rënëse të krijuar.

  1. Emri - duhet të specifikoni një emër unik për këtë element të formës së internetit të krijuar duke përdorur Zgjidh. Ky emër do t'i kalohet serverit në programin e mbajtësit të të dhënave si emër për variablin. Vlera e atributit Vlera (e vendosur në Option për çdo artikull) të artikullit të listës rënëse që zgjedh përdoruesi do të kalohet si vlerë e kësaj ndryshore.
  2. Madhësia - duke përdorur atë mund të vendosni numrin e artikujve të shfaqur. Me fjalë të tjera, me ndihmën e Size, ju mund të vendosni lartësinë e listës, të matur në numrin e linjave të shfaqura. Nëse nuk e specifikoni në mënyrë eksplicite vlerën Size në etiketën Select, atëherë do të përdoret vlera e paracaktuar e lartësisë së listës rënëse dhe do të jetë e ndryshme në mungesë ose prani të atributit Multiple në Select:
    1. Nëse Multiple është i pranishëm në Select, atëherë lartësia e listës rënëse në formën e ueb-it do të jetë e barabartë me numrin e elementeve të saj si parazgjedhje. ato. do të shfaqen të gjithë artikujt në listën rënëse me shumë zgjedhje. Shihni një shembull të një shumësi më poshtë. Nëse atributi Size në Select është vendosur në më pak se numri i artikujve, atëherë një shirit lëvizës do të shfaqet në të djathtë.
    2. Nëse nuk ka Multiple në Select, atëherë lartësia e listës rënëse në formularin e internetit do të jetë e barabartë me një rresht si parazgjedhje. ato. vetëm një rresht do të jetë i dukshëm, dhe pjesa tjetër e artikujve do të jenë të disponueshëm vetëm kur shtypni butonin e ashensorit (në të djathtë). Shih shembullin më poshtë
  3. Shumëfish - caktimi i këtij atributi në etiketën Select do t'ju lejojë të krijoni një listë rënëse me aftësinë për të zgjedhur disa artikuj në të njëjtën kohë. Lexoni më shumë rreth këtij atributi më poshtë.

Format dropdown mund të ndahen në dy opsione. Në opsionin e parë, mund të zgjidhni vetëm një element (vijë) të fushës me një listë rënëse, në opsionin e dytë, duke mbajtur Ctrl ose Shift, mund të zgjidhni disa nga artikujt e disponueshëm në të njëjtën kohë.

Në këtë rast, në opsionin e dytë, të dhënat për të gjithë artikujt e zgjedhur do të dërgohen në server. Cila listë rënëse do të krijohet përcaktohet nga prania ose mungesa e atributit Multiple në etiketën Select.

Shumëfishi është specifikuar në Zgjidh pa një parametër, pasi shkruhet thjesht Multiple dhe kaq. Nëse është e pranishme, atëherë do të krijohet një uebform me listë rënëse me mundësinë e zgjedhjes së shumëfishtë (duke mbajtur Ctrl ose Shift).

Një variant i fushës me një listë rënëse, në të cilën do të ketë zgjedhje e shumëfishtë e mundshme, do të duket diçka si kjo:

Në të djathtë është një shembull i një formulari në internet për një listë rënëse me shumë përzgjedhje, e cila bazohet në kodin e mësipërm. Siç mund ta shihni, duke mbajtur Ctrl ose Shift, mund të zgjidhni disa pika në të njëjtën kohë.

Nëse nuk ka atribut Multiple në etiketën Select, atëherë mund të zgjidhet vetëm një artikull i kësaj liste rënëse (rreshti).

Një shembull në të cilin mund të zgjidhet vetëm një artikull mund të shihet këtu:

Etiketa Zgjidhni faqen e internetit të Legjendës së Zgjedhur

Atributet e etiketës së opsionit


Në listën rënëse të krijuar (duke përdorur Zgjidh dhe Option), mund të shtoni diçka si ndarës me titullin e grupeve, të cilat do të ndryshojnë nga pjesa tjetër e artikujve të menusë në stilin e shkronjave.

Për të krijuar një grup nga artikujt në listën rënëse, duhet t'i mbyllni ato në etiketat hapëse dhe mbyllëse të formës Optgroup dhe në etiketën hapëse të Optgroup, shkruani atributin Label, si parametër i të cilit do të duhet të futni emrin e dëshiruar të grupit.

Për shembull si kjo:

Zgjidh Etiketën
Uebsajti i Legjendës së Zgjedhur

Textarea - krijimi i një fushe teksti në një formë

Ekziston edhe një element tjetër i formave të internetit që nuk e kemi marrë parasysh - Textarea (një fushë me aftësinë për të futur tekst me shumë rreshta). Është krijuar duke përdorur etiketën e çiftuar Html Textarea. Për më tepër, në të mund të transferoni tekst në një linjë të re dhe ai do të transmetohet në server duke marrë parasysh transferimet e bëra.

Pra, për të krijuar një fushë teksti me shumë rreshta, duhet të regjistroni hapjen dhe mbylljen e Textarea, dhe midis tyre mund të shtoni tekst që do të jetë i dukshëm kur të ngarkohet faqja me formularin e internetit. Përdoruesi më pas mund ta fshijë këtë tekst dhe të shkruajë të tijin.

Çfarë mund të thoni për veten tuaj?

Atributet e mëposhtme mund të përdoren me Textarea:

  1. Emri - ju vendosni një emër për këtë element të formës së internetit. Ai do t'i kalohet serverit në programin e mbajtësit të të dhënave
  2. Cols - mund ta përdorni për të vendosur gjerësinë e fushës me shumë rreshta të krijuar në karaktere.
  3. Rreshtat - vendosni lartësinë e fushës së krijuar me shumë rreshta (në rreshta). Nëse teksti i futur nga përdoruesi ka më shumë rreshta se lartësia e fushës së tekstit me shumë rreshta, një shirit lëvizës do të shfaqet në të djathtë të fushës në formularin e internetit.
  4. Vetëm për lexim - i ndalon përdoruesit të ndryshojnë ose shtojnë tekstin e tyre në këtë fushë (vetëm për lexim).
  5. I çaktivizuar - përdoruesi, si në rastin e atributit Readonly, nuk do të jetë në gjendje të ndryshojë përmbajtjen e fushës së tekstit në formën e ueb-it, por do të ndryshojë ngjyrën e saj në gri, duke treguar se është joaktive.

Etiketa - për çfarë shërben kjo etiketë Html në formë?

Etiketa html Label ju lejon të zbatoni një veçori shumë interesante në format që disponohen në sistemet operative. Atje, nëse ju kujtohet, për të aktivizuar ndonjë element, nuk është e nevojshme të klikoni mbi të, mund të klikoni në emrin e këtij elementi - ai do të aktivizohet akoma.

Në format e uebit, kjo nuk ndodh si parazgjedhje - duhet të klikoni në vetë elementin e formularit Html për ta aktivizuar atë. Për shembull, duhet të klikoni në një kuti kontrolli në mënyrë që të vendosni një shenjë në të. Klikimi mbi tekstin pranë kutisë së kontrollit nuk do të ketë efekt. Provojeni vetë:

Etiketa
Zgjidhni
ZGJEDHUR

Siç mund ta shihni, klikimi në tekst për të aktivizuar këtë element është i padobishëm - duhet ta klikoni vetë. Kjo është pikërisht gjendja e punëve dhe ka për qëllim të rregullojë etiketën Label. Kjo ju lejon të bëni tekstin pranë elementit të formës së internetit të klikueshëm, gjë që është padyshim do të përmirësojë përdorshmërinë.

Por si të lidhni elementin Html të formës dhe tekstit? Për ta bërë këtë, shtoni një ID me një parametër unik në atribut dhe rrethoni tekstin me hapjen dhe mbylljen e etiketave Label. Dhe kjo nuk është e gjitha. Në etiketën e hapjes Label, duhet të regjistroni atributin For, parametri i të cilit duhet të jetë saktësisht i njëjtë me atributin ID në etiketën Html të elementit të formës. Rezulton diçka si kjo:



Siç mund ta shihni, tani, falë përdorimit të Label, elementët e formës së internetit mund të aktivizohen jo vetëm duke klikuar mbi të, por edhe duke klikuar në tekstin që ndodhet pranë tij.

Fieldset dhe Legend - thyerja e formës në copa

Me siguri e keni parë shpesh se format e mëdha në Html ndahen në grupe (Fieldset), të cilat janë të rrethuara nga një kornizë dhe secili grup i tillë ka titullin e tij (Legend). Kjo bëhet me vetëm dy etiketa: Fieldset dhe Legend. Ata janë të çiftëzuar, d.m.th. ato duhet të kenë një hapje dhe mbyllje pa dështuar.

Pra, për të krijuar një grup pjesësh përbërëse, duhet t'i mbështillni të gjitha këto pjesë në etiketat hapëse dhe mbyllëse të Fieldset. Dhe për të vendosur një titull (Legjendë) për këtë grup, duhet që menjëherë pas hapjes Fieldset të shkruani një strukturë nga Legjenda hapëse dhe mbyllëse, midis së cilës duhet të futni tekstin e titullit të grupit.

Këtu është një shembull i krijimit të grupeve duke përdorur Fieldset dhe Legend:



Paç fat! Shihemi së shpejti në faqet e faqes së blogut

mund të shikoni më shumë video duke shkuar te
");">

Ju mund të jeni të interesuar

Zgjidh, Option, Textarea, Label, Fieldset, Legend - Etiketat Html të formës me zbritje dhe të kutisë së tekstit
Listat në kodin Html - etiketat UL, OL, LI dhe DL
MailTo - çfarë është dhe si të krijoni një lidhje në Html për dërgimin e një emaili
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e hijeve RGB në tabela, Yandex dhe programe të tjera

Artikujt kryesorë të lidhur