Kako podesiti pametne telefone i računare. Informativni portal

HTML forme i elementi forme. HTML forme

17.06.2019 Programi

S obzirom na osnovne HTML oznake ne možemo a da se ne dotaknemo ovoga važan element poput formi. 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

With atribut akcije, koji specificira stranicu na serveru koja će obraditi podatke poslane putem obrasca.

Struktura u svom najjednostavnijem obliku:


elementi forme...

Svaki obrazac također mora imati dugme za slanje, dizajniran za slanje podataka nakon popunjavanja obrasca.

Struktura dugmadi:

Dakle, za snimanje gotovo svih elemenata obrasca koristi se oznaka With type atribut. 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:


Unesite svoje ime:



Unesite prezime:





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

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 rukovateljima skriptama na računaru ili serveru, omogućavaju razvoj punopravnih web aplikacija.

Dobar dan, ljubitelji web razvoja i oni koji žele napraviti svoju web stranicu. Prije toga, sve moje publikacije bile su posvećene osnovnim elementima jezika, načinima kreiranja različitih objekata sadržaja, njihovom formatiranju, strukturiranju itd. Nakon što ste savladali prethodne teme, već možete kreirati prilično dobru web stranicu. Međutim, to će biti nepotpuno bez današnje teme: "Kreiranje obrazaca u html-u."

Ovaj dio jezika je veoma važan. Stoga, obratite posebnu pažnju na njegovo proučavanje, inače web resurs koji ste kreirali neće biti pušten u proizvodnju. Tako ćete nakon čitanja članka naučiti zašto trebate koristiti obrasce, koje oznake se koriste za kreiranje, a moći ćete i isprobati konkretne primjere u praksi. Hajde da počnemo!

Šta je obrazac i kako funkcionira?

Forma– ovo je jedan od najvažnijih objekata, koji je namijenjen razmjeni informacijskih podataka između servera i korisnika.

Jednostavno rečeno, ako želite stvoriti internetsku trgovinu s mogućnošću naručivanja proizvoda na web stranici, zatražiti registraciju na web resursu i raditi s nalozima ili pružiti kupcima povratne informacije od menadžera kompanije, onda ne možete bez obrazaca.

Forma se specificira pomoću posebnog elementa html jezika

.

Imajte na umu da dokument koda može sadržavati nekoliko deklaracija oznaka , međutim, serveru se može poslati samo jedan zahtjev za obradu podataka. Zato informacije koje korisnik unosi u za to predviđena polja, a odnose se na različite obrasce, ne bi trebalo da budu zavisne. Također, nije dozvoljeno gniježđenje oblika jedan u drugi.

Za one koji su nestrpljivi i željni da na brzinu pogledaju prikaz koda, priložio sam jednostavan primjer korištenja panela s tekstualnim poljem za lozinku s gumbom:

1 2 3 4 5 6 7 8 9 10 11 12 Primjer

Primjer

Možda sada nije baš jasno šta i kako djeluje u ovom malom programu, ali garantiram da ćete nakon čitanja cijelog članka moći kreirati aplikacije koje su mnogo složenije.

Slanje podataka na stranu servera

Da biste poslali ukucane (ili odabrane) informacije u dijaloškom okviru, morate koristiti standardni mehanizam - Dugme za slanje.

Kod za takvu metodu izgleda ovako:

Kada pokrenete prikazanu liniju, pojavit će se dugme sa natpisom: „Pošalji“.

Drugi način slanja podataka na serversku stranu je da pritisnete tipku Enter u okviru za dijalog.

Nakon potvrde slanja navedene informacije, ona ne stiže odmah na server. Prvo ga obrađuje pretraživač, što rezultira formom “ime=vrijednost”.

Parametar atributa je odgovoran za ime tip tag , a za vrijednost - podatke koje je unio korisnik. Zatim se konvertirani niz prosljeđuje rukovaocu, koji je najčešće specificiran u atributu akcija element

.

