Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Pogreške
  • Opis obrasca. Izrada i rad s obrascima u html-u

Opis obrasca. Izrada i rad s obrascima u html-u

05.11.2019 Pogreške

HTML oznake koje definiraju HTML obrasce na web mjestu

Izrađujemo web stranice i pojedinačne stranice na internetu komunicirati s posjetiteljima.

HTML forme koriste se za registraciju posjetitelja na stranici, za interaktivne ankete i ankete, omogućuju vam slanje poruka, kupnju i tako dalje. HTML Obrazac je kreiran s jednom svrhom: prikupljanje i naknadni prijenos informacija za obradu u programsku skriptu ili e-mailom.

Uzorak HTML obrasca | Prijaviti se

Oznake, atributi i vrijednosti

  • - odrediti oblik.
  • name = "" - definira naziv obrasca.
  • method = "" - definira način slanja podataka iz obrasca. Vrijednosti: "get" (zadano) i "post". Često se koristi metoda "post", budući da omogućuje 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 obrasca kao što su gumbi, radio gumbi, tekstualna polja za unos podataka.
  • type = "text" - definira tekstualno polje za unos podataka.
  • type = "password" - definira polje za unos lozinke, dok se tekst prikazuje kao zvjezdice ili kružići.
  • type = "checkbox" - definira potvrdni okvir.
  • type = "hidden" - definira skriveni element obrasca - koristi se za slanje dodatnih informacija poslužitelju.
  • size = "25" - duljina 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-tipke ili prekidače. Vrijednost ovog atributa kao dijela 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" - definira url na koji će se slati podaci iz obrasca.
  • id = "" - definira naziv, identifikator elementa obrasca.
  • name = "" - definira naziv elementa obrasca.
  • - definirati tekstualno polje kao dio obrasca.
  • cols = "" - definira broj stupaca u tekstualnom polju obrasca.
  • rows = "" - definira broj redaka u tekstualnom polju obrasca.

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

Uzorak HTML obrasca | Padajući popis

HTML forme

Oznake, atributi i vrijednosti

  • - definirati popis s pozicijama za odabir.
  • size = "" - definira broj vidljivih pozicija liste. Ako je vrijednost 1, imamo posla s padajućim popisom.
  • - definirati pozicije (stavke) liste.
  • vrijednost = "" - sadrži vrijednost koju će obrazac poslati na navedeni url na obradu.
  • selected = "selected" - Odabire položaj popisa kao primjer.

Uzorak HTML obrasca | Listajući popis

Povećanjem vrijednosti atributa size = "" dobivamo popis s trakom za pomicanje:

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

HTML forme

Za ovu opciju koristimo oznaku multiple = "multiple" koja omogućuje odabir nekoliko pozicija. Njegova odsutnost omogućuje odabir samo jedne stavke.

  • type = "submit" - definira gumb.
  • type = "reset" - definira gumb za resetiranje.
  • vrijednost = "" - definira oznaku na gumbu.

    • Vidi dodatno:

    Opis

    Označiti

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

    Dokument može sadržavati bilo koji broj obrazaca, ali samo jedan obrazac može se istovremeno poslati poslužitelju. Iz tog razloga podaci obrasca moraju biti neovisni jedan o drugom.

    Za slanje obrasca na poslužitelj koristite gumb Pošalji, isto možete postići pritiskom na tipku Enter unutar obrasca. Ako gumb Pošalji nije prisutan na obrascu, tipka Enter simulira njegovu upotrebu.

    Kada se obrazac preda poslužitelju, kontrola podataka se prenosi na program koji je specificiran atributom akcije oznake. ... Preglednik priprema informacije u obliku para "ime = vrijednost", gdje je naziv određen atributom name oznake a vrijednost unosi korisnik ili je postavlja u zadano polje obrasca. Ako se metoda GET koristi za slanje podataka, 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 plusom (+).

    Dopušteno unutar spremnika postavite druge oznake, dok se sam obrazac ni na koji način ne prikazuje na web stranici, vidljivi su samo njegovi elementi i rezultati ugniježđenih oznaka.

    Sintaksa

    ...

    Atributi

    Postavlja kodiranje u kojem poslužitelj može primati i obraditi podatke. Adresa programa ili dokumenta koji obrađuje podatke obrasca. Omogućuje automatsko dovršavanje polja obrasca. Način kodiranja podataka obrasca. Metoda HTTP protokola. Naziv obrasca. Poništava ugrađenu provjeru valjanosti podataka obrasca radi ispravnog unosa. Naziv prozora ili okvira u koji će rukovatelj učitati vraćeni rezultat.

    Završna oznaka

    Potreban.

    HTML5 IE Cr Op Sa Fx

    Oznaka OBRAZAC

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

    časnici
    Operacijski sustav
    Velike prugaste muhe

    Rezultat ovog primjera prikazan je na sl. jedan.

    Riža. 1. Prikaz elemenata obrasca u prozoru preglednika

    ... sadržaj forme ...

  • Upravo unutar elementa obrasca trebale bi biti kontrole, kojih može biti koliko god želite.

    • Atributi obrasca:

    • Atribut action specificira datoteku poslužitelja sa skriptom odgovornom za glavnu obradu podataka poslanih iz obrasca. Obično je kod ove datoteke napisan u programskom jeziku na strani poslužitelja, na primjer, na jeziku php ili perl.
    • Atribut enctype označava vrstu informacija koje se prenose na poslužitelj, ako su to samo tekstualni podaci - tekstualni / obični, 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 obrasca

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

      Proizlaziti:

      • Vrijednost atributa tipa - text - označava da se radi o tekstualnom polju
      • size - veličina tekstualnog polja u znakovima
      • maxlength - maksimalni broj znakova koji stane u polje
      • vrijednost - izvorni tekst u tekstualnom okviru
      • naziv - naziv elementa, potrebnog za obradu podataka u datoteci za obradu

      Proizlaziti:


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

      <vrsta unosa = vrijednost "pošalji" = "Pošalji podatke">

      Proizlaziti:

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

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

      Proizlaziti:

      Gumb vraća stanje svih kontrola u njihovo izvorno stanje (briše obrazac)

      <vrsta unosa = "checkbox" name = "asp" vrijednost = "(! LANG: da" > !} ASP<br> <vrsta unosa = "checkbox" name = "js" vrijednost = "(! LANG: da" checked = "checked" > !} javascript<br> <vrsta unosa = "checkbox" name = "php" vrijednost = "(! LANG: da" > !} PHP<br> <vrsta unosa = "checkbox" name = "html" vrijednost = "(! LANG: da" checked = "checked" > !} HTML<br>

      ASP
      javascript
      PHP
      HTML


      Proizlaziti:

      ASP
      javascript
      PHP
      HTML

      U html-u se potvrdni okvir koristi za organiziranje višestrukog odabira, t.j. kada je potrebno i moguće odabrati nekoliko opcija odgovora

      <vrsta unosa = "radio" naziv = "knjiga" vrijednost = "(! LANG: asp" > !} ASP<br> <vrsta unosa = "radio" naziv = "knjiga" vrijednost = "(! LANG: js" > !} Javascript<br> <vrsta unosa = "radio" naziv = "knjiga" vrijednost = "(! LANG: php" > !} PHP<br> <vrsta unosa = "radio" naziv = "knjiga" vrijednost = "(! LANG: html" checked = "checked" > !} HTML<br>

      ASP
      Javascript
      PHP
      HTML

      Proizlaziti:

      ASP
      Javascript
      PHP
      HTML

      radio gumb html služi za jedan odabir iz više opcija

      Atribut checked postavlja element koji je odmah provjeren

    Važno: Za artikle radio potrebno je da vrijednost atributa Ime svi elementi u grupi imali su isto: u ovom slučaju, elementi će raditi međusobno, kada je jedan element uključen, ostali će biti isključeni

    Padajući HTML

    Pogledajmo primjer dodavanja padajućeg popisa:

    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>

    Proizlaziti:

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

    Za velike i složene popise postoji opcija dodati podnaslove- oznaka optgroup s 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:

    Proizlaziti:

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

    Ostali elementi

    Dodatni elementi i atributi

    • Za kontrole radio i potvrdni okvir zgodno je koristiti dodatne elemente, koji, prvo, čine tekst sidrom za radio ili element potvrdnog okvira, a drugo, dodaju potez na klik:
      • <vrsta unosa = "checkbox" id = "book1"> <oznaka za = "book1"> ASP</ label>

      U primjeru je stvoren natpis (oznaka oznake) za element potvrdnog okvira. Vezivanje se provodi putem atributa id, čija je vrijednost navedena u for atributu oznake.

      Proizlaziti:

    • Disabled atribut omogućuje vam da blokirate element, čineći ga nedostupnim za modifikacije korisnika:
      • <vrsta unosa = "tekst" naziv = "prijava" veličina = "20" vrijednost = "(! LANG: Prijava" maxlength = "25" disabled = "disabled" >!}
      <vrsta unosa = "checkbox" name = "asp" vrijednost = "(! LANG: da" > !} ASP<br> <vrsta unosa = "checkbox" name = "js" vrijednost = "(! 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 zbirke tekstnih okvira, gumba, popisa i drugih kontrola na koje je moguće kliknuti. Tehnički, obrasci prosljeđuju podatke od korisnika na udaljeni poslužitelj.

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

    Prije HTML5, web obrasci su bili zbirka više elemenata. , završava gumbom ... Bilo je potrebno mnogo truda da se oblikuju oblici u različitim preglednicima. Osim toga, obrasci su zahtijevali JavaScript za provjeru unosa, te su im oduzete određene vrste polja za unos za određivanje svakodnevnih informacija kao što su datumi, adrese e-pošte i URL-ovi.

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

    Riža. 1. Poboljšani web obrasci s HTML5

    Izrada HTML5 obrasca

    1. Element

    Bilo koji oblik temelji se na elementu ...... Ne predviđa unos podataka, jer je spremnik koji drži zajedno sve kontrole obrasca - polja... Atributi ovog elementa sadrže informacije koje su zajedničke svim poljima obrasca, tako da morate uključiti logički kombinirana polja u jedan obrazac.

    Tablica 1. Atributi oznake
    Atribut Značenje / Opis
    accept-charset Vrijednost atributa je razmaknuta popis kodiranja znakova koristiti za slanje obrasca, na primjer .
    akcijski Obavezni atribut koji specificira url rukovatelja obrascima na poslužitelju kojemu se prosljeđuju podaci. To je datoteka (na primjer, action.php) koja opisuje što učiniti s 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 izveden na strani klijenta pomoću JavaScript skripti, tada se vrijednost # može navesti za atribut akcije.
    Također možete osigurati da obrazac koji je ispunio posjetitelj stigne na vašu poštu. Da biste to učinili, morate unijeti sljedeći unos:
    samodovršavanje

    enctype Koristi se za označavanje MIME-vrsta podataka poslanih s obrascem, na primjer, enctype = "višedijelni / obrasci-podaci". Navedeno samo ako je metoda = "post".
    application / x-www-form-urlencoded je zadana vrsta sadržaja, što ukazuje da su dostavljeni podaci popis varijabli obrasca kodiranih URL-om. Znakovi za razmak (ASCII 32) bit će kodirani kao +, a posebni znakovi kao što su! bit će kodiran u heksadecimalni kao% 21.
    multipart / form-data - služi za slanje obrazaca koji sadrže datoteke, ne-ASCII podatke i binarne podatke, sastoji se od nekoliko dijelova od kojih svaki predstavlja sadržaj pojedinog 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 poslužitelju kroz adresnu traku preglednika. Prilikom generiranja zahtjeva poslužitelju, sve varijable i njihove vrijednosti formiraju niz poput www.anysite.ru/form.php?var1=1&var2=2. Imena i vrijednosti varijabli dodaju se adresi poslužitelja nakon? i odvojeni su znakom &. Svi posebni znakovi i slova osim latinice kodirani su 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 poslani ovom 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".
    novalidat Onemogućuje provjeru valjanosti na gumbu za slanje obrasca. Atribut se koristi bez navođenja vrijednosti
    cilj Određuje prozor na koji će biti usmjerene informacije:
    _blank - novi prozor
    _self - isti okvir
    _parent - roditeljski okvir (ako postoji, ako ne, onda na trenutni)
    _top je prozor najviše razine u odnosu na ovaj okvir. Ako poziv nije iz podređenog okvira, onda na isti okvir.

    2. Grupiranje elemenata obrasca

    Element

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

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

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

    Kontakt informacije


    Riža. 2. Grupiranje elemenata obrasca pomoću

    Tablica 2. Atributi oznake
    Atribut Značenje / Opis
    onemogućeno Ako je atribut prisutan, tada je grupa povezanih elemenata obrasca koji se nalaze unutar spremnika
    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 -
    .
    oblik
    u istom dokumentu. Označava jedan ili više oblika kojima ova skupina elemenata pripada. Atribut trenutno ne podržava nijedan preglednik.
    Ime Definira Ime koristiti za referenciranje elemenata u JavaScriptu ili za referenciranje podataka obrasca nakon što je obrazac ispunjen i poslan. Analogno atributu id.

    3. Napravite polja obrasca

    Element stvara većinu polja obrasca. Atributi elementa razlikuju se 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 obrube, boju pozadine i pozadinsku sliku. Širina polja je postavljena svojstvom širine.

    Tablica 3. Atributi oznake
    Atribut Značenje / Opis
    prihvatiti Određuje vrstu datoteke koja je dopuštena za slanje na poslužitelj. Indicirano samo za ... Moguće vrijednosti:
    file_extension - omogućuje prijenos datoteka s navedenim nastavkom, na primjer, accept = ". gif", accept = ". pdf", accept = ". doc"
    audio / * - omogućuje preuzimanje audio datoteka
    video / * - omogućuje učitavanje video datoteka
    slika / * - omogućuje učitavanje slika
    media_type - označava vrstu medija učitanih datoteka.
    alt Definira alternativni tekst za slike, naznačeno samo za .
    samodovršavanje Odgovoran za pamćenje vrijednosti unesenih u tekstualno polje i njihovu automatsku zamjenu pri naknadnom unosu:
    uključeno - znači da polje nije zaštićeno i da se njegova vrijednost može pohraniti i dohvatiti,
    isključeno - onemogućuje automatsko dovršavanje za polja obrasca.
    autofokus Omogućuje 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 je li potvrdni okvir označen prema zadanim postavkama pri učitavanju stranice za polja tipa = "checkbox" i type = "radio".
    onemogućeno
    oblik Vrijednost atributa mora biti jednaka atributu id 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 poslužitelj. 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 s +, posebni znakovi se pretvaraju u ASCII HEX vrijednosti)
    višedijelni / obrazac-podaci - znakovi nisu kodirani
    tekst / običan - razmaci se zamjenjuju znakom +, a posebni znakovi nisu kodirani.
    metoda oblika Atribut specificira metodu koju će preglednik koristiti za slanje podataka obrasca na poslužitelj. Postavlja se samo za polja tipa type = "submit" i type = "image". Nadjačava vrijednost atributa metode obrasca. Opcije su:
    get je zadana vrijednost. Podaci iz obrasca (par naziv/vrijednost) dodaju se na url i šalju na poslužitelj: url? Ime = vrijednost & ime = vrijednost
    post - Podaci obrasca šalju se kao http zahtjev.
    formnovalidate Određuje da se podaci polja obrasca ne trebaju provjeravati prilikom slanja obrasca. Nadjačava vrijednost novalidate atributa obrasca. Može se koristiti bez navođenja 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 na roditeljski okvir
    _top - učitava odgovor na cijelom zaslonu
    framename - učitava odgovor u okvir s navedenim imenom.
    visina Vrijednost atributa sadrži broj piksela bez navođenja jedinice. Postavlja visinu polja obrasca tipa type = "image", na primjer ... Preporuča se istovremeno postaviti i visinu i širinu polja.
    popis Je referenca na stavku , sadrži svoj id. Omogućuje vam da korisniku date nekoliko opcija za odabir kada počne unositi vrijednost u odgovarajuće polje.
    maks Omogućuje vam da ograničite dopušteni unos brojčanih podataka na maksimalnu vrijednost; vrijednost atributa može sadržavati cijeli broj ili razlomak. Preporuča se koristiti ovaj atribut zajedno s atributom min. Radi sa sljedećim vrstama polja: broj, raspon, datum, datum-vrijeme, datum-vrijeme-lokalno, mjesec, vrijeme i tjedan.
    maksimalna dužina Atribut određuje maksimalni broj znakova koji se može unijeti u polje. Zadana vrijednost je 524288 znakova.
    min Omogućuje vam da ograničite valjani brojčani unos na minimalnu vrijednost.
    višestruko Omogućuje korisniku da unese više vrijednosti atributa, odvojenih zarezom. Odnosi se na datoteke i adrese e-pošte. Navedeno bez vrijednosti atributa.
    Ime Određuje naziv koji će se koristiti za pristup elementu na primjer u css stilovima. Analogno atributu id.
    uzorak Omogućuje definiranje korištenja regularni izraz sintaksu podataka koji moraju biti dopušteni u određenom polju. Na primjer, uzorak = "(3) - (3)" - uglate zagrade postavljaju raspon valjanih znakova, u ovom slučaju - sva mala slova, broj u vitičastim zagradama označava da su potrebna tri mala slova, nakon kojih slijedi crtica, zatim tri znamenke u rasponu od 0 do 9.
    rezerviranog mjesta Sadrži tekst koji se prikazuje u polju za unos prije popunjavanja (najčešće je to nagovještaj).
    samo za čitanje Ne dopušta korisniku promjenu vrijednosti elemenata obrasca, dok je odabir i kopiranje teksta dostupan. Navedeno bez vrijednosti atributa.
    potreban 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. Zadana vrijednost je 20. Radi sa sljedećim vrstama polja: tekst, pretraživanje, tel, url, e-pošta i lozinka.
    src Određuje url slike za korištenje kao gumb za slanje podataka obrasca. Navedeno samo za polje .
    korak Koristi se za stavke koje zahtijevaju numerički unos, označava količinu povećanja ili smanjenja vrijednosti tijekom podešavanja raspona (korak).
    tip gumb - stvara gumb.
    potvrdni okvir - pretvara polje za unos u potvrdni okvir koji se može označiti ili poništiti, na primjer
    imam auto
    boja - generira birače boja u podržanim preglednicima, dajući korisnicima mogućnost odabira vrijednosti boja u heksadecimalnom formatu.
    datum - omogućuje unos datuma u formatu dd.mm.gggg.
    Rođendan:
    datetime-local - omogućuje 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 - preglednici koji podržavaju ovaj atribut će očekivati ​​da korisnik unese podatke koji odgovaraju sintaksi e-mail adresa.
    e-pošta:
    datoteka - omogućuje vam prijenos datoteka s računala korisnika.
    Odaberite datoteku:
    skriveno - sakriva kontrolu koja nije vidljiva pregledniku i sprječava korisnika da promijeni zadane vrijednosti.
    slika - stvara gumb, omogućujući vam da umetnete sliku umjesto teksta na gumb.
    mjesec - Omogućuje korisniku da unese godinu i mjesec pomoću uzorka gggg-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 ovise o vrsti elementa.
    Navedite količinu (od 1 do 5):
    lozinka - kreira tekstualna polja u obrascu, dok se znakovi koje je korisnik unio zamjenjuju zvjezdicama, mecima ili drugim ikonama koje postavlja preglednik.
    Upišite lozinku:
    radio - stvara radio gumb - kontrolu u obliku malog kruga koji se može uključiti ili isključiti.
    Vegetarijanac:
    raspon - omogućit će vam stvaranje elementa sučelja kao što je klizač, min / max - omogućit će vam postavljanje raspona odabira
    reset - stvara gumb koji briše polja obrasca od podataka koje je unio korisnik.
    pretraga - označava polje za pretraživanje, prema zadanim postavkama polje za unos je pravokutnog oblika.
    Traži:
    pošalji - stvara standardni gumb na koji se može kliknuti. Gumb prikuplja podatke iz obrasca i šalje ih na obradu.
    tekst - Stvara tekstualne okvire na obrascu, izlazeći jednoredni tekstualni okvir za unos teksta.
    vrijeme - omogućuje vam unos vremena u 24-satnom formatu pomoću predloška hh: mm. U podržanim preglednicima pojavljuje se kao kontrola numeričkog unosa s vrijednošću koju je moguće kliknuti mišem i prihvaća samo vremenske vrijednosti.
    Navedite vrijeme:
    url - polje je namijenjeno za određivanje URL adresa.
    Glavna stranica:
    tjedan - odgovarajući alat pokazivača omogućuje korisniku odabir jednog tjedna u godini, a zatim omogućuje unos podataka u nn-yyyy formatu. Ovisno o godini, broj tjedana može biti 52 ili 53.
    Navedite tjedan:
    vrijednost Određuje tekst prikazan na gumbu, u okviru ili povezani tekst. Nije navedeno za polja tipa datoteke.
    širina Vrijednost atributa sadrži broj piksela. Omogućuje postavljanje širine polja obrasca.

    4. Polja za unos teksta

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

    Tablica 4. Atributi oznake

    7. Gumbi

    Element stvara gumbe na koje se može kliknuti. Za razliku od kreiranih gumba ( , , , ), unutar elementa .

    Gumbi korisnicima omogućuju slanje podataka u obrazac, brisanje sadržaja obrasca ili poduzimanje neke druge radnje. Možete stvoriti obrube, promijeniti pozadinu i poravnati tekst na gumbu.

    Tablica 9. Atributi oznake
    Atribut Značenje / Opis
    autofokus Postavlja fokus na gumb pri učitavanju stranice.
    onemogućeno Onemogućuje gumb, čime se ne može kliknuti.
    oblik Označava jedan ili više oblika kojima ovaj gumb pripada. Vrijednost atributa je identifikator odgovarajućeg obrasca.
    formiranje Vrijednost atributa sadrži url rukovatelja za podatke obrasca koji se šalju kada se klikne gumb. Samo za tipku tipa = "pošalji". Nadjačava vrijednost atributa radnje navedenog za element .
    formenctype Određuje vrstu kodiranja podataka obrasca prije nego što se predaju poslužitelju kada se kliknu gumbi tipa type = "pošalji". Nadjačava vrijednost atributa enctype navedenog za element ... Moguće vrijednosti:
    application / x-www-form-urlencoded je zadana postavka. Svi znakovi će biti kodirani prije slanja.
    višedijelni / obrazac-podaci - znakovi nisu kodirani. Koristi se kada se datoteke učitavaju pomoću obrasca.
    tekst / običan - znakovi nisu kodirani i razmaci se zamjenjuju znakom +.
    metoda oblika Atribut definira metodu koju će preglednik koristiti za slanje obrasca. Nadjačava vrijednost atributa metode navedenog na elementu ... Naveden je samo za tipke tipa = "pošalji". Moguće vrijednosti:
    get - podaci iz obrasca (par naziv/vrijednost) se dodaju u url i šalju na poslužitelj. Ova metoda ima ograničenja na veličinu 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 navodi da se podaci obrasca ne smiju provjeravati nakon slanja. Naveden je samo za tipke tipa = "pošalji".
    formtarget Atribut određuje u kojem prozoru će se prikazati rezultat nakon slanja obrasca. Naveden je samo za tipke tipa = "pošalji". Nadjačava vrijednost ciljnog atributa navedenog za element .
    _blank - učitava odgovor u novi prozor/karticu
    _self - učitava odgovor u isti prozor (zadano)
    _parent - Učitava odgovor na roditeljski okvir
    _top - učitava odgovor na cijelom zaslonu
    framename - učitava odgovor u okvir s navedenim imenom.
    Ime Određuje naziv gumba, vrijednost atributa je tekst. Koristi se za povezivanje s podacima obrasca nakon slanja obrasca ili za povezivanje na dane gumbe u JavaScriptu.
    tip Definira vrstu gumba. Moguće vrijednosti:
    gumb - gumb na koji se može kliknuti
    reset - gumb za resetiranje, vraća izvornu vrijednost
    poslati - gumb za slanje podataka obrasca.
    vrijednost Postavlja zadanu vrijednost koja se šalje kada se klikne na gumb.

    8. Potvrdni okviri i radio gumbi u obrascima

    Potvrdni okviri u obrascima postavljaju se pomoću konstrukcije a prekidač sa .

    Za razliku od radio gumba, nekoliko potvrdnih okvira 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 po stranicama, korisnik u osnovi samo klikne na poveznice za navigaciju web stranicama.

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

    • registracija i prijava na web stranice;
    • unos osobnih podataka (ime, adresa, podaci o kreditnoj kartici, itd.);
    • filtriranje sadržaja (pomoću padajućih popisa, potvrdnih okvira itd.);
    • obavljanje pretrage;
    • učitavanje datoteka.

    Kako bi zadovoljio te potrebe, HTML nudi interaktivne kontrole oblici:

    • tekstualna polja (za jedan ili više redaka);
    • prekidači;
    • potvrdni okviri;
    • padajuće liste;
    • preuzimanje widgeta;
    • gumbe 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 određuje njegov atribut tipa:

    Element

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