Kako napraviti html forme. Izrada obrazaca u HTML-u

30.03.2019 Recenzije

S obzirom na osnovno HTML oznake ne možemo a da se ne dotaknemo ovoga važan element poput oblika. Na web stranicama često su potrebne povratne informacije. Na primjer, ispunjavanje obrasca na web mjestu, registracija, autorizacija, komentari itd. U svim tim slučajevima korisnik ispunjava posebna područja (polja obrasca) na stranici, nakon čega se podaci šalju na poslužitelj. Za stvaranje Povratne informacije koriste se oblici. Forma je fragment HTML dokument namijenjeni korisničkom unosu.

Slika prikazuje obrazac za upis studenata na web stranici obrazovne ustanove.

Za izradu obrasca koristi se spremnik

s atributom action, koji specificira stranicu na poslužitelju koja će obraditi podatke poslane putem obrasca.

Struktura u svom najjednostavnijem obliku:

elementi forme...

Svaki obrazac također mora imati gumb za slanje podataka nakon ispunjavanja obrasca.

Struktura gumba:

Dakle, za snimanje gotovo svih elemenata obrasca koristi se oznaka s atributom tipa. Za izradu gumba koji poništava sve podatke iz obrazaca, koristi se sljedeća struktura:

Za stvaranje polje za tekst(textfield) postoji tekstualni parametar. Koriste se sljedeći parametri: name – naziv polja; veličina – za polje u simbolima; maxlength – najveći mogući broj znakova u polju; vrijednost – informacija prikazana u obrascu prema zadanim postavkama

Primjer unosa obrasca s dva tekstualna polja:

Rezultat obrasca prikazan je na slici.

Ako trebate unijeti u tekstualno polje veliki broj informacije, na primjer, komentar koristi oblik tekstualnog područja koje se stvara pomoću oznake sa sljedećim atributima: naziv – naziv područja; cols – broj stupaca područja; redovi – broj redova; wrap – način prelamanja linija (on – prelomi linije, off – ne prelamaj linije).Gornjem kodu dodajmo polje tekstualnog područja:Komentar: <textarea name="area" cols=”25” rows=”5” wrap=”on”>

Rezultat rada koda s područjem teksta prikazan je na slici.

Sljedeći element obrasci su popisi koji vam omogućuju da napravite izbor iz predstavljenog skupa vrijednosti. Oznake vam omogućuju stvaranje obrasca popisa

Da bi element bio istaknut kada se stranica učita, on je neophodan u tagu

Slična metoda odabira su elementi obrasca potvrdnog okvira i radiobuttona. Razlika između ovih elemenata je u tome što potvrdni okvir omogućuje više odabira, dok radio gumb omogućuje samo jedan odabir.

Struktura potvrdnog okvira i unosa radio gumba:

tekst

Radio gumb:

tekst

U elementima navedenim u strukturi, checked atribut se prema zadanim postavkama koristi za označavanje potvrdnog okvira i radio gumba. Primjer korištenja potvrdnog okvira, radio gumba i HTML koda prikazan je na slici.

Drugi element obrasca je gumb, specificiran pomoću atributa oznake tipa s gumbom vrijednosti:

U navedenom kodu za kreiranje gumba postoji parametar onclick, koji obično specificira kod u programskom jeziku za izvođenje određene akcije kada se klikne na ovaj gumb:

Za prikaz poruke u posebnom prozoru koristite JavaScript naredbu – aler. Rezultat primjera prikazan je na slici.

Za umetanje slike u gumb upotrijebite kod prikazan u sljedećem primjeru:

Prilikom registracije i prijave na web stranice koristi se polje sa skrivenim testom, prikazanim zvjezdicama. Ovo je element obrasca lozinke:

Registracija na stranici često je podijeljena na nekoliko stranica i svaka sljedeća mora sadržavati podatke iz prethodne. Kako bi se sakrile prenesene informacije, koristi se skriveni element obrasca:

Skriveni element obrasca bit će nevidljiv u prozoru preglednika.

Za učitavanje datoteka na poslužitelj, obrasci imaju element datoteke. Primjer koda za učitavanje datoteka na poslužitelj prikazan je u nastavku:

Dakle, u ovoj smo temi pogledali elemente obrasca za stvaranje različitih HTML stranica, koji vam, zajedno s rukovateljima skriptama na računalu ili poslužitelju, omogućuju razvoj potpunih web aplikacija.

Često na web stranicama možete pronaći stranice na kojima su postavljeni HTML obrasci. Web obrasci su prikladan način za primanje informacija od posjetitelja vaše stranice. Primjer toga je -, - koji daje povratne informacije posjetiteljima stranice i programerima. Obrasci su također prikladni za programere web stranica kada razvijaju CMS, što im omogućuje da zadrže glavno svojstvo web mjesta - relevantnost. Ovaj članak pokriva osnove Izrada HTML-a-forme, njihova obrada i načini prijenosa podataka iz ekranskih formi u PHP skripte.