Sam parametar akcije nije potreban, au nekim slučajevima uopće nije potreban. Na primjer, ako je stranica web stranice napisana pomoću php-a ili js-a, tada se obrada događa na trenutnoj stranici i veze nisu potrebne.

Za bolje razumijevanje cjelokupne slike funkcionisanja stranice, dodala bih da se na serveru podaci obrađuju na drugim jezicima. Tako se jezicima na strani servera smatraju: Python, php, jezici slični C (C#, C, itd.), Java i drugi.

Sada bih želio stati i govoriti više o elementu . Da to objasnim jednostavnim rečima potrebna za kreiranje tekstualnih polja, radio dugmadi, raznih dugmadi, skrivenih polja, okvira za potvrdu i drugih objekata.

Oznaka ne mora biti uparena sa , međutim, ako trebate obraditi korisničke zapise ili ih unijeti, na primjer, u bazu podataka, onda ne možete bez kontejnera.

Glavni atributi ovog elementa jezika za označavanje hiperteksta su:

  • Tekst– kreira tekstualno polje;
  • Submit– kreira dugme za slanje podataka na server;
  • Slika– odgovoran je za dugme sa slikom;
  • Resetovati– postavlja dugme za brisanje obrasca;
  • Lozinka– postavlja tekstualno polje posebno za lozinke;
  • Polje za potvrdu– odgovoran za polja sa potvrdnim okvirima;
  • Radio– odgovoran za polja sa izborom jednog elementa;
  • Dugme– kreira dugme;
  • Skriveno– koristi se za skrivena polja;
  • File– postavlja polje odgovorno za slanje datoteka.

Metode prenošenja informacija

Postoje 2 načina za prijenos korisničkih podataka na serversku stranu: Get I Pošta. Ove metode izvode istu radnju, ali se značajno razlikuju jedna od druge. Stoga, prije nego što spomenemo bilo koji od njih, hajde da se upoznamo s njihovim karakteristikama.

Pošta Get
Veličina poslanih dokumenata Ograničeno na strani servera. Maksimalno – 4 KB.
Kako se prikazuju poslane informacije Dostupno samo kada se gleda preko ekstenzija pretraživača ili drugih posebnih softverskih proizvoda. Odmah dostupno svima.
Korišćenje obeleživača Ne postoji način dodavanja u markere, pošto se zahtjevi ne ponavljaju (sve stranice povezuju na jednu adresu). Svaka stranica sa zahtjevom može se sačuvati kao bookmark i vratiti joj se kasnije.
Keširanje Na osnovu prethodnog stava, svi zahtjevi su na jednoj stranici. Svaka stranica se može posebno keširati.
Svrha Koristi se za slanje velikih datoteka (knjige, slike, video zapisi, itd.), poruka, komentara. Odlično za traženje traženih vrijednosti na web resursu ili za slanje kratkih tekstualnih poruka.

Kako bi naznačio koji od dva načina prijenosa podataka pretraživač treba koristiti, u elementu koristite navedeni parametar metoda(Na primjer, method="post").

Pogledajmo drugi primjer. Kreirajmo obrazac u koji treba da unesete svoje lične podatke (ime i prezime, datum rođenja) i kreirate lozinku. Nakon toga sve to šaljemo na server koristeći metodu Pošta.

POST metoda

Unesite svoje lične podatke!

Na primjer, za unos datuma postoje prekidači za broj svakog parametra (dan, mjesec i godina), kao i padajući panel sa samim kalendarom radi praktičnosti.

Kreiranje ploče za registraciju

Osnovne oznake i atributi su pokriveni. Zato je vrijeme da kreirate potpuni formular za registraciju koristeći css oznake stila i provjeru unesenih podataka. Naravno, nećemo moći vidjeti kako server radi s njima, ali ćemo dati dizajn i važne detalje.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Registracija
registracija na sajtu

ime:

Prezime:

Email:

Lozinka:

Ponovi lozinku:

Registracija

registracija na sajtu

Za naknadni ispravan rad u našem servisu molimo unesite ispravne podatke!

ime:

Prezime:

Email:

Lozinka:

Ponovi lozinku:

Savetujem vam da ovaj programski kod sačuvate u dokumentu sa ekstenzijom .html i utf-8 kodiranjem, i otvorite ovaj drugi u prozoru pretraživača. Videćete tablu za registraciju u svom sjaju sa poljima za unos vašeg imena, prezimena, e-pošte i ponovljene lozinke. Obratite pažnju da kada pokrenete stranicu, kursor se odmah postavlja u prvo tekstualno polje. Ova tehnika se postiže kroz atribut autofokus.

Apsolutno sam siguran da ste, trčeći po internetu, naišli na razne forme, na primjer, obrazac za registraciju, obrazac za prijavu, obrazac za povratne informacije i mnoge, mnoge druge. HTML forme.

Zapravo, obrazac se sastoji od raznih elemenata za unos: tekstualnih polja, tekstualnih oblasti, radio dugmadi, radio dugmadi, dugmadi itd.

I u ovom članku ćete naučiti kako stvoriti apsolutno bilo koji .

Prvo kreirajte jednostavnu HTML stranica, kojem dodajte kontejner (tag

), poravnavajući njegov sadržaj sa središtem. Nadam se da ćete se nositi sa ovim bez poteškoća.

Pogledajmo sada obrazac. Obrazac počinje oznakom

, prema tome, završava sa završnom oznakom
. Ova oznaka ima nekoliko atributa koje je vrlo poželjno popuniti. Ali prvo, napravimo jednostavan obrazac sa atributima oznake
kako biste jasnije razumjeli svrhu svakog od njih:


Ovdje počinjemo opis obrasca koji ima sljedeće atribute:

1) Atribut " ime". Vrijednost ovog atributa znači ime HTML forme. Postavlja se pitanje zašto je to potrebno? Odgovor je vrlo jednostavan: ako ne koristite jedan obrazac, već nekoliko, onda da biste razlikovali jedan oblik od drugog, morate postaviti različita imena. I sama imena su potrebna za pristup obrascima, na primjer, putem JavaScript. Reći ću vam jednu malu tajnu, koju vam ne savjetujem da koristite, ali radi iskrenosti, reći ću vam o njoj. U stvari, oblici se lako mogu razlikovati bez imena, tako da, općenito govoreći, naziv oblika uopće nije potreban. Ali ja SNAŽNO Preporučujem da obrascima date nazive, jer ćete lakše razumjeti za šta je svaki obrazac odgovoran.

