Primjeri HTML gumba. Kada koristiti element dugmeta

24.06.2019 Recenzije

Opis

HTML oznaka

Onemogućeno: Onemogućava mogućnost klikanja na dugme. Ovo se može koristiti kada dugme treba da postane aktivno kada su ispunjeni određeni uslovi (na primer, kada je izabrano polje za potvrdu itd.), biće moguće aktivirati dugme pomoću JavaScript-a. Vrijednosti za onemogućeni boolean atribut mogu se postaviti na sljedeće načine: obrazac: Označava kojem obliku pripada ovo dugme. Vrijednost je jedan ili više identifikatora obrasca odvojenih razmacima. Broj identifikatora u vrijednosti atributa ovisi o broju obrazaca koji pripadaju gumbu:

Dugme je izvan elementa obrasca, ali je dio obrasca.

Napomena: Atribut nije podržan u Internet Exploreru.

Formaction: Određuje adresu na koju se šalju podaci obrasca kada se klikne na dugme. Ako je atribut akcije određen za obrazac, tada će atribut formacije nadjačati njegovu vrijednost:

Atribut formaction se koristi samo za dugmad s atributom type="submit".

Napomena: Atribut nije podržan u IE9 i ranijim verzijama.

Formenctype: Određuje kako se podaci obrasca trebaju kodirati prije slanja na server. Koristi se samo za dugmad sa atributom type="submit". Moguće vrijednosti atributa:

application/x-www-form-urlencoded- svi znakovi su kodirani prije slanja (podrazumevana vrijednost).
multipart/form-data- znakovi nisu kodirani (ovaj metod se koristi kada se koriste formulari koji imaju kontrolnu datoteku za otpremanje).
tekst/običan- razmaci se konvertuju u znak "+", ali znakovi nisu kodirani.

Ako je atribut enctype specificiran za obrazac, tada će atribut formenctype nadjačati njegovu vrijednost.

Napomena: Atribut nije podržan u IE9 i ranijim verzijama.

Formmethod: Određuje koja će se HTTP metoda koristiti prilikom slanja podataka obrasca. Koristi se samo za dugmad sa atributom type="submit". Moguće vrijednosti atributa:

dobiti- podaci obrasca se dodaju na kraju URL-a: URL?name=value?name=value
pošta- šalje podatke obrasca kao HTTP nakon transakcije

Ako obrazac ima atribut metode, tada će atribut formmethod nadjačati njegovu vrijednost.

Napomena: Atribut nije podržan u IE9 i ranijim verzijama.

Formnovalidate: Određuje da podaci obrasca neće biti provjereni. Koristi se samo za dugmad sa atributom type="submit". Vrijednosti za autofokus boolean atribut mogu se postaviti na sljedeće načine: Ako je atribut novalidate specificiran za obrazac, tada će atribut formnovalidate nadjačati njegovu vrijednost.

Napomena: Atribut nije podržan u IE9 i ranijim verzijama, kao ni u Safariju.

Cilj obrasca: Određuje gdje će se odgovor prikazati nakon slanja obrasca. Koristi se samo za dugmad sa atributom type="submit". Moguće vrijednosti atributa:

_blank- otvara odgovor u novom prozoru ili kartici.
_self- otvara odgovor u istom direktoriju u kojem se nalazi link (podrazumevana vrijednost).
_parent- otvara odgovor u nadređenom prozoru.
_top- otvara odgovor u punoj širini prozora.
frame_name- otvara odgovor u iframe-u čije je ime navedeno kao vrijednost.

Ako obrazac ima ciljni atribut, tada će atribut formtarget nadjačati njegovu vrijednost.

Napomena: Atribut nije podržan u IE9 i ranijim verzijama.

Ime: Određuje ime za element

Napomena: neke stavke

Napomena: Uvijek navedite atribut tipa za dugmad jer različiti pretraživači mogu imati različite zadane vrijednosti za atribut tipa.

Vrijednost: Vrijednost dugmeta koja će biti poslana na server ili pročitana pomoću skripti.

Napomena: ako koristite element . Dok će drugi pretraživači poslati sadržaj atributa value.

Tag

Završna oznaka je obavezna.

WAI ARIA

zadana vrijednost uloge: dugme

Važeće vrijednosti uloge:

polje za potvrdu
veza
menuitem
menuitemcheckbox
menuitemradio
opcija
radio
prekidač

Atributi

autofokus - Postavlja dugme da dobije fokus nakon što se stranica učita.
onemogućeno - Blokira pristup i modifikaciju elementa.
form - povezuje obrazac i dugme.
formacija - Postavlja adresu na koju se podaci obrasca šalju kada se klikne na dugme.
formenctype - Kako su podaci obrasca kodirani.
formmethod - Određuje metodu za slanje podataka obrasca.
formnovalidate - Otkazuje provjeru valjanosti obrasca.
formtarget - Otvara rezultat slanja obrasca u novom prozoru ili okviru.
ime - Određuje jedinstveno ime za dugme.
type - Postavlja tip dugmeta: normalno; za slanje podataka obrasca na server; da obrišete obrazac.
value - Vrijednost dugmeta koja će biti poslata na server ili pročitana pomoću skripti.

autofokus

Atribut autofokusa određuje da dugme dobija fokus nakon što se stranica učita. Takvo dugme se može odmah pritisnuti bez prebacivanja fokusa na njega, na primjer, pomoću tipkovnice.

Sintaksa

Vrijednosti

Zadana vrijednost

onemogućeno

Blokira pristup dugmetu i njegovu modifikaciju. U ovom slučaju, prikazan je sivom bojom i nije dostupan za aktivaciju od strane korisnika. Osim toga, takvo dugme ne može primiti fokus pritiskom na tipku Tab, korištenjem miša ili na neki drugi način. Međutim, ovo stanje dugmeta se može promeniti putem skripti. Vrijednost onemogućenog dugmeta se ne prosljeđuje serveru.

Sintaksa

Vrijednosti

Zadana vrijednost

Podrazumevano, ova vrijednost je onemogućena.

formu

Povezuje dugme sa formom po njegovom ID-u. Takva veza je neophodna kada se dugme ne nalazi unutar elementa

, na primjer, kada ga kreirate programski.

Sintaksa

Vrijednosti

Identifikator obrasca (vrijednost atributa id elementa ).

Zadana vrijednost

formiranje

Određuje adresu rukovaoca obrasca - ovo je program koji prima podatke obrasca i izvršava željenu radnju s njima. Atribut formacije je po akciji sličan atributu akcije elementa. . Ako navedete radnju i formiranje u isto vrijeme, onda kada se klikne na dugme, atribut akcije se zanemaruje i podaci se šalju na adresu navedenu u formaciji.

Sintaksa

Vrijednosti

formenctype

Postavlja kako se podaci obrasca kodiraju kada se šalju na server. Obično se eksplicitno navodi u slučaju kada se polje koristi za slanje datoteke (input type="file"). Ovaj atribut ima isti učinak kao atribut enctype elementa. .

Sintaksa

Vrijednosti

application/x-www-form-urlencoded - Razmaci su zamijenjeni sa + , znakovi poput ruskih slova su kodirani svojim heksadecimalnim vrijednostima (na primjer, %D0%9F%D0%B5%D1%82%D1%8F umjesto Petya).
multipart/form-data - Podaci nisu kodirani. Ova vrijednost se koristi prilikom učitavanja datoteka.
tekst/običan - razmaci se zamjenjuju sa +, slova i drugi znakovi nisu kodirani.

Zadana vrijednost

application/x-www-form-urlencoded

formmethod

Atribut govori pretraživaču koji metod da pošalje podatke obrasca na server.

Sintaksa

Vrijednosti

Postoje dvije metode - GET i POST.

GET – Ova metoda je dizajnirana da prosljeđuje podatke obrasca direktno u adresnu traku kao parove ime=vrijednost koji se dodaju adresi stranice nakon upitnika i razdvoje ampersandom (&). Puna adresa će, na primjer, biti http://site.ru/doc/?name=Vasya&password=pup . Količina podataka u metodi je ograničena na 4 KB.
POST - Šalje podatke serveru u zahtjevu pretraživača, količina poslanih podataka ograničena je samo postavkama servera.

formnovalidate

Poništava ugrađenu provjeru valjanosti podataka koje je korisnik unio u obrazac za ispravnost kada se klikne na dugme. Ovu provjeru pregledač automatski vrši prilikom slanja obrasca na server za polja , , kao i da li element ima uzorak ili traženi atribut .

Sintaksa

Vrijednosti

Zadana vrijednost

Podrazumevano, ovaj atribut je onemogućen.

formtarget

Određuje ime okvira u koji će se rezultat koji je vratio obrađivač obrasca učitati kao HTML dokument.

Sintaksa

Vrijednosti

Vrijednost je ime okvira specificirano atributom imena elementa . Ako je postavljeno nepostojeće ime, otvorit će se nova kartica. Sljedeće se može navesti kao rezervirane vrijednosti.</p> <ul><li>_blank - Učitava stranicu u novu karticu pretraživača.</li> <li>_self - Učitava stranicu u trenutnu karticu.</li> <li>_parent - Učitava stranicu u nadređeni okvir; ako nema okvira, onda ova vrijednost radi kao _self.</li> <li>_top - Otkazuje sve okvire i učitava stranicu u punom prozoru pretraživača; ako nema okvira, onda ova vrijednost radi kao _self.</li> </ul><h3>ime</h3> <p>Određuje jedinstveno ime dugmeta. Obično se ovo ime koristi kada se vrijednost dugmeta šalje na server ili kada se dugmetu pristupa putem skripti.</p> <p><b>Sintaksa</b></p><p> <button name="<имя>">...</button> </p><p><b>Vrijednosti</b></p> <p>Ime je skup karaktera, uključujući brojeve i slova. JavaScript je osjetljiv na velika i mala slova, pa kada se pozivate na element po imenu, koristite isti pravopis kao u atributu name.</p> <p><b>Zadana vrijednost</b></p> <h3>tip</h3> <p>Određuje tip dugmeta, koji postavlja njegovo ponašanje na obrascu. Tipke različitih tipova se ne razlikuju po izgledu, ali svako takvo dugme ima svoje funkcije.</p> <p><b>Sintaksa</b></p><p> <button type="button | reset | submit">...</button> </p><p><b>Vrijednosti</b></p> <ul><li>dugme - Uobičajeno dugme.</li> <li>reset - Dugme za brisanje unesenih podataka obrasca i vraćanje vrijednosti u prvobitno stanje.</li> <li>submit - Dugme za slanje podataka obrasca na server.</li> <li>meni - Otvara meni kreiran od strane elementa <menu> .</li> </ul><p><b>Zadana vrijednost</b></p> <ul><li>submit</li> </ul><h3>vrijednost</h3> <p>Određuje vrijednost dugmeta koja će biti poslata serveru. Par ime=vrijednost se šalje na server, gdje je ime dato atributom name elementa <button>, a vrijednost je atribut value. Vrijednost može odgovarati tekstu na gumbu ili biti nezavisna. Atribut value se također koristi za pristup podacima putem skripti.</p> <p><b>Sintaksa</b></p><p> <button value="<tekst>">...</button> </p><p><b>Vrijednosti</b></p> <p>Bilo koji tekstualni niz.</p> <p><b>Zadana vrijednost</b></p> <h2>Specifikacije</h2> <h2>Primjeri</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>BUTTON</title> </head> <body> <p style="text-align: center"> <button>Dugme sa tekstom</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Dugme za uzorak</button> </p> </body> </html> <p>Dugmad su jedan od najpopularnijih elemenata interfejsa i često se koriste unutar obrazaca, na primjer, za slanje informacija unesenih u obrazac na server.</p><p>Dugmad na web stranici mogu se kreirati na nekoliko načina - pomoću elementa <input>ili element <button> .</p><p>Razmislite o tome da prvo dodate dugme putem <input>i njegovu sintaksu.</p><p> <input type="button" value="Tekst"> </p><p>Atributi dugmeta su navedeni u tabeli. jedan.</p><p>Kreiranje dugmeta je prikazano u primeru 1.</p><p>Primjer 1: Dodavanje gumba</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dugme</title> </head> <body> <form> <p><input type="button" value="Pritisni me nježno"></p> </form> </body> </html> </p><p>Imajte na umu da se broje svi razmaci u oznaci dugmeta, za razliku od običnog HTML teksta, tako da možete staviti bilo koji broj razmaka koji će na kraju uticati na širinu dugmeta. Ali ispravnije je, naravno, postaviti izgled dugmeta preko CSS-a. Rezultat primjera prikazan je na sl. jedan.</p><p>Rice. 1. Prikaz gumba</p><p>Postoji niz obaveznih pravila za takve tipke:</p><ul><li><input> <a> ;</li><li><input>ne može biti ugniježđen unutar dugmeta <button> ;</li><li>vrijednost atributa vrijednosti ne može biti prazna.</li> </ul><p>Drugi način kreiranja dugmeta zasniva se na korišćenju elementa <button>. Po svom djelovanju podsjeća na rezultat dobiven uz pomoć <input>. Ali za razliku od njega, nudi napredne opcije za kreiranje dugmadi. Na primjer, možete postaviti bilo koji HTML element na takvo dugme, uključujući slike i tabele. Na sl. 2 prikazuje različite tipove dugmadi dobijenih upotrebom <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>Rice. 2. Dugmad kreirana sa <button></p><p>Sintaksa za kreiranje takvog dugmeta je sljedeća.</p><p> <button>Natpis na dugmetu</button> </p><p>Atributi su navedeni u tabeli. 1, ali za razliku od dugmeta <input>atribut value definira samo vrijednost koja se šalje serveru, a ne oznaku na gumbu. Ako želite da prikažete sliku na dugmetu, onda <img>dodano unutra <button>, kao što je prikazano u primjeru 2.</p><p>Primer 2. Slika na dugmetu</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dugme</title> </head> <body> <form> <p><button>Dugme sa tekstom</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Dugme za uzorak</button></p> </form> </body> </html> </p><p>Ovaj primjer pokazuje kako kreirati obično dugme sa tekstom, kao i dugme sa tekstom i slikom. Veličina dugmeta zavisi od sadržaja <button>, ali se razmaci zanemaruju, pa se jednostavno povećava njihov broj, kao u slučaju korištenja <input>, širina dugmeta se ne može promeniti.</p><p>Za <button>Postoji i niz ograničenja:</p><ul><li><button>ne možete ugraditi linkove <a> ;</li><li>jedan <button>ne može biti ugniježđen unutar drugog.</li> </ul><h2>Dugme za slanje</h2><p>Za slanje podataka na server koristi se posebno dugme Pošalji. Njegov izgled se ne razlikuje od običnih dugmadi, ali kada se na njega klikne, skače na obrađivač obrasca na adresi specificiranoj atributom akcije elementa. <form>. Program za rukovanje prima podatke koje je korisnik unio u polja obrasca, obavlja potrebne manipulacije s njima, a zatim vraća rezultat u obliku HTML dokumenta. Šta tačno radi rukovalac zavisi od autora sajta, na primer, ova tehnologija se koristi prilikom kreiranja anketa, foruma, testova i mnogih drugih stvari.</p><p>Sintaksa za kreiranje dugmeta Submit zavisi od elementa koji se koristi. <input>ili <button> .</p><p> <input type="submit"> <button type="submit">Natpis na dugmetu</button> </p><p>Atributi su isti kao i za obične dugmad (primjer 3), ali vrijednost atributa value sada može biti izostavljena, jer će pretraživač sam zamijeniti tekst, razlikuje se ovisno o pretraživaču. Dakle, Firefox piše "Submit request", IE - "Submission request", Opera i Chrome - "Submit". Sam tekst oznake ne utiče na funkcionalnost dugmeta.</p><p>Primjer 3: Slanje podataka na server</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dugme</title> </head> <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body> </html> </p><h2>Dugme za resetovanje</h2><p>Kada kliknete na dugme Reset, podaci obrasca se vraćaju na prvobitne vrednosti. Ovo dugme se u pravilu koristi za brisanje podataka unesenih u polja obrasca. Za velike formulare je bolje da uopšte ne koristite dugme Reset, da ne biste greškom kliknuli na njega, jer ćete tada morati ponovo da popunite formular.</p><p>Sintaksa za kreiranje navedenog dugmeta je jednostavna i slična ostalim dugmadima.</p><p> <input type="reset"> <button type="reset">Natpis na dugmetu</button> </p><p>Primjer 4 prikazuje obrazac s jednim tekstualnim poljem koje već sadrži unaprijed uneseni tekst pomoću atributa vrijednosti elementa <input>. Nakon promjene teksta i klika na dugme "Obriši", vrijednost polja će biti vraćena i u njemu će se ponovo pojaviti natpis "Unesite tekst".</p> HTML oznake <h2>Značaj i primjena</h2> <p>HTML oznaka <button>koristi se za postavljanje dugmeta. Unutar oznake <button>možete postaviti i formatirani tekst i sliku. Ovo je glavna razlika između ovog elementa i dugmadi kreiranih pomoću oznake <input>(sa tipom atributa = "button" ).</p> <p>Uvijek navedite za oznaku <button>tip atributa = "button" ako se element koristi kao običan gumb. Ako koristite oznaku <button>unutar HTML obrasca, možda ćete otkriti da stariji pretraživači mogu prikazati različite vrijednosti prilikom slanja obrasca. <b>U tom slučaju se preporučuje korištenje elementa <input>za slanje HTML obrazaca.</b></p> <h2>Podrška za pretraživač</h2> <table class="tableTag"><tr><th class="tw">Tag</th><th></th><th></th><th><br>Opera</th><th></th><th><br>IExplorer</th><th><br>rub</th> </tr><tr><td><button> </td><td class="tyes">Da</td><td class="tyes">Da</td><td class="tyes">Da</td><td class="tyes">Da</td><td class="tyes">Da</td><td class="tyes">Da</td> </tr></table><h2>Atributi</h2> <table class="tableTag"><tr><th>Atribut</th><th>Značenje</th><th class="tatt">Opis</th> </tr><tr><td> </td><td>autofokus</td><td>Boolean atribut koji specificira da dugme treba automatski dobiti fokus kada se stranica učita.</td> </tr><tr><td>onemogućeno</td><td>onemogućeno</td><td>Je boolean atribut i specificira da dugme treba biti onemogućeno (nije dostupno za interakciju korisnika).</td> </tr><tr><td> </td><td>form_id</td><td>Određuje oblik (element <form>) kojoj pripada dugme. Vrijednost mora biti identifikator obrasca () u istom dokumentu.</td> </tr><tr><td> </td><td>URL</td><td>Određuje URL datoteke koja će obraditi (kontrolisati) unos nakon slanja obrasca (samo za <button <span>type="submit"></span>). </td> </tr><tr><td> </td><td><span>application/x-www-form-urlencoded <br>multipart/form-data <br>tekst/običan</span> </td><td>Određuje kako se podaci obrasca trebaju kodirati kada se predaju na server (samo za <button <span>type="submit"></span>). </td> </tr><tr><td> </td><td>dobiti <br>pošta</td><td>Određuje koji HTTP metod treba koristiti prilikom slanja podataka obrasca (samo za <button <span>type="submit"></span>). </td> </tr><tr><td> </td><td>formnovalidate</td><td>Označava da se provjera valjanosti podataka koje je korisnik unio u obrazac nije izvršena (samo za <button <span>type="submit"></span>). </td> </tr><tr><td> </td><td><span>_blank <br>_self <br>_parent <br>_top <br>framename</span> </td><td>Govori pretraživaču gdje da prikaže odgovor primljen nakon slanja obrasca (kartica, trenutni prozor ili okvir). Zadana vrijednost je _self - prikazuje odgovor u trenutnom prozoru. Korišćen samo za <button <span>type="submit"></span>. </td> </tr><tr><td>ime</td><td>ime</td><td>Određuje ime za dugme koje se prosleđuje kada se obrazac pošalje.</td> </tr><tr><td>tip</td><td>dugme <br>resetovati <br>submit</td><td>Određuje tip dugmeta. <b>Zadana vrijednost <b>submit.</b> </b> </td> </tr><tr><td>vrijednost</td><td>tekst</td><td>Određuje početnu vrijednost za dugme.</td> </tr></table><h2>Primjer upotrebe</h2> <span><!DOCTYPE html> <html> <head> <title> </span> Tag <button><span></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;" > <b> </span> Dugme 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> Dugme 3 <span></i> </button><br><br> </body> </html> </span> <p>U ovom primjeru postavili smo <i>3 dugmeta</i>, koji su dobili jedinstvena imena sa atributom name i, koristeći interne CSS stilove, specificirali širinu ( <i>širina</i>) veličine 80 piksela i visine ( <i>visina</i>) veličine 50 piksela:</p> <ul><li>Tekst unutra <i>prvo dugme</i> formatirali smo ga podebljanim slovima (tag <b>). <b>Obratite pažnju da je tekst koji smo stavili unutar oznake prikazan na samom dugmetu.</b></li> <li>Unutra <i>drugo dugme</i> element <img>objavili smo <i>*.png</i> slika (sa prozirnom pozadinom). Sa atributom alt postavljamo alternativni tekst za sliku, u slučaju da se iz nekog razloga ne učitava (obavezni atribut), postavljamo relativnu putanju do slike sa atributom src (obavezni atribut), širinom (širina) i atributi visina (visina) postavljaju dimenzije slike na 40 x 40 piksela. Imajte na umu da atributi koji postavljaju veličinu ne moraju specificirati mjerne jedinice, za razliku od CSS stilova, jer atributi mogu specificirati samo vrijednost u pikselima.</li> <li>Tekst unutra <i>treće dugme</i> formatirali smo kurziv (tag <i>).</li> </ul><p>Rezultat našeg primjera:</p> <p>Sljedeći primjer pokazuje upotrebu atributa koji vam omogućavaju da ne provjerite valjanost podataka koje je unio korisnik i kaže pregledniku gdje da prikaže odgovor primljen nakon slanja obrasca.</p> <span><!DOCTYPE html> <html> <head> </span> <title>Korištenje formnovalidate i formtarget HTML atributa oznake <button><span></title> </head> <body> <form id = "myForm" > </span> <input <span>type = "text" name = "ulogin" placeholder = "(!LANG:Vaše ime" >!} <br> <span> </span> <textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Tvoje pitanje" ></textarea><br> <button formtarget = _blank formnovalidate > </span> Pošalji <span></button> <span> </span> </form> </body> </html> </span> <p>U ovom primjeru, unutar forme, kreirali smo dva elementa</p> <p>Uputstvo</p> <p>Upotreba deskriptora <input>dodaje dugme na stranicu sa imenom imena i vrednošću vrednosti. Atribut name daje elementu jedinstveni identifikator i koristi se za određivanje njegove vrijednosti od strane rukovatelja obrascima. Value crta traženi tekst na vrhu. Na primjer, da biste kreirali dugme, napišite sljedeći kod:</p><p><form><br><input type = “button” name = “имя” value = “Отправка”><br></form></p><p>Ova komanda će kreirati dugme pod nazivom dugme sa napisanim "Pošalji".</p> <p>Deskriptor <button>stvara slično <input>element, međutim, nudi mnoge dodatne opcije koje će web programer možda morati koristiti. Da, gotovo <button>možete prekriti tabelu ili sliku, obogaćeni tekst ili listu. Na primjer:</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>Tekst</b></button></p> <p>Atribut forme specificira ID obrasca koji će se koristiti za obradu podataka. Formaction postavlja rukovatelj obrascima na drugi dio dokumenta, datoteke ili stranice. Formmethod je odgovoran za definiranje metode prosljeđivanja podataka. Name postavlja ime dugmeta, tip - tip (normalan, za slanje podataka ili za brisanje obrasca). Vrijednost - vrijednost koju će skripte čitati. Dugme će prikazati sliku sa navedenom adresom i tekstom.</p> <p>Da biste kreirali dugme koje će obraditi unesene podatke, morate navesti odgovarajući tip u atributu:</p><p><input type = “submit”></p><p>Da biste kreirali dugme koje briše korisnički unos, postavite tip = “reset”.</p> <p>Bilješka</p> <p>Deskriptor <input>mora se koristiti kao sadržaj oznake <form>. Dugme <button>može se prikazati izvan obrasca, ali da bi se obrađivali podaci i izvršila određena radnja, također mora biti zatvoren između <form></form>.</p> <p>Za organizaciju interakcije sajta sa posetiocem na njegovim stranicama potrebno je obezbediti mogućnosti za unos informacija i njihovo slanje na server. Da biste to učinili, jezik opisa HTML web stranice (HyperText Markup Language - “jezik za označavanje hiperteksta”) pruža poseban skup oznaka. Šta su to oznake i kako pomoću njih kreirati web stranicu <b>formu</b> popuniti posjetitelj?</p> <p>Trebaće ti</p> <ul><li>Osnovno poznavanje HTML jezika</li> </ul><p>Uputstvo</p> <p>HTML oznake koje govore pretraživaču gdje stranica treba biti prikazana <b>formu</b> a njegovi elementi se nalaze u kodu između početne oznake<.form>i zatvaranje<./form>. Početna oznaka mora sadržavati obavezne informacije - atribute koji govore gdje tačno trebate poslati informacije iz obrasca i na koji način to trebate učiniti. Osim toga, ako stranica sadrži više od jednog obrasca, onda svaki mora imati svoje ime. Imajući sve ovo na umu, početna oznaka bi mogla izgledati ovako: <form name="thisFormName" method="POST" action=">Ovdje je atribut "name" ime obrasca, atribut "method" specificira metodu podnošenja (moguće su metode POST ili GET), a atribut "action" mora specificirati URL skripte na serveru na koji podatke iz obrasca treba poslati. Ako adresa nije navedena, podaci će se prenijeti na URL iste stranice. U pravilu, takve interaktivne stranice formiraju univerzalne skripte koje također omogućavaju primanje/obradu podataka sa iste stranice.</p> <p>Nakon uvodne oznake obrasca treba postaviti elemente obrasca koji su prikladniji da korisnik unese željeni tip podataka. Takvi elementi mogu biti: Polje za unos teksta: <input name="textField" type="text" value="Ovo je tekstualno polje" />Ovdje, kao iu svim drugim oznakama "input", atribut "type" specificira tip elementa, "name" je ime koje će biti poslano zajedno sa podacima unesenim u ovo polje, a "value" je zadana vrijednost koja će biti popunjeno u polju za unos testa. --Polje: <input name="passField" type="password" />--Polje za "oznaku kvačicom": <input name="checkBox" type="checkbox" value="1" checked="checked" />Ovdje je prisustvo atributa "checked" , da će po zadanim postavkama okvir za potvrdu biti tamo.-- Grupa radio dugmadi, od kojih trebate odabrati samo jedan: <input name="radioBox" type="radio" value="0" checked="checked" /><br><input name="radioBox" type="radio" value="1" />Imajte na umu da svi elementi grupe moraju imati isto ime (ime), ali različite vrijednosti (vrijednost). Samo jedna vrijednost će biti proslijeđena - ona koju posjetitelj označi ili ona koja je odabrana po defaultu (prema označenom atributu).--Padajuća lista: <select name="selectField"><br> <option value="vrijednost1">Polje jedan</option><br> <option value="vrijednost2" selected="selected">Polje dva</option><br> <option value="vrijednost3">Polje tri</option><br></select> Ovdje se svaka oznaka "opcija" nalazi na padajućoj listi. Što se tiče grupe radio dugmadi, samo jedna vrijednost će biti proslijeđena iz polja odabranog od strane posjetitelja, ili odabranog prema zadanim postavkama (ovdje - odabrani atribut).--Polje za više redova: <textarea name="textRows" cols="50" rows="5">Evo višelinijskog</textarea> Atributi "cols" i "rows" postavljaju širinu (u znakovima) i visinu (u redovima) polja za unos teksta.--Skriveno polje: <input name="hiddenField" type="hidden" value="skriveno polje" />Ovo polje neće biti vidljivo puniocu <b>formu</b>, ali će također biti poslat zajedno s ostatkom podataka.--Polje za odabir datoteke za slanje: <input name="fileField" type="file" />Za slanje fajla to je potrebno u otvaranju <b>formu</b> tag je imao dodatne atribute. U najmanju ruku, treba dodati oznaku "enctype". Na primjer, ovako: <form name="thisFormName" method="POST" enctype="multipart/form-data" action=">--Osim ovoga, <b>formu</b> možete staviti dugmad - za brisanje unesenog <b>formu</b> podaci: <input name="resetButton" type="reset" value="Jasno" />i da popunjeni obrazac predate serveru: <input name="submitButton" type="submit" value="Pošalji" />Vrijednost navedena u atributu "vrijednost" za dugmad je oznaka na samom dugmetu.</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">Top Related Articles</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/bs/lily-camera-vodonepronicaemyi-kvadrokopter-dlya-selfi-miniatyurnaya-letayushchaya.html"> <div class="img_container"><img src="/uploads/a26b4210bf662bbdd131d30dff1cee81.jpg" border="0" alt="AirSelfie Mini Flying Selfie Kamera Leteća Selfie Kamera" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">AirSelfie Mini Flying Selfie Kamera Leteća Selfie Kamera</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/bs/na-chto-obratit-vnimanie-pri-vybore-moshchnogo-svetodiodnogo-fonarika-kak.html"> <div class="img_container"><img src="/uploads/9fa1f6adc038c604c07a47d2c7245854.jpg" border="0" alt="Kako ga sami sastaviti?" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Kako ga sami sastaviti?</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/bs/katushka-tesly-opyty-s-katushkoi-katushka-tesla-i-demonstraciya-neveroyatnyh.html"> <div class="img_container"><img src="/uploads/2a21a7c4b7ec78f26f33bf02f70fdc74.jpg" border="0" alt="Teslin kalem i demonstracija nevjerovatnih svojstava elektromagnetnog polja Tesline zavojnice" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Teslin kalem i demonstracija nevjerovatnih svojstava elektromagnetnog polja Tesline zavojnice</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">Kategorije:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/bs/category/programs/">Programi</a></li> <li class=""><a href="https://bumotors.ru/bs/category/safety/">Sigurnost</a></li> <li class=""><a href="https://bumotors.ru/bs/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/bs/category/iron/">Iron</a></li> <li class=""><a href="https://bumotors.ru/bs/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/bs/category/vkontakte/">U kontaktu sa</a></li> <li class=""><a href="https://bumotors.ru/bs/category/errors/">Greške</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="https://vk.com/share.php?url=https://bumotors.ru/html-button-primery-kogda-sleduet-ispolzovat-element.html" class="vk social-ico"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/html-button-primery-kogda-sleduet-ispolzovat-element.html" class="fb social-ico"></a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Fbs%2Fhtml-button-primery-kogda-sleduet-ispolzovat-element.html" 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. Kako podesiti pametne telefone i računare. Informativni portal.</span> </div> </div> </div> </div> </body> </html>