1) Napravite jednostavan obrazac

Oznake

definirati početak i kraj obrasca. Početna oznaka obrasca

sadrži dva atributa: akcijski I metoda. Atribut akcije sadrži URL skripte koji se mora pozvati za obradu skripte. Atribut metoda govori pregledniku koju vrstu HTTP zahtjeva treba koristiti za slanje obrasca; moguće vrijednosti POST I DOBITI.

Komentar

Glavna razlika između metoda POST i GET je način na koji se informacije prenose. U GET metodi, parametri se prosljeđuju kroz adresnu traku, tj. uglavnom u zaglavlju HTTP zahtjeva, dok se u POST metodi parametri prenose kroz tijelo HTTP zahtjeva i ni na koji se način ne odražavaju u adresnoj traci.

$tekst = nl2br($_POST["mojtekst"]);
?>

Zadatak: Pretpostavimo da trebate stvoriti padajući popis s godinama od 2000. do 2050.
Riješenje: Morate izraditi HTML obrazac s elementom SELECT i PHP skriptom za obradu obrasca.

Rasprava:

Prvo, kreirajmo dvije datoteke: obrazac.html I akcija.php. U datoteci obrazac.html sadržavat će html obrazac s padajućim popisom. Štoviše, vrijednosti na popisu mogu se odrediti na dva načina:

I. Ručni unos podataka:

II. Unos podataka kroz petlju:

Kao što vidite, drugi primjer s petljom je kompaktniji. Mislim da nema potrebe davati skriptu rukovatelja za ovaj obrazac, jer se obrađuje potpuno isto kao tekstualno polje, tj. vrijednosti popisa mogu se dohvatiti iz superglobalnog niza $_POST.

Opis:

Kreirajmo HTML obrazac za slanje datoteke na poslužitelj.

Ovaj html obrazac sadrži element pretraživati, koji otvara dijaloški okvir za odabir datoteke za učitavanje na poslužitelj. Kada pritisnete tipku "Prijenos datoteke", datoteka se prosljeđuje skripti rukovatelja.

Zatim trebate napisati skriptu rukovatelja akcija.php. Prije nego što napišemo rukovatelj, moramo odlučiti u koji direktorij ćemo kopirati datoteku:

if(isset($_FILES [ "myfile" ])) // Ako datoteka postoji
{
$katalog = "../slika/" ; // Naš katalog
ako (je_dir($katalog)) // Ako takav direktorij postoji
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Privremena datoteka
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Naziv datoteke
if(! kopiraj ($myfile, $catalog)) echo "Pogreška pri kopiranju datoteke". $myfile_name // Ako kopiranje datoteke nije uspjelo
}
else mkdir ("../slika/" ); // Ako ne postoji takav direktorij, kreirat ćemo ga
}
?>

Komentar

Ako vjerujete korisnicima da uploaduju bilo koje datoteke na vaš poslužitelj, morate biti izuzetno oprezni. Napadači mogu ugraditi "loš" kod u sliku ili datoteku i poslati ga na poslužitelj. U takvim slučajevima morate strogo kontrolirati preuzimanje datoteka.

Ovaj primjer demonstrira stvaranje direktorija i kopiranje datoteke u taj direktorij na poslužitelj.

Također bih želio pokazati primjer s elementom potvrdni okvir. Ovaj element se neznatno razlikuje od ostalih elemenata ako ne i po jednom od elemenata potvrdni okvir’a nije odabrano, tada superglobalna varijabla $_POST vratit će praznu vrijednost:

if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Ako je odabran barem 1 element
inače jeka "Odaberi vrijednost";
?>

26.02.2016

Bok svima!
Nastavljamo učiti osnove HTML-a. U ovoj lekciji ćemo pogledati što se dogodiloHTML oblik i kako se stvara.
Ako ste primijetili, danas niti jedna web stranica ne može bez obrazaca. Ovi obrasci mogu biti različiti, npr. obrazac za povratne informacije, obrazac za narudžbu, obrazac za registraciju i prijavu, obrazac za slanje komentara, recenzija, obrazac za pretraživanje i mnogi drugi.

Mislim da vam sada moramo pokazati primjere kako izgledaju HTML obrasci vizualno.

○ Obrazac za pretraživanje:

○ Obrazac za prijavu na stranicu:

○ Obrazac za povratne informacije:

○ Obrazac za narudžbu:

Mislim da ste shvatili bit stvaranja HTML obrazaca. Dakle, u današnjoj lekciji ću vam reći, kako stvoriti jednostavanHTMLoblik i koje se oznake mogu koristiti za stvaranje različitih polja obrasca.

Od sada vas pitam posebna pažnja, jer je tema složena i važna.

HTMLoblik je polje u koje korisnik upisuje neke podatke. Ali i ove se informacije moraju nekako poslati. Neka vrsta HTML obrasca je poput motocikla bez benzina, čini se da ima sve, ali iz nekog razloga se ne miče. Dakle, kako bi obrazac radio i slao podatke koje je korisnik unio, trebate stvoriti procesor obrasca u . Ali nemojte se zamarati voditeljem, jer sada pohađate tečaj samo za početnike. Pogledat ćemo temu rukovatelja obrascima u odjeljku “PHP”. Tako sam nekako skrenuo pažnju s glavne teme.

Učenje izrade HTML obrazaca

Svaki HTML obrazac sastojat će se od glavne oznake

. Unutar oznake preostali elementi obrasca su umetnuti i bit će prikazani na web stranici.

Obrazac mora biti smješten između oznaka .
Za oznaku

obavezna je oznaka za zatvaranje .

*atribute za oznaku rm >

NAZIV – jedinstveni naziv forme. Koristi se kada postoji više obrazaca na jednom mjestu.
RADNJA – Ovaj atribut navodi stazu do obrasca za obradu. je potrebno.
METHOD – način slanja.

POST - podaci se prenose u skrivenom obliku

GET (zadano) - podaci se šalju na otvorena forma kroz liniju preglednika.

Primjer kako oznaka izgleda sa sljedećim atributima:
bit će ovdje raznih elemenata obrazaca koji će biti prikazani na web stranici.

Elementi forme

○ Označitiulazni

Označitiulazni– ovaj dio elementa polja obrasca namijenjen je za unos sitnog teksta i brojeva.
Za oznaku nije potrebna oznaka za zatvaranje .

*atribute za oznaku< ulazni >

name - naziv 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 navesti maksimalan iznos unos znakova u polje. Prema zadanim postavkama, bez atributa maxlength, u polje se može unijeti neograničen broj znakova

rezervirano mjesto – savjet za korisnika koji će biti prikazan izravno unutar obrasca polja (ranije se koristio atribut vrijednosti).

tip - tip elementa

Primjer nadjeva:

Tip tipa elementa

Polje za tekst

○ Tekstno polje "text":

Proizlaziti:

○ Polje za lozinku:

Proizlaziti:

○ Polje e-pošte "e-mail":

Proizlaziti:

○ Gumb za odabir datoteke iz “datoteke” računala:

Proizlaziti:

○ Polje za unos telefona "tel":

Proizlaziti:

○ Polje za pretraživanje:

Proizlaziti:

○ Polje za odabir boje "boja":

Proizlaziti:

○ Polje za unos i odabir brojeva “broj”:

min – minimalna vrijednost

max – maksimalna vrijednost

korak – korak.

Proizlaziti:

○ Polje za odabir datuma "datum":

Proizlaziti:

○ Polje za odabir datuma i lokalnog vremena u formatu (05.05.2015. 00:00):

Proizlaziti:

○ Prikaz padajućeg kalendara.
Polje za odabir godine i mjeseca u formatu (srpanj 2015.):

Proizlaziti:

○ Polje za odabir vremena "vrijeme":

Proizlaziti:

○ Klizač raspona:

Proizlaziti:

○ Potvrdni okvir:

označeno – ovaj atribut određuje koji potvrdni okvir treba biti uključen prema zadanim postavkama
Proizlaziti:

○ Radio prekidač:

označeno – ovaj atribut određuje koji radio prekidač treba biti omogućen prema zadanim postavkama

Proizlaziti:

Gumbi

○ Dugme:

vrijednost - oznaka na gumbu

Proizlaziti:

○ Gumb za slanje podataka “pošalji”:

vrijednost - oznaka na gumbu

Proizlaziti:

○ Gumb za resetiranje:

vrijednost - oznaka na gumbu

Proizlaziti:

○ Dugme sa slikom:
Proizlaziti:

○ Skriveno polje

○ odaberite oznaku

OznačitiIzaberi– ovo je dio elementa forme namijenjenog unosu padajuće liste.
Za oznaku obavezna je oznaka za zatvaranje .
Označiti I

Naziv je naziv cijele liste. Postavite samo za oznaku .

Vrijednost – postavite za svaku stavku popisa za oznaku

onemogućeno - blokira odabir elementa na padajućem popisu. Postavite samo za oznaku

Proizlaziti:

Nije hitno Hitno Kurirom

Ili ovako:

Proizlaziti:

Nije hitno Hitno Kurirom

Sada ga blokirajmo s popisa "Hitno" s atributom "onemogućeno":

Proizlaziti:

Nije hitno Hitno Kurirom

○ padajući popis po grupama:

Za izradu grupnog popisa koristite oznaku

Proizlaziti:
Opcija Textarea
Legenda skupa polja oznake

○ za višestruki odabir:

U oznaci
*atribute za oznaku< tekstualno područje >

name – naziv polja

cols – širina polja

redovi – visina polja

rezervirano mjesto – savjet za korisnika koji će biti prikazan izravno unutar obrasca polja.

Proizlaziti:

Ili ovako:
Unesite tekst
Proizlaziti:

Unesite tekst

Ili ovako:

Proizlaziti:

Dizajn "Okvir" (fieldset)

○ Oznaka skupa polja

Oznaka skupa polja– pomoću ove oznake možete nacrtati okvir oko objekta.
Završna oznaka je obavezna.

Dodatne oznake
Oznaka legende – označava naslov.
Završna oznaka je obavezna.

Naslov Tekst unutar okvira.

Proizlaziti:

To je sve što sam vam htio reći o temi "HTML obrasci". Sada rezimirajmo i u praksi pokušajmo stvoriti jednostavna forma, koristeći znanje koje ste stekli iz ovog članka.

Evo mog obrasca:

Obrazac za životopis za zaposlenika pilot postrojenja PJSC "KMZ"

Koji posao želiš biti?

Koju plaću želite primati (mjesečno)?
10$ 11$

Proizlaziti:

Prethodni post
Sljedeći unos

Pozdrav, dragi čitatelji bloga. Danas želim govoriti o nečemu poput HTML obrazaca. Koji god motor vaše stranice (cms) bio, on će svakako koristiti obrasce u ovom ili onom obliku, kreirane pomoću oznaka Form i Input, kao i atributa i parametara Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.
Ovome također možete dodati elemente za stvaranje padajućih popisa i tekstualnih polja - Odaberi, Opcija, Textarea, Label, Fieldset, Legenda.
Zašto su obrasci potrebni i kako funkcioniraju na modernim web stranicama?
Isti niz za pretraživanje web-mjesta () kreira se pomoću ovih oznaka, a pretraživanje će biti potrebno na vašem projektu. Stoga vam razumijevanje načina na koji rade i funkcionira neće uopće naškoditi. uspješan rad nad dizajnom, pa čak i kada samopromocija a promocija neće biti suvišna.
Dakle, opravdavši potrebu za proučavanjem ovih elemenata, mislim da se više ne bi trebalo postavljati pitanja, pa je vrijeme da prijeđemo izravno na proučavanje njihovih mogućih opcija.
Da, također bih vas želio podsjetiti 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 čiju se izradu umeću različite oznake iz oznaka obrasca unutar glavnog spremnika - Provjereno, Vrijednost, Potvrdni okvir, Radio, Potvrdni okvir, Pošalji itd. Samo trebamo postaviti njegov kod u bilo koji prikladan prostor mjesto u predlošku web stranice, naznačujući pomoću oznaka i njihovih atributa kako bi to trebalo izgledati.
To može biti tekstualno polje s gumbom za podnošenje unesenog upita, odabiri s radio gumbima (gdje možete ostaviti samo jedan od ponuđenih gumba pritisnutim), više tekstualnih polja s gumbom za podnošenje() i još mnogo toga.
Na primjer, u slučaju "traži", pomoću atributa Vrijednost možete odrediti što će točno biti napisano na gumbu koji se nalazi pored polja za unos upita. Podatke unesene u obrasce potrebno je na neki način dalje obraditi.
Na primjer, u slučaju povratne informacije, korisnik će se nakon što ispuni polje sa svojim imenom, unese svoj E-mail i tekst poruke, a zatim klikne na gumb Pošalji, imati pravo nadati se da su podaci iz obrasca će biti poslana na e-mail autora stranice. No, nažalost, to nije moguće implementirati koristeći samo jedan jezik za označavanje hiperteksta ().
Za ove namjene trebat će vam poseban program rukovatelj koji će, nakon što korisnik klikne na gumb za slanje, uzeti sve podatke iz polja za povratne informacije i poslati ih e-poštom vlasniku resursa. Morate odrediti koji program će to učiniti sami koristeći atribut Action.
Obično je program za obradu skripta napisana u PHP jezik. Stoga u Atribut akcije U oznaci Form morat ćete navesti stazu do datoteke ove skripte koja se nalazi na vašem hosting poslužitelju. Dat ću vam primjer pretplate na RSS feed moj blog putem e-maila:
" name="title">
Možda će se u početku činiti malo nejasnim, ali mislim da će sve biti jasnije kako priča bude odmicala.
Oznake obrasca i unosa za stvaranje gumba, potvrdnih okvira i radio gumba
Svaki obrazac mora biti okružen početnim i završnim oznakama Oblik. Ovo je vrsta spremnika za njihovo stvaranje. Ova oznaka ima niz obaveznih i izbornih atributa:
Ime – jedinstveno ime koje morate navesti ako će Html datoteka u kojoj nešto radite koristiti nekoliko web obrazaca
Akcija – obavezni atribut koji označava put do skripte na koju će podaci iz nje biti prebačeni za daljnju obradu
Metoda – pomoću nje možete promijeniti metodu prijenosa podataka iz ovog web obrasca u skriptu datoteke rukovatelja. Ako ga ne navedete, tada će se prema zadanim postavkama koristiti metoda Get, koja je zapravo namijenjena uglavnom za varijable i kratke poruke, a također i otvoreni prijenos podataka putem adresne trake preglednika. Za prijenos podataka obrasca u skriptu rukovatelja ipak je bolje koristiti POST metoda, dizajniran posebno za privatni prijenos tekstualnih poruka

Pogledajmo preostale oznake koje vam omogućuju stvaranje raznih web obrazaca. Najsvestraniji je Ulazni. Unutar njega mora biti napisan atribut Type koji određuje kakav će točno biti HTML obrazac kreiran pomoću ove oznake.
Pomoću unosa i tipa možete izraditi sljedeće elemente:
tekstualna polja s jednim redom (Type="Text")
polja za unos lozinke (Type="Password")
potvrdni okviri (Type="Checkbox")
radio gumbi (Type="Radio")
skrivena polja (Type="Hidden")
uobičajeni gumbi (Type="Button")
gumbi za slanje podataka rukovatelju (Type="Submit")
gumbi za dovođenje web obrasca u izvorno stanje (Type="Reset")
polja za učitavanje datoteka na poslužitelj (Type="File)
gumbi 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 Vrsta nije navedena, tekstno polje će se stvoriti prema zadanim postavkama.
Primjeri obrazaca stvorenih na Inputu s različitim vrijednostima za Type

Ostali atributi ulazne oznake i primjeri njihove uporabe
Pogledajmo za što su potrebni drugi atributi:
Naziv – ako se podaci moraju poslati skripti programa rukovatelja, tada morate navesti parametar za atribut Naziv. Pod tim imenom će se podaci poslani iz obrasca pojavljivati u programu procesora informacija.
Veličina - koristi se za postavljanje veličine polja web obrasca koji se stvara. Vrijednost je navedena 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 unijeti više znakova nego što je navedeno u polju.
Vrijednost - pomoću nje možete odrediti što će točno biti zapisano u polju ili na gumbu za slanje podataka
Označeno je atribut zastavice koji se može umetnuti u Unos za radio gumbe ili potvrdne okvire. U tom će slučaju ovaj radio gumb ili potvrdni okvir biti aktivan kada se učita stranica s web obrascem (već će imati kvačicu)

Sada pogledajmo sve primjeri oblika s unosom. Izgled tekstualnog polja sličan je izgledu polja za unos lozinke, pa razmotrimo samo opciju kreiranja teksta, na primjer, za unos adrese e-pošte:
Unesi svoj email:
Pogledajmo sada stvaranje web obrasca s radio gumbima (Radio):
Sviđa li vam se resurs KtoNanNovenkogo.ru?
Da?
Ne?
Primijetite da ovaj obrazac dvaput koristi oznaku unosa, jednom za stvaranje svakog od dva radio gumba. Štoviše, svaki od njih sadrži atribut Name s istom vrijednošću (resultat), a vrijednost Value je različita (YES i NO).
To znači da će se prilikom obrade, ako se odabere bilo koji od prekidača, poslati varijabla čije je ime zapisano u Name, ali će vrijednost te varijable ovisiti o tome koji je prekidač odabran.
Pogledajmo primjer izrade web obrasca s potvrdnim okvirima:
Koje motore web stranica preferirate?
WordPress
Joomla
SMF
Potvrdni okviri razlikuju se od radio gumba po tome što vam omogućuju odabir više opcija odjednom. Naziv se koristi da se u datoteci rukovatelja odredi u koji se potvrdni okvir potvrdni okviri nalaze, a vrijednost određuje vrijednost koja će biti poslana rukovatelju (ako vrijednost nije navedena, tekst koji se nalazi pored ovog potvrdnog okvira bit će poslan rukovatelju ).
Odabir, Opcija, Textarea, Label, Fieldset, Legend - padajući popisi, tekstualna područja i drugi elementi web obrasca
Za početak bih vas malo podsjetio na to što su zapravo web obrasci i zašto su potrebni na stranicama web stranica. Prvenstveno su dizajnirani za repliciranje elemenata koji se nalaze u bilo kojem operativnom sustavu u obliku koji je jednostavan za korištenje: gumbi, polja za unos teksta, padajući popisi, okviri za potvrdu, prekidači i slično.
Svi korisnici, bez ikakvih dodatnih objašnjenja, razumiju svrhu ovih elemenata i ako vide gumb HTML forme, razumiju da moraju kliknuti na njega.
Štoviše, svi njegovi sastavni elementi (kao što su Select, Option, Textarea, Label, Fieldset, Legend) već su dovršene praznine (spremnici), za umetanje kojih trebate samo upotrijebiti željenu oznaku s potrebnim atributima i parametrima.
Sami preglednici znaju kako prikazati ovaj ili onaj element web obrasca. Istina, mogućnosti prikaza za isti element u različitim preglednicima mogu se malo razlikovati jedna od druge, ali u pravilu ne značajno.
Da. ispada da su web obrasci u HTML-u pokušaj prijenosa ključa elemenata koji se koriste u bilo kojem operativnom sustavu, na stranice web stranice. Ali zašto bi mogli biti potrebni na stranicama web mjesta?
U principu, za istu svrhu za koju se slični elementi koriste u operacijskim sustavima - prijenos podataka od korisnika. U slučaju obrazaca, podaci od korisnika prenose se na poslužitelj, gdje se obrađuju posebnim programom (jezik za označavanje hiperteksta, nažalost, ne dopušta obradu podataka).
Iako se podaci mogu slati ne samo na poslužitelj, već i, na primjer, e-poštom na adresu navedenu u atributu Action oznake Form. Prilikom slanja podataka iz Html-a u E-mail, korisnik ispunjavanjem polja, nakon klika na gumb Pošalji podatke, pokrenut će zadani program za poštu koji se koristi na njegovom računalu.
Oznaka obrasca za otvaranje u ovom bi slučaju trebala izgledati otprilike ovako:

Odaberite i Option - oznake padajućeg popisa
Svi elementi web obrasca koji stvaraju polja padajućeg popisa formiraju se na isti način. Prvo se postavlja spremnik kombiniranog okvira pomoću oznake za otvaranje i zatvaranje Html Select. Zatim se unutar ovog spremnika kreiraju zasebni spremnici sa stavkama (elementima) ovog popisa. To se radi pomoću otvarajućih i zatvarajućih Option oznaka.
Ispada ovako nešto:
Ali ovo je pojednostavljeni dizajn, jer Select i Option imaju niz atributa, koji definiraju svojstva i izgled kreiranog polja padajuće liste.
Naziv - morate navesti jedinstveni naziv za ovaj element web obrasca kreiran pomoću Odaberi. Ovo će ime biti proslijeđeno poslužitelju programu za obradu podataka kao ime za varijablu. Vrijednost ove varijable bit će vrijednost atributa Value (postavljenog u Opciji za svaku stavku) stavke padajućeg popisa koju korisnik odabere.
Veličina—možete je koristiti za postavljanje broja prikazanih stavki. Drugim riječima, korištenjem veličine možete postaviti visinu popisa, mjerenu u broju prikazanih redaka. Ako izričito ne navedete vrijednost veličine u oznaci Odaberi, koristit će se zadana visina padajućeg popisa, a bit će drugačije ako atribut Odabir nije prisutan ili je prisutan u atributu Odaberi:
Ako je višestruko prisutno u Odaberi, tada će visina padajućeg popisa u web obrascu prema zadanim postavkama biti jednaka broju njegovih elemenata. Oni. Prikazat će se sve stavke padajućeg popisa s višestrukim odabirom. Pogledajte primjer množine u nastavku. Ako je atribut Veličina u Odaberi postavljen na manje od broja stavki, s desne strane će se pojaviti traka za pomicanje.
Ako Višestruko nije prisutno u Odaberi, tada će visina padajućeg popisa u web obrascu prema zadanim postavkama biti jedan redak. Oni. Samo će jedna linija biti vidljiva, a preostalim će se stavkama pristupiti samo pritiskom na tipku dizala (desno). Pogledajte primjer u nastavku

Višestruko - dodjeljivanje ovog atributa oznaci Odaberi omogućit će vam stvaranje padajućeg popisa s mogućnošću odabira nekoliko stavki u isto vrijeme. Pročitajte više o ovom atributu u nastavku.

Obrasci s padajućim popisima mogu se podijeliti u dvije opcije. U prvoj opciji možete odabrati samo jedan element (redak) polja s padajuće liste; u drugoj opciji, držeći Ctrl ili Shift možete istovremeno odabrati nekoliko dostupnih stavki.
U tom slučaju, u drugoj opciji, podaci o svim odabranim stavkama bit će poslani na poslužitelj. Koji će se padajući popis kreirati određuje prisutnost ili odsutnost atributa Multiple u oznaci Select.
Multiple je naveden u Select bez parametra, jer Jednostavno se napiše Multiple i to je to. Ako je prisutan, stvorit će se web-obrazac s padajućim popisom s višestrukim mogućnostima odabira (držanje Ctrl ili Shift).
Varijanta polja s padajućom listom u kojoj će biti moguć višestruki izbor, izgledat će otprilike ovako:
Desno je primjer padajućeg web-obrasca s višestrukim odabirom koji se temelji na gornjem kodu. Kao što vidite, držanjem Ctrl ili Shift možete odabrati nekoliko stavki u isto vrijeme.
Ako u oznaci Select nema atributa Multiple, tada se može odabrati samo jedan element ovog padajućeg popisa (redak).
Primjer u kojem možete odabrati samo jednu stavku možete vidjeti ovdje:
Oznaka Odaberite SelectED mjesto Legenda
Atributi oznake opcije

Na stvorenom padajućem popisu (pomoću Odaberi i Opcija) možete dodati nešto poput separatora s grupnim naslovima, koji će se stilom fonta razlikovati od ostalih stavki izbornika.
Da biste kreirali grupu od stavki padajućeg popisa, potrebno ih je priložiti u početnu i završnu oznaku obrasca Optgroup, au početnu oznaku Optgroup dodati atribut Label, kao parametar za koji ćete morati unijeti željeni naziv grupe.
Na primjer ovako:
Odabir oznake
SelectED web mjesto Legenda
Textarea - kreiranje tekstualnog polja na obrascu
Postoji još jedan element web obrazaca koji nismo uzeli u obzir - Textarea (polje s mogućnošću unosa višerednog teksta). Izrađuje se pomoću uparenog Html taga Textarea. Štoviše, tekst u njemu možete prebaciti u novi redak i on će se prenijeti na poslužitelj uzimajući u obzir izvršene prijevode.
Dakle, za kreiranje višerednog tekstualnog polja potrebno je odrediti početno i zatvaranje Textarea, a između njih dodati tekst koji će biti vidljiv kada se učita stranica s web formom. Korisnik tada može obrisati ovaj tekst i napisati svoj.

Što nam možete reći o sebi?
Sljedeći atributi mogu se koristiti s Textarea:
Naziv - vi navodite naziv za ovaj element web obrasca. Bit će prenesen na poslužitelj u program procesora podataka
Cols - možete koristiti za postavljanje širine kreiranog višerednog polja u znakovima.
Redovi — postavite visinu polja s više redaka koje će se stvoriti (u redovima). Ako tekst koji je unio korisnik ima više redaka od visine tekstualnog polja s više redaka, traka za pomicanje pojavit će se s desne strane polja u web obrascu.
Samo za čitanje—sprečava korisnike da mijenjaju ili dodaju svoj tekst u ovo polje (samo za čitanje).
Onemogućeno - korisnik, kao i u slučaju atributa Readonly, neće moći mijenjati sadržaj tekstualnog polja u web obrascu, ali će ono promijeniti boju u sivu, što označava njegovu neaktivnost.

Label - čemu služi ova Html oznaka u obrascu?
Oznaka Html Label omogućuje implementaciju jedne vrlo zanimljive značajke u obrascima koja je dostupna u operativnim sustavima. Tamo, ako se sjećate, da biste aktivirali element, ne morate kliknuti na njega, možete kliknuti na naziv ovog elementa - i dalje će biti aktiviran.
To se prema zadanim postavkama ne događa u web obrascima - trebate kliknuti na Html element samog obrasca da biste ga aktivirali. Na primjer, trebate kliknuti na potvrdni okvir kako biste ga označili. Klik na tekst pored zastavice neće donijeti nikakve rezultate. Pokušajte sami:
Označiti
Izaberi
Odabran
Kao što vidite, klik na tekst za aktiviranje ovog elementa je beskoristan - morate kliknuti na njega samog. To je upravo stanje stvari za koje je oznaka Label dizajnirana da ispravi. Omogućuje vam da tekst pored elementa web obrasca učinite klikabilnim, što nedvojbeno jest će poboljšati upotrebljivost.
Ali kako spojiti Html element forme i tekst? Da biste to učinili, atributu morate dodati ID s jedinstvenim parametrom, a tekst treba biti okružen otvarajućim i zatvarajućim oznakama Label. I to nije sve. U početnu oznaku Label morate uključiti atribut For, čiji parametar mora biti potpuno isti kao onaj ID atributa u Html oznaci elementa forme. Ispada ovako nešto:

Kao što vidite, sada, zahvaljujući korištenju Labela, elementi web obrasca mogu se aktivirati ne samo klikom na samu nju, već i klikom na tekst koji se nalazi pored nje.
Fieldset i Legend - razbijanje forme na dijelove
Vjerojatno ste često vidjeli da su veliki obrasci u Html-u podijeljeni 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 otvor i otvor za zatvaranje.
Dakle, da biste stvorili grupu sastavnih dijelova, sve te dijelove trebate zatvoriti u početne i završne oznake Fieldset. A da biste postavili naslov (legendu) za ovu grupu, potrebno je odmah nakon početnog Fieldset-a napisati konstrukciju početne i završne legende, između kojih je potrebno umetnuti tekst naslova grupe.
Evo primjera stvaranja grupa pomoću Fieldset-a i Legende:

Sretno ti! Vidimo se uskoro na stranicama bloga
Više videa možete pogledati ako odete na
");">
Moglo bi vas zanimati
Select, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih popisa i tekstualnih polja
Popisi u Html kodu - UL, OL, LI i DL oznake
MailTo - što je to i kako napraviti link u HTML-u za slanje e-pošte
Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex izlaz i drugi programi

Uzimajući u obzir osnovne HTML oznake, ne možemo a da se ne dotaknemo tako važnog elementa kao što su forme. Na web stranicama često su potrebne povratne informacije. Na primjer, ispunjavanje obrasca na web mjestu, registracija, autorizacija, komentari itd. U svim tim slučajevima korisnik ispunjava posebna područja (polja obrasca) na stranici, nakon čega se podaci šalju na poslužitelj. Obrasci se koriste za stvaranje povratnih informacija. Obrazac je fragment HTML dokumenta namijenjen korisničkom unosu.
Slika prikazuje obrazac za upis studenata na web stranici obrazovne ustanove.
Za izradu obrasca koristi se spremnik
s atributom action, koji specificira stranicu na poslužitelju koja će obraditi podatke poslane putem obrasca.
Struktura u svom najjednostavnijem obliku:

elementi forme...
Svaki obrazac također mora imati gumb za slanje podataka nakon ispunjavanja obrasca.
Struktura gumba:
Dakle, za snimanje gotovo svih elemenata obrasca koristi se oznaka s atributom tipa. Za izradu gumba koji poništava sve podatke iz obrazaca, koristi se sljedeća struktura:
Za stvaranje tekstualnog polja postoji tekstualni parametar. Koriste se sljedeći parametri: name – naziv polja; veličina – za polje u simbolima; maxlength – najveći mogući broj znakova u polju; vrijednost – informacija prikazana u obrascu prema zadanim postavkama
Primjer unosa obrasca s dva tekstualna polja:

Unesite svoje ime:

Unesite prezime:

Rezultat obrasca prikazan je na slici.
Ako trebate unijeti veliku količinu informacija u tekstualno polje, na primjer, komentar, upotrijebite obrazac za tekstualno područje koji se stvara pomoću oznake sa sljedećim atributima: naziv – naziv područja; cols – broj stupaca područja; redovi – broj redova; wrap – način prelamanja linija (on – prelomi linije, off – ne prelamaj linije).Gornjem kodu dodajmo polje tekstualnog područja:Komentar: <textarea name="area" cols=”25” rows=”5” wrap=”on”>
Rezultat rada koda s područjem teksta prikazan je na slici.

Sljedeći element obrazaca su popisi koji vam omogućuju odabir iz prikazanog skupa vrijednosti. Oznake vam omogućuju stvaranje obrasca popisa

Da bi element bio istaknut kada se stranica učita, on je neophodan u tagu
Slična metoda odabira su elementi obrasca potvrdnog okvira i radiobuttona. Razlika između ovih elemenata je u tome što potvrdni okvir omogućuje više odabira, dok radio gumb omogućuje samo jedan odabir.
Struktura potvrdnog okvira i unosa radio gumba:
tekst
Radio gumb:
tekst
U elementima navedenim u strukturi, checked atribut se prema zadanim postavkama koristi za označavanje potvrdnog okvira i radio gumba. Primjer korištenja potvrdnog okvira, radio gumba i HTML koda prikazan je na slici.
Drugi element obrasca je gumb, specificiran pomoću atributa oznake tipa s gumbom vrijednosti:
U navedenom kodu za kreiranje gumba postoji parametar onclick, koji obično specificira kod u programskom jeziku za izvođenje određene akcije kada se klikne na ovaj gumb:
Za prikaz poruke u posebnom prozoru koristite JavaScript naredbu – aler. Rezultat primjera prikazan je na slici.
Za umetanje slike u gumb upotrijebite kod prikazan u sljedećem primjeru:
Prilikom registracije i prijave na web stranice koristi se polje sa skrivenim testom, prikazanim zvjezdicama. Ovo je element obrasca lozinke:
Registracija na stranici često je podijeljena na nekoliko stranica i svaka sljedeća mora sadržavati podatke iz prethodne. Kako bi se sakrile prenesene informacije, koristi se skriveni element obrasca:
Skriveni element obrasca bit će nevidljiv u prozoru preglednika.
Za učitavanje datoteka na poslužitelj, obrasci imaju element datoteke. Primjer koda za učitavanje datoteka na poslužitelj prikazan je u nastavku:
Dakle, u ovoj smo temi pogledali elemente obrasca za stvaranje različitih HTML stranica, koji vam, zajedno s rukovateljima skriptama na računalu ili poslužitelju, omogućuju razvoj potpunih web aplikacija.