2) Atribut " akcija". Vrijednost ovog atributa je odgovorna za putanju do datoteke skripte koja će obraditi formu. Odnosno, nije dovoljno unijeti podatke u obrazac, već ih treba obraditi u skladu s tim, a upravo je to putanja za ovo fajl rukovaoca i nalazi se u vrijednosti atributa " akcija".

3) Atribut " metoda". Može imati jedno od dva vrlo popularna značenja: " pošta" i " dobiti". Ovaj atribut određuje način slanja. Neću ulaziti u detalje, samo ću reći da je prvi način skriveno slanje podataka, a drugi otvoreni. Da bude još jasnije, pogledajmo dva prelazne adrese:

A) http://mysite.ru/scipt/request.php

b) http://mysite.ru/script/request.php?a=7&b=Michael

U prvom slučaju korisnik ne vidi šta šalje (metoda " pošta"), a u drugom on zapravo vidi nazive varijabli i njihove vrijednosti (metoda " dobiti"). Na kraju članka možete pokušati poslati obrazac koristeći dvije različite metode i provjeriti jesu li različite. Ali za sada ću reći da MNOGO metoda se češće koristi pošta“, odnosno skriveno slanje.

Ovo je bio opis samog obrasca, a sada možete početi sa dodavanjem elemenata obrascu.

Prva stvar koju ćemo dodati je tekstualno polje. Dodavanje tekstualnog polja pomoću oznake , odnosno korištenjem atributa ove oznake " tip"sa značenjem" tekst". Također, prije kreiranja tekstualnog polja, preporučuje se da napišete o kakvom se polju radi, na primjer, " tvoje ime". Unutar oznake

