S obzirom na osnovne HTML oznake ne možemo a da se ne dotaknemo ovoga važan element poput forme. Povratne informacije su često potrebne na web stranicama. Na primjer, popunjavanje obrasca na stranici, registracija, autorizacija, komentari itd. U svim ovim slučajevima korisnik popunjava posebne oblasti (polja obrasca) na stranici, nakon čega se podaci šalju na server. Za stvaranje povratne informacije koriste se obrasci. Forma je fragment HTML dokument namijenjen unosu korisnika.
Na slici je prikazan obrazac za registraciju učenika na web stranici obrazovne ustanove.
Kontejner se koristi za kreiranje obrasca
sa atributom akcije, koji specificira stranicu na serveru koja će obraditi podatke koje šalje obrazac.Struktura u svom najjednostavnijem obliku:
elementi forme...
Svaki obrazac također mora imati dugme za slanje podataka za slanje podataka nakon popunjavanja obrasca.
Struktura dugmadi:
Dakle, za snimanje gotovo svih elemenata obrasca koristi se oznaka sa atributom tipa. Za kreiranje dugmeta koje resetuje sve podatke iz obrazaca, koristi se sljedeća struktura:
Za stvaranje tekstualno polje(tekstualno polje) postoji parametar teksta. Koriste se sljedeći parametri: ime – naziv polja; veličina – za polje u simbolima; maxlength – maksimalni mogući broj znakova u polju; vrijednost – informacije prikazane u obrascu prema zadanim postavkama
Primjer unosa obrasca sa dva tekstualna polja:
Rezultat obrasca je prikazan na slici.
Ako treba da unesete u tekstualno polje veliki broj informacije, na primjer, komentar koristi oblik tekstualnog područja, koji se kreira pomoću oznake
Rezultat rada koda sa tekstualnim područjem prikazan je na slici.
Sljedeći element obrasci su liste koje vam omogućavaju da napravite izbor iz predstavljenog skupa vrijednosti. Oznake vam omogućavaju da kreirate obrazac liste
Struktura unosa liste:
Da bi element bio istaknut kada se stranica učita, neophodan je u tag-u
Sličan način odabira je okvir za potvrdu i elementi obrasca radio-dugme. Razlika između ovih elemenata je u tome što vam potvrdni okvir omogućava višestruke odabire, dok radio gumb dozvoljava samo jedan odabir.
Struktura polja za potvrdu i unosa radio dugmeta:
tekst
Radio dugme:
tekst
U elementima navedenim u strukturi, označeni atribut se po defaultu koristi za isticanje polja za potvrdu i radio dugmeta. Primjer korištenja polja za potvrdu, radio dugmeta i HTML koda prikazan je na slici.
Drugi element obrasca je dugme, specificirano pomoću atributa oznake tipa sa tipkom za vrijednost:
U navedenom kodu za kreiranje dugmeta postoji onclick parametar, koji obično specificira kod u programskom jeziku za izvođenje određene radnje kada se klikne na ovo dugme:
Za prikaz poruke u posebnom prozoru koristite JavaScript naredbu – aler. Rezultat primjera prikazan je na slici.
Da biste umetnuli sliku u dugme, koristite kod prikazan u sljedećem primjeru:
Prilikom registracije i prijavljivanja na web stranice koristi se polje sa skrivenim testom koje se prikazuje kao zvjezdice. Ovo je element obrasca za lozinku:
Registracija na sajtu je često podeljena na nekoliko stranica i svaka sledeća mora sadržati podatke sa prethodne. Da bi se sakrile prenesene informacije, koristi se element skrivene forme:
Skriveni element obrasca biće nevidljiv u prozoru pretraživača.
Za otpremanje datoteka na server, obrasci imaju element datoteke. Primjer koda za učitavanje datoteka na server je predstavljen u nastavku:
Dakle, u ovoj temi smo se bavili elementima obrasca za kreiranje različitih HTML stranica, koji, zajedno sa obrađivačima skripti na računaru ili serveru, omogućavaju razvoj punopravnih web aplikacija.
Često na web stranicama možete pronaći stranice sa HTML formama postavljenim na njima. Web obrasci su zgodan način za primanje informacija od posjetitelja vaše stranice. Primjer za to je -, - koji pruža povratne informacije posjetiteljima stranice i programerima. Obrasci su takođe pogodni za programere sajtova kada razvijaju CMS, što im omogućava da zadrže glavno svojstvo sajta - relevantnost. Ovaj članak pokriva osnove Kreiranje HTML-a-forme, njihova obrada i metode prenosa podataka sa ekranskih obrazaca u PHP skripte.
1) Napravite jednostavan obrazac
Oznake I definirati početak i kraj obrasca. Početna oznaka obrasca sadrži dva atributa: akcija I metoda. Atribut akcije sadrži URL skripte koji se mora pozvati za obradu skripte. Atribut metoda govori pretraživaču koju vrstu HTTP zahtjeva da koristi za podnošenje obrasca; moguće vrijednosti POŠTA I GET.
Komentar
Glavna razlika između POST i GET metoda je način na koji se informacije prenose. U metodi GET parametri se prosleđuju kroz adresnu traku, tj. u suštini u zaglavlju HTTP zahtjeva, dok se u POST metodi parametri prenose kroz tijelo HTTP zahtjeva i ni na koji način se ne odražavaju u adresnoj traci.
Ovaj html obrazac sadrži element pretraživati, koji otvara dijaloški okvir za odabir datoteke za otpremanje na server. Kada pritisnete dugme "Prenesi fajl", datoteka se prosljeđuje skripti za rukovanje.
Zatim morate napisati skriptu za rukovanje action.php. Prije pisanja rukovatelja, moramo odlučiti u koji direktorij ćemo kopirati datoteku:
if(isset($_FILES [ "myfile" ])) // Ako datoteka postoji
{
$catalog = "../image/" ; // Naš katalog
if (is_dir($catalog)) // Ako takav direktorij postoji
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Privremena datoteka
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Ime dokumenta
if(! copy ($myfile, $catalog)) echo "Greška pri kopiranju fajla". $myfile_name // Ako kopiranje datoteke nije uspjelo
}
else mkdir ("../image/" ); // Ako ne postoji takav direktorij, mi ćemo ga kreirati
}
?>
Komentar
Ako vjerujete da će korisnici učitati bilo koje datoteke na vaš server, morate biti izuzetno oprezni. Napadači mogu ugraditi "loš" kod u sliku ili fajl i poslati ga serveru. U takvim slučajevima morate strogo kontrolirati preuzimanje datoteka.
Ovaj primjer pokazuje kreiranje direktorija i kopiranje datoteke u taj direktorij na server.
Također bih želio pokazati primjer sa elementom polje za potvrdu. Ovaj element se malo razlikuje od ostalih elemenata po tome što ako ne i jedan od elemenata polje za potvrdu'a nije odabrano, tada superglobalna varijabla $_POSTće vratiti praznu vrijednost:
if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Ako je odabran barem 1 element
inače odjek "Odaberi vrijednost";
?>
26.02.2016
Zdravo svima!
Nastavljamo sa učenjem HTML osnove. U ovoj lekciji ćemo pogledati šta se desiloHTML formu i kako nastaje.
Ako ste primijetili, danas ni jedna web stranica ne može bez obrazaca. Ovi obrasci mogu biti različiti, na primjer formular za povratne informacije, obrazac za narudžbu, obrazac za registraciju i prijavu, obrazac za slanje komentara, recenzija, formular za pretragu i mnogi drugi.
Mislim da vam sada moramo pokazati primjere kako izgledaju HTML forme vizuelno.
○ Obrazac za pretragu:
○ Obrazac za prijavu na sajt:
○ Obrazac za povratne informacije:
○ Obrazac za narudžbu:
Mislim da ste shvatili suštinu kreiranja HTML obrazaca. Dakle, u današnjoj lekciji ću vam reći, kako napraviti jednostavanHTMLformu i koje oznake se mogu koristiti za kreiranje različitih polja obrasca.
Od sada pitam vas posebnu pažnju, jer je tema složena i važna.
HTMLformu je polje u koje korisnik unosi neke podatke. Ali i ove informacije se moraju nekako poslati. Neka vrsta HTML forme je kao motocikl bez benzina, čini se da ima sve, ali se iz nekog razloga ne kreće. Dakle, da bi obrazac radio i slao podatke koje je korisnik unio, potrebno je kreirati procesor obrazaca u . Ali nemojte se zamarati voditeljem, jer sada pohađate tečaj samo za početnike. Temu rukovanja obrascima ćemo pogledati u odjeljku “PHP”. Tako da sam nekako skrenuo pažnju sa glavne teme.
Učenje kreiranja HTML obrazaca
Svaki HTML obrazac će se sastojati od glavne oznake
. Unutar oznake preostali elementi obrasca su umetnuti i biće prikazani na web stranici.
Obrazac se mora postaviti između oznaka
.Za oznaku
Elementi forme
○ Tagunos
Tagunos– ovaj dio elementa polja obrasca namijenjen je unosu malog teksta i brojeva.
Za oznaku
nije potrebna završna oznaka
.
*atribute za oznaku< unos >
- name - ime elementa
- veličina - veličina polja
- obavezno – obavezno polje
- autofokus – pokazivač miša će odmah biti na polju prilikom učitavanja web stranice
- maxlength – ovaj atribut se može specificirati maksimalni iznos unos znakova u polje. Prema zadanim postavkama, bez atributa maxlength, u polje se može unijeti neograničen broj znakova
- placeholder – nagoveštaj za korisnika koji će biti prikazan direktno unutar obrasca polja (ranije je korišćen atribut value).
- type - tip elementa
Primjer punjenja:
Tip tipa elementa
Polje za tekst
○ Polje za tekst "text":
rezultat:
○ Polje za lozinku:
rezultat:
○ Polje e-pošte "e-pošta":
rezultat:
○ Dugme za odabir fajla iz računarske "fajle":
rezultat:
○ Polje za unos telefona “tel”:
rezultat:
○ Polje za pretragu:
rezultat:
○ Polje za odabir boje "boja":
rezultat:
○ Polje za unos i odabir brojeva "broj":
- min – minimalna vrijednost
- max – maksimalna vrijednost
- korak - korak.
rezultat:
○ Polje za odabir datuma "datum":
rezultat:
○ Polje za odabir datuma i lokalnog vremena u formatu (05/05/2015 00:00):
rezultat:
○ Prikažite padajući kalendar.
Polje za izbor godine i mjeseca u formatu (juli 2015):
rezultat:
○ Polje za odabir vremena "vrijeme":
rezultat:
○ Klizač dometa:
rezultat:
○ Polje za potvrdu:
checked – ovaj atribut specificira koji potvrdni okvir treba biti uključen po defaultu
rezultat:
○ Radio prekidač:
checked – ovaj atribut specificira koji radio prekidač treba biti uključen po defaultu
rezultat:
Dugmad
○ Dugme:
vrijednost - oznaka na gumbu
rezultat:
○ Dugme za slanje podataka "pošalji":
vrijednost - oznaka na gumbu
rezultat:
○ Dugme za resetovanje:
vrijednost - oznaka na gumbu
rezultat:
○ Dugme sa slikom:
rezultat:
○ Skriveno polje
○ odaberite oznaku
Tagizaberite– ovo je dio elementa obrasca namijenjen za ulazak u padajuću listu.
Za oznaku
Završna oznaka je obavezna
.
Tag
Za kreiranje stavki padajuće liste postoji oznaka Završna oznaka je obavezna .
*atribute za oznaku
- Ime je naziv cijele liste. Postavite samo za oznaku
- višestruki – za višestruki odabir, samo kada birate potrebno je držati pritisnutu tipku “CTRL”. Postavite samo za oznaku
- Vrijednost – postavlja se za svaku stavku liste za oznaku
- onemogućeno - blokira odabir elementa u padajućoj listi. Postavite samo za oznaku
rezultat:
Nije hitno Hitno Kurirom
ili ovako:
rezultat:
Nije hitno Hitno Kurirom
Sada ga blokirajmo sa liste "Hitno" sa atributom "disabled":
rezultat:
Nije hitno Hitno Kurirom
○ padajuće liste po grupama:
Da kreirate listu grupa, koristite oznaku
rezultat:
Opcija Textarea
Label Fieldset Legend
○ za višestruki izbor:
U oznaci
rezultat:
Opcija Textarea Label Fieldset Legenda
Višelinijsko tekstualno polje
○ Textarea tag
Tagtextarea– ovo je dio elementa polja obrasca, namijenjen za unos velikog teksta i brojeva.
Završna oznaka je obavezna
.
*atribute za oznaku< textarea >
- ime – naziv polja
- cols – širina polja
- redovi – visina polja
- placeholder – nagoveštaj za korisnika koji će biti prikazan direktno unutar obrasca polja.
rezultat:
ili ovako:
rezultat:
Unesite tekst
ili ovako:
rezultat:
Dizajn “Frame” (fieldset)
○ Fieldset tag
Fieldset tag– pomoću ove oznake možete nacrtati okvir oko objekta.
Završna oznaka je obavezna.
Dodatne oznake
rezultat:
To je sve što sam želio da vam kažem o temi "HTML forme". Sada da rezimiramo i u praksi pokušajmo da kreiramo jednostavan oblik, koristeći znanje koje ste stekli iz ovog članka.
Evo mog formulara:
rezultat:
Prethodni post
Sljedeći unos
Pozdrav dragi čitaoci blog stranice. Danas želim govoriti o nečemu poput HTML forme. Bez obzira na motor vašeg sajta (cms), on će sigurno koristiti forme u ovom ili onom obliku, kreirane pomoću tagova Form i Input, kao i atributa i parametara Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.
Pa, ovome možete dodati i elemente za kreiranje padajućih lista i tekstualnih polja - Select, Option, Textarea, Label, Fieldset, Legend.
Zašto su obrasci potrebni i kako funkcioniraju na modernim web stranicama?
Isti niz za pretraživanje web lokacije () kreira se pomoću ovih oznaka, a pretraga će biti potrebna na vašem projektu. Stoga vam razumijevanje kako oni rade i funkcioniraju neće nimalo naškoditi. uspješan rad preko dizajna, pa čak i kada samopromocija i promocija neće biti suvišna.
Dakle, nakon što sam opravdao potrebu proučavanja ovih elemenata, mislim da ne bi trebalo više postavljati pitanja, tako da je vrijeme da prijeđemo direktno na proučavanje njihovih mogućih opcija.
Da, također bih vas podsjetio da smo već pregledali mnogo materijala na temu jezika za označavanje hiperteksta, na primjer, tri ) i .
U svojoj srži, obrasci se sastoje od elemenata za čije kreiranje se iz tagova obrasca ubacuju različite oznake unutar glavnog kontejnera - Checked, Value, Checkbox, Radio, Checkbox, Submit, itd. Samo trebamo postaviti njegov kod na bilo koji pogodan način. mjesto u predlošku stranice, naznačujući korištenjem oznaka i njihovih atributa kako bi trebao izgledati.
To može biti tekstualno polje sa dugmetom za slanje unesenog upita, izbori sa radio dugmadima (gde možete ostaviti pritisnuto samo jedno od ponuđenih dugmadi), višestruka tekstualna polja sa dugmetom za slanje() i još mnogo toga.
Na primjer, u slučaju „pretraživanja“, pomoću atributa Value možete odrediti šta će tačno biti napisano na dugmetu koje se nalazi pored polja za unos upita. Podaci uneseni u obrasce moraju se na neki način dalje obraditi.
Na primjer, u slučaju povratne informacije, korisnik će, nakon što popuni polje sa svojim imenom, unese svoj e-mail i tekst poruke, a zatim klikne na dugme za slanje, imati pravo da se nada da će podaci iz obrasca će biti poslat na e-mail autora stranice. Ali, nažalost, ovo nije moguće implementirati koristeći samo jedan jezik za označavanje hiperteksta ().
Za ove namjene trebat će vam poseban program rukovalac koji će, nakon što korisnik klikne na dugme za slanje, uzeti sve podatke iz polja za povratne informacije i poslati ih e-poštom vlasniku resursa. Morate navesti koji će program to učiniti sami koristeći atribut Action.
Obično je program za obradu skripta napisana PHP jezik. Stoga u Atribut akcije U oznaci Form, morat ćete navesti putanju do datoteke ove skripte koja se nalazi na vašem hosting serveru. Dozvolite mi da vam dam primjer pretplate na RSS feed moj blog putem e-maila:
Možda se u početku čini malo nejasnim, ali mislim da će sve biti jasnije kako se priča nastavi.
Oznake za obrazac i unos za kreiranje dugmadi, potvrdnih okvira i radio dugmadi
Svaki obrazac mora biti priložen otvaranju i zatvaranju oznaka Forma. Ovo je svojevrsni kontejner za njihovo stvaranje. Ova oznaka ima niz obaveznih i opcionih atributa:
- Ime – jedinstveno ime koje se mora navesti ako će HTML datoteka u kojoj nešto radite koristiti nekoliko web obrazaca
- Akcija – obavezni atribut koji označava putanju do skripte na koju će se podaci iz nje prenijeti na dalju obradu
- Metoda – pomoću nje možete promijeniti način prijenosa podataka iz ovog web obrasca u skriptu datoteke za obradu. Ako ga ne navedete, tada će se prema zadanim postavkama koristiti metoda Get, koja je, zapravo, namijenjena uglavnom za varijable i kratke poruke, kao i za otvoreni prijenos podataka kroz adresnu traku preglednika. Za prijenos podataka obrasca u skriptu za rukovanje, ipak je bolje koristiti POST metoda, dizajniran posebno za prijenos tekstualnih poruka na privatan način
Pogledajmo preostale oznake koje vam omogućavaju kreiranje raznih web obrazaca. Najsvestraniji je Input. Unutar njega mora biti napisan atribut Type, koji određuje šta će tačno biti HTML obrazac kreiran pomoću ove oznake.
Koristeći Input i Type možete kreirati sljedeće elemente:
- jednoredna tekstualna polja (Type="Text")
- polja za unos lozinke (Type="Password")
- potvrdni okviri (Type="Checkbox")
- radio dugmad (Type="Radio")
- skrivena polja (Type="Hidden")
- obična dugmad (Type="Button")
- dugmad za slanje podataka rukovaocu (Type="Submit")
- dugmad za dovođenje web obrasca u prvobitno stanje (Type="Reset")
- polja za upload fajlova na server (Type="File)
- dugmad sa slikom (Type="Image")
Unos nema završnu oznaku. Kako će točno izgledati web obrazac kreiran pomoću njega u potpunosti ovisi o parametru navedenom u atributu Type. Ako Type nije naveden, tekstualno polje će biti kreirano prema zadanim postavkama.
Primjeri obrazaca kreiranih na unosu s različitim vrijednostima za tip
Ostali atributi ulazne oznake i primjeri njihove upotrebe
Pogledajmo za šta su potrebni ostali atributi:
- Ime – ako se podaci moraju poslati u skriptu programa za rukovanje, tada morate navesti parametar za atribut Name. Pod ovim imenom će se podaci poslati iz obrasca pojaviti u programu za obradu informacija.
- Veličina - koristi se za postavljanje veličine polja web obrasca koji se kreira. Vrijednost je naznačena u broju znakova koji mogu stati u ovo polje. Ako veličina nije navedena, širina će prema zadanim postavkama biti 24 znaka
- Maxlength - prema zadanim postavkama, broj znakova koji se mogu unijeti u HTML obrazac nije ograničen, ali korištenjem Maxlength možete postaviti ovo ograničenje. Nećete moći da unesete više znakova nego što je naznačeno u polju.
- Vrijednost - možete je koristiti da odredite šta će tačno biti zapisano u polju ili na dugmetu za slanje podataka
- Označeno je atribut zastavice koji se može umetnuti u input za radio dugmad ili potvrdne okvire. U ovom slučaju, ovo radio dugme ili potvrdni okvir će biti aktivan kada se stranica sa web formom učita (već će imati kvačicu)
Sada pogledajmo sve primjeri obrazaca sa Inputom. Izgled polja za tekst je sličan izgledu polja za unos lozinke, pa razmotrimo samo opciju kreiranja teksta, na primjer, za unos adrese e-pošte:
Sada pogledajmo kreiranje web obrasca s radio dugmadima (Radio):
Obratite pažnju da ovaj obrazac koristi oznaku za unos dva puta, jednom za kreiranje svakog od dva radio dugmeta. Štaviše, svaki od njih sadrži atribut Name sa istom vrijednošću (rezultat), a vrijednost Value je različita (DA i NE).
To znači da će se prilikom obrade, ako se izabere neki od prekidača, poslati varijabla čije je ime upisano u Name, ali će vrijednost ove varijable ovisiti o tome koji je prekidač odabran.
Pogledajmo primjer kreiranja web obrasca s potvrdnim okvirima:
Potvrdni okviri se razlikuju od radio dugmadi po tome što vam omogućavaju da odaberete više opcija odjednom. Ime se koristi da bi se u datoteci za obradu odredilo u koji potvrdni okvir su potvrdni okviri postavljeni, a Vrijednost specificira vrijednost koja će biti poslata rukovaocu (ako Vrijednost nije navedena, tekst koji se nalazi pored ovog polja za potvrdu će biti poslan rukovaocu ).
Select, Option, Textarea, Label, Fieldset, Legend - padajuće liste, tekstualna područja i drugi elementi web obrasca
Za početak, želio bih vas malo podsjetiti šta su zapravo web forme i zašto su potrebne na stranicama web stranica. Oni su prvenstveno dizajnirani da repliciraju elemente koji se nalaze u bilo kojem operativnom sistemu u obliku prilagođenom korisniku: dugmad, polja za unos teksta, padajuće liste, potvrdni okviri, prekidači i slično.
Svi korisnici, bez ikakvog dodatnog objašnjenja, razumiju svrhu ovih elemenata i ako vide dugme HTML obrasca, razumiju da moraju kliknuti na njega.
Štaviše, svi njeni sastavni elementi (kao što su Select, Option, Textarea, Label, Fieldset, Legend) su već završeni praznini (kontejneri), za umetanje koje je potrebno samo koristiti željeni tag sa potrebnim atributima i parametrima.
I sami pretraživači znaju kako prikazati ovaj ili onaj element web obrasca. Istina, opcije prikaza za isti element u različitim preglednicima mogu se malo razlikovati jedna od druge, ali u pravilu ne značajno.
To. ispostavilo se da su web obrasci u HTML-u pokušaj prijenosa ključa elementi koji se koriste u bilo kojem operativnom sistemu, na stranice web stranice. Ali zašto bi oni mogli biti potrebni na stranicama web mjesta?
U principu, u istu svrhu kao što se slični elementi koriste u operativnim sistemima - prenos podataka od korisnika. U slučaju formulara, podaci od korisnika se prenose na server, gdje se obrađuju posebnim programom (jezik za označavanje hiperteksta, nažalost, ne dozvoljava obradu podataka).
Iako se podaci mogu slati ne samo na server, već i, na primjer, putem e-pošte na adresu navedenu u atributu Action oznake Form. Prilikom slanja podataka sa Html-a na e-mail, korisnik popunjavanjem polja, nakon što klikne na dugme za slanje podataka, pokreće podrazumevani mail program koji se koristi na njegovom računaru.
Početna oznaka Forma u ovom slučaju bi trebala izgledati otprilike ovako:
Sljedeći atributi se mogu koristiti sa Textarea:
- Naziv - određujete naziv za ovaj element web obrasca. Biće prenesen na server u program za obradu podataka
- Cols - možete ga koristiti za postavljanje širine kreiranog višelinijskog polja u znakovima.
- Redovi — postavite visinu višelinijskog polja koje će se kreirati (u redovima). Ako tekst koji je unio korisnik ima više redova od visine višerednog tekstualnog polja, desno od polja u web obrascu će se pojaviti traka za pomicanje.
- Samo za čitanje—sprečava korisnike da mijenjaju ili dodaju svoj tekst u ovo polje (samo za čitanje).
- Onemogućeno - korisnik, kao u slučaju atributa Readonly, neće moći promijeniti sadržaj tekstualnog polja u web obrascu, ali će promijeniti svoju boju u sivu, što ukazuje na njegovu neaktivnost.
Oznaka - čemu služi ova Html oznaka u obrascu?
Oznaka Html Label vam omogućava da implementirate jednu vrlo zanimljivu funkciju u obrascima koja je dostupna u operativnim sistemima. Tamo, ako se sjećate, da biste aktivirali element, ne morate kliknuti na njega, možete kliknuti na naziv ovog elementa - on će i dalje biti aktiviran.
Ovo se podrazumevano ne dešava u web obrascima – potrebno je da kliknete na HTML element samog obrasca da biste ga aktivirali. Na primjer, potrebno je da kliknete na potvrdni okvir kako biste u njega stavili kvačicu. Klik na tekst pored zastavice neće donijeti nikakve rezultate. Probajte sami:
Kao što vidite, klik na tekst da biste aktivirali ovaj element je beskorisan - morate kliknuti na njega samog. To je upravo stanje stvari koje je oznaka Label dizajnirana da ispravi. Omogućava vam da tekst pored elementa web obrasca učinite klikom na klik, što je nesumnjivo poboljšaće upotrebljivost.
Ali kako povezati Html element obrasca i tekst? Da biste to uradili, potrebno je da atributu dodate ID sa jedinstvenim parametrom, a tekst treba da bude okružen oznakama za otvaranje i zatvaranje Label. I to nije sve. U početnu oznaku Label morate uključiti atribut For, čiji parametar mora biti potpuno isti kao i ID atributa u Html oznaci elementa obrasca. Ispada nešto ovako:
Kao što vidite, sada se, zahvaljujući upotrebi Label-a, elementi web obrasca mogu aktivirati ne samo klikom na njega, već i klikom na tekst koji se nalazi pored.
Fieldset i Legenda - razbijanje forme na dijelove
Vjerovatno ste često viđali da su velike forme u Html-u podijeljene u grupe (Fieldset), koje su okružene okvirom i svaka takva grupa ima svoj naslov (Legenda). Ovo se implementira pomoću samo dvije oznake: Fieldset i Legend. Oni su upareni, tj. Moraju imati otvaranje i zatvaranje.
Dakle, da biste kreirali grupu komponentnih dijelova, trebate sve ove dijelove priložiti u tagove za otvaranje i zatvaranje Fieldset. A da biste postavili naslov (Legendu) za ovu grupu, potrebno je da odmah nakon otvaranja Fieldseta napišete konstrukciju koja se sastoji od početne i završne Legende, između kojih treba umetnuti tekst naslova grupe.
Evo primjera kreiranja grupa koristeći Fieldset i Legendu:
Sretno ti! Vidimo se uskoro na stranicama blog stranice
Više videa možete pogledati ako odete na");">
Možda ste zainteresovani
Odaberite, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih lista i tekstualnih polja 
Liste u HTML kodu - UL, OL, LI i DL oznake 
MailTo - šta je to i kako napraviti link u HTML-u za slanje e-pošte 
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex izlaz i drugi programi
S obzirom na osnovne HTML oznake, ne možemo a da se ne dotaknemo tako važnog elementa kao što su forme. Povratne informacije su često potrebne na web stranicama. Na primjer, popunjavanje obrasca na stranici, registracija, autorizacija, komentari itd. U svim ovim slučajevima korisnik popunjava posebne oblasti (polja obrasca) na stranici, nakon čega se podaci šalju na server. Obrasci se koriste za stvaranje povratnih informacija. Obrazac je fragment HTML dokumenta namijenjen unosu korisnika.
Na slici je prikazan obrazac za registraciju učenika na web stranici obrazovne ustanove.
Kontejner se koristi za kreiranje obrasca
sa atributom akcije, koji specificira stranicu na serveru koja će obraditi podatke koje šalje obrazac.Struktura u svom najjednostavnijem obliku:
elementi forme...
Svaki obrazac također mora imati dugme za slanje podataka za slanje podataka nakon popunjavanja obrasca.
Struktura dugmadi:
Dakle, za snimanje gotovo svih elemenata obrasca koristi se oznaka sa atributom tipa. Za kreiranje dugmeta koje resetuje sve podatke iz obrazaca, koristi se sljedeća struktura:
Za kreiranje tekstualnog polja postoji parametar teksta. Koriste se sljedeći parametri: ime – naziv polja; veličina – za polje u simbolima; maxlength – maksimalni mogući broj znakova u polju; vrijednost – informacije prikazane u obrascu prema zadanim postavkama
Primjer unosa obrasca sa dva tekstualna polja:
Rezultat obrasca je prikazan na slici.
Ako trebate unijeti veliku količinu informacija u tekstualno polje, na primjer, komentar, koristite obrazac za tekstualno područje koji se kreira pomoću oznake
Rezultat rada koda sa tekstualnim područjem prikazan je na slici.
Sljedeći element formulara su liste koje vam omogućavaju da napravite izbor iz prikazanog skupa vrijednosti. Oznake vam omogućavaju da kreirate obrazac liste
Struktura unosa liste:
Da bi element bio istaknut kada se stranica učita, neophodan je u tag-u
Sličan način odabira je okvir za potvrdu i elementi obrasca radio-dugme. Razlika između ovih elemenata je u tome što vam potvrdni okvir omogućava višestruke odabire, dok radio gumb dozvoljava samo jedan odabir.
Struktura polja za potvrdu i unosa radio dugmeta:
tekst
Radio dugme:
tekst
U elementima navedenim u strukturi, označeni atribut se po defaultu koristi za isticanje polja za potvrdu i radio dugmeta. Primjer korištenja polja za potvrdu, radio dugmeta i HTML koda prikazan je na slici.
Drugi element obrasca je dugme, specificirano pomoću atributa oznake tipa sa tipkom za vrijednost:
U navedenom kodu za kreiranje dugmeta postoji onclick parametar, koji obično specificira kod u programskom jeziku za izvođenje određene radnje kada se klikne na ovo dugme:
Za prikaz poruke u posebnom prozoru koristite JavaScript naredbu – aler. Rezultat primjera prikazan je na slici.
Da biste umetnuli sliku u dugme, koristite kod prikazan u sljedećem primjeru:
Prilikom registracije i prijavljivanja na web stranice koristi se polje sa skrivenim testom koje se prikazuje kao zvjezdice. Ovo je element obrasca za lozinku:
Registracija na sajtu je često podeljena na nekoliko stranica i svaka sledeća mora sadržati podatke sa prethodne. Da bi se sakrile prenesene informacije, koristi se element skrivene forme:
Skriveni element obrasca biće nevidljiv u prozoru pretraživača.
Za otpremanje datoteka na server, obrasci imaju element datoteke. Primjer koda za učitavanje datoteka na server je predstavljen u nastavku:
Dakle, u ovoj temi smo se bavili elementima obrasca za kreiranje različitih HTML stranica, koji, zajedno sa obrađivačima skripti na računaru ili serveru, omogućavaju razvoj punopravnih web aplikacija.
