Shembuj të butonave HTML. Kur të përdoret elementi i butonit

24.06.2019 Vlerësime

Përshkrim

Etiketa HTML

Disabled: Çaktivizon aftësinë për të klikuar butonin. Kjo mund të përdoret kur butoni duhet të aktivizohet kur plotësohen disa kushte (për shembull, kur zgjidhet një kuti kontrolli, etj.), do të jetë e mundur të aktivizohet butoni duke përdorur JavaScript. Vlerat për atributin boolean të çaktivizuar mund të vendosen në mënyrat e mëposhtme: forma: Tregon se cilës formë i përket ky buton. Vlera është një ose më shumë identifikues formash të ndara me hapësira. Numri i identifikuesve në vlerën e atributit varet nga numri i formave që i përkasin butonit:

Butoni është jashtë elementit të formës, por është pjesë e formularit.

Shënim: Atributi nuk mbështetet në Internet Explorer.

Formaction: Përcakton adresën ku të dhënat e formularit dërgohen kur klikohet butoni. Nëse një atribut veprimi është specifikuar për një formë, atëherë atributi formacion do të anashkalojë vlerën e tij:

Atributi formacion përdoret vetëm për butonat me atributin type="submit".

Shënim: Atributi nuk mbështetet në IE9 dhe më herët.

Formenctype: Përcakton se si të dhënat e formularit duhet të kodohen përpara se të dërgohen në server. Përdoret vetëm për butonat me atribut type="submit". Vlerat e mundshme të atributeve:

aplikacioni/x-www-form-urlencoded- të gjitha karakteret janë të koduara përpara dërgimit (vlera e parazgjedhur).
shumëpjesësh/formë-të dhëna- karakteret nuk janë të koduara (kjo metodë përdoret kur përdoren forma që kanë një skedar kontrolli të ngarkimit).
tekst/i thjeshtë- hapësirat konvertohen në karakterin "+", por karakteret nuk janë të koduara.

Nëse një atribut enctype është specifikuar për një formë, atëherë atributi formenctype do të anashkalojë vlerën e tij.

Shënim: Atributi nuk mbështetet në IE9 dhe më herët.

Formmethod: Përcakton se cila metodë HTTP do të përdoret kur dorëzohen të dhënat e formularit. Përdoret vetëm për butonat me atribut type="submit". Vlerat e mundshme të atributeve:

marr- të dhënat e formularit shtohen në fund të URL-së: URL?name=value?name=value
postim- dërgon të dhënat e formularit si HTTP pas transaksionit

Nëse një formë ka një atribut metodë, atëherë atributi formmethod do të anashkalojë vlerën e tij.

Shënim: Atributi nuk mbështetet në IE9 dhe më herët.

Formnovalidate: Përcakton që të dhënat e formularit nuk do të vërtetohen. Përdoret vetëm për butonat me atribut type="submit". Vlerat për atributin boolean të fokusimit automatik mund të vendosen në mënyrat e mëposhtme: Nëse atributi novalidate është specifikuar për një formë, atëherë atributi formnovalidate do të anashkalojë vlerën e tij.

Shënim: Atributi nuk mbështetet në IE9 dhe më herët, dhe në Safari.

Formtarget: Përcakton se ku do të shfaqet përgjigja pas dorëzimit të formularit. Përdoret vetëm për butonat me atribut type="submit". Vlerat e mundshme të atributeve:

_bosh- hap përgjigjen në një dritare ose skedë të re.
_vetja- hap përgjigjen në të njëjtin direktorium ku ndodhet lidhja (vlera e parazgjedhur).
_prind- hap përgjigjen në dritaren prind.
_lart- hap përgjigjen në gjerësinë e plotë të dritares.
emri i kornizës- hap përgjigjen në iframe, emri i së cilës është specifikuar si vlerë.

Nëse një formë ka një atribut objektiv, atëherë atributi formtarget do të anashkalojë vlerën e tij.

Shënim: Atributi nuk mbështetet në IE9 dhe më herët.

Emri: Përcakton një emër për elementin

Shënim: disa artikuj

Shënim: Gjithmonë specifikoni atributin tip për butonat sepse shfletues të ndryshëm mund të kenë vlera të ndryshme të paracaktuara për atributin tip.

Vlera: Vlera e butonit që do të dërgohet në server ose do të lexohet duke përdorur skriptet.