napiši ovaj red:

Tvoje ime:

Opet, hajde da raščlanimo atribute:

1) Atribut " tip" je odgovoran za tip ulaznog elementa. U ovom slučaju smo naznačili da je ovo obično tekstualno polje. U sljedećim elementima ćemo promijeniti vrijednost ovog atributa.

2) Atribut " ime" je odgovoran za ime elementa. Ovdje smo naznačili da je ime ovog polja ime.

3) Atribut " vrijednost" je odgovoran za zadanu vrijednost ovog polja.

Kako kažu, bolje je jednom vidjeti nego sto puta čuti, zato bolje biraj ( Štaviše, samo ga otkucajte, a ne kopirajte!) ovaj tekst u uređivaču, a zatim pogledajte rezultat u pretraživaču.

Sada napravimo još jedno slično polje, ali ne za unos običnih znakova, već za unos lozinke. Odnosno, sve bi trebalo da bude isto, ali samo tekst treba da bude sakriven iza zvjezdice. Stoga, prelazak na sljedeći red (tag
), napišimo sljedeći kod:

Vaša lozinka:

Kao što možete vidjeti, sada vrijednost atributa " tip" je " lozinka". Preostali atributi su isti kao i za obično tekstualno polje.

Sljedeći element je padajuća lista. Kreira se malo komplikovanije, jer je ovdje potrebno ne samo deklarirati stvaranje padajuće liste, već i dodati elemente ovoj listi. Hajde da napišemo, prelazeći na sledeći red (neću ovo dalje spominjati) sledeće HTML kod.

Odaberite opciju:

Tag . atribut " ime" je jasno jer sam to već nekoliko puta objasnio. Stavke liste se kreiraju pomoću oznake . Vrijednost atributa " vrijednost" znači koju će vrijednost imati varijabla izbor(na primjer, u JavaScript), odnosno bilo izbor = 1, ili izbor = 2, ili izbor = 3. Odmah nakon završetka opisa oznake stavlja se ono što korisnik vidi na padajućoj listi. Opet, bolje je pogledati u pretraživač i sve će vam odmah postati jasno.

Sada dodajmo tekstualno područje pomoću oznake

Ovdje kreiramo tekstualno područje s visinom od 10 stringovi (vrijednost atributa " redova") i širinu od 15 znakovi (vrijednost atributa " cols").

Unutar ove uparene oznake naveden je tekst u zadanom tekstualnom području. Zapravo, nema se tu šta više reći. Idemo dalje.

Sljedeći element je radio dugme. Radio dugme je skup takvih " krugovima", od kojih možete odabrati samo jedan. Radio dugmad se kreiraju pomoću HTML oznaka , ili, preciznije, koristeći vrijednost " radio"atribut" tip". Hajde da napišemo nešto ovako HTML kod:

Izaberi jedan:
Opcija 1
Opcija 2
Opcija 3

Ovdje ću se fokusirati na atribut " ime", jer pored postavljanja imena, ima još jednu veoma važnu funkciju. Ako vi NE Ako nazive ova tri radio dugmeta učinite istim, oni će postati nezavisni i stoga možete odabrati nekoliko opcija odjednom. Da biste se u to uvjerili, promijenite imena, a zatim pokušajte odabrati nekoliko opcija odjednom, i odmah ćete se uvjeriti u moje riječi. Stoga, jedna grupa radio dugmadi mora imati istu vrijednost atributa " ime".atribut" vrijednost" znači vrijednost varijable " choiceradio“ (opet, na primjer, u JavaScript). Odmah nakon opisa oznake postoji tekst koji će korisnik vidjeti pored odgovarajućeg radio dugmeta.

Drugi element forme su prekidači ( polje za potvrdu). Ponovo se kreiraju pomoću oznake . Napišimo sljedeće redove:

Slažete se sa našim pravilima:

Mislim da je ovde sve transparentno, pa neću objašnjavati. Savjetujem vam da samo pogledate kako to izgleda u pretraživaču. I reći ću da ako je potvrdni okvir označen, onda vrijednost varijable " uslovi"će" da", ako ne stoji, tada će vrijednost ove varijable biti "", odnosno prazan niz.

Drugi element je polje za odabir datoteke. Sigurno ste ikada postavljali fajlove na server i često ste morali da koristite polje za umetanje naziva datoteke da biste to uradili. Ovo polje je kreirano pomoću već dosadne oznake . Hajde da to napišemo ovako:

Odaberite fajl za preuzimanje:

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 vas razumijevanje kako su strukturirani i rade neće nimalo ometati da uspješno radite na dizajnu, a neće biti ni suvišno ako ga sami promovirate.

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, nakon što popuni polje sa svojim imenom, unese svoj e-mail i tekst poruke, a zatim klikne na dugme za slanje, imaće 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 svrhe trebat će vam poseban program za rukovanje, koji će, nakon što korisnik klikne na dugme za slanje, preuzeti 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 u PHP-u. Stoga ćete u atributu Action oznake Form morati navesti putanju do datoteke ove skripte koja se nalazi na vašem hosting serveru. Dozvolite mi da vam dam primjer pretplate na RSS feed mog bloga putem e-pošte:

" name="title">

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:

  1. Ime – jedinstveno ime koje se mora navesti ako će HTML datoteka u kojoj nešto radite koristiti nekoliko web obrazaca
  2. Akcija – obavezni atribut koji označava putanju do skripte na koju će se podaci iz nje prenijeti na dalju obradu
  3. 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, u stvari, namijenjena uglavnom za varijable i kratke poruke, a također i 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 Unos. 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:

  1. jednoredna tekstualna polja (Type="Text")
  2. polja za unos lozinke (Type="Password")
  3. potvrdni okviri (Type="Checkbox")
  4. radio dugmad (Type="Radio")
  5. skrivena polja (Type="Hidden")
  6. obična dugmad (Type="Button")
  7. dugmad za slanje podataka rukovaocu (Type="Submit")
  8. dugmad za dovođenje web obrasca u prvobitno stanje (Type="Reset")
  9. polja za upload fajlova na server (Type="File)
  10. 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:

  1. 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.
  2. 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
  3. 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.
  4. Vrijednost - možete je koristiti da odredite šta će tačno biti zapisano u polju ili na dugmetu za slanje podataka
  5. 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:

Unesite Vaš E-mail:

Sada pogledajmo kreiranje web obrasca s radio dugmadima (Radio):

Da li vam se sviđa resurs KtoNanNovenkogo.ru?

Da?
Ne?

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:

Koji motor(e) web stranica preferirate?

WordPress
Joomla
SMF

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:

Odaberite i Opcija - oznake padajuće liste

Svi elementi web obrasca koji kreiraju polja padajuće liste formiraju se na isti način. Prvo, kontejner kombinovanog okvira se postavlja pomoću oznake za otvaranje i zatvaranje Html Select. I onda, unutar ovog kontejnera, kreiraju se odvojeni kontejneri sa stavkama (elementima) ove liste. Ovo se radi pomoću oznaka za otvaranje i zatvaranje opcija.

Ispada nešto ovako:

Ali ovo je pojednostavljen dizajn, jer Select i Option imaju niz atributa, koji definiraju svojstva i izgled kreiranog polja padajuće liste.

  1. Ime - Morate navesti jedinstveno ime za ovaj element web obrasca kreiranog pomoću Select. Ovo ime će biti proslijeđeno serveru programu za rukovanje podacima kao ime za varijablu. Vrijednost ove varijable će biti vrijednost atributa Value (podešen u Opciji za svaku stavku) stavke padajuće liste koju korisnik odabere.
  2. Veličina—možete ga koristiti za postavljanje broja prikazanih stavki. Drugim riječima, koristeći Size možete postaviti visinu liste, mjerenu brojem prikazanih redova. Ako izričito ne navedete vrijednost Size u oznaci Select, koristit će se zadana visina padajuće liste, a bit će drugačije ako je atribut Select odsutan ili prisutan u atributu Select:
    1. Ako je višestruko prisutno u Select, tada će visina padajuće liste u web obrascu po defaultu biti jednaka broju njenih elemenata. One. Biće prikazane sve stavke padajuće liste višestrukog izbora. Pogledajte primjer množine ispod. Ako je atribut Veličina u Select postavljen na manji od broja stavki, s desne strane će se pojaviti traka za pomicanje.
    2. Ako Višestruko nije prisutno u Odaberi, tada će visina padajuće liste u web obrascu prema zadanim postavkama biti jedan red. One. Samo jedna linija će biti vidljiva, a preostalim stavkama će se pristupiti samo pritiskom na dugme lifta (desno). Pogledajte primjer ispod
  3. Višestruko – dodjeljivanje ovog atributa oznaci Select omogućit će vam da kreirate padajuću listu sa mogućnošću odabira nekoliko stavki u isto vrijeme. Više o ovom atributu pročitajte u nastavku.

Obrasci sa padajućim listama mogu se podijeliti u dvije opcije. U prvoj opciji možete odabrati samo jedan element (red) polja sa padajućom listom, 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 će biti poslani na server. Koja će se padajuća lista kreirati zavisi od prisutnosti ili odsustva atributa Višestruko u oznaci Select.

Više je navedeno u Select bez parametra, jer Jednostavno je napisano Višestruko i to je to. Ako postoji, kreirat će se web obrazac padajuće liste s višestrukim mogućnostima odabira (držanjem Ctrl ili Shift).

Varijanta polja sa padajućom listom u kojoj će se nalaziti moguć višestruki izbor, izgledat će otprilike ovako:

Na desnoj strani je primjer padajućeg web obrasca višestrukog odabira koji se temelji na kodu iznad. Kao što vidite, držanjem Ctrl ili Shift možete odabrati nekoliko stavki u isto vrijeme.

Ako u oznaci Select ne postoji višestruki atribut, tada se može odabrati samo jedan element ove padajuće liste (red).

Primjer u kojem možete odabrati samo jednu stavku možete vidjeti ovdje:

Oznaka Odaberite SelectED site Legend

Atributi oznake opcija


U kreiranu padajuću listu (pomoću Select i Option) možete dodati nešto poput separatora sa naslovima grupa, koji će se od ostalih stavki menija razlikovati po stilu fonta.

Da biste kreirali grupu od stavki padajuće liste, potrebno je da ih priložite u oznaku za otvaranje i zatvaranje obrasca Optgroup, a u početnu oznaku Optgroup dodati atribut Label, kao parametar za koji ćete morati da unesete željeni naziv grupe.

Na primjer ovako:

Label Select
SelectED web stranica Legenda

Textarea - kreiranje tekstualnog polja na obrascu

Postoji još jedan element web obrazaca koji nismo razmatrali - Textarea (polje sa mogućnošću unosa teksta u više redova). Kreira se pomoću uparene Html oznake Textarea. Štaviše, možete premotati tekst u njemu u novi red i on će biti prenet na server uzimajući u obzir napravljene prevode.

Dakle, da biste kreirali višelinijsko tekstualno polje, potrebno je da odredite otvaranje i zatvaranje Textarea, a između njih možete dodati tekst koji će biti vidljiv kada se stranica sa web formom učita. Korisnik tada može obrisati ovaj tekst i napisati svoj.

Šta nam možete reći o sebi?

Sljedeći atributi se mogu koristiti sa Textarea:

  1. Naziv - određujete naziv za ovaj element web obrasca. Biće prenesen na server u program za obradu podataka
  2. Cols - možete ga koristiti za postavljanje širine kreiranog višelinijskog polja u znakovima.
  3. 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.
  4. Samo za čitanje—sprečava korisnike da mijenjaju ili dodaju svoj tekst u ovo polje (samo za čitanje).
  5. 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:

Label
Odaberite
SelectED

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 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

HTML forme su složeni elementi interfejsa. Uključuju različite funkcionalne elemente: polja za unos I