Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Greške
  • Opis obrasca. Kreiranje i rad sa formama u html-u

Opis obrasca. Kreiranje i rad sa formama u html-u

05.11.2019 Greške

HTML oznake koje definiraju HTML forme na web stranici

Izrađujemo web stranice i pojedinačne stranice na Internetu za komunikaciju sa posetiocima.

HTML forme koriste se za registraciju posjetitelja na stranici, za interaktivne ankete i ankete, omogućavaju vam slanje poruka, kupovinu itd. Html Obrazac je kreiran sa jednom svrhom: prikupljanje i naknadni prijenos informacija za obradu u programsku skriptu ili putem e-maila.

Uzorak HTML obrasca | Prijavite se

Oznake, atributi i vrijednosti

  • - odrediti oblik.
  • name = "" - definira naziv obrasca.
  • method = "" - definira način slanja podataka iz obrasca. Vrijednosti: "get" (podrazumevano) i "post". Često se koristi metoda "post", jer omogućava prijenos velikih količina podataka.
  • action = "" - definira url na koji se podaci šalju na obradu. U našem slučaju enter_data.php ..
  • - definirati elemente forme kao što su dugmad, radio dugmad, tekstualna polja za unos podataka.
  • type = "text" - definira tekstualno polje za unos podataka.
  • type = "password" - definiše polje za unos lozinke, dok se tekst prikazuje kao zvjezdice ili kružići.
  • type = "checkbox" - definiše polje za potvrdu.
  • type = "hidden" - definira skriveni element obrasca - koristi se za slanje dodatnih informacija serveru.
  • size = "25" - dužina tekstualnog polja u znakovima.
  • maxlength = "30" - maksimalni broj znakova za unos.
  • vrijednost = "" - definira vrijednost koja će biti poslana na obradu ako se odnosi na radio dugmad ili prekidače. Vrijednost ovog atributa kao dio tekstualnog polja ili gumba bit će prikazana kao, na primjer, Vasya ili Login u gornjem primjeru.

Uzorak HTML obrasca | Komentari na stranici

Uzorak HTML obrasca




Ime



Mail

Oznake, atributi i vrijednosti

  • action = "http: //site/comments.php" - definiše url na koji će se slati podaci iz obrasca.
  • id = "" - definiše ime, identifikator elementa forme.
  • name = "" - definira naziv elementa forme.
  • - definirati tekstualno polje kao dio obrasca.
  • cols = "" - definiše broj kolona u tekstualnom polju obrasca.
  • rows = "" - definira broj redova u tekstualnom polju obrasca.

Ako između stavite tekst, on će biti prikazan unutar okvira kao primjer koji je lako ukloniti.

Uzorak HTML obrasca | Padajuća lista

HTML forme

Oznake, atributi i vrijednosti

  • - definirati listu sa pozicijama za odabir.
  • size = "" - definira broj vidljivih pozicija liste. Ako je vrijednost 1, imamo posla sa padajućom listom.
  • - definirati pozicije (stavke) liste.
  • vrijednost = "" - sadrži vrijednost koju će obrazac poslati na navedeni URL na obradu.
  • selected = "selected" - Bira poziciju liste kao primjer.

Uzorak HTML obrasca | Lista za pomeranje

Povećanjem vrijednosti atributa size = "" dobijamo listu sa trakom za pomicanje:

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

HTML forme

Za ovu opciju koristimo oznaku multiple = "multiple", koja omogućava odabir nekoliko pozicija. Njegovo odsustvo omogućava da se izabere samo jedna stavka.

  • type = "submit" - definira dugme.
  • type = "reset" - definiše dugme za resetovanje.
  • vrijednost = "" - definira oznaku na gumbu.

    • Pogledajte dodatno:

    Opis

    Tag

    postavlja obrazac na web stranici. Obrazac je namijenjen razmjeni podataka između korisnika i servera. Opseg primjene obrazaca nije ograničen samo na slanje podataka na server; pomoću klijentskih skripti možete pristupiti bilo kojem elementu obrasca, modificirati ga i primijeniti prema vlastitom nahođenju.

    Dokument može sadržavati bilo koji broj obrazaca, ali samo jedan obrazac može biti poslan serveru istovremeno. Iz tog razloga, podaci obrasca moraju biti nezavisni jedan od drugog.

    Za slanje obrasca na server koristite dugme Pošalji, isto se može postići pritiskom na tipku Enter unutar obrasca. Ako dugme Pošalji ne postoji na obrascu, taster Enter simulira njegovu upotrebu.

    Kada se obrazac preda serveru, kontrola podataka se prenosi na program koji je specificiran atributom akcije oznake. ... Pregledač priprema informacije u obliku para "ime = vrijednost", gdje je ime određeno atributom name oznake a vrijednost unosi korisnik ili se postavlja u zadano polje obrasca. Ako se metoda GET koristi za slanje podataka, onda adresna traka može imati sljedeći oblik.

    http: //www..cgi?nick =% C2% E0% ED% FF +% D8% E0% EF% EE% F7% EA% E8% ED & stranica = 5

    Parametri su navedeni iza upitnika iza adrese CGI programa i odvojeni su znakom ampersand (&). Nelatinski znakovi se pretvaraju u heksadecimalni (u obliku% HH, gdje je HH heksadecimalni kod za vrijednost ASCII znaka), razmak se zamjenjuje sa plusom (+).

    Dozvoljeno unutar kontejnera postavite druge oznake, dok se sama forma ni na koji način ne prikazuje na web stranici, vidljivi su samo njeni elementi i rezultati ugniježđenih oznaka.

    Sintaksa

    ...

    Atributi

    Postavlja kodiranje u kojem server može primati i obrađivati ​​podatke. Adresa programa ili dokumenta koji obrađuje podatke obrasca. Omogućava automatsko dovršavanje polja obrasca. Način za kodiranje podataka obrasca. Metoda HTTP protokola. Ime obrasca. Otkazuje ugrađenu provjeru valjanosti podataka obrasca za ispravan unos. Ime prozora ili okvira u koji će rukovalac učitati vraćeni rezultat.

    Kraj oznaka

    Obavezno.

    HTML5 IE Cr Op Sa Fx

    Oznaka FORM

    Šta mislite kako znači skraćenica "OS"?

    Oficiri
    Operativni sistem
    Velike prugaste muhe

    Rezultat ovog primjera prikazan je na sl. jedan.

    Rice. 1. Pregled elemenata obrasca u prozoru pretraživača

    ... sadržaj forme ...

  • Upravo unutar elementa forme treba da postoje kontrole, kojih može biti koliko god želite.

    • Atributi obrasca:

    • Atribut akcije specificira serverski fajl sa skriptom odgovornom za glavnu obradu podataka poslatih iz obrasca. Obično je kod ove datoteke napisan u programskom jeziku na strani servera, na primjer, na jeziku php ili perl.
    • Atribut enctype označava vrstu informacija koje se prenose na server, ako su to samo tekstualni podaci - tekst / običan, ako se datoteke šalju s obrascem, tada biste trebali navesti multipart / form-data.
    • Atribut metode specificira i definira oblik prijenosa podataka. Nećemo se detaljnije zadržavati na tome, ali treba reći da za pouzdaniji prijenos treba navesti metodu pošte.

    Elementi HTML forme

      <tip unosa = "tekst" ime = "prijava" veličina = "20" vrijednost = "(! LANG: Prijava" maxlength = "25" > !}

      rezultat:

      • Vrijednost atributa tipa - text - označava da je ovo tekstualno polje
      • size - veličina tekstualnog polja u znakovima
      • maxlength - maksimalni broj znakova koji stane u polje
      • vrijednost - originalni tekst u tekstualnom polju
      • name - ime elementa, potrebnog za obradu podataka u datoteci za rukovanje

      rezultat:


      Umjesto teksta, u polju se prikazuje maska ​​- zvjezdice ili kružići

      <tip unosa = "podnesi" vrijednost = "Pošalji podatke">

      rezultat:

      Dugme za slanje prikuplja sav korisnički unos iz obrasca i šalje ga na adresu navedenu u atributu radnje obrasca.

      <tip unosa = "reset" vrijednost = "(! LANG: Očisti obrazac" > !}

      rezultat:

      Dugme vraća stanje svih kontrola u prvobitno stanje (briše obrazac)

      <input type = "checkbox" name = "asp" value = "(! LANG: da" > !} ASP<br> <input type = "checkbox" name = "js" value = "(! LANG: da" checked = "checked" > !} javascript<br> <input type = "checkbox" name = "php" value = "(! LANG: da" > !} PHP<br> <input type = "checkbox" name = "html" value = "(! LANG: da" checked = "checked" > !} Html<br>

      ASP
      javascript
      PHP
      Html


      rezultat:

      ASP
      javascript
      PHP
      Html

      U html-u se checkbox koristi za organizovanje višestrukog odabira, tj. kada je potrebno i moguće izabrati nekoliko opcija odgovora

      <tip unosa = "radio" ime = "knjiga" vrijednost = "(! LANG: asp" > !} ASP<br> <tip unosa = "radio" ime = "knjiga" vrijednost = "(! LANG: js" > !} Javascript<br> <tip unosa = "radio" ime = "knjiga" vrijednost = "(! LANG: php" > !} PHP<br> <tip unosa = "radio" ime = "knjiga" vrijednost = "(! LANG: html" checked = "checked" > !} Html<br>

      ASP
      Javascript
      PHP
      Html

      rezultat:

      ASP
      Javascript
      PHP
      Html

      radio dugme html služi za jedan izbor između nekoliko opcija

      Atribut checked postavlja element koji je odmah provjeren

    Bitan: Za artikle radio potrebno je da vrijednost atributa ime svi elementi u grupi su imali isto: u ovom slučaju elementi će raditi međusobno, kada je jedan element uključen, ostali će se isključiti

    Padajući HTML

    Pogledajmo primjer dodavanja padajuće liste:

    1 2 3 4 5 6 <odaberite naziv = "knjiga" veličina = "1"> <vrijednost opcije = "(! LANG: asp" > !} ASP</ opcija> <vrijednost opcije = "(! LANG: js" > !} JavaScript</ opcija> <vrijednost opcije = "(! LANG: php" > !} PHP</ opcija> <vrijednost opcije = "(! LANG: html" selected = "selected" > !} Html</ opcija> </ odaberite>

    rezultat:

    • Padajuća lista se sastoji od glavne oznake - select - koja ima završni par, a svaka stavka liste je oznaka opcija, unutar koje se prikazuje tekst stavke
    • Atribut veličine s vrijednošću "jedan" označava da skupljena lista prikazuje jednu stavku, a ostale se otvaraju klikom na strelicu menija
    • Odabrani atribut stavke (opcija) označava da će ova određena stavka biti u početku vidljiva, a ostale stavke su "sažete"

    Za velike i složene liste postoji opcija dodati podnaslove- oznaka optgroup sa atributom label (label):

    1 2 3 4 5 6 7 8 9 10 11 12 <odaberite naziv = "knjiga" veličina = "1"> <optgroup label = "engleski"> <vrijednost opcije = "(! LANG: asp" > !} ASP</ opcija> <vrijednost opcije = "(! LANG: js" > !} JavaScript</ opcija> <vrijednost opcije = "(! LANG: php" > !} PHP</ opcija> <vrijednost opcije = "(! LANG: html" selected = "selected" > !} Html</ opcija> </ optgroup> <optgroup label = "Rusi"> <vrijednost opcije = "(! LANG: asp_rus" > !} ASP na ruskom</ opcija> <vrijednost opcije = "(! LANG: js_rus" > !} JavaScript na ruskom</ opcija> </ optgroup> </ odaberite>


    Da pruži priliku odaberite više stavki u isto vrijeme mora se dodati multipli atribut. Ali u ovom slučaju, atribut size bi trebao biti postavljen na vrijednost veću od 1:

    rezultat:

    • Širina elementa ovisi o atributu cols, koji određuje koliko znakova stane horizontalno
    • Atribut rows određuje broj redova u elementu

    Ostali elementi

    Dodatni elementi i atributi

    • Za kontrole radio i polje za potvrdu zgodno je koristiti dodatne elemente, koji, prvo, usidreju tekst za sam radio ili checkbox element, a drugo, dodaju potez na klik:
      • <input type = "checkbox" id = "book1"> <oznaka za = "book1"> ASP</ label>

      U primjeru, natpis (oznaka oznake) je kreiran za element potvrdnog okvira. Vezivanje se vrši preko atributa id, čija je vrijednost navedena u for atributu oznake.

      rezultat:

    • Disabled atribut vam omogućava da blokirate element, čineći ga nedostupnim za modifikacije korisnika:
      • <tip unosa = "tekst" ime = "prijava" veličina = "20" vrijednost = "(! LANG: Prijava" maxlength = "25" disabled = "disabled" >!}
      <input type = "checkbox" name = "asp" value = "(! LANG: da" > !} ASP<br> <input type = "checkbox" name = "js" value = "(! LANG: da" checked = "checked" disabled = "disabled" > !} javascript<br>


      ASP
      javascript

    HTML obrasci su kontrole koje se koriste za prikupljanje informacija od posjetitelja web stranice.

    Web obrasci se sastoje od kolekcije okvira za tekst, dugmadi, lista i drugih kontrola na koje je moguće kliknuti. Tehnički, obrasci prenose podatke od korisnika do udaljenog servera.

    Za primanje i obradu podataka iz obrazaca koriste se web programski jezici, kao npr PHP, Perl.

    Prije HTML5, web obrasci su bili zbirka više elemenata. , završava dugmetom ... Bilo je potrebno mnogo truda da se stilizuju formulari u različitim pretraživačima. Osim toga, obrasci su zahtijevali JavaScript za provjeru unosa, a lišeni su specifičnih tipova polja za unos za specificiranje svakodnevnih informacija kao što su datumi, adrese e-pošte i URL-ovi.

    HTML5 forme riješio većinu ovih uobičajenih problema uvođenjem novih atributa, pružajući mogućnost promjene izgleda elemenata forme CSS3.

    Rice. 1. Poboljšani web obrasci sa HTML5

    Kreiranje HTML5 obrazaca

    1. Element

    Bilo koji oblik je zasnovan na elementu ...... Ne omogućava unos podataka, jer je kontejner koji drži zajedno sve kontrole obrasca - polja... Atributi ovog elementa sadrže informacije koje su zajedničke za sva polja obrasca, tako da morate uključiti logički kombinovana polja u jedan obrazac.

    Tabela 1. Atributi oznake
    Atribut Značenje / Opis
    accept-charset Vrijednost atributa je razmaknuta lista kodiranja znakova koji će se koristiti za podnošenje obrasca, na primjer .
    akcija Obavezni atribut koji specificira url rukovaoca obrascima na serveru kojem se prosljeđuju podaci. To je datoteka (na primjer, action.php) koja opisuje šta treba raditi sa podacima obrasca. Ako vrijednost atributa nije navedena, tada će nakon ponovnog učitavanja stranice elementi obrasca poprimiti svoje zadane vrijednosti.
    Ako će sav posao biti obavljen na strani klijenta pomoću JavaScript skripti, tada se vrijednost # može specificirati za atribut akcije.
    Također možete osigurati da obrazac koji je popunio posjetitelj stigne na vašu poštu. Da biste to uradili, potrebno je da izvršite sledeći unos:
    autocomplete

    enctype Koristi se za označavanje MIME-tip podataka koji se šalju sa formom, na primjer, enctype = "multipart / form-data". Navedeno samo ako je metoda = "post".
    application / x-www-form-urlencoded je zadani tip sadržaja, što ukazuje da su dostavljeni podaci lista varijabli obrasca kodiranih URL-om. Znakovi za razmak (ASCII 32) će biti kodirani kao +, a specijalni znakovi kao što su! će biti kodiran u heksadecimalni kao% 21.
    multipart / form-data - koristi se za slanje obrazaca koji sadrže datoteke, ne-ASCII podatke i binarne podatke, sastoji se od nekoliko dijelova od kojih svaki predstavlja sadržaj pojedinačnog elementa obrasca.
    tekst / običan - označava da se prenosi običan (ne html) tekst.
    metoda Određuje kako se prosljeđuju podaci obrasca.
    Metoda get prosljeđuje podatke serveru kroz adresnu traku pretraživača. Prilikom generisanja zahtjeva serveru, sve varijable i njihove vrijednosti formiraju niz poput www.anysite.ru/form.php?var1=1&var2=2. Imena i vrijednosti varijabli se dodaju adresi servera nakon? i odvojeni su znakom &. Svi specijalni znakovi i slova osim latinice su kodirani u % nn formatu, razmak je zamijenjen sa +. Ovu metodu treba koristiti ako ne prenosite velike količine informacija. Ako namjeravate poslati datoteku uz obrazac, ova metoda neće raditi.
    Post metoda se koristi za slanje velikih količina podataka, kao i povjerljivih informacija i lozinki. Podaci poslati ovim metodom nisu vidljivi u zaglavlju URL-a jer se nalaze u tijelu poruke.
    ime Setovi naziv obrasca koristiti za pristup elementima obrasca putem skripti, na primjer name = "opros".
    novalidate Onemogućuje provjeru valjanosti na dugmetu za podnošenje obrasca. Atribut se koristi bez specificiranja vrijednosti
    cilj Određuje prozor na koji će informacije biti usmjerene:
    _blank - novi prozor
    _self - isti okvir
    _parent - roditeljski okvir (ako postoji, ako ne, onda do trenutnog)
    _top je prozor najvišeg nivoa u odnosu na ovaj okvir. Ako poziv nije iz podređenog okvira, onda u isti okvir.

    2. Grupisanje elemenata forme

    Element

    ...
    namijenjen je grupiranju elemenata koji su međusobno povezani, čime se oblik dijeli na logičke fragmente.

    Svaka grupa elemenata može se imenovati pomoću elementa koji prati oznaku

    ... Naziv grupe pojavljuje se na lijevoj strani u gornjem rubu
    ... Na primjer, ako je element
    kontakt informacije se pohranjuju:

    Kontakt informacije


    Rice. 2. Grupisanje elemenata forme pomoću

    Tabela 2. Atributi oznake
    Atribut Značenje / Opis
    onemogućeno Ako je atribut prisutan, tada je grupa povezanih elemenata obrasca koji se nalaze unutar kontejnera
    onemogućeno za popunjavanje i uređivanje. Koristi se za ograničavanje pristupa nekim poljima obrasca koja sadrže prethodno unesene podatke. Atribut se koristi bez navođenja vrijednosti -
    .
    formu
    u istom dokumentu. Označava jedan ili više oblika kojima ova grupa elemenata pripada. Atribut trenutno ne podržava nijedan pretraživač.
    ime Definiše ime koristiti za referenciranje elemenata u JavaScript-u ili za referenciranje podataka obrasca nakon što je obrazac popunjen i poslan. Analogno atributu id.

    3. Kreirajte polja obrasca

    Element kreira većinu polja obrasca. Atributi elementa se razlikuju ovisno o vrsti polja za koje se element koristi.

    Koristeći css stilove, možete promijeniti veličinu fonta, vrstu fonta, boju i druga svojstva teksta, kao i dodati ivice, boju pozadine i sliku pozadine. Širina polja je postavljena svojstvom širine.

    Tabela 3. Atributi oznake
    Atribut Značenje / Opis
    prihvatiti Određuje vrstu datoteke koja je dozvoljena za slanje na server. Indicirano samo za ... Moguće vrijednosti:
    file_extension - omogućava učitavanje datoteka sa navedenom ekstenzijom, na primjer, accept = ". gif", accept = ". pdf", accept = ". doc"
    audio / * - omogućava preuzimanje audio datoteka
    video / * - omogućava postavljanje video datoteka
    image / * - omogućava postavljanje slika
    media_type - označava vrstu medija učitanih datoteka.
    alt Definiše alternativni tekst za slike, naznačeno samo za .
    autocomplete Odgovoran za pamćenje vrijednosti unesenih u tekstualno polje i njihovu automatsku zamjenu prilikom naknadnog unosa:
    uključeno - znači da polje nije zaštićeno, a njegova vrijednost se može pohraniti i preuzeti,
    isključeno - onemogućuje automatsko dovršavanje za polja obrasca.
    autofokus Omogućava vam da se uvjerite da u učitanom obrascu ovo ili ono polje za unos već ima fokus (odabrano), spremno za unos vrijednosti.
    provjereno Atribut provjerava da li je polje za potvrdu označeno po defaultu pri učitavanju stranice za polja tipa = "checkbox" i type = "radio".
    onemogućeno
    formu Vrijednost atributa mora biti jednaka id atributu elementa u istom dokumentu. Određuje jedan ili više obrazaca kojima ovo polje obrasca pripada.
    formiranje Postavlja url datoteke koja će obraditi podatke unesene u polja prilikom slanja obrasca. Postavlja se samo za polja tipa type = "submit" i type = "image". Ovaj atribut nadjačava vrijednost atributa akcije samog obrasca.
    formenctype Određuje kako će podaci polja obrasca biti kodirani kada se pošalju na server. Nadjačava vrijednost atributa enctype obrasca. Postavlja se samo za polja tipa type = "submit" i type = "image". Opcije su:
    aplikacija / -x-www-form-urlencoded je zadana postavka. Svi znakovi su kodirani prije slanja (razmaci se zamjenjuju sa +, specijalni znakovi se pretvaraju u ASCII HEX vrijednosti)
    multipart / form-data - znakovi nisu kodirani
    tekst / običan - razmaci se zamjenjuju znakom +, a specijalni znakovi nisu kodirani.
    formmethod Atribut specificira metodu koju će pretraživač koristiti za slanje podataka obrasca na server. Postavlja se samo za polja tipa type = "submit" i type = "image". Nadjačava vrijednost atributa metode obrasca. Opcije su:
    get je zadana postavka. Podaci iz obrasca (par ime/vrijednost) se dodaju na url i šalju na server: url? Ime = vrijednost & ime = vrijednost
    post - Podaci obrasca se šalju kao http zahtjev.
    formnovalidate Određuje da se podaci polja obrasca ne trebaju provjeravati kada se obrazac pošalje. Nadjačava vrijednost novalidate atributa obrasca. Može se koristiti bez specificiranja vrijednosti atributa.
    formtarget Određuje gdje će se prikazati odgovor primljen nakon slanja obrasca. Postavlja se samo za polja tipa type = "submit" i type = "image". Nadjačava vrijednost ciljnog atributa obrasca.


    _parent - Učitava odgovor u roditeljski okvir
    _top - učitava odgovor na cijelom ekranu
    framename - Učitava odgovor u okvir sa navedenim imenom.
    visina Vrijednost atributa sadrži broj piksela bez navođenja jedinice. Postavlja visinu polja obrasca tipa type = "image", na primjer ... Preporučuje se istovremeno postavljanje i visine i širine polja.
    lista Je referenca na stavku , sadrži svoj id. Omogućava vam da korisniku date nekoliko opcija za izbor kada počne da unosi vrijednost u odgovarajuće polje.
    max Omogućava vam da ograničite dozvoljeni unos numeričkih podataka na maksimalnu vrijednost; vrijednost atributa može sadržavati cijeli broj ili razlomak. Preporučuje se korištenje ovog atributa zajedno s atributom min. Radi sa sljedećim tipovima polja: broj, raspon, datum, datum i vrijeme, datum i vrijeme-lokalno, mjesec, vrijeme i sedmica.
    maxlength Atribut specificira maksimalan broj znakova koji se može unijeti u polje. Zadana vrijednost je 524288 znakova.
    min Omogućava vam da ograničite važeći numerički unos na minimalnu vrijednost.
    višestruko Omogućava korisniku da unese više vrijednosti atributa, odvojenih zarezom. Odnosi se na fajlove i adrese e-pošte. Navedeno bez vrijednosti atributa.
    ime Određuje ime koje će se koristiti za pristup elementu na primjer u css stilovima. Analogno atributu id.
    uzorak Omogućava vam da definirate korištenje regularni izraz sintaksu podataka koji moraju biti dozvoljeni u određenom polju. Na primjer, obrazac = "(3) - (3)" - uglaste zagrade postavljaju raspon važećih znakova, u ovom slučaju - sva mala slova, broj u vitičastim zagradama označava da su potrebna tri mala slova, praćena crtom, zatim tri cifre u rasponu od 0 do 9.
    čuvar mjesta Sadrži tekst koji se prikazuje u polju za unos prije popunjavanja (najčešće je nagovještaj).
    samo za čitanje Ne dozvoljava korisniku da mijenja vrijednosti elemenata forme, dok je odabir i kopiranje teksta dostupno. Navedeno bez vrijednosti atributa.
    potrebno Prikazuje poruku u kojoj se navodi da je ovo polje obavezno. Ako korisnik pokuša poslati obrazac bez unošenja tražene vrijednosti u ovo polje, na ekranu će se prikazati poruka upozorenja. Navedeno bez vrijednosti atributa.
    veličina Određuje prividnu širinu margine, u znakovima. Podrazumevano je 20. Radi sa sljedećim tipovima polja: tekst, pretraga, tel, url, email i lozinka.
    src Određuje url slike koji će se koristiti kao dugme za slanje podataka obrasca. Određeno samo za polje .
    korak Koristi se za stavke koje zahtevaju numerički unos, označava količinu povećanja ili smanjenja vrednosti tokom podešavanja opsega (korak).
    tip dugme - kreira dugme.
    potvrdni okvir - pretvara polje za unos u kvadratić koji se može označiti ili poništiti, na primjer
    imam auto
    boja - Generira birače boja u podržanim pretraživačima, dajući korisnicima mogućnost odabira vrijednosti boja u heksadecimalnom formatu.
    datum - omogućava vam da unesete datum u formatu dd.mm.gggg.
    rođendan:
    datetime-local - omogućava vam da unesete datum i vrijeme, odvojene velikim engleskim slovom T prema obrascu dd.mm.gggg hh: mm.
    Rođendan - dan i vrijeme:
    e-pošta - pretraživači koji podržavaju ovaj atribut će očekivati ​​da korisnik unese podatke koji odgovaraju sintaksi email adresa.
    Email:
    fajl - omogućava vam da otpremite fajlove sa računara korisnika.
    Odaberite fajl:
    skriveno - sakriva kontrolu koja nije vidljiva pretraživaču i sprečava korisnika da promeni podrazumevane vrednosti.
    slika - kreira dugme, omogućavajući vam da umetnete sliku umesto teksta na dugme.
    mjesec - Omogućava korisniku da unese godinu i mjesec koristeći obrazac yyyy-mm.
    broj - namijenjen za unos cjelobrojnih vrijednosti. Njegovi atributi min, max i step postavljaju gornje, donje i vrijednosti razmaka, redom. Ovi atributi se pretpostavljaju za sve stavke koje imaju numeričke vrijednosti. Njihove zadane vrijednosti zavise od tipa elementa.
    Navedite količinu (od 1 do 5):
    lozinka - kreira tekstualna polja u obrascu, dok se znakovi koje unese korisnik zamjenjuju zvjezdicama, mecima ili drugim ikonama koje postavlja pretraživač.
    Unesite lozinku:
    radio - stvara radio dugme - kontrolu u obliku malog kruga koji se može uključiti ili isključiti.
    vegetarijanac:
    raspon - omogućit će vam da kreirate element sučelja kao što je klizač, min / max - omogućit će vam da postavite raspon odabira
    reset - kreira dugme koje briše polja obrasca od podataka koje je uneo korisnik.
    pretraga - označava polje za pretragu, po defaultu je polje za unos pravougaonog oblika.
    Traži:
    submit - Kreira standardno dugme na koje se može kliknuti. Dugme prikuplja informacije iz obrasca i šalje ih na obradu.
    text - Kreira tekstualne okvire na obrascu, izlazeći okvir za tekst u jednom redu za unos teksta.
    vrijeme - omogućava vam da unesete vrijeme u 24-satnom formatu pomoću šablona hh: mm. U podržanim pretraživačima, pojavljuje se kao kontrola numeričkog unosa sa vrijednošću na koju se može kliknuti mišem i prihvaća samo vrijednosti vremena.
    Navedite vrijeme:
    url - polje je namijenjeno za navođenje URL adresa.
    Glavna stranica:
    sedmica - Odgovarajući alat za pokazivač omogućava korisniku da odabere jednu sedmicu u godini, a zatim daje unos podataka u formatu nn-gggg. U zavisnosti od godine, broj sedmica može biti 52 ili 53.
    Navedite sedmicu:
    vrijednost Određuje tekst prikazan na dugmetu, u okviru ili povezani tekst. Nije navedeno za polja tipa datoteke.
    širina Vrijednost atributa sadrži broj piksela. Omogućava vam da postavite širinu polja obrasca.

    4. Polja za unos teksta

    Element koristi se umjesto elementa kada trebate kreirati velike tekstualne okvire. Tekst prikazan kao originalna vrijednost nalazi se unutar oznake. Dimenzije polja se postavljaju pomoću atributa cols - horizontalne dimenzije, redovi - vertikalne dimenzije. Visina polja se može postaviti pomoću svojstva visine. Sve veličine se izračunavaju na osnovu veličine jednog znaka monoprostornog fonta.

    Tabela 4. Atributi oznake

    7. Dugmad

    Element kreira dugmad na koja se može kliknuti. Za razliku od kreiranih dugmadi ( , , , ), unutar elementa .

    Dugmad omogućavaju korisnicima da dostave podatke u obrazac, obrišu sadržaj obrasca ili poduzmu neku drugu radnju. Možete kreirati ivice, promijeniti pozadinu i poravnati tekst na gumbu.

    Tabela 9. Atributi oznake
    Atribut Značenje / Opis
    autofokus Postavlja fokus na dugme pri učitavanju stranice.
    onemogućeno Onemogućuje dugme, čime se ne može kliknuti.
    formu Označava jedan ili više oblika kojima ovo dugme pripada. Vrijednost atributa je identifikator odgovarajućeg obrasca.
    formiranje Vrijednost atributa sadrži url rukovatelja za podatke obrasca koji se šalju kada se klikne na dugme. Samo za tipku tipa = "pošalji". Nadjačava vrijednost atributa akcije specificiranog za element .
    formenctype Određuje tip kodiranja podataka obrasca prije nego što se predaju serveru kada se kliknu na tipke tipa = "pošalji". Nadjačava vrijednost atributa enctype specificiranog za element ... Moguće vrijednosti:
    aplikacija / x-www-form-urlencoded je zadana postavka. Svi znakovi će biti kodirani prije slanja.
    multipart / form-data - znakovi nisu kodirani. Koristi se kada se fajlovi učitavaju pomoću obrasca.
    tekst / običan - znakovi nisu kodirani i razmaci se zamjenjuju znakom +.
    formmethod Atribut definira metodu koju će pretraživač koristiti za slanje obrasca. Nadjačava vrijednost atributa metode navedenog na elementu ... Naveden je samo za tipke tipa = "submit". Moguće vrijednosti:
    get - podaci iz obrasca (par ime/vrijednost) se dodaju u url i šalju na server. Ova metoda ima ograničenja u pogledu veličine poslanih podataka i nije prikladna za slanje lozinki i povjerljivih informacija.
    post - podaci iz obrasca se dodaju kao http zahtjev. Metoda je pouzdanija i sigurnija od get i nema ograničenja veličine.
    formnovalidate Atribut specificira da se podaci obrasca ne trebaju provjeravati nakon podnošenja. Naveden je samo za tipke tipa = "submit".
    formtarget Atribut određuje u kojem prozoru će se prikazati rezultat nakon slanja obrasca. Naveden je samo za tipke tipa = "submit". Nadjačava vrijednost ciljnog atributa specificiranog za element .
    _blank - učitava odgovor u novi prozor / karticu
    _self - učitava odgovor u isti prozor (podrazumevano)
    _parent - Učitava odgovor u roditeljski okvir
    _top - učitava odgovor na cijelom ekranu
    framename - Učitava odgovor u okvir sa navedenim imenom.
    ime Određuje ime dugmeta, vrednost atributa je tekst. Koristi se za povezivanje sa podacima obrasca nakon slanja obrasca ili za povezivanje sa datim dugmetom(ima) u JavaScript-u.
    tip Definira tip dugmeta. Moguće vrijednosti:
    dugme - dugme na koje se može kliknuti
    reset - dugme za resetovanje, vraća originalnu vrednost
    pošalji - dugme za slanje podataka obrasca.
    vrijednost Postavlja zadanu vrijednost koja se šalje kada se klikne na dugme.

    8. Polje za potvrdu i radio dugmad u obrascima

    Polje za potvrdu u obrascima se postavlja pomoću konstrukcije i prekidač sa .

    Za razliku od radio dugmadi, nekoliko polja za potvrdu može se postaviti u jednom obliku. Ako je označeni atribut naveden za potvrdne okvire, onda kada se stranica učita, potvrdni okviri će već biti označeni u odgovarajućim poljima obrasca.

    Element

    U procesu navigacije kroz stranice, korisnik u osnovi samo klikne na linkovi za navigaciju web stranicama.

    No, jasno je da korisnik ponekad mora dati svoje polja za unos... Ove vrste interakcija uključuju:

    • registracija i prijava na web stranice;
    • unos ličnih podataka (ime, adresa, podaci o kreditnoj kartici, itd.);
    • filtriranje sadržaja (koristeći padajuće liste, potvrdne okvire, itd.);
    • vršenje pretrage;
    • učitavanje fajlova.

    Da bi se zadovoljile ove potrebe, HTML nudi interaktivne kontrole oblici:

    • tekstualna polja (za jedan ili više redova);
    • prekidači;
    • potvrdni okviri;
    • padajuće liste;
    • preuzimanje widgeta;
    • dugmad za slanje.

    Ove kontrole uključuju različite oznake HTML, ali većina njih koristi oznaku ... Budući da se radi o elementu koji se samozatvara, tip polja je određen njegovim atributom tipa:

    Element

    je blok element koji definira interaktivno dio web stranice. Kao rezultat, sve kontrole (npr ,