Shënim: nëse përdorni element . Ndërsa shfletuesit e tjerë do të dërgojnë përmbajtjen e atributit të vlerës.

Etiketë

Kërkohet etiketa mbyllëse.

WAI ARIA

vlera e paracaktuar e rolit: butonin

Vlerat e vlefshme të roleve:

kutia e kontrollit
lidhje
artikull i menusë
kutia e kontrollit të menusë
menuitemradio
opsion
radio
kaloni

Atributet

fokusimi automatik - Vendos butonin për të përqendruar pasi të jetë ngarkuar faqja.
i çaktivizuar - Bllokon aksesin dhe modifikimin e elementit.
forma - Lidh një formë dhe një buton.
formation - Vendos adresën në të cilën dërgohen të dhënat e formularit kur klikohet butoni.
formenctype - Si kodohen të dhënat e formularit.
formmetoda - Përcakton metodën për paraqitjen e të dhënave të formularit.
formnovalidate - Anulon vërtetimin e formularit.
formtarget - Hap rezultatin e paraqitjes së një formulari në një dritare ose kornizë të re.
emri - Përcakton një emër unik për butonin.
lloji - Vendos llojin e butonit: normal; për të dërguar të dhënat e formularit në server; për të pastruar formularin.
vlera - Vlera e butonit që do të dërgohet në server ose do të lexohet duke përdorur skriptet.

fokusim automatik

Atributi i fokusimit automatik specifikon që butoni merr fokusin pasi të jetë ngarkuar faqja. Një buton i tillë mund të shtypet menjëherë pa transferuar fokusin në të, për shembull, duke përdorur tastierën.

Sintaksë

vlerat

Vlera e paracaktuar

me aftësi të kufizuara

Bllokon aksesin te butoni dhe modifikimin e tij. Në këtë rast, ai shfaqet në gri dhe nuk është i disponueshëm për aktivizim nga përdoruesi. Për më tepër, një butoni i tillë nuk mund të fokusohet duke shtypur tastin Tab, duke përdorur miun ose ndryshe. Megjithatë, kjo gjendje e butonit mund të ndryshohet përmes skripteve. Vlera e butonit të çaktivizuar nuk i kalohet serverit.

Sintaksë

vlerat

Vlera e paracaktuar

Si parazgjedhje, kjo vlerë është e çaktivizuar.

formë

Lidh një buton me një formular sipas ID-së së tij. Një lidhje e tillë është e nevojshme kur butoni nuk ndodhet brenda elementit

, për shembull, kur e krijoni atë në mënyrë programore.

Sintaksë

vlerat

Identifikuesi i formës (vlera e atributit id të elementit ).

Vlera e paracaktuar

formimi

Përcakton adresën e mbajtësit të formularit - ky është programi që merr të dhënat e formularit dhe kryen veprimin e dëshiruar me të. Atributi formacion është i ngjashëm në veprim me atributin e veprimit të elementit. . Nëse specifikoni veprimin dhe formimin në të njëjtën kohë, atëherë kur klikohet butoni, atributi i veprimit shpërfillet dhe të dhënat dërgohen në adresën e specifikuar në formacion.

Sintaksë

vlerat

formenctipi

Vendos se si kodohen të dhënat e formularit kur dërgohen te serveri. Zakonisht specifikohet në mënyrë eksplicite në rastin kur fusha përdoret për të dërguar një skedar (lloji i hyrjes = "skedar"). Ky atribut ka të njëjtin efekt si atributi enctype i elementit. .

Sintaksë

vlerat

aplikacioni/x-www-form-urlencoded - Hapësirat zëvendësohen me + , karakteret si shkronjat ruse kodohen nga vlerat e tyre heksadecimal (për shembull, %D0%9F%D0%B5%D1%82%D1%8F në vend të Petya).
shumëpjesësh/formë-të dhëna - Të dhënat nuk janë të koduara. Kjo vlerë përdoret kur ngarkoni skedarë.
tekst/i thjeshtë - Hapësirat zëvendësohen me + , shkronjat dhe karakteret e tjera nuk janë të koduara.

Vlera e paracaktuar

aplikacioni/x-www-form-urlencoded

metodë e formës

Atributi i tregon shfletuesit se cila metodë duhet të dërgojë të dhënat e formularit në server.

Sintaksë

vlerat

Ka dy metoda - GET dhe POST.

GET - Kjo metodë është krijuar për të kaluar të dhënat e formularit direkt në shiritin e adresave si çifte emër=vlerë që shtohen në adresën e faqes pas një pikëpyetjeje dhe të ndara me një ampersand (& karakter). Adresa e plotë, për shembull, do të jetë http://site.ru/doc/?name=Vasya&password=pup . Sasia e të dhënave në metodë është e kufizuar në 4 KB.
POST - Dërgon të dhëna në server në një kërkesë të shfletuesit, sasia e të dhënave të dërguara kufizohet vetëm nga cilësimet e serverit.

formnovalidate

Anulon vërtetimin e integruar të të dhënave të futura nga përdoruesi në formular për korrektësi kur klikohet butoni. Ky kontroll bëhet automatikisht nga shfletuesi kur dorëzon formularin në server për fushat , , si dhe nëse elementi ka një model ose atribut të kërkuar .

Sintaksë

vlerat

Vlera e paracaktuar

Si parazgjedhje, ky atribut është i çaktivizuar.

formtarget

Përcakton emrin e kornizës në të cilën rezultati i kthyer nga mbajtësi i formularit do të ngarkohet si një dokument HTML.

Sintaksë

vlerat

Vlera është emri i kornizës i specifikuar nga atributi i emrit të elementit . Nëse vendoset një emër që nuk ekziston, do të hapet një skedë e re. Më poshtë mund të specifikohen si vlera të rezervuara.</p> <ul><li>_blank - Ngarkon faqen në një skedë të re të shfletuesit.</li> <li>_self - Ngarkon faqen në skedën aktuale.</li> <li>_parent - Ngarkon faqen në kornizën prind; nëse nuk ka korniza, atëherë kjo vlerë funksionon si _self.</li> <li>_top - Anulon të gjitha kornizat dhe ngarkon faqen në një dritare të plotë të shfletuesit; nëse nuk ka korniza, atëherë kjo vlerë funksionon si _self.</li> </ul><h3>emri</h3> <p>Specifikon një emër unik butoni. Në mënyrë tipike, ky emër përdoret kur dërgoni vlerën e butonit në server, ose kur aksesoni butonin përmes skripteve.</p> <p><b>Sintaksë</b></p><p> <button name="<имя>">...</button> </p><p><b>vlerat</b></p> <p>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 në atributin e emrit.</p> <p><b>Vlera e paracaktuar</b></p> <h3>lloji</h3> <p>Përcakton llojin e butonit, i cili vendos sjelljen e tij në formë. Butonat e llojeve të ndryshme nuk ndryshojnë në pamje, por secili buton i tillë ka funksionet e veta.</p> <p><b>Sintaksë</b></p><p> <button type="button | reset | submit">...</button> </p><p><b>vlerat</b></p> <ul><li>buton - Një buton i rregullt.</li> <li>rivendosja - Një buton për të pastruar të dhënat e formularit të futur dhe për t'i kthyer vlerat në gjendjen e tyre origjinale.</li> <li>Submit - Butoni për dërgimin e të dhënave të formularit në server.</li> <li>menu - Hap menynë e krijuar nga elementi <menu> .</li> </ul><p><b>Vlera e paracaktuar</b></p> <ul><li>paraqesin</li> </ul><h3>vlerë</h3> <p>Përcakton vlerën e butonit që do t'i dërgohet serverit. Një çift emër=vlerë dërgohet në server, ku emri jepet nga atributi emri i elementit <button>, dhe vlera është atributi i vlerës. Vlera mund të përputhet me tekstin në buton ose të jetë e pavarur. Atributi vlera përdoret gjithashtu për të hyrë në të dhëna përmes skripteve.</p> <p><b>Sintaksë</b></p><p> <button value="<tekst>">...</button> </p><p><b>vlerat</b></p> <p>Çdo varg teksti.</p> <p><b>Vlera e paracaktuar</b></p> <h2>Specifikimet</h2> <h2>Shembuj</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>BUTONI</title> </head> <body> <p style="text-align: center"> <button>Butoni me tekst</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Butoni i modelit</button> </p> </body> </html> <p>Butonat janë një nga elementët më të njohur të ndërfaqes dhe shpesh përdoren brenda formularëve, për shembull, për të dërguar informacionin e futur në formular në server.</p><p>Butonat në një faqe interneti mund të krijohen në disa mënyra - duke përdorur elementin <input>ose element <button> .</p><p>Mendoni së pari të shtoni një buton nëpërmjet <input>dhe sintaksa e saj.</p><p> <input type="button" value="Teksti"> </p><p>Atributet e butonit janë renditur në tabelë. një.</p><p>Krijimi i një butoni tregohet në shembullin 1.</p><p>Shembulli 1: Shtimi i një butoni</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Butoni</title> </head> <body> <form> <p><input type="button" value="Më shtyp butësisht"></p> </form> </body> </html> </p><p>Vini re se të gjitha hapësirat në etiketën e butonit numërohen, në krahasim me tekstin e thjeshtë HTML, kështu që çdo numër hapësirash mund të përfshihet, gjë që përfundimisht do të ndikojë në gjerësinë e butonit. Por është më e saktë, natyrisht, të vendosni pamjen e butonit përmes CSS. Rezultati i shembullit është paraqitur në Fig. një.</p><p>Oriz. 1. Pamje me butona</p><p>Ekzistojnë një numër rregullash të detyrueshme për butona të tillë:</p><ul><li><input> <a> ;</li><li><input>nuk mund të futet brenda një butoni <button> ;</li><li>vlera e atributit të vlerës nuk mund të jetë bosh.</li> </ul><p>Mënyra e dytë për të krijuar një buton bazohet në përdorimin e elementit <button>. Në veprimin e saj, ajo i ngjan rezultatit të marrë me ndihmën e <input>. Por ndryshe nga ai, ai ofron opsione të avancuara për krijimin e butonave. Për shembull, mund të vendosni çdo element HTML në një buton të tillë, duke përfshirë imazhet dhe tabelat. Në fig. 2 tregon lloje të ndryshme të butonave të marrë duke përdorur <button> .</p><p><img src='https://i1.wp.com/webref.ru/assets/images/html5-css3/form-button-02.png' width="100%" loading=lazy loading=lazy></p><p>Oriz. 2. Butonat e krijuar me <button></p><p>Sintaksa për krijimin e një butoni të tillë është si më poshtë.</p><p> <button>Mbishkrimi në buton</button> </p><p>Atributet janë të renditura në tabelë. 1, por ndryshe nga butoni <input>atributi vlera përcakton vetëm vlerën e dërguar në server, jo etiketën në buton. Nëse dëshironi të shfaqni një imazh në butonin, atëherë <img>shtuar brenda <button>, siç tregohet në shembullin 2.</p><p>Shembulli 2. Figura në butonin</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Butoni</title> </head> <body> <form> <p><button>Butoni me tekst</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Butoni i modelit</button></p> </form> </body> </html> </p><p>Ky shembull tregon se si të krijoni një buton të rregullt me tekst, si dhe një buton me tekst dhe imazh. Madhësia e butonit varet nga përmbajtja <button>, por hapësirat shpërfillen, pra thjesht shtohet numri i tyre, si në rastin e përdorimit <input>, gjerësia e butonit nuk mund të ndryshohet.</p><p>Për <button>Ekzistojnë gjithashtu një sërë kufizimesh:</p><ul><li><button>ju nuk mund të futni lidhje <a> ;</li><li>një <button>nuk mund të futet brenda një tjetri.</li> </ul><h2>Butoni i dorëzimit</h2><p>Një buton i veçantë Submit përdoret për të dërguar të dhëna në server. Pamja e tij nuk ndryshon nga butonat e zakonshëm, por kur klikohet, kalon te trajtuesi i formularit në adresën e specifikuar nga atributi i veprimit të elementit. <form>. Programi mbajtës merr të dhënat e futura nga përdoruesi në fushat e formularit, kryen manipulimet e nevojshme me to dhe më pas e kthen rezultatin në formën e një dokumenti HTML. Çfarë saktësisht bën mbajtësi varet nga autori i faqes, për shembull, kjo teknologji përdoret kur krijohen sondazhe, forume, teste dhe shumë gjëra të tjera.</p><p>Sintaksa për krijimin e një butoni Submit varet nga elementi i përdorur. <input>ose <button> .</p><p> <input type="submit"> <button type="submit">Mbishkrimi në buton</button> </p><p>Atributet janë të njëjta si për butonat e zakonshëm (shembulli 3), por vlera e atributit të vlerës tani mund të hiqet, sepse shfletuesi do të zëvendësojë tekstin më vete, ai ndryshon në varësi të shfletuesit. Pra, Firefox shkruan "Submit request", IE - "Submission request", Opera dhe Chrome - "Submit". Vetë teksti i etiketës nuk ndikon në funksionalitetin e butonit.</p><p>Shembulli 3: Dërgimi i të dhënave në server</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Butoni</title> </head> <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body> </html> </p><h2>Butoni i rivendosjes</h2><p>Kur klikoni butonin Reset, të dhënat e formularit kthehen në vlerat e tyre origjinale. Si rregull, ky buton përdoret për të pastruar informacionin e futur në fushat e formularit. Për forma të mëdha, është më mirë të mos përdorni fare butonin Reset, në mënyrë që të mos klikoni gabimisht, sepse atëherë do të duhet të plotësoni përsëri formularin.</p><p>Sintaksa për krijimin e butonit në fjalë është e thjeshtë dhe e ngjashme me butonat e tjerë.</p><p> <input type="reset"> <button type="reset">Mbishkrimi në buton</button> </p><p>Shembulli 4 tregon një formë me një fushë të vetme teksti që tashmë përmban tekst të futur paraprakisht duke përdorur atributin e vlerës së elementit <input>. Pas ndryshimit të tekstit dhe klikimit në butonin "Pastro", vlera e fushës do të rikthehet dhe mbishkrimi "Fut tekstin" do të shfaqet përsëri në të.</p> Etiketat HTML <h2>Rëndësia dhe zbatimi</h2> <p>Etiketa HTML <button>përdoret për të vendosur butonin. Brenda etiketës <button>mund të vendosni si tekst ashtu edhe imazh të formatuar. Ky është ndryshimi kryesor midis këtij elementi dhe butonave të krijuar duke përdorur etiketën <input>(me tipin e atributit = "buton" ).</p> <p>Gjithmonë specifikoni për etiketën <button>tip tipi i atributit = "button" nëse elementi përdoret si buton i rregullt. Nëse jeni duke përdorur etiketën <button>brenda një formulari HTML, mund të zbuloni se shfletuesit më të vjetër mund të paraqesin vlera të ndryshme kur dorëzojnë formularin. <b>Në këtë rast, rekomandohet përdorimi i elementit <input>për të dorëzuar formularët HTML.</b></p> <h2>Mbështetja e shfletuesit</h2> <table class="tableTag"><tr><th class="tw">Etiketë</th><th></th><th></th><th><br>Opera</th><th></th><th><br>IExplorer</th><th><br>buzë</th> </tr><tr><td><button> </td><td class="tyes">po</td><td class="tyes">po</td><td class="tyes">po</td><td class="tyes">po</td><td class="tyes">po</td><td class="tyes">po</td> </tr></table><h2>Atributet</h2> <table class="tableTag"><tr><th>atribut</th><th>Kuptimi</th><th class="tatt">Përshkrim</th> </tr><tr><td> </td><td>fokusim automatik</td><td>Një atribut Boolean që specifikon se butoni duhet të marrë automatikisht fokusin kur faqja ngarkohet.</td> </tr><tr><td>me aftësi të kufizuara</td><td>me aftësi të kufizuara</td><td>Është një atribut boolean dhe specifikon që butoni duhet të çaktivizohet (jo i disponueshëm për ndërveprimin e përdoruesit).</td> </tr><tr><td> </td><td>forma_id</td><td>Përcakton një formë (element <form>) të cilit i përket butoni. Vlera duhet të jetë identifikuesi i formës () në të njëjtin dokument.</td> </tr><tr><td> </td><td>URL</td><td>Përcakton URL-në e skedarit që do të përpunojë (kontrollojë) hyrjen pas dorëzimit të formularit (vetëm për <button <span>shkruani="submit"></span>). </td> </tr><tr><td> </td><td><span>aplikacioni/x-www-form-urlencoded <br>shumëpjesësh/formë-të dhëna <br>tekst/i thjeshtë</span> </td><td>Përcakton se si duhet të kodohen të dhënat e formularit kur dorëzohen në server (vetëm për <button <span>shkruani="submit"></span>). </td> </tr><tr><td> </td><td>marr <br>postim</td><td>Përcakton se cilën metodë HTTP të përdoret kur dorëzohen të dhënat e formularit (vetëm për <button <span>shkruani="submit"></span>). </td> </tr><tr><td> </td><td>formnovalidate</td><td>Tregon që vërtetimi i të dhënave të futura nga përdoruesi në formular nuk është kryer (vetëm për <button <span>shkruani="submit"></span>). </td> </tr><tr><td> </td><td><span>_bosh <br>_vetja <br>_prind <br>_lart <br>emri i kornizës</span> </td><td>I tregon shfletuesit se ku të shfaqë përgjigjen e marrë pas dorëzimit të formularit (skeda, dritarja aktuale ose korniza). Vlera e paracaktuar është _self - shfaq përgjigjen në dritaren aktuale. Përdoret vetëm për <button <span>shkruani="submit"></span>. </td> </tr><tr><td>emri</td><td>emri</td><td>Përcakton një emër për butonin që kalon kur formulari dorëzohet.</td> </tr><tr><td>lloji</td><td>butonin <br>rivendosur <br>paraqesin</td><td>Përcakton llojin e butonit. <b>Vlera e paracaktuar <b>paraqesin.</b> </b> </td> </tr><tr><td>vlerë</td><td>teksti</td><td>Përcakton vlerën fillestare për butonin.</td> </tr></table><h2>Shembull përdorimi</h2> <span><!DOCTYPE html> <html> <head> <title> </span> Etiketë <button><span></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;" > <b> </span> Butoni 1 <span></b> </button><br><br> <button type = "button" name = "button2" style = "width: 80px; height:50px" > <img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy loading=lazy> </button><br><br> <button type = "button" name = "button3" style = "width: 80px; height:50px;" > <i> </span> Butoni 3 <span></i> </button><br><br> </body> </html> </span> <p>Në këtë shembull, ne kemi vendosur <i>3 butona</i>, të cilëve iu dhanë emra unikë me atributin e emrit dhe, duke përdorur stilet e brendshme CSS, specifikuan një gjerësi ( <i>gjerësia</i>) me një madhësi prej 80 pikselësh dhe një lartësi ( <i>lartësia</i>) me një madhësi prej 50 pikselësh:</p> <ul><li>Teksti brenda <i>butoni i parë</i> e kemi formatuar me shkronja të zeza (etiketë <b>). <b>Vini re se teksti që vendosim brenda etiketës shfaqet në vetë butonin.</b></li> <li>Brenda <i>butonin e dytë</i> element <img>kemi postuar <i>*.png</i> imazh (me sfond transparent). Me atributin alt, vendosim një tekst alternativ për imazhin, në rast se nuk ngarkohet për ndonjë arsye (atributi i detyrueshëm), vendosim shtegun relativ të imazhit me atributin src (atributi i detyrueshëm), gjerësia (gjerësia) dhe atributet lartësia (lartësia) vendosin përmasat e imazhit në 40 me 40 piksele. Ju lutemi vini re se atributet që vendosin madhësinë nuk kanë nevojë të specifikojnë njësi matëse, ndryshe nga stilet CSS, sepse atributet mund të specifikohen vetëm në piksel.</li> <li>Teksti brenda <i>butonin e tretë</i> ne formatuam italic (etiketë <i>).</li> </ul><p>Rezultati i shembullit tonë:</p> <p>Shembulli i mëposhtëm tregon përdorimin e atributeve që ju lejojnë të mos vërtetoni të dhënat e futura nga përdoruesi dhe t'i tregoni shfletuesit se ku të shfaqë përgjigjen e marrë pas dorëzimit të formularit.</p> <span><!DOCTYPE html> <html> <head> </span> <title>Përdorimi i atributeve të etiketës formnovalidate dhe formtarget HTML <button><span></title> </head> <body> <form id = "myForm" > </span> <input <span>type = "text" name = "ulogin" placeholder = "(!LANG:Emri juaj" >!} <br> <span> </span> <textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Pyetja juaj" ></textarea><br> <button formtarget = _blank formnovalidate > </span> dërgoni <span></button> <span> </span> </form> </body> </html> </span> <p>Në këtë shembull, brenda formularit, kemi krijuar dy elemente</p> <p>Udhëzim</p> <p>Përdorimi i përshkruesit <input>shton një buton në faqe me emrin e emrit dhe vlerën e vlerës. Atributi name i jep elementit një identifikues unik dhe përdoret për të përcaktuar vlerën e tij nga mbajtësi i formularit. Vlera tërheq tekstin e kërkuar në krye. Për shembull, për të krijuar një buton, shkruani kodin e mëposhtëm:</p><p><form><br><input type = “button” name = “имя” value = “Отправка”><br></form></p><p>Kjo komandë do të krijojë një buton me emrin buton me "Dërgo" të shkruar në të.</p> <p>Përshkruesi <button>krijon një të ngjashme <input>elementi, megjithatë, ofron shumë opsione shtesë që një zhvilluesi i uebit mund t'i duhet të përdorë. Po, mbaroi <button>ju mund të mbivendosni një tabelë ose imazh, tekst të pasur ose një listë. Për shembull:</p><p><button form = “id формы” formaction = “адрес” formmethod = “метод пересылки данных” name = “имя” type = “тип” value = “значение”><img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy loading=lazy><b>Teksti</b></button></p> <p>Atributi i formës specifikon ID-në e formularit që do të përdoret për të përpunuar të dhënat. Formaction vendos mbajtësin e formularit në një pjesë tjetër të dokumentit, skedarit ose sajtit. Formmethod është përgjegjës për përcaktimin e metodës së përcjelljes së të dhënave. Emri vendos emrin e butonit, lloji - lloji (normal, për dërgimin e të dhënave ose për pastrimin e formularit). Vlera - vlera që do të lexohet nga skriptet. Butoni do të shfaqë një imazh me adresën dhe tekstin e specifikuar.</p> <p>Për të krijuar një buton që do të përpunojë të dhënat e futura, duhet të specifikoni llojin e duhur në atributin:</p><p><input type = “submit”></p><p>Për të krijuar një buton që pastron hyrjen e përdoruesit, vendosni llojin = "rivendosje".</p> <p>shënim</p> <p>Përshkruesi <input>duhet të përdoret si përmbajtje e etiketës <form>. Butoni <button>mund të shfaqet jashtë një formulari, por për të përpunuar të dhënat dhe për të kryer një veprim specifik, ai duhet gjithashtu të jetë i mbyllur midis <form></form>.</p> <p>Për të organizuar ndërveprimin e faqes me vizitorin në faqet e saj, është e nevojshme të sigurohen mundësi për futjen e informacionit dhe dërgimin e tij në server. Për ta bërë këtë, gjuha e përshkrimit të faqes në internet HTML (Gjuha e shënjimit të HyperText - "gjuha e shënjimit të hipertekstit") ofron një grup të veçantë etiketash. Cilat janë këto etiketa dhe si, duke i përdorur ato, për të krijuar një faqe interneti <b>formë</b> të plotësohet nga vizitori?</p> <p>Do t'ju duhet</p> <ul><li>Njohuri bazë të gjuhës HTML</li> </ul><p>Udhëzim</p> <p>Etiketat HTML që i tregojnë shfletuesit se ku duhet të jepet faqja <b>formë</b> dhe elementet e tij vendosen në kodin ndërmjet etiketës hapëse<.form>dhe mbyllja<./form>. Etiketa hapëse duhet të përmbajë informacion të detyrueshëm - atribute që tregojnë se ku saktësisht duhet të dërgohet informacioni nga formulari dhe me çfarë metode duhet bërë. Përveç kësaj, nëse faqja përmban më shumë se një formular, atëherë secila duhet të ketë emrin e vet. Me gjithë këtë në mendje, etiketa hapëse mund të duket kështu: <form name="thisFormName" method="POST" action=">Këtu, atributi "emër" është emri i formularit, atributi "metod" specifikon metodën e paraqitjes (metodat POST ose GET janë të mundshme) dhe atributi "veprim" duhet të specifikojë URL-në e skriptit në server në të cilin të dhënat nga formulari duhet të dërgohen. Nëse adresa nuk është e specifikuar, atëherë të dhënat do të transferohen në URL-në e së njëjtës faqe. Si rregull, faqe të tilla ndërvepruese formohen nga skriptet universale, të cilat gjithashtu ofrojnë marrjen / përpunimin e të dhënave nga e njëjta faqe.</p> <p>Pas etiketës hapëse të formularit, duhet të vendosim elementë të formularit që janë më të përshtatshëm për përdoruesin për të futur llojin e dëshiruar të të dhënave. Elementë të tillë mund të jenë: Fusha e futjes së tekstit: <input name="textField" type="text" value="Kjo është një fushë teksti" />Këtu, si në të gjitha etiketat e tjera "input", atributi "type" specifikon llojin e elementit, "emri" është emri që do të dërgohet së bashku me të dhënat e futura në këtë fushë dhe "vlera" është vlera e paracaktuar që do të plotësohet në fushën e hyrjes së testit. -- Fusha: <input name="passField" type="password" />--Fusha për "shëno me një shenjë kontrolli": <input name="checkBox" type="checkbox" value="1" checked="checked" />Këtu prania e atributit "checked" , që si parazgjedhje do të jetë kutia e kontrollit.-- Një grup butonash radioje, nga të cilët duhet të zgjidhni vetëm një: <input name="radioBox" type="radio" value="0" checked="checked" /><br><input name="radioBox" type="radio" value="1" />Ju lutemi vini re se të gjithë elementët e grupit duhet të kenë të njëjtin emër (emër), por vlera (vlera) të ndryshme. Vetëm një vlerë do t'i kalohet - asaj që shënon vizitori ose asaj që është përzgjedhur si parazgjedhje (nga atributi i zgjedhur).--Lista rënëse: <select name="selectField"><br> <option value="vlera 1">Fusha një</option><br> <option value="vlera 2" selected="selected">Fusha dy</option><br> <option value="vlera 3">Fusha e tretë</option><br></select> Këtu, çdo etiketë "opsioni" është në një listë rënëse. Sa i përket grupit të butonave të radios, vetëm një vlerë do të kalojë nga fusha e zgjedhur nga vizitori, ose e zgjedhur si parazgjedhje (këtu - atributi i zgjedhur).--Fusha e tekstit me shumë rreshta: <textarea name="textRows" cols="50" rows="5">Këtu është një multiline</textarea> Atributet "cols" dhe "rows" vendosin gjerësinë (në karaktere) dhe lartësinë (në rreshta) të fushës së futjes së tekstit.--Fusha e fshehur: <input name="hiddenField" type="hidden" value="fushë e fshehur" />Kjo fushë nuk do të jetë e dukshme për mbushësin <b>formë</b>, por gjithashtu do të dërgohet së bashku me pjesën tjetër të të dhënave.--Fusha e përzgjedhjes së skedarit për të dërguar: <input name="fileField" type="file" />Dërgimi i një skedari kërkon që në hapje <b>formë</b> etiketa kishte atribute shtesë. Së paku, duhet të shtohet etiketa "enctype". Për shembull, si kjo: <form name="thisFormName" method="POST" enctype="multipart/form-data" action=">-- Përveç kësaj, <b>formë</b> ju mund të vendosni butona - për të fshirë futur në <b>formë</b> të dhënat: <input name="resetButton" type="reset" value="Qartë" />dhe për të dorëzuar formularin e plotësuar në server: <input name="submitButton" type="submit" value="dërgoni" />Vlera e specifikuar në atributin "vlerë" për butonat është etiketa në vetë butonin.</p> <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="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Artikujt kryesorë të lidhur</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/kak-otklyuchit-pin-na-samsunge-kak-snyat-parol-s-sim-karty-esli-zabyli.html"> <div class="img_container"><img src="/uploads/df477aacd77363a28ee5768f0c703608.jpg" border="0" alt="Si të hiqni fjalëkalimin nga karta SIM nëse keni harruar kodin pin" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Si të hiqni fjalëkalimin nga karta SIM nëse keni harruar kodin pin</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/otklyuchit-pin-kod-na-samsunge-otklyuchenie-proverki-pin-cod-na-ustroistvah.html"> <div class="img_container"><img src="/uploads/7ec39c0dd1f96afc45d7d219e0b04e56.jpg" border="0" alt="Çaktivizimi i verifikimit të kodit pin në pajisje" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Çaktivizimi i verifikimit të kodit pin në pajisje</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/ussd-komandy-deistvuyushchie-v-seti-velkom-otpusk-solnce-more-poleznye.html"> <div class="img_container"><img src="/uploads/72d648721fde7fb86a2bf3d06038ff78.jpg" border="0" alt="Komandat USSD që veprojnë në rrjetin Velcom" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Komandat USSD që veprojnë në rrjetin Velcom</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Kategoritë:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/sq/category/programs/">Programet</a></li> <li class=""><a href="https://bumotors.ru/sq/category/safety/">Siguria</a></li> <li class=""><a href="https://bumotors.ru/sq/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/sq/category/iron/">Hekuri</a></li> <li class=""><a href="https://bumotors.ru/sq/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/sq/category/vkontakte/">Në kontakt me</a></li> <li class=""><a href="https://bumotors.ru/sq/category/errors/">Gabimet</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2022 bumotors.ru. Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ.</span> </div> </div> </div> </div> </body> </html>