në shtëpi › Cilësimet › Format HTML5. Format në HTML5

Format HTML5. Format në HTML5

Deri më tani kemi arritur të krijojmë disa versione interesante të faqes. Ne nuk kemi mbuluar ende formularët ku përdoruesit mund të fusin të dhëna. Formularët përdoren gjerësisht në të gjithë internetin: motorët e kërkimit si Google ose Bing, fushat e statusit në Facebook dhe redaktori i emailit në Gmail ju lejojnë të shkruani ose dërgoni informacion.

Le të bëjmë një formë të thjeshtë që do t'i lejojë përdoruesit të komentojnë artikullin tonë. Ne duam që forma të duket si imazhi i mëposhtëm:

Tani le të zgjedhim përbërësit individualë që përbëjnë formën. Ne do të përdorim të njëjtën theksim me ngjyra për elementët që kryejnë funksione të ngjashme.

Siç mund ta shihni, ngjyra blu tregon emrat ose përshkrimet e secilës fushë. Elementet jeshile tregojnë vendet ku mund të futni tekst me një rresht. Zona portokalli ju lejon të futni pjesë të gjata teksti dhe ngjyra vjollcë përdoret për butonin e paraqitjes së formularit. Ne do të përdorim të njëjtën etiketë për secilin grup.

Për emrat që përdorim . Për fusha të shkurtra - . Për tekste të mëdha do të përdorim . Butonat bëhen duke përdorur <input type="submit">. Ata janë elementët më të njohur HTML që përdoren për të ndërtuar forma në faqet e internetit. Si gjithmonë, ne fillojmë me një shabllon bosh HTML dhe më pas shtojmë më shumë elementë.</p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Forma</title> <link rel="stylesheet" href="main.css"> </head> <body> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>Ne duhet të përfshijmë një etiketë të përshtatshme që i thotë shfletuesit: "Hej, forma fillon këtu!" Kjo është shumë e ngjashme me etiketën <article>për të treguar se ku duhet filluar artikulli. Në HTML ne përdorim etiketën <form>si element i formës.</p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Forma</title> <link rel="stylesheet" href="main.css"> </head> <body> <form> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>Tani duam të shtojmë përshkrimin e parë: "Emri juaj". Duke filluar nga këtu, ne do të shikojmë copat e kodit të përfshira në seksion <form>sepse pjesa tjetër e HTML është tashmë e njohur për ju.</p><p> <form> <label for="nickname">Emri juaj:</label> <input type="text" id="nickname" name="nickname"> </form> </p><p>Këtu kemi një element <label>, i cili përshkruan emrin dhe elementin <input>për të futur tekst. Etiketë <input>përmban tre atribute: shkruani me tekstin e vlerës, emrin me pseudonimin e vlerës dhe id gjithashtu me nofkën e vlerës. Vlera e atributit type do të thotë që kjo është një fushë e shkurtër teksti.</p><p>Më poshtë është se si duket fusha për këto lloje fushash.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/howtocodeinhtml/form-input.png' height="43" width="256" loading=lazy loading=lazy></p><p>Ju do të përdorni në kod <input type="text">për të treguar që përdoruesi mund të shkruajë tekst në këtë fushë. Ju lutemi vini re se fushat e tekstit mund të stilohen duke përdorur CSS. Ne mund të ndryshojmë kornizën, gjerësinë ose distancën midis tekstit dhe kufirit të kutisë së tekstit. Një shembull i përafërt është paraqitur më poshtë.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/howtocodeinhtml/form-input-text.png' height="68" width="374" loading=lazy loading=lazy></p><p>Atributi emri përdoret për të emërtuar secilën fushë. Kjo është e dobishme kur po dërgoni një formular në server, duke ju ndihmuar të përcaktoni se cila vlerë vjen nga cila fushë.</p><p>Vini re gjithashtu marrëdhënien midis vlerës së id dhe vlerës së atributit for in <label> .</p><p> <label for="nickname">Emri juaj:</label> <input type="text" id="nickname" name="nickname"> </p><p>Në atributin for duhet të përdorni ID-në e fushës përshkrimi i së cilës është <label> .</p><p>Le të bëjmë një formë tjetër, këtë herë për fushën e emailit.</p><p> <form> <label for="nickname">Emri juaj:</label> <input type="text" id="nickname" name="nickname"> <label for="user-email">Email-i juaj:</label> <input type="email" id="user-email" name="user-email"> </form> </p><p>I vetmi ndryshim është se atributi tip ka vlerën e emailit. Kuptimi i tij, natyrisht, është se përdoruesi mund të fusë emailin e tij. Ju lutemi vini re se ajo që është shkruar në fushën e emailit duhet të kontrollohet për t'u siguruar që adresa e emailit është e saktë. Nëse kjo është një adresë e pasaktë, shfletuesi do të shfaqë një mesazh gabimi dhe nuk do ta dorëzojë formularin.</p><p>Fusha tjetër për të shtuar është një hapësirë për komente. Për tekste të gjata ne përdorim etiketën <textarea> .</p><p> <form> <label for="nickname">Emri juaj:</label> <input type="text" id="nickname" name="nickname"> <label for="user-email">Email-i juaj:</label> <input type="email" id="user-email" name="user-email"> <label for="content">Përmbajtja:</label> <textarea rows="10" cols="50" id="content" name="content" >

Vini re se kemi përdorur dy atribute të reja: rreshtat dhe kolonat. Atributi i rreshtave përdoret për të vendosur numrin e rreshtave të tekstit që mund të futen në një fushë përpara se të shfaqet një shirit lëvizës. cols përdoret për të përcaktuar numrin e karaktereve në çdo rresht. Provoni t'i ndryshoni vetë vlerat dhe shikoni se si e gjithë fusha zgjerohet ose tkurret në përputhje me rrethanat.

Gjëja e fundit që duhet të shtojmë është një buton për të dorëzuar formularin.

Elementi përmban një tipar tip të barabartë me dorëzimin. Ajo që shkruani në atributin e vlerës do të shfaqet si tekst në buton.

Nga autori: Duhet të dini për atributin tip në fushën e hyrjes. Ky atribut specifikon llojin e hyrjes së formularit që përdoruesi do të shohë. Nëse atributi hiqet, ose përdoret një vlerë e re në shfletuesin e vjetër, etiketa do të vazhdojë të funksionojë. Lloji i parazgjedhur 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, shfletuesit e vjetër do të shfaqin një fushë të thjeshtë teksti.

Formulari ynë i regjistrimit përdor 4 nga 10 llojet që të gjithë i njihni: kutia e kontrollit, teksti, fjalëkalimi dhe dërgoni. Më poshtë është një listë e plotë e llojeve të fushave hyrëse të disponueshme në HTML5:

Specifikimi HTML5 flet për 9 lloje shtesë, me të cilat mund të krijoni elementë specifikë të UI, si dhe të kryeni vërtetimin e të dhënave vendase:

HTML5.1 dhe WHATWG HTML Living Standard përfshijnë katër lloje të tjera të lidhura me datat, 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ë çdo lloj të ri dhe të shohim se si mund të përdoren.

Kërko

Lloji i hyrjes së kërkimit (lloji = "kërkim") është një fushë kërkimi, një hyrje me një rresht për të futur një ose më shumë fraza kërkimi. Nga specifikimi:

"Dallimi midis një lloji teksti dhe një lloji kërkimi është thjesht stilistik: në platformat ku fushat e kërkimit ndryshojnë nga fushat e zakonshme të tekstit, lloji i kërkimit do të detyrojë hyrjen të përputhet me stilet e platformës."

Shumë shfletues stilojnë fushat e kërkimit që t'i ngjajnë shfletuesit ose blloqeve të kërkimit të sistemit operativ. Chrome, Safari, Opera dhe IE kanë shtuar një veçori për të fshirë tekstin duke klikuar në ikonën "x" që 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ë ikonë "x" pothuajse në të gjitha llojet, duke përfshirë tekstin.

Figura 4.5. Fusha e llojit të kërkimit është e stilizuar për t'u ngjan fushave të 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, gjë që kopjon pamjen e fushave të kërkimit në vetë sistemin operativ. Në tabletët me tastierë dinamike, butoni Go shfaqet si një ikonë kërkimi ose fjala "kërko". E gjitha varet nga pajisja. Nëse shtoni një atribut jo standard, një ikonë zmadhuese do të shfaqet në Chrome dhe Opera.

Ju ende mund të përdorni type=”text”, por lloji i ri i kërkimit është një çelës vizual për përdoruesit ku duhet të klikojnë për të gjetur sitin. Për më tepër, 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ë diçka e tillë:

< 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 arsye për të mos e përdorur atë aty ku është e përshtatshme.

Adresat e emailit

Jo çuditërisht, lloji i emailit (type = "email") përdoret për të vendosur një ose më shumë adresa emaili. Ai mbështet atributin e shumëfishtë Boolean, i cili ju lejon të specifikoni adresa të shumta të ndara me presje (me një hapësirë).

Le të ndryshojmë formën tonë, të vendosim type=”email” në fushat e emailit:

Adresa e e-mail-it tim është

< label for = "email" >Adresa e e-mail-it tim është< / label >

< input type = "email" id = "email" name = "email" / >

Nëse ndryshoni llojin nga teksti në email, nuk do të ketë ndryshime vizuale. 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 e pajisjeve me prekje (si p.sh. një telefon iPad ose Android me Chromium) do të shfaqin një tastierë të optimizuar për të futur një adresë emaili. Tastiera do të shfaqë simbolin @, pikën, hapësirën, por pa presje, siç tregohet në figurën 4.6.

Figura 4.6. Fusha e llojit të postës elektronike me tastierë të personalizuar në pajisjen iOS

Në shfletuesit Firefox, Chrome, Opera dhe Internet Explorer 10, nëse futni një email gabimisht, shfaqet një mesazh gabimi. Kjo ndodh kur përpiqeni të dërgoni një formular me tekst që nuk njihet si një ose më shumë adresa. Mesazhi standard i gabimit është paraqitur në figurën 4.7.

Figura 4.7. mesazh gabimi për futjen e gabuar të një adrese emaili në shfletuesit Opera (majtas) dhe Firefox (djathtas).

Shënim: Mesazhet e verifikimit të personalizuar

Nuk ju pëlqen mesazhi standard i gabimit të shfletuesit? Vendosni tuajën duke përdorur .setCustomValidity(errorMsg). SetCustomValidity merr vetëm një parametër - një mesazh gabimi. Nëse keni vendosur mesazhin tuaj të verifikimit, atëherë pas futjes së saktë duhet të pastroni rreshtin me mesazhin (vlera është false) në mënyrë që formulari 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). \"je shumë i ri" ) përndryshe nëse (validityState_object.rangeOverflow) (formControl.setCustomValidity("Ti \"je shumë i vjetër"); ) përndryshe 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(""); )

Një nga kufizimet e formave HTML është se zhvilluesi nuk ka kontroll mbi mënyrën se si shfletuesi i jep kontrollet e formularit. Për shembull, nëse doni të zëvendësoni një kuti kontrolli gri të shurdhër me një kuti të madhe bardh e zi me një shenjë të kuqe të theksuar, nuk do të mund ta bëni. (Një zgjidhje për këtë problem është përdorimi i JavaScript për të krijuar një element me sjellje të ngjashme me kutinë e kontrollit, me fjalë të tjera, elementi ndryshon pamjen e tij kur klikohet.)

Ky kufizim vazhdon në HTML5 dhe zbatohet për të gjitha kontrollet e reja që do të shikojmë. Kjo do të thotë se formularët nuk janë të përshtatshëm për zhvilluesit që duan kontroll të plotë mbi pamjen e faqeve të tyre në përgjithësi dhe kërkojnë kontrolle të personalizuara në veçanti.

Tani që kemi një formë për të punuar, është koha për ta përmirësuar atë me HTML5. Ne do ta fillojmë këtë në seksionet e ardhshme duke shtuar tekstin e shkronjës së udhëzimit të mjetit dhe një fushë të fokusimit automatik.

Shtimi i këshillave të veglave

Në mënyrë tipike, fushat e reja të formularit nuk përmbajnë asnjë të dhënë. Për disa përdorues, ky formular mund të mos jetë plotësisht i qartë, në veçanti, çfarë informacioni duhet të futet në një fushë specifike. Prandaj, shpesh fushat e formularit përmbajnë një shembull të të dhënave që duhet të futen në to. Ky tekst i shkronjave të ngurta quhet gjithashtu "shenjë uji" sepse shpesh shfaqet me një font gri të çelur për ta dalluar atë nga përmbajtja reale, e shtypur. Një shembull i një teksti të tillë të karakterit të egër është paraqitur në figurë:

Në krye, kur fusha është bosh, ajo shfaq tekstin e shkronjave të ngurta. Më poshtë, kur përdoruesi klikon në fushë (duke i dhënë fokusin), teksti i shkronjës zhduket. Nëse përdoruesi kalon në një fushë tjetër pa futur asgjë në të parën, atëherë fusha përsëri mbushet me tekst të shkronjave.

Teksti i karakterit të egër për një fushë krijohet duke përdorur atributin vendmbajtes:

...

Shfletuesit që nuk mbështesin tekstin e shkronjave të ngurta thjesht nuk i kushtojnë vëmendje atributit të mbajtësit të vendndodhjes; Internet Explorer është veçanërisht fajtor për këtë. Për fat të mirë, ky nuk është një problem aq i madh, sepse... Teksti i shkronjave të egra është thjesht një prekje e këndshme dhe nuk kërkohet që forma të funksionojë.

Aktualisht nuk ka asnjë mënyrë standarde dhe të qëndrueshme për të ndryshuar pamjen e tekstit të shkronjave të egra, si p.sh. kursive ose një font specifik ngjyrash. Me kalimin e kohës, zhvilluesit e shfletuesit do të krijojnë mbajtësit e kërkuar për këtë. Por tani për tani, ju ose duhet të përdorni pseudo-klasa CSS specifike të shfletuesit (domethënë -webkit-input-placeholder Dhe -moz-vendmbajtësi), ose pajtohuni me këtë rend të gjërave.

Pseudo-klasa e fokusit, megjithatë, ofron mbështetje më të mirë dhe mund të përdoret për të ndryshuar pamjen e një fushe teksti kur merr fokus. Për shembull, ju mund ta bëni sfondin e një fushe më të errët në mënyrë që të dallohet nga pjesa tjetër:

Hyrja: fokus ( sfond: #eaeaea; )

Fokusimi

Meqenëse formulari është krijuar për t'ju lejuar të futni informacione, gjëja e parë që përdoruesit do të duan të bëjnë pasi ta ngarkojnë atë është futja e atij informacioni. Fatkeqësisht, ata nuk do të mund ta bëjnë këtë derisa të klikojnë në fushën e parë ose ta zgjedhin atë duke përdorur çelësin , duke vendosur kështu fokusin në këtë fushë.

Përdoruesi mund të ndihmohet në këtë duke vendosur fokusin në fushën e dëshiruar fillestare automatikisht. Kjo mund të bëhet duke përdorur JavaScript duke thirrur metodën fokus() të elementit të dëshiruar . Por kjo qasje kërkon një linjë shtesë kodi dhe ndonjëherë mund të shkaktojë mospërputhje të bezdisshme.

Për shembull, përdoruesit veçanërisht të shkathët mund të parandalojnë një thirrje në metodën fokus(), të klikojnë në një fushë tjetër dhe të fillojnë të shkruajnë në të, dhe kur metoda të thirret përfundimisht, përdoruesi do të largohet në mënyrë të vrazhdë nga fusha që ka zgjedhur dhe në fushën e zgjedhur nga metoda. Por nëse shfletuesi mund të kontrollojë fokusin, ai mund të jetë pak më i zgjuar dhe të lëvizë fokusin vetëm nëse përdoruesi nuk ka zgjedhur tashmë një fushë tjetër.

Atributi i ri HTML5 bazohet në këtë ide fokusim automatik, i cili mund të futet në një element ose (por vetëm një element i formës), siç tregohet në shembullin e mëposhtëm:</p> <p> <input id="name" placeholder="Ivan Ivanov" autofocus></p> <p>Niveli i mbështetjes së shfletuesit për atributin e fokusimit automatik është pothuajse i njëjtë me atributin mbajtës të vendndodhjes, që do të thotë se pothuajse të gjithë shfletuesit e mbështesin atë përveç Internet Explorer. Por përsëri, ky problem zgjidhet lehtësisht. Ju mund të kontrolloni nëse një shfletues specifik mbështet atributin e fokusimit automatik duke përdorur mjetin Modernizr (të cilin e diskutuam në artikullin "Mbështetja e shfletuesit për HTML5") dhe, nëse është e nevojshme, ekzekutoni kodin tuaj të fokusimit automatik.</p> <p>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> <p>Për të përcaktuar se cilit element forme i përket etiketa aktuale, duhet të përdorni atributin for të etiketës <label>. 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 nuk mund të përdoret nëse elementi <input>do të jetë brenda elementit <label> .</p> <p>Le të shohim një shembull përdorimi:</p> <span><!DOCTYPE html> <html> <head> <title> </span> Shembull i përdorimit të një etikete <label><span></title> </head> <body> <form> <label </span> for = "yes" > Po</label> <span> </span> <input type = "radio" id = "yes" name = "choice" value = "po" checked > <label for = "no" >Nr</label> <span> </span> <input type = "radio" id = "no" name = "choice" value = "nr" <span>> </form><br> <form> <label> </span> po <input type = "radio" name = "choice2" value = "po" > </label> <span> </span> <label>Nr <input type = "radio" name = "choice2" value = "nr" checked <span>></label> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </span> <p>Në këtë shembull ne:</p> <ul><li>Brenda <i>së pari</i> forma: <ul><li>Postuar <i>dy</i> butonat e radios ( <input type = "radio" >) për të zgjedhur një nga një numër i kufizuar opsionesh. Vini re përsëri se për butonat e radios brenda të njëjtës formë <b>duhet të specifikohet i njëjti emër</b>, kemi specifikuar vlera të ndryshme. Për <i>së pari</i> 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.</li> <li>Vendosen dy elemente <label>, të cilat 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.</li> </ul></li> <li>Brenda <i>e dyta</i> forma: <ul><li>Postuar <i>dy</i> butonat e radios ( <input type = "radio" >) për të zgjedhur një nga një numër i kufizuar opsionesh. Për <i>e dyta</i> 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ë.</li> <li>Vendosen dy elemente <label>, vendosëm butonat tanë të radios brenda tyre. 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).</li> </ul></li> </ul><p>Në shfletues, të dy opsionet (metodat) për përdorimin e etiketave të tekstit duken identike:</p> <h2>Këshillë mjeti për fushat e hyrjes</h2> <p>Le të shohim një shembull përdorimi:</p> <span><!DOCTYPE html> <html> <head> </span> <title>Shembull i përdorimit të atributit vendmbajtës <span></title> </head> <body> <form> </span> Identifikohu: <input <span>type = "tekst" emri = "hyrja" vendmbajtes = <span>"Futni hyrjen tuaj"</span>><br><br> </span> Fjalëkalimi: <input <span>lloji = "fjalëkalimi" emri = "fjalëkalimi" vendmbajtës = <span>"Fut fjalëkalimin tuaj"</span>><br> <button type = "submit" > </span> Me tutje <span></button> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </span> <p>Në këtë shembull, ne specifikuam për elementin <input>me llojin e tekstit (një fushë teksti me një rresht) dhe llojin e fjalëkalimit (fushën e fjalëkalimit), një sugjerim teksti për përdoruesin (atributi mbajtës i vendndodhjes) që përshkruan vlerën e pritur për hyrjen.</p> <p>Rezultati i shembullit tonë:</p> <h2>Pyetje dhe detyra mbi temën</h2> <p>Përpara se të kaloni në temën tjetër, plotësoni detyrën praktike:</p> <ul><li>Duke përdorur njohuritë që keni fituar, krijoni formularin e mëposhtëm të porosisë:</li> </ul><p><i>Një nuancë: në fushat ku pritet përzgjedhja, duhet të jetë e mundur të zgjidhet duke klikuar në tekst, dhe jo vetëm në vetë elementin.</i></p> <p>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.</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="single-popular"> <div class="single-popular-tit col-lg-12">Të njohura në kategorinë:</div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Si të kombinoni shtresat në Photoshop në një ose t'i kombinoni ato në një grup Si të kombinoni disa shtresa në Photoshop"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Si të bashkoni shtresat në Photoshop në një ose t'i kombinoni ato në një grup ...</div> <a href="https://innovakon.ru/sq/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Si të kombinoni shtresat në Photoshop në një ose t'i kombinoni ato në një grup Si të kombinoni disa shtresa në Photoshop">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Transferimi i kontakteve në një telefon të ri android"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Transferimi i kontakteve në një telefon të ri android</div> <a href="https://innovakon.ru/sq/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Transferimi i kontakteve në një telefon të ri android">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Samsung Galaxy rindizet vetë - Zgjidhjet Galaxy note 4 rindizet vetë"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Samsung Galaxy rindizet vetë - Zgjidhjet e Galaxy Note...</div> <a href="https://innovakon.ru/sq/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Samsung Galaxy rindizet vetë - Zgjidhjet Galaxy note 4 rindizet vetë">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Karakteristikat kryesore të Kaspersky Rescue Disk"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Karakteristikat kryesore të Kaspersky Rescue Disk</div> <a href="https://innovakon.ru/sq/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Karakteristikat kryesore të Kaspersky Rescue Disk">lexoni</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div> <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Artikujt e fundit</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">MacBook nuk do të lidhet me wifi MacBook nuk do të shohë...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Si të fitoni para në WebMoney</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Tableti "Supra": vlerësimet e klientëve</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Vendndodhjet e anijeve në kohë reale</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Programet më të mira për Android Regjistroni thirrjet nga...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Heqja e jo-ndjekësve në Twitter</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Lidhja e internetit në një laptop: të gjitha të mundshme...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV është flamuri i ri...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">lexoni</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy loading=lazy> <div class="footer-contacts-tit">innovakon.ru <br>Telefonat celularë dhe komunikimet</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Redaksia e projektit</a></li> <li><a href="">Reklamimi në faqen e internetit</a></li> </ul> <ul> <li><a href="https://innovakon.ru/sq/feedback.html">Kontaktet</a></li> <li><a href="https://innovakon.ru/sq/sitemap.xml">Harta e faqes</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Telefonat celularë dhe komunikimet</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Lëvizni në krye">Top</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> <script type="text/javascript">  </script><br> <br> </body> </html>

	grupi i funksionit Mesazhet e gabimit (formControl) ( var validityState_object = formControl . vlefshmëria ; nëse (validityState_object . vleraMungon) ( 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 . stepMismatch ) ( Format Format HTML janë kontrolle të thjeshta HTML që përdoren për të mbledhur informacion nga vizitorët e faqes në internet. Këto përfshijnë fusha teksti për futjen e të dhënave nga tastiera, listat për zgjedhjen e të dhënave të paracaktuara, kutitë e kontrollit për vendosjen e parametrave, etj. Ka mënyra të panumërta për të përdorur formularët HTML dhe nëse keni shfletuar internetin për vetëm disa ditë, atëherë pa dyshim , i përdori ato për qëllime të ndryshme - nga regjistrimi në një forum ose marrja e një kuti postare deri te shikimi i kursit të këmbimit ose blerja e mallrave në një dyqan online. Format HTML kanë ekzistuar që në ditët më të hershme të gjuhës HTML dhe ato nuk kanë ndryshuar pak që atëherë, pavarësisht nga disa përpjekje serioze. Zhvilluesit e standardeve të uebit kanë punuar për standardin për disa vite. XFormat, i cili supozohej të zëvendësonte format HTML, por dështoi në të njëjtën mënyrë si standardi XHTML 2. Ndërsa standardi XForms lejonte që disa probleme të zgjidheshin lehtësisht dhe elegante, ai gjithashtu kishte të meta të rëndësishme. Për shembull, kodi XForms ishte shumë voluminoz dhe puna me të kërkonte një njohuri të mirë të standardit XML. Por pengesa më e madhe ishte se standardi XForms nuk ishte i pajtueshëm me format HTML në asnjë mënyrë. Kjo do të thoshte që zhvilluesit do të duhej të zhyten në ujërat e paeksploruara të modelit të ri pa asnjë pajisje ndihmëse flotacioni, por vetëm me besim të verbër dhe guxim të madh. Por për shkak se zhvilluesit kryesorë të shfletuesve nuk u mërzitën kurrë të zbatonin XForms në produktet e tyre për shkak të kompleksitetit dhe përdorimit të ulët të tij, komuniteti i zhvillimit të uebit nuk bëri kurrë hap. Standardi HTML5 ka një qasje të ndryshme. Në vend që të fillojë nga e para si XForms, ai përmirëson modelin ekzistues të formës HTML. Kjo do të thotë që format HTML5 mund të funksionojnë në shfletues të vjetër, vetëm pa këmbanat dhe bilbilat e reja. Format HTML5 ju lejojnë gjithashtu të përfitoni nga veçoritë e reja që zhvilluesit po përdorin tashmë sot. Këto aftësi janë më të arritshme dhe nuk kërkojnë shkrimin e faqeve të JavaScript ose përdorimin e mjeteve JavaScript të palëve të treta. Çfarë është forma? Ka shumë mundësi që të keni punuar më parë me forma. Por nëse jo, ose e keni harruar shumë këtë temë, materiali i mëposhtëm do t'ju lejojë të merrni informacionin e nevojshëm për një studim më të thelluar të kësaj fushe të dizajnit të uebit. Forma e internetitështë një grup fushash teksti, listash, butonash dhe kontrollesh të tjera të aktivizuara me klikime përmes të cilave një vizitor i faqes mund të sigurojë një ose një lloj tjetër informacioni. Formularët janë kudo në internet - falë formularëve, ne mund të krijojmë llogari të postës elektronike, të shfletojmë dhe blejmë produkte nga dyqanet online, të bëjmë transaksione financiare dhe shumë më tepër. Forma më e thjeshtë është fusha e vetme e tekstit të motorëve të kërkimit si Google: Të gjitha format bazë të uebit funksionojnë në të njëjtën mënyrë. Përdoruesi fut informacione të caktuara dhe më pas klikon një buton për të dërguar informacionin e futur në serverin e internetit. Pas mbërritjes në serverin e internetit, ky informacion përpunohet nga një aplikacion, i cili më pas ndërmerr hapin e duhur tjetër. Përpara se të dërgojë faqen e re përsëri në shfletues, programi i serverit mund të hyjë në bazën e të dhënave për të marrë ose ruajtur informacionin. Kompleksiteti i këtij procesi është se ka qindra mënyra të ndryshme për të zbatuar një aplikacion serveri që përpunon të dhënat e marra nga formulari. Disa zhvillues mund të jenë të kënaqur me skriptet rudimentare për të manipuluar të dhënat që rezultojnë, ndërsa të tjerë mund të përdorin mjete të nivelit më të lartë që paketojnë të dhënat e formës në objekte të rregullta programi. Por në çdo rast, detyra para këtyre aplikacioneve është, në përgjithësi, e njëjtë - të ekzaminoni të dhënat nga formulari, të kryeni disa veprime me të dhe më pas, bazuar në rezultatet e marra, të dërgoni një faqe të re në shfletues. Modernizimi i një Forme HTML Tradicionale Mënyra më e mirë për të mësuar format HTML5 është të merrni një formë tipike moderne dhe ta përmirësoni atë. Më poshtë është një formë që do ta përdorim si shembull. Shënimi i kësaj forme është jashtëzakonisht i thjeshtë. Nëse keni punuar me formularë më parë, nuk do të shihni asgjë të re këtu. Para së gjithash, i gjithë kodi i formës përmbahet në element . Elementi mban së bashku të gjitha kontrollet e formularit, të quajtura gjithashtu fusha. Përveç kësaj, ai gjithashtu i tregon shfletuesit se ku t'i dërgojë të dhënat pasi përdoruesi të klikojë butonin dërgo duke dhënë URL-në në atribut veprim. Por nëse e gjithë puna do të bëhet në anën e klientit nga skriptet JavaScript, atëherë atributi i veprimit thjesht mund të vendoset në #. Një formë e projektuar mirë ndahet në pjesë logjike duke përdorur elementin . Çdo seksioni mund t'i caktohet një emër, për të cilin përdoret elementi . Lista e mëposhtme tregon shënimin e formularit: Ju lutemi plotësoni formularin. Fushat e kërkuara janë shënuar* Informacioni i Kontaktit Emri * Telefoni Email * Informata personale Mosha * Kati Listoni cilësitë personale Zgjidhni kafshët tuaja të preferuara Zebra Koshak Anakonda Njerëzore Elefanti Antilopë Pëllumb Gaforrja Shtoni disa stilime CSS: Trupi ( font-familja: "Palatino Linotype", serif; gjerësia maksimale: 600 px; mbushja: 0px 30px; ) h1 ( margin-fund: 0px; ) p ( margin-lart: 0px; ) grup fushash (margin-fund: 15x mbushje: 10 px; ) em ( pesha e shkronjave: bold; stili i shkronjave: normale; ngjyra: #f00; ) futja: fokusi ( sfondi: #eaeaea; ) hyrja, zona e tekstit ( gjerësia: 249 px; ) zona e tekstit ( lartësia: 100 px; ) zgjidhni ( gjerësia : 254 px; ) hyrje (gjerësia: 10 px; ) hyrje (gjerësia: 170 px; mbushje: 10 px;) Dhe këtu është rezultati: Si me të gjitha format, shumica e punës në shembullin tonë është bërë nga elementi universal , i cili mbledh të dhëna dhe krijon kutitë e kontrollit, butonat e radios dhe listat. Për të futur një rresht teksti, përdorni elementin , dhe për disa - elementi </b>; element <select>krijon një listë rënëse. Një përmbledhje e këtyre dhe kontrolleve të tjera të formularit është paraqitur në tabelë:</p> <table class="new_table" border="2" cellpadding="15">Kontrollet e formularit <tr><th>Elementi i kontrollit</th> <th width="200">Elementi HTML</th> <th>Përshkrim</th> </tr><tr><td><i>Fusha e tekstit me një rresht</i> </td> <td><input type="text"><br><input type="password"> </td> <td>Shfaq një fushë teksti me një rresht për futjen e tekstit. Nëse atributi i tipit është caktuar në fjalëkalim, karakteret e dhëna nga përdoruesi shfaqen si yll (*) ose shënues pikash ( )</td> </tr><tr><td><i>Fusha e tekstit me shumë rreshta</i> </td> <td><textarea>...	Fusha e tekstit në të cilën mund të futni disa rreshta teksti
Kutia e zgjedhjes		Shfaq një fushë të kutisë së kontrollit që mund të kontrollohet ose pastrohet
Ndërro		Shfaq një çelës - një element kontrolli në formën e një rrethi të vogël që mund të ndizet ose fiket. Zakonisht krijohet një grup butonash radio me të njëjtin emër atribut vlerë, në mënyrë që vetëm njëri prej tyre mund të zgjidhet
Butoni		Shfaq një buton standard të klikimit të miut. Një buton dërgo gjithmonë mbledh informacion nga formulari dhe e dërgon atë për përpunim. Një buton si imazhi bën të njëjtën gjë, por ju lejon të futni një imazh në vend të tekstit në buton. Një buton si rivendosja pastron fushat e formularit nga të dhënat e futura nga përdoruesi. Por një buton i llojit të butonit në vetvete nuk bën asgjë. Për ta bërë shtypjen e tij të kryejë ndonjë veprim, duhet të shtoni një skript JavaScript për të
Listë		Shfaq një listë nga e cila përdoruesi mund të zgjedhë vlerat. Për secilën vlerë të listës shtojmë një element