Primjeri HTML gumba. Kada koristiti element Button

24.06.2019 Recenzije

Opis

HTML oznaka

Onemogućeno: Onemogućuje mogućnost klikanja na gumb. Ovo se može koristiti u slučaju kada bi gumb trebao postati aktivan kada su ispunjeni određeni uvjeti (na primjer, kada je odabran potvrdni okvir, itd.), bit će moguće aktivirati gumb pomoću JavaScripta. Vrijednosti za boolean disabled atribut mogu se postaviti na sljedeće načine: obrazac: Označava kojem obliku pripada ovaj gumb. Vrijednost je jedan ili više identifikatora obrasca, odvojenih razmacima. Broj identifikatora u vrijednosti atributa ovisi o broju obrazaca koji pripadaju gumbu:

Gumb je izvan elementa obrasca, ali je dio obrasca.

Napomena: Atribut nije podržan u Internet Exploreru.

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

Atribut formacije koristi se samo za gumbe 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 poslužitelj. Koristi se samo za gumbe s atributom type = "submit". Moguće vrijednosti atributa:

aplikacija / x-www-form-urlencoded- svi znakovi su kodirani prije slanja (zadano).
višedijelni / obrazac-podaci- znakovi nisu kodirani (ova metoda se koristi kada se koriste obrasci koji imaju kontrolnu datoteku za prijenos).
tekst / običan- razmaci se pretvaraju u znak "+", ali znakovi nisu kodirani.

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

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

Metoda obrasca: Označava koja će se HTTP metoda koristiti prilikom slanja podataka obrasca. Koristi se samo za gumbe s atributom type = "submit". Moguće vrijednosti atributa:

dobiti- podaci obrasca se dodaju na kraju url-a: url? ime = vrijednost? ime = vrijednost
post- šalje podatke obrasca kao HTTP nakon transakcije

Ako je atribut metode naveden za obrazac, tada će atribut formmethod nadjačati njegovu vrijednost.

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

Formnovalidate: Označava da podaci obrasca neće biti provjereni. Koristi se samo za gumbe s atributom type = "submit". Vrijednosti za booleov atribut autofokusa mogu se postaviti na sljedeće načine: Ako je atribut novalidate naveden za obrazac, tada će atribut formnovalidate nadjačati njegovu vrijednost.

Napomena: Atribut nije podržan u IE9 i starijim verzijama, niti u Safariju.

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

_prazan- otvara odgovor u novom prozoru ili kartici.
_sebe- otvara odgovor u istom direktoriju u kojem se nalazi poveznica (zadano).
_roditelj- otvara odgovor u roditeljskom prozoru.
_vrh- otvara odgovor na cijelu širinu prozora.
naziv_okvira- otvara odgovor u iframeu čije je ime navedeno kao vrijednost.

Ako je ciljni atribut naveden za obrazac, tada će atribut formtarget nadjačati njegovu vrijednost.

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

Ime: Određuje naziv za element

Napomena: neke stavke

Napomena: Uvijek navedite atribut tipa za gumbe, jer različiti preglednici mogu koristiti različite zadane postavke za atribut tipa.

Vrijednost: vrijednost gumba koji će biti poslan poslužitelju ili pročitan skriptama.

Napomena: ako koristite element ... Dok će drugi preglednici poslati sadržaj atributa value.

Označiti

Završna oznaka je obavezna.

WAI ARIA

Zadana uloga je: dugme

Važeće vrijednosti za ulogu:

potvrdni okvir
veza
stavka izbornika
menuitemcheckbox
menuitemradio
opcija
radio
sklopka

Atributi

autofokus - Postavlja gumb za primanje fokusa nakon što se stranica učita.
onemogućeno - Blokira pristup i izmjenu elementa.
obrazac - povezuje obrazac i gumb zajedno.
formacija - Postavlja adresu na koju se šalju podaci obrasca kada se pritisne gumb.
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.
naziv - Definira jedinstveni naziv za gumb.
type - Postavlja tip gumba: normalan; za slanje podataka obrasca na poslužitelj; za čišćenje kalupa.
vrijednost - vrijednost gumba koji će biti poslan poslužitelju ili pročitan pomoću skripti.

autofokus

Atribut autofokusa postavlja gumb za primanje fokusa nakon što se stranica učita. Takav se gumb može odmah pritisnuti bez fokusiranja na njega, na primjer, pomoću tipkovnice.

Sintaksa

Vrijednosti

Zadana vrijednost

onemogućeno

Blokira pristup gumbu i njegovu izmjenu. U tom je slučaju prikazan sivo i nije dostupan za aktivaciju od strane korisnika. Osim toga, takav gumb ne može dobiti fokus pritiskom na tipku Tab, mišem ili na bilo koji drugi način. Međutim, ovo stanje gumba može se promijeniti skriptama. Vrijednost zaključanog gumba ne prenosi se na poslužitelj.

Sintaksa

Vrijednosti

Zadana vrijednost

Ova vrijednost je onemogućena prema zadanim postavkama.

oblik

Povezuje gumb s obrascem prema njegovom identifikatoru. Takva veza je neophodna u slučaju kada se gumb ne nalazi unutar elementa.

, na primjer, kada ga kreirate programski.

Sintaksa

Vrijednosti

Identifikator obrasca (vrijednost atributa id elementa ).

Zadana vrijednost

formiranje

Određuje adresu procesora obrasca - to je program koji prima podatke obrasca i s njima izvodi željene radnje. Atribut formacije sličan je u akciji atributu akcije elementa. ... Ako navedete radnju i formaciju u isto vrijeme, onda kada se pritisne gumb, atribut akcije se zanemaruje i podaci se šalju na adresu navedenu u formaciji.

Sintaksa

Vrijednosti

formenctype

Postavlja kako se podaci obrasca kodiraju kada se pošalju na poslužitelj. Obično je izričito naznačeno kada se polje koristi za slanje datoteke (vrsta unosa = "datoteka"). Ovaj atribut sličan je učinku atributu enctype elementa. .

Sintaksa

Vrijednosti

application / x-www-form-urlencoded - Mjesto + umjesto razmaka, znakovi poput ruskih slova su kodirani sa 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

aplikacija / x-www-form-urlencoded

metoda oblika

Atribut govori pregledniku koju metodu treba koristiti za slanje podataka obrasca na poslužitelj.

Sintaksa

Vrijednosti

Postoje dvije metode - GET i POST.

GET - Ova metoda je dizajnirana za prijenos podataka obrasca izravno u adresnu traku u obliku parova "ime = vrijednost", koji se dodaju adresi stranice nakon upitnika i odvajaju znakom ampersanda (&). Puna adresa, na primjer, bit će http://site.ru/doc/?name=Vasya&password=pup. Količina podataka u metodi ograničena je na 4 KB.
POST - Šalje podatke poslužitelju u zahtjevu preglednika, količina poslanih podataka ograničena je samo postavkama poslužitelja.

formnovalidate

Poništava ugrađenu provjeru ispravnosti podataka koje je korisnik unio u obrazac kada se pritisne tipka. Takvu provjeru preglednik obavlja automatski kada se obrazac pošalje poslužitelju za polja. , , kao i ako element ima uzorak ili traženi atribut .

Sintaksa

Vrijednosti

Zadana vrijednost

Prema zadanim postavkama, ovaj je atribut isključen.

formtarget

Određuje naziv okvira u koji će se rezultat koji je vratio procesor obrasca učitati kao HTML dokument.

Sintaksa

Vrijednosti

Vrijednost je naziv okvira specificiran atributom name 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 preglednika.</li> <li>_self - učitava stranicu na trenutnu karticu.</li> <li>_parent - Učitava stranicu u nadređeni okvir; ako nema okvira, tada ova vrijednost radi kao _self.</li> <li>_top - Poništava sve okvire i učitava stranicu u cijelom prozoru preglednika; ako nema okvira, tada ova vrijednost radi kao _self.</li> </ul><h3>Ime</h3> <p>Određuje jedinstveni naziv za gumb. Obično se ovaj naziv koristi pri slanju vrijednosti gumba na poslužitelj ili kada se gumbu pristupa putem skripti.</p> <p><b>Sintaksa</b></p><p> <button name="<имя>">...</button> </p><p><b>Vrijednosti</b></p> <p>Naziv je skup znakova, uključujući brojeve i slova. JavaScript je osjetljiv na velika i mala slova, stoga koristite isti pravopis kao za atribut name kada se pozivate na element po imenu.</p> <p><b>Zadana vrijednost</b></p> <h3>tip</h3> <p>Definira tip gumba koji postavlja njegovo ponašanje na obrascu. Po izgledu, tipke različitih vrsta ne razlikuju se ni na koji način, ali svaki takav gumb ima svoje funkcije.</p> <p><b>Sintaksa</b></p><p> <button type="button | reset | submit">...</button> </p><p><b>Vrijednosti</b></p> <ul><li>gumb - Običan gumb.</li> <li>reset - Gumb za brisanje unesenih podataka obrasca i vraćanje vrijednosti u prvobitno stanje.</li> <li>submit - Gumb za slanje podataka obrasca na poslužitelj.</li> <li>izbornik - Otvara izbornik kreiran s elementom <menu> .</li> </ul><p><b>Zadana vrijednost</b></p> <ul><li>podnijeti</li> </ul><h3>vrijednost</h3> <p>Određuje vrijednost gumba koji će biti poslan poslužitelju. Par "ime = vrijednost" šalje se na poslužitelj, gdje je ime specificirano atributom name elementa <button>a vrijednost je atribut vrijednosti. Vrijednost se može podudarati s tekstom na gumbu ili biti neovisna. Atribut value također se 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>Tehnički podaci</h2> <h2>Primjeri za</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>DUGME</title> </head> <body> <p style="text-align: center"> <button>Gumb s tekstom</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Gumb s uzorkom</button> </p> </body> </html> <p>Gumbi su jedan od popularnih elemenata sučelja i često se koriste unutar obrazaca, na primjer, za slanje podataka unesenih u obrazac poslužitelju.</p><p>Gumbi na web stranici mogu se izraditi na nekoliko načina – pomoću elementa <input>ili element <button> .</p><p>Razmislite o tome da prvo dodate gumb putem <input>i njegovu sintaksu.</p><p> <input type="button" value="Tekst"> </p><p>Atributi gumba navedeni su u tablici. 1.</p><p>Stvaranje gumba prikazano je u primjeru 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 svi razmaci u oznaci gumba broje za razliku od normalnog HTML teksta, tako da možete koristiti bilo koji broj razmaka koji u konačnici utječu na širinu gumba. Ali ispravnije je, naravno, postaviti izgled gumba preko CSS-a. Rezultat primjera prikazan je na sl. 1.</p><p>Riža. 1. Prikaz gumba</p><p>Postoji niz obveznih pravila za takve gumbe:</p><ul><li><input> <a> ;</li><li><input>ne može biti ugniježđen unutar gumba <button> ;</li><li>vrijednost atributa value ne može biti prazna.</li> </ul><p>Drugi način stvaranja gumba temelji se na korištenju elementa <button>... Po svom djelovanju nalikuje rezultatu dobivenom upotrebom <input>... Ali za razliku od njega, nudi napredne opcije za stvaranje gumba. Na primjer, možete postaviti bilo koji HTML element na ovakav gumb, uključujući slike i tablice. Na sl. 2 prikazuje različite tipove gumba dobivenih korištenjem <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>Riža. 2. Gumbi stvoreni s <button></p><p>Sintaksa za stvaranje takvog gumba je sljedeća.</p><p> <button>Oznaka gumba</button> </p><p>Atributi su navedeni u tablici. 1, ali za razliku od gumba <input>atribut value definira samo vrijednost poslanu poslužitelju, a ne oznaku na gumbu. Ako želite prikazati sliku na gumbu, onda <img>dodano unutra <button>kao što je prikazano u primjeru 2.</p><p>Primjer 2. Slika na gumbu</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dugme</title> </head> <body> <form> <p><button>Gumb s tekstom</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Gumb s uzorkom</button></p> </form> </body> </html> </p><p>Ovaj primjer pokazuje kako napraviti običan gumb s tekstom, kao i gumb s istovremenom upotrebom teksta i grafike. Veličina gumba ovisi o sadržaju <button>, ali se razmaci zanemaruju, dakle jednostavnim povećanjem njihovog broja, kao u slučaju korištenja <input>, širina gumba se ne može promijeniti.</p><p>Za <button>također postoji niz ograničenja:</p><ul><li><button>ne može biti ugniježđen unutar veze <a> ;</li><li>jedan <button>ne možete ulagati unutar drugog.</li> </ul><h2>Gumb Pošalji</h2><p>Za slanje podataka na poslužitelj postoji poseban gumb Pošalji. Njegov izgled se ne razlikuje od običnih gumba, ali kada kliknete na njega, idete na rukovatelj obrascima na adresi navedenu 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. Što točno radi rukovalac ovisi o autoru stranice, na primjer, slična tehnologija se koristi prilikom izrade anketa, foruma, testova i mnogih drugih stvari.</p><p>Sintaksa za stvaranje gumba Pošalji ovisi o elementu koji koristite <input>ili <button> .</p><p> <input type="submit"> <button type="submit">Oznaka gumba</button> </p><p>Atributi su isti kao i za obične gumbe (primjer 3), ali vrijednost atributa value sada se može izostaviti, jer će preglednik sam zamijeniti tekst, razlikuje se ovisno o pregledniku. Na primjer, Firefox piše "Pošalji zahtjev", IE - "Pošalji zahtjev", Opera i Chrome - "Pošalji". Sam tekst naljepnice ni na koji način ne utječe na funkcionalnost gumba.</p><p>Primjer 3. Slanje podataka na poslužitelj</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>Gumb za resetiranje</h2><p>Kada kliknete na gumb Reset, podaci obrasca se vraćaju na izvorne vrijednosti. Ovaj gumb se u pravilu koristi za brisanje podataka unesenih u polja obrasca. Za velike obrasce, bolje je potpuno odbiti korištenje gumba Reset, kako ga ne biste slučajno kliknuli, jer ćete tada morati ponovno ispuniti obrazac.</p><p>Sintaksa za stvaranje navedenog gumba je jednostavna i slična ostalim gumbima.</p><p> <input type="reset"> <button type="reset">Oznaka gumba</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 gumb "Izbriši", vrijednost polja će se vratiti i u njemu će se ponovno pojaviti natpis "Unesite tekst".</p> HTML oznake <h2>Značenje i primjena</h2> <p>HTML oznaka <button>koristi se za postavljanje gumba. Unutar oznake <button>možete postaviti i formatirani tekst i sliku. Ovo je glavna razlika između ovog elementa i gumba stvorenih pomoću oznake <input>(s atributom type = "button").</p> <p>Uvijek navedite za oznaku <button>tip atributa = "gumb" ako se element koristi kao običan gumb. Ako koristite oznaku <button>unutar HTML obrasca, tada možete naići na činjenicu da starije verzije preglednika mogu predstavljati različite vrijednosti kada se obrazac pošalje. <b>Preporuča se u ovom slučaju koristiti element <input>za podnošenje HTML obrazaca.</b></p> <h2>Podrška za preglednik</h2> <table class="tableTag"><tr><th class="tw">Označiti</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>Booleov atribut koji označava da bi gumb trebao automatski dobiti fokus na učitavanje stranice.</td> </tr><tr><td>onemogućeno</td><td>onemogućeno</td><td>Je boolean atribut koji označava da bi gumb trebao biti onemogućen (nedostupan za interakciju korisnika).</td> </tr><tr><td> </td><td>form_id</td><td>Određuje oblik (element <form>) kojem pripada gumb. Vrijednost mora biti identifikator obrasca () u istom dokumentu.</td> </tr><tr><td> </td><td>Url</td><td>Određuje URL datoteke koja će obraditi (kontrolirati) ulazne informacije nakon slanja obrasca (samo za <button <span>type = "submit"></span>). </td> </tr><tr><td> </td><td><span>aplikacija / x-www-form-urlencoded <br>višedijelni / obrazac-podaci <br>tekst / običan</span> </td><td>Određuje kako se podaci obrasca trebaju kodirati kada se predaju poslužitelju (samo za <button <span>type = "submit"></span>). </td> </tr><tr><td> </td><td>dobiti <br>post</td><td>Određuje koju HTTP metodu 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 podaci koje je korisnik unio u obrazac ne provjerava točnost (samo za <button <span>type = "submit"></span>). </td> </tr><tr><td> </td><td><span>_prazan <br>_sebe <br>_roditelj <br>_vrh <br>naziv okvira</span> </td><td>Govori pregledniku gdje da prikaže odgovor primljen nakon slanja obrasca (kartica, trenutni prozor ili okvir). Zadana vrijednost je _self - prikazuje odgovor u trenutnom prozoru. Koristi se samo za <button <span>type = "submit"></span>. </td> </tr><tr><td>Ime</td><td>Ime</td><td>Određuje naziv gumba koji se prosljeđuje prilikom slanja obrasca.</td> </tr><tr><td>tip</td><td>dugme <br>resetirati <br>podnijeti</td><td>Označava vrstu gumba. <b>Zadana vrijednost <b>podnijeti.</b> </b> </td> </tr><tr><td>vrijednost</td><td>tekst</td><td>Određuje početnu vrijednost za gumb.</td> </tr></table><h2>Primjer upotrebe</h2> <span><!DOCTYPE html> <html> <head> <title> </span> Označiti <button><span></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;" > <b> </span> Gumb 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> Gumb 3 <span></i> </button><br><br> </body> </html> </span> <p>U ovom primjeru postavili smo <i>3 gumba</i>, koji su dobili jedinstvena imena s atributom name i, koristeći interne CSS stilove, specificirali širinu ( <i>širina</i>) veličina 80 piksela i visina ( <i>visina</i>) veličine 50 piksela:</p> <ul><li>Tekst unutra <i>prvi gumb</i> formatirali smo ga podebljanim slovima (tag <b>). <b>Imajte na umu da je tekst koji smo stavili unutar oznake prikazan na samom gumbu.</b></li> <li>Unutra <i>drugi gumb</i> element <img>postavili smo <i>* .png</i> slika (s prozirnom pozadinom). Atributom alt postavljamo alternativni tekst za sliku, u slučaju da se iz nekog razloga neće učitati (potreban atribut), postavljamo relativni put do slike s atributom src (potreban atribut), širinom (širina) i Atributi visine (visine) postavljaju dimenzije slike na 40 x 40 piksela. Imajte na umu da u atributima koji postavljaju veličinu ne morate navesti mjerne jedinice, za razliku od CSS stilova, iz razloga što atributi mogu specificirati samo vrijednost u pikselima.</li> <li>Tekst unutra <i>treći gumb</i> formatirali smo kurziv (tag <i>).</li> </ul><p>Rezultat našeg primjera:</p> <p>Sljedeći primjer pokazuje upotrebu atributa koji omogućuju da se ne provjeravaju podaci koje je korisnik unio na točnost i da se pregledniku kaže gdje da prikaže odgovor primljen nakon slanja obrasca.</p> <span><!DOCTYPE html> <html> <head> </span> <title>Korištenje atributa HTML oznake formnovalidate i formtarget <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 = "Vaše pitanje" ></textarea><br> <button formtarget = _blank formnovalidate > </span> poslati <span></button> <span> </span> </form> </body> </html> </span> <p>U ovom primjeru, unutar obrasca, stvorili smo dva elementa</p> <p>Upute</p> <p>Korištenje deskriptora <input>stranici dodaje gumb pod nazivom ime i vrijednost. Atribut name daje elementu jedinstveni identifikator i koristi ga procesor obrasca za određivanje njegove vrijednosti. Vrijednost postavlja traženi tekst na vrh. Na primjer, da biste stvorili gumb, napišite sljedeći kod:</p><p><form><br><input type = “button” name = “имя” value = “Отправка”><br></form></p><p>Ova naredba će stvoriti gumb pod nazivom gumb na kojem je napisano "Pošalji".</p> <p>Deskriptor <button>stvara sličan <input>element, međutim, nudi mnoge dodatne mogućnosti za korištenje koje bi web programer mogao zatrebati. Dakle, gotovo <button>možete prekriti tablicu ili sliku, obogaćeni tekst ili popis. 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 form specificira identifikator obrasca koji će se koristiti za obradu podataka. Formaction postavlja rukovatelj obrascima u drugom dijelu dokumenta, drugoj datoteci ili web-mjestu. Formmethod je odgovoran za definiranje metode za prijenos podataka. Naziv određuje naziv gumba, tip - tip (normalan, za slanje podataka ili za brisanje obrasca). Vrijednost - vrijednost koju će čitati skripte. Gumb će prikazati sliku s navedenom adresom i tekstom.</p> <p>Da biste stvorili gumb koji će obraditi unesene podatke, morate navesti odgovarajuću vrstu u atributu:</p><p><input type = “submit”></p><p>Da biste stvorili gumb koji briše korisnički unos, postavite tip = "reset".</p> <p>Bilješka</p> <p>Deskriptor <input>mora se nužno koristiti kao sadržaj oznake <form>... Dugme <button>može se prikazati izvan obrasca, međutim, kako bi se obradili podaci i izvršila određena radnja, također mora biti zatvoren između <form></form>.</p> <p>Za organiziranje interakcije stranice s posjetiteljem na svojim stranicama potrebno je osigurati mogućnosti za unos podataka i slanje na poslužitelj. U tu je svrhu predviđen poseban skup oznaka u jeziku opisa web stranice HTML (HyperText Markup Language). Što su to oznake i kako pomoću njih izraditi web stranicu <b>oblik</b> ispuniti posjetitelj?</p> <p>Trebat će vam</p> <ul><li>Osnovno poznavanje HTML-a</li> </ul><p>Upute</p> <p>HTML oznake koje govore pregledniku da se prikaže na ovom mjestu na stranici <b>oblik</b> a njegovi elementi se nalaze u kodu između početne oznake<.form>i zatvaranje<./form>... Početna oznaka mora sadržavati tražene informacije – atribute koji govore kamo točno treba poslati informacije iz obrasca i kojom metodom se to treba koristiti. Osim toga, ako stranica sadrži više od jednog obrasca, tada svaki mora imati svoje ime. Imajući sve ovo na umu, početna oznaka može izgledati ovako: <form name="thisFormName" method="POST" action=">Ovdje je atribut "name" naziv obrasca, atribut "method" postavlja način slanja (moguće su metode POST ili GET), a atribut "action" mora označavati URL skripte na poslužitelju na koji potrebno je poslati podatke iz obrasca. Ako adresa nije navedena, podaci će se prenijeti na URL iste stranice. Takve interaktivne stranice u pravilu čine univerzalne skripte koje pružaju i primaju/obrađuju podatke s iste stranice.</p> <p>Nakon početne oznake obrasca treba postaviti elemente obrasca koji su prikladniji za korisnički unos željene vrste podataka. Takvi elementi mogu biti: Polje za unos teksta: <input name="textField" type="text" value="Ovo je okvir za tekst" />Ovdje, kao iu svim drugim oznakama "input", atribut "type" postavlja tip elementa, "name" je naziv koji će biti poslan zajedno s podacima unesenim u ovo polje, a "value" je zadana vrijednost koji će biti popunjen. testno polje za unos. -- Polje: <input name="passField" type="password" />- Polje za "kvačicu": <input name="checkBox" type="checkbox" value="1" checked="checked" />Ovdje je prisutnost atributa "checked" koji će prema zadanim postavkama biti tamo. - Grupa radio gumba 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 - svi elementi grupe moraju imati isti naziv (ime), ali različite vrijednosti (vrijednost). Bit će proslijeđena samo jedna vrijednost - ona koju će posjetitelj provjeriti ili ona koja je odabrana prema zadanim postavkama (s označenim atributom). <select name="selectField"><br> <option value="vrijednost1">Polje jedan</option><br> <option value="vrijednost2" selected="selected">Drugo polje</option><br> <option value="vrijednost3">Treće polje</option><br></select> Ovdje se svaka oznaka "opcija" nalazi na padajućem popisu. Kao i kod grupe radio gumba, samo će jedna vrijednost biti proslijeđena iz polja koje je posjetitelj izabrao ili odabrano prema zadanim postavkama (ovdje - po odabranom atributu). <textarea name="textRows" cols="50" rows="5">Ovdje višelinijski</textarea> Atributi "cols" i "rows" postavljaju širinu (u znakovima) i visinu (u recima) polja za unos teksta. - Skriveno polje: <input name="hiddenField" type="hidden" value="Skriveno polje" />Ovo polje neće biti vidljivo za popunjavanje <b>oblik</b>, ali će se također poslati zajedno s ostatkom podataka - polje za odabir datoteke za slanje: <input name="fileField" type="file" />Za slanje datoteke potrebno je otvaranje <b>oblik</b> oznaka je imala dodatne atribute. U najmanju ruku, trebali biste dodati oznaku "enctype". Na primjer, ovako: <form name="thisFormName" method="POST" enctype="multipart/form-data" action=">--Osim ovoga u <b>oblik</b> možete staviti gumbe - za brisanje unesenih <b>oblik</b> podaci: <input name="resetButton" type="reset" value="Čisto" />i poslati ispunjeni obrazac na poslužitelj: <input name="submitButton" type="submit" value="poslati" />Vrijednost navedena u atributu "vrijednost" za gumbe je oznaka na samom gumbu.</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">Vrhunski povezani članci</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/hr/funkciya-select-case-proveryaet-vse-usloviya-operator-vetvleniya-select-case.html"> <div class="img_container"><img src="/uploads/fa7eb80daf682089fbbab9ee0a4163e6.jpg" border="0" alt="Operater podružnice"Select Case"" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Operater podružnice "Odaberi slučaj"</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/hr/osnovnye-html-tegi-chem-neparnye-tegi-otlichayutsya-ot-parnyh-tegi-parnye-i.html"> <div class="img_container"><img src="/uploads/9a2b4cb21cb71173e02f31d9c4b0933a.jpg" border="0" alt="Po čemu se neuparene oznake razlikuju od uparenih oznaka?" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Po čemu se neuparene oznake razlikuju od uparenih oznaka?</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/hr/kondensatory-kondensatory-raznost-potencialov-mezhdu-obkladkami.html"> <div class="img_container"><img src="/uploads/fae0ff671b8e8fb1fe289d649203d919.jpg" border="0" alt="Kondenzatori Razlika potencijala između ploča kondenzatora s kapacitetom" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Kondenzatori Razlika potencijala između ploča kondenzatora s kapacitetom</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/hr/category/programs/">Programi</a></li> <li class=""><a href="https://bumotors.ru/hr/category/safety/">Sigurnost</a></li> <li class=""><a href="https://bumotors.ru/hr/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/hr/category/iron/">Željezo</a></li> <li class=""><a href="https://bumotors.ru/hr/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/hr/category/vkontakte/">U kontaktu s</a></li> <li class=""><a href="https://bumotors.ru/hr/category/errors/">Pogreš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="" 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">© 2021 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.</span> </div> </div> </div> </div> </body> </html>