Primjeri HTML unosa. INPUT Vrste elemenata

< form id = "search" method = "get" >

< label for = "s" >traži< / label >

< input type = "search" id = "s" name = "s" / >

< input type = "submit" value = "traži" / >

< / form >

< label for = "email" >Moja e-mail adresa je< / label >

< input type = "email" id = "email" name = "email" / >

funkcija setErrorMessages (formControl) (

var validityState_object = formControl. valjanost;

if (validityState_object. valueMissing) (

formControl. setCustomValidity ( "Molimo postavite dob (obavezno)") ;

) else if (validityState_object. rangeUnderflow) (

formControl. setCustomValidity ("Vi ste \" premladi ");

) else if (validityState_object. rangeOverflow) (

formControl. setCustomValidity ("Vi ste \" prestari ");

) else if (validityState_object. stepMismatch) (

Specifikacija

Obavezni atribut

Vrijednosti

Stol 1 navodi moguće vrijednosti atributa tipa i rezultirajućeg oblika polja obrasca.

Nove vrijednosti su dodane u HTML5 kao što je prikazano u tablici 1. 2.

Podrška preglednika za ove vrijednosti prikazana je u tablici 1. 3.

Zadana vrijednost

HTML5 IE Cr Op Sa Fx

HTML5 IE Cr Op Sa Fx

Označiti ULAZNI je jedan od svestranih elemenata oblika i omogućuje vam stvaranje različitih elemenata sučelja i pružanje interakcije s korisnikom. Uglavnom INPUT služi za stvaranje tekstualnih polja, raznih gumba, radio gumba i potvrdnih okvira. Iako INPUT element ne treba biti smješten unutar FORM spremnika koji definira obrazac, ali ako se korisnički unos treba poslati na poslužitelj gdje ga obrađuje CGI program, tada se FORM mora navesti. Isti je slučaj i za obradu podataka s klijentske aplikacije, na primjer, skripte u JavaScriptu.

Glavni parametar INPUT oznaka, definirajući tip elementa - tip. Omogućuje vam da pitate sljedeće stavke obrasci: tekstualno polje (tekst), polje lozinke (lozinka), potvrdni okvir (kvačica), potvrdni okvir (radiobuton), skriveno polje (skriveno), gumb (gumb), gumb za slanje obrasca (pošalji), gumb za brisanje obrasca ( reset ), polje za slanje datoteke (datoteke) i gumb sa slikom (slikom). Svaki element ima svoj popis parametara koji određuju njegovu vrstu i karakteristike.

Sintaksa

Završna oznaka
Nije obavezno.

Parametri
align - definira poravnanje slike.
alt - alternativni tekst za gumb sa slikom.
granica - debljina obruba oko slike.
označeno je unaprijed aktivirani radio gumb ili potvrdni okvir.
onemogućeno - blokira pristup i izmjenu elementa.
maksimalna dužina - maksimalni iznos znakovi dopušteni u tekstu.
naziv - naziv polja, tako da ga procesor obrazaca može identificirati.
samo za čitanje - postavlja da korisnik ne može promijeniti polje.
size - širina tekstualnog okvira.
src - vrijednost elementa.

Primjer 1. Korištenje oznake INPUT

Tvoje ime:

Koji preglednik uglavnom koristite:

Internet Explorer

Netscape

Opera

Firefox

Mozilla

Komentar

Opis parametara oznake INPUT

ALIGN parametar

Opis
Određuje kako poravnati polje slike s tekstom ili drugim elementima obrasca.

Sintaksa

Primjenjivo

Argumenti
Tablica 1 popisuje moguće značenje parametar poravnanja i rezultat korištenja.

Zadana vrijednost
dno

Primjer 2. Poravnavanje polja sa slikom

...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...

Bilješka
Iako preglednici podržavaju sve vrijednosti parametara poravnanja, argumenti absbottom, absmiddle, baseline i texttop nisu obuhvaćeni HTML 4 specifikacijom.

ALT parametar

Opis
Parametar alt postavlja alternativni tekst za polje slike. Ovaj tekst vam omogućuje da dobijete tekstualne informacije o slici kada je učitavanje slika onemogućeno u pregledniku. Budući da se slike učitavaju nakon što preglednik primi informacije o njima, tekst koji zamjenjuje sliku pojavljuje se ranije. I dok se učitava, tekst će biti zamijenjen slikom. Preglednici također prikazuju alternativni tekst kao opis alata koji se pojavljuje kada miš pređe preko slike.

Sintaksa

Argumenti
Bilo koji prikladan tekstualni niz... Mora biti stavljen u dvostruke ili jednostruke navodnike.

Zadana vrijednost
Ne.

Primjer 3. Dodavanje zamjenskog teksta

...
alt = "(! LANG: Pošaljite obrazac na poslužitelj" !}>

BORDER parametar

Opis
Preglednici obrađuju slike dodane putem oznake INPUT slično slikama stvorenim pomoću IMG oznaka... Uključujući i oko slike, možete dodati okvir čija boja odgovara boji teksta.

Sintaksa

Argumenti
Bilo koja cjelina pozitivan broj u pikselima.

Zadana vrijednost
0

Primjer 4. Dodavanje okvira slici

...

Bilješka
Ovu postavku trenutno podržava samo preglednik Netscape, drugi preglednici je ignoriraju i prikazuju sliku bez obruba.

PROVJEREN parametar

Opis
Ovaj parametar određuje je li element obrasca kao što je potvrdni okvir ili radio gumb unaprijed označen. U slučaju korištenja potvrdnih okvira može se označiti samo jedan element grupe, za potvrdne okvire (radiobuton) mogu se označiti barem svi elementi.

Sintaksa

Argumenti
Ne.

Zadana vrijednost

Primjer 5. Označavanje sklopki

Sa kojim operativni sustavi poznajete li se?

Windows 95/98

Windows 2000

Sustav X
Linux
X3-DOS

ONEMOGUĆEN parametar

Opis
Blokira pristup i izmjenu polja obrasca. U tom slučaju je prikazan sivo i korisniku nije dostupan za aktivaciju. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, mišem ili na bilo koji drugi način. Međutim, ovo stanje polja može se promijeniti pomoću skripti.

Sintaksa

Primjenjivo
Za sve elemente oblika.

Argumenti
Ne.

Zadana vrijednost
Ova je opcija onemogućena prema zadanim postavkama.

MAXLENGTH parametar

Opis
Instalira maksimalan broj znakove koje korisnik može unijeti u tekstualni okvir. Kada se ovaj broj postigne tijekom biranja, daljnji unos nije moguć.

Sintaksa

Argumenti
Bilo koji pozitivan cijeli broj u znakovima.

Zadana vrijednost
Unos znakova nije ograničen.

Primjer 7. Ograničavanje broja znakova u polju

Parametar NAME

Opis
Određuje jedinstveni naziv za element obrasca. Obično se ovaj naziv koristi prilikom slanja podataka na poslužitelj ili za pristup unesenim podacima polja putem skripti.

Sintaksa

Primjenjivo
Za sve elemente oblika.

Argumenti
Naziv je skup znakova, uključujući brojeve i slova. JavaScript je osjetljiv na velika i mala slova, pa kada se pozivate na element po imenu, koristite isti pravopis kao i za parametar naziva.

Zadana vrijednost
Ne.

Primjer 8. Korištenje naziva polja

Unesite tekst

Parametar SAMO ČITANJE

Opis
Kada se parametar samo za čitanje doda oznaci INPUT, korisnik ne može mijenjati tekstno polje, uključujući unos novog teksta ili izmjenu postojećeg teksta. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, mišem ili na bilo koji drugi način. Međutim, stanje i sadržaj polja mogu se promijeniti pomoću skripti.

Sintaksa

Argumenti
Ne.

Zadana vrijednost
Ova vrijednost je onemogućena prema zadanim postavkama.

Primjer 9. Polje samo za čitanje

parametar SIZE

Opis
Širina tekstualnog okvira, koja je određena brojem znakova u monorazmaknom fontu. Drugim riječima, širina je dana brojem susjednih slova iste horizontalne širine. Ako se veličina fonta mijenja pomoću stilova, širina se također mijenja u skladu s tim.

Sintaksa

Argumenti
Bilo koji pozitivan cijeli broj.

Zadana vrijednost
20

Primjer 10. Širina polja

SRC parametar

Opis
Adresa grafička datoteka biti prikazan na web stranici u polju slike. Najpopularnije datoteke u GIF format i JPEG.

Sintaksa

Argumenti
Vrijednost je puna odn relativni put u datoteku.

Zadana vrijednost
Ne.

Primjer 11. Put do grafičke datoteke

...

TYPE parametar

Opis
Govori pregledniku koja je vrsta elementa obrasca.

Sintaksa

Argumenti
Tablica 2 navodi moguću vrijednost parametra tipa i rezultirajući oblik polja obrasca.

VALUE parametar

Opis
Određuje vrijednost elementa obrasca koji se šalje poslužitelju ili prima pomoću klijentskih skripti. Par ime/vrijednost se šalje na poslužitelj, gdje je ime specificirano parametrom name oznake INPUT, a vrijednost je specificirana parametrom vrijednosti.

Ovisno o vrsti elementa, parametar vrijednosti ima sljedeću ulogu:

• za gumbe ( vrsta unosa = gumb | resetiraj | podnijeti) postavlja na njih tekstualni natpis;
• za tekstualna polja (vrsta unosa = lozinka | tekst) specificira prethodno uneseni niz. Korisnik može obrisati tekst i unijeti svoje znakove, ali kada se koristi u obliku gumba Reset, korisnički tekst se briše i vraća uneseni parametar vrijednosti;
• za potvrdne okvire i radio gumbe (vrsta unosa = potvrdni okvir | radio) jedinstveno identificira svaki element tako da klijent ili poslužiteljski program mogao nedvosmisleno odrediti koju je stavku korisnik odabrao.

Sintaksa

Primjenjivo
Za sve elemente oblika.

Argumenti
Bilo koji tekstualni niz.

Zadana vrijednost
Ne.

Primjer 13. Dodavanje vrijednosti polja

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

časnici

Operacijski sustav

Velike prugaste muhe

Nove vrste predmeta

Jedna od čudnih značajki HTML obrazaca je korištenje jednog elementa s nejasnim imenom. za stvaranje raznih kontrola, od potvrdnih okvira do tekstnih okvira i gumba. Specifičan izgled kontrole ovisi o atributu tip element .

Ako preglednik naiđe nepoznata vrsta element , web preglednik ga tretira kao običan tekstni okvir. To znači da svi preglednici tretiraju sljedeća tri elementa potpuno isto:

HTML5 koristi prednosti ovog ponašanja. Naime, u element Dodano je nekoliko novih tipova i ako ih bilo koji preglednik ne podržava, tretirat će ih kao normalne tekstualni okviri... Na primjer, da biste unijeli adresu e-pošte, možete stvoriti polje novi tip email:

Ako stranicu s ovim kodom pogledate u pregledniku koji ne podržava vrstu e-pošte za element (na primjer, Internet Explorer), ovo polje će se prikazati kao obično tekstualno polje. Ali preglednici koji podržavaju HTML5 obrasce malo su pametniji učiniti sljedeće:

Ponudite usluge uređivanja. Na primjer, pametni preglednik može pružiti način odabira adrese e-pošte Adresar i zalijepite ga u polje za adresu.

Spriječiti moguće pogreške... Na primjer, preglednik možda neće prihvatiti slova prilikom upisivanja u brojčano polje ili možda neće prihvatiti nevažeće datume ili čak prisiliti korisnika da odabere datume iz mini kalendara, što je lakše i sigurnije.

Izvršite provjeru. Preglednici mogu učiniti više složene provjere nakon što korisnik klikne gumb za slanje podataka.

HTML5 specifikacija ne daje programerima preglednika nikakve smjernice o prvoj točki. Preglednici mogu slobodno kontrolirati prikaz i uređivanje različiti tipovi podatke na bilo koji razuman način, i različitim preglednicima može dodati razne male pogodnosti.

No, važnije su mogućnosti provjere i eliminacije grešaka. Kao apsolutni minimum, preglednik s podrškom za HTML5 obrasce trebao bi spriječiti slanje obrazaca koji sadrže podatke koji krše pravila o vrsti podataka. Stoga, ako preglednik ne može spriječiti pogreške izravno tijekom unosa (prema drugoj točki gornjeg popisa), trebao bi ih provjeriti kada korisnik pokuša poslati obrazac (prema trećoj točki).

Nažalost, ne svi moderni preglednici zadovoljiti ove zahtjeve. Neki prepoznaju nove vrste podataka i pružaju neke mogućnosti uređivanja, ali ne i provjeru valjanosti. Mnogi preglednici razumiju jednu vrstu podataka, ali ne i drugu. Mobilni preglednici su posebno problematični u tom pogledu - oni pružaju određenu pogodnost uređivanja, ali nemaju mogućnosti provjere valjanosti.

Tablica u nastavku sažima nove tipove podataka i razinu pune podrške za glavne preglednike. Potpuna podrška znači da se u slučaju kršenja vrste podataka obrazac ne dostavlja.

Podrška za nove vrste podataka u glavnim preglednicima

Vrsta podataka	tj	Firefox	Krom	Safari	Opera	Safari iOS	Android
email	-	4	10	5	10.6	-	-
url	-	4	10	5	10.6	-	-
traži(bez provjere)
tel(bez provjere)
broj	-	-	10	5	-	-	-
rasponu	-	-	6	5	11	-	-
datum i vrijeme, datum, mjesec, tjedan, vrijeme	-	-	10	-	11	-	-
boja	-	-	-	-	11	-	-

Iako mobilni preglednici Safari za iOS i Android ne podržavaju provjeru valjanosti, ti preglednici pružaju značajnu pogodnost u pružanju specijaliziranih tipkovnica, pa je vrijedno koristiti prilagođene vrste podataka u aplikacijama za te web-preglednike.

Email adrese

Vrsta podaci e-pošte koristi se za polja za unos e-mail adresa. Općenito, adresa e-pošte sastoji se od niza znakova (neki znakovi nisu dopušteni). Važeća adresa mora sadržavati simbol @ i točku, između kojih mora biti najmanje jedan znak, a nakon točke najmanje dva znaka:

Vrsta e-pošte podržava atribut višestrukošto vam omogućuje unos više adresa u polje. Ali ove višestruke adrese i dalje izgledaju kao jedan redak teksta, odvojeni samo zarezima.

Ne zaboravi to prazne vrijednosti testiraju se. Da biste spriječili prazno polje adrese, u njegov element mora se umetnuti traženi atribut.

URL-ovi

Vrsta url odnosi se na polja za unos URL-a. Pitanje što je valjani URL i dalje se žestoko raspravlja. Ali većina preglednika koristi relativno slab algoritam za provjeru valjanosti. Adresa mora sadržavati prefiks (koji može biti ili stvaran, kao što je http: //, ili fiktivan, kao što je bonk //) i omogućuje vam da unesete razmake i većinu posebni znakovi osim debelog crijeva.

Neki preglednici također nude moguće prijedloge URL-ova na padajućem popisu, koji se obično uzimaju iz povijesti stranica koje je preglednik nedavno posjetio.

Polja za pretraživanje

Vrsta traži odnosi se na polja za pretraživanje. Obično su namijenjeni za upisivanje ključne riječi, za koje se onda vrši neka vrsta pretrage. To može biti cjelokupno pretraživanje interneta (kao što je Google), pretraživanje jedne stranice ili poseban postupak pretraživanja koji ispituje katalog informacija. U svakom slučaju, okvir za pretraživanje izgleda i ponaša se gotovo isto kao i obični tekstni okvir.

U nekim preglednicima, kao što je Safari, okvir za pretraživanje izgleda malo drugačije i ima zaobljene kutove. Osim toga, kada korisnik počne unositi podatke u polje za pretraživanje u Safari preglednik ili Chrome, s desna strana polje prikazuje malu ikonu u obliku slova X, klikom na koju možete obrisati polje.

Osim ovih manjih razlika, polje za pretraživanje nije ništa više od običnog tekstualnog polja. Glavna razlika je semantika. Drugim riječima, tip podataka pretraživanja koristi se kako bi ime polja postalo jasno preglednicima i programe podrške za korisnike sa invalidnosti... Oni mogu usmjeriti posjetitelje na željeno mjesto na stranici ili pružiti druge, inteligentnije usluge - moguće u budućnosti.

Brojevi telefona

Vrsta podataka tel koristi se za označavanje polja za unos brojevi telefona koji se može predstaviti u većini različitim formatima... U nekim slučajevima koriste se samo brojevi, u drugima razmaci, crtice, plus znakovi i okrugle zagrade... Možda je nedostatak jedinstvenog formata razlog što HTML5 standard ne zahtijeva od preglednika da provjeravaju telefonske brojeve. Međutim, nije jasno zašto polje poput tel ne odbija barem slova.

Trenutačno je jedina prednost korištenja polja tel pružanje specijaliziranog virtualna tipkovnica za unos telefonskih brojeva mobilni preglednici koji sadrži brojeve ali ne i slova.

Brojevi

HTML5 definira dvije numeričke vrste podataka. Vrsta broj namijenjena običnim brojevima.

Ova vrsta podataka ima očiti potencijal. Obična tekstualna polja prihvaćaju doslovno sve: brojeve, slova, razmake, interpunkciju itd. Iz tog razloga, jedan od najčešćih zadataka provjere valjanosti je osigurati da je vrijednost broj unutar određenog raspona. Ali kada unesete podatke u polje tipa broj, preglednik automatski zanemaruje sve znakove osim brojeva. Slijedi primjer koda za kreiranje polja ove vrste:

Dob *

Naravno, postoji mnogo brojeva koji nisu prikladni za svaku vrstu brojčanih podataka. Na primjer, u gornjim oznakama dopuštena je dob poput 43 000 ili -6 godina, što je donekle u suprotnosti sa stvarnošću. Ovaj problem se rješava atributima min i maks... Sljedeći kod daje primjer ograničavanja dobi na razuman raspon:

Brojčana polja obično prihvaćaju samo cijele brojeve, a razlomci poput 30,5 nisu dopušteni. (Štoviše, neki preglednici ne dopuštaju čak ni decimalni zarez.) Ali ovo ponašanje se također može promijeniti pomoću atributa korak, što označava korak promjene broja (gore ili dolje). Na primjer, postavljanjem vrijednosti koraka na 0,1, možete unijeti vrijednosti kao što su 0,1, 0,2, 0,3 itd. Ali pokušajte poslati obrazac s vrijednošću 0,15 i dobit ćete poznatu skočnu poruku o pogrešci . Zadana vrijednost koraka je 1.

Atribut step također utječe na način rada gumba na polju brojača:

Klizači

Druga HTML5 numerička vrsta je rasponu... Poput tipa broja, ovaj tip može predstavljati cjelobrojne i razlomke vrijednosti. Također podržava min atributa i max za postavljanje raspona vrijednosti. Slijedi primjer koda za kreiranje polja ove vrste:

Dob *

Razlika je u tome kako polje raspona predstavlja svoje informacije. Umjesto brojača, kao za polje tipa broj, pametni preglednici prikazuju klizač:

Da biste postavili vrijednost vrste raspona, samo trebate povući klizač na željenu poziciju između minimalnog i maksimalne vrijednosti... Ali preglednici koji podržavaju ovu vrstu polja ne daju nikakve povratne informacije o postavljena vrijednost... Da biste dobili ove informacije, morate dodati JavaScript proceduru u oznaku koja reagira na promjene položaja klizača (možda rukovanjem događajem onChange), a zatim prikazuje ovu formaciju pored polja.

Datum i vrijeme

HTML5 definira nekoliko vrsta podataka povezanih s vremenom. Preglednici koji podržavaju tipove datuma mogu prikazati prikladan padajući kalendar iz kojeg korisnik može odabrati željeni datum i/ili vrijeme. Ovo ne samo da uklanja nejasnoće oko ispravnog formata datuma, već vas također sprječava da slučajno (ili namjerno) postavite datum koji ne postoji. Inteligentni preglednici može učiniti još više, kao što je podrška integraciji s osobnim kalendarom.

Primjer korištenja datuma prikazan je u nastavku:

Datum rođenja *

Tablica u nastavku navodi šest novih HTML5 formata datuma i vremena, s kratkim opisom:

Preglednici koji podržavaju vrste podataka za datume i vremena također podržavaju atribute min i max za njih, što vam omogućuje postavljanje minimalnih i maksimalnih datuma sve dok koristite ispravan format datuma. To je prikazano u gornjem primjeru.

Boja

Vrsta podataka o boji koristi se za polja za unos boje. Vrsta podataka o boji zanimljiva je, iako rijetko korištena, manja značajka koja posjetitelju web stranice omogućuje odabir boje iz padajuće palete poput palete. grafički urednik:

Odaberite svoju omiljenu boju

Boja

Nekoliko neobičnih atributa elementa

HTML5 standard prepoznaje još nekoliko atributa koji se koriste za kontrolu preglednika prilikom ispunjavanja obrazaca. Svi preglednici ne podržavaju sve ove atribute. Međutim, dobro je eksperimentirati s njima:

Atribut provjere pravopisa

Neki preglednici pokušavaju popuniti praznine u korisnikovom znanju pravopisa provjeravanjem pravopisa teksta koji unose. Očigledni problem uz ovu uslugu je da se ne sastoji sav tekst od pravih riječi, a slikanje valovitih crvenih podcrta može vrlo brzo ići korisniku na živce. Kako biste spriječili preglednik da provjerava pravopis teksta u polju, postavite atribut provjere pravopisa na false i da ga provjerite na true.

Prema zadanim postavkama, različiti preglednici djeluju različito u pogledu provjere pravopisa, a postavljanje atributa provjere pravopisa rezultira dosljednim ponašanjem.

Atribut automatskog dovršavanja

Neki preglednici pokušavaju uštedjeti vrijeme korisnika predlažući, prilikom unosa podataka u polje, vrijednosti koje su prethodno unesene u ovo polje. Ovo ponašanje nije uvijek poželjno - kao što je navedeno u HTML5 specifikaciji, neke informacije mogu biti povjerljive (na primjer, kodovi za lansiranje nuklearnih projektila;) ili ostati relevantni samo kratko vrijeme (npr. jednokratna lozinka ulaz u bankarski sustav samoposluga). Za takva polja, postavite atribut autocomplete na isključeno kako biste spriječili preglednik od upita moguće opcije završetak teksta unesenog u polje. A da biste izvršili automatsko dovršavanje za određeno polje, postavite njegov atribut automatskog dovršavanja na uključeno.

Automatsko ispravljanje i automatsko korištenje velikih slova

Ovi atributi se koriste za kontrolu sposobnosti. automatski popravak i korištenje velikih slova na nekim mobilnim preglednicima, naime Safari verzije za iPad i iPhone

Višestruki atribut

Web programeri su koristili više atributa s elementom za stvaranje popisa s više izbora od pamtivijeka. Ali sada mogu koristiti ovaj atribut sa određene vrste element , uključujući vrstu datoteke (za prijenos datoteka) i e-poštu. U pregledniku koji podržava ovaj atribut, korisnik može odabrati više datoteka za prijenos odjednom ili zalijepiti više adresa e-pošte u jedno polje.

Pozdrav za vas, dragi čitatelji blog stranice. Danas želim razgovarati o nekome poput HTML forme... Bez obzira na motor vaše stranice (cms), on će sigurno koristiti obrasce kreirane pomoću oznaka Form i Input, kao i atributa i parametara Button, Checked, Value, Checkbox, Radio, Checkbox, Submit...

Pa, također možete dodati elemente ovome za stvaranje padajućih popisa i tekstualnih polja - Select, Option, Textarea, Label, Fieldset, Legend.

Zašto smo potrebni i kako obrasci funkcioniraju na modernim web stranicama

Isti niz za pretraživanje web-mjesta () kreira se pomoću ovih oznaka i tada će pretraživanje vašeg projekta biti obvezno. Stoga vam razumijevanje kako su uređeni i rade neće nimalo naškoditi uspješan rad preko dizajna, pa čak i sa samopromocija a promocija neće biti suvišna.

Dakle, s obrazloženjem potrebe za proučavanjem ovih elemenata, mislim da više ne bi trebalo biti pitanja, pa je vrijeme da prijeđemo izravno na proučavanje njihovih mogućih opcija.

Da, također vas želim 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 izradu se unutar glavnog spremnika, iz tagova obrasca, ubacuju razne oznake - Checked, Value, Checkbox, Radio, Checkbox, Submit itd. Samo trebamo postaviti njegov kod na bilo kojem prikladnom mjestu predloška web-mjesta navodeći, koristeći oznake i njihove atribute, kako bi trebao izgledati.

To može biti tekstni okvir s gumbom za slanje za upit koji ste unijeli, izbori s radio gumbima (gdje možete ostaviti pritisnut samo jedan od navedenih gumba), više tekstualnih okvira s gumbom za slanje () 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. Podaci uneseni u obrasce moraju se na neki način dodatno obraditi.

Primjerice, u slučaju povratne informacije, korisnik, nakon što popuni polje sa svojim imenom, unese svoj e-mail i tekst poruke, a zatim klikne na gumb za slanje, imat će se pravo nadati slanju podataka s obrasca na E-mail autora stranice. No, nažalost, to nije moguće implementirati koristeći samo jedan jezik za označavanje hiperteksta ().

Za ove svrhe trebat će vam poseban program rukovalac koji će nakon što korisnik klikne na gumb za slanje preuzeti sve podatke iz polja za povratne informacije i poslati ih vlasniku resursa e-poštom. Koji će program to učiniti, morate sami odrediti pomoću atributa Action.

Obično je program za obradu skripta napisana PHP jezik... Stoga, u atribut Akcija oznake Form, morat ćete registrirati put do datoteke ove skripte, koja se nalazi na poslužitelju vašeg hostinga. Navest ću kao primjer pretplatu na RSS feed moj blog putem e-maila:

"ime =" naslov ">

Malo neshvatljivo, vjerojatno, čini se na početku, ali mislim da će sve biti jasno kako priča bude odmicala.

Oznake za obrazac i unos za stvaranje gumba, potvrdnih okvira i radio gumba

Svaki obrazac mora biti priložen otvaranju i zatvaranju oznaka Oblik... Ovo je svojevrsni kontejner za njihovo stvaranje. Ova oznaka ima niz obaveznih i neobaveznih atributa:

1. Naziv - jedinstveni naziv koji se mora navesti ako će se u Html datoteci u kojoj nešto radite koristiti nekoliko web obrazaca
2. Akcija - obavezni atribut koji označava put do skripte, koja će od nje primati podatke za daljnju 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, zapravo, namijenjena uglavnom za varijable i kratke poruke, te, štoviše, prijenos podataka na otvoren način kroz adresnu traku preglednika. Za prosljeđivanje podataka obrasca skripti rukovatelja, ipak je bolje koristiti POST metoda dizajniran posebno za prijenos tekstualnih poruka na zatvoren način

Razmotrimo ostale oznake koje vam omogućuju stvaranje raznih web obrazaca. Najsvestraniji je Ulazni... Unutar njega mora biti propisan atribut Type koji određuje kakav će točno biti HTML obrazac kreiran ovom oznakom.

Sljedeći elementi mogu se izraditi pomoću unosa i tipa:

1. tekstualna polja u jednom retku (Type = "Text")
2. polja za unos lozinke (Type = "Password")
3. potvrdni okviri (Vrsta = "Potvrdni okvir")
4. radio gumbi (Vrsta = "Radio")
5. skrivena polja (Type = "Hidden")
6. obični gumbi (Vrsta = "Button")
7. gumbi za slanje podataka rukovaocu (Type = "Submit")
8. gumbi za dovođenje web obrasca u izvorno stanje (Type = "Reset")
9. polja za učitavanje datoteka na poslužitelj (Vrsta = "Datoteka)
10. gumbi sa slikom (Vrsta = "Slika")

Unos nema završnu oznaku. Kako će točno izgledati web obrazac kreiran njime u potpunosti ovisi o parametru navedenom u atributu Vrsta. Ako Vrsta nije navedena, tada će se prema zadanim postavkama kreirati tekstualno polje.

Primjeri obrazaca stvorenih na unosu s različitim vrijednostima za vrstu

Ostali atributi oznake Input i primjeri njihove upotrebe

Pogledajmo čemu služe ostali atributi:

1. Ime - ako se podaci trebaju poslati u skriptu programa za rukovanje, tada morate navesti parametar za atribut Name. Pod tim imenom će se podaci poslani iz obrasca pojaviti u programu za obradu informacija.
2. Veličina - služi za postavljanje veličine polja kreiranog web obrasca. Vrijednost je naznačena u broju znakova koji mogu stati u ovo polje. Ako veličina nije navedena, zadana širina bit će 24 znaka
3. Maxlength - prema zadanim postavkama, broj znakova koji se može unijeti u HTML obrazac nije ograničen, ali pomoću Maxlength možete postaviti ovo ograničenje. Nećete moći unijeti više znakova nego što će biti naznačeno u polju.
4. Vrijednost - pomoću nje možete postaviti što će točno biti zapisano u polju ili na gumbu za slanje podataka
5. Označeno je atribut zastavice koji se može umetnuti u Input za radio gumbe (radio) ili za potvrdne okvire (potvrdni okvir). U ovom slučaju, ovaj radio gumb ili potvrdni okvir bit će aktivan prilikom učitavanja stranice s web obrascem (već će imati kvačicu)

Sada idemo preko svega primjeri obrasca s unosom... Izgled tekstualnog polja sličan je izgledu polja za unos lozinke, pa ćemo razmotriti samo opciju kreiranja teksta, na primjer, za unos e-mail adrese:

Upiši svoj email:

(! LANG: Pogledajmo sada stvaranje web obrasca s radio gumbima (Radio):

Sviđa li vam se resurs KtoNanNovenkogo.ru?

Da?
Ne?

Imajte na umu da ovaj obrazac koristi ulaznu oznaku dvaput — jednom za stvaranje svakog od dva radio gumba. Štoviše, svaki od njih sadrži atribut Name s istom vrijednošću (rezultat), a vrijednost Value je različita (DA i NE).

To znači da će se prilikom obrade, ako se odabere neki od radio gumba, poslati varijabla čiji je naziv napisan u Name, ali će vrijednost ove varijable ovisiti o tome koji je radio gumb odabran.

Razmotrimo primjer izrade web obrasca s potvrdnim okvirima (Checkbox):

Koji motor(e) web-lokacije preferirate?

WordPress
Joomla
SMF

Potvrdni okviri se razlikuju od radio gumba po mogućnosti odabira nekoliko opcija odjednom. Ime se koristi za definiranje u datoteci rukovatelja u kojem se potvrdnom okviru nalaze potvrdni okviri, a Vrijednost postavlja vrijednost koja će biti poslana rukovaocu (ako Vrijednost nije navedena, tekst koji se nalazi pored ovog potvrdnog okvira bit će poslan rukovaocu) .

Select, Option, Textarea, Label, Fieldset, Legend - padajući popisi, tekstualna područja i drugi elementi web obrazaca

Za početak, želim vas malo podsjetiti što su, zapravo, web obrasci i zašto su potrebni na stranicama stranice. Primarno su dizajnirani da ponavljaju elemente koji su dostupni u bilo kojem operacijskom sustavu na jednostavan način: gumbi, polja za unos teksta, padajući popisi, potvrdni okviri, radio gumbi i slično.

Svi korisnici, bez ikakvog dodatnog objašnjenja, razumiju namjenu ovih elemenata, a ako vide Html gumb obrasca, razumiju da na njega trebaju kliknuti.

Štoviše, svi njegovi sastavni elementi (poput Select, Option, Textarea, Label, Fieldset, Legend) su već gotovi radni komadi (kontejneri), za umetanje kojih će biti dovoljno samo koristiti traženu oznaku s potrebnim atributima i parametrima.

Preglednici sami znaju kako prikazati određeni element web obrasca. Istina, opcije za prikazivanje istog elementa u različitim preglednicima mogu se malo razlikovati jedna od druge, ali, u pravilu, to nije bitno.

Da. ispada da su web obrasci u HTML-u pokušaj prijenosa ključa elementi koji se koriste u bilo kojem operacijskom sustavu, na stranice web stranice. Ali zašto bi mogli biti potrebni na stranicama web-mjesta?

Uglavnom, za istu svrhu za koju se slični elementi koriste u operativnim sustavima - prijenos podataka od korisnika. U slučaju obrazaca, podaci od korisnika se prenose na poslužitelj, gdje se obrađuju posebnim programom (nažalost, jezik za označavanje hiperteksta ne dopušta obradu podataka).

Iako se podaci mogu poslati 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 na E-mail, korisnik koji ispuni polja, nakon pritiska na tipku za slanje podataka, pokrenut će program za poštu koji se prema zadanim postavkama koristi na njegovom računalu.

U ovom slučaju, početna oznaka obrasca trebala bi izgledati otprilike ovako:

Odaberite i Opcija - padajuće oznake

Svi elementi web obrasca koji stvaraju polja s padajućim popisima formiraju se na isti način. Prvo, spremnik kombiniranog okvira postavlja se pomoću oznake za otvaranje i zatvaranje Html Select. I tada se unutar ovog spremnika kreiraju zasebni spremnici sa stavkama (elementima) ovog popisa. To se radi pomoću oznaka za otvaranje i zatvaranje opcija.

Ispada nešto ovako:

Ali ovo je pojednostavljena konstrukcija, budući da Select i Option imaju niz atributa koji definiraju svojstva i izgled kreiranog okvira padajućeg popisa.

1. Naziv - morate navesti jedinstveni naziv za ovaj element web obrasca kreiranog pomoću Select. Ovo ime će biti proslijeđeno poslužitelju u programu za obradu podataka kao ime za varijablu. Vrijednost atributa Value (postavljena u Opciji za svaku stavku) stavke padajućeg popisa koju korisnik odabere bit će proslijeđena kao vrijednost ove varijable.
2. Veličina - pomoću njega možete postaviti broj prikazanih stavki. Drugim riječima, uz pomoć veličine možete postaviti visinu popisa, mjerenu brojem prikazanih redaka. Ako izričito ne navedete vrijednost veličine u oznaci Select, tada će se koristiti zadana vrijednost visine padajućeg popisa, a bit će drugačija u odsutnosti ili prisutnosti atributa Višestruko u Select:
   1. Ako je višestruko prisutno u Select, tada će visina padajućeg popisa u web obrascu prema zadanim postavkama biti jednaka broju njegovih elemenata. Oni. bit će prikazane sve stavke u padajućem izborniku višestrukog izbora. Pogledajte primjer množine u nastavku. Ako je atribut Veličina u Select postavljen na manji od broja stavki, s desne strane će se pojaviti traka za pomicanje.
   2. Ako u Select ne postoji višestruko, tada će visina padajućeg popisa u web obrascu prema zadanim postavkama biti jednaka jednom retku. Oni. bit će vidljiv samo jedan redak, a ostali artikli bit će dostupni samo kada pritisnete tipku za dizalo (desno). Pogledajte primjer u nastavku
3. Višestruko – dodjeljivanje ovog atributa u oznaci Select omogućit će vam stvaranje padajućeg popisa s mogućnošću odabira više stavki u isto vrijeme. Više o ovom atributu pročitajte u nastavku.

Padajući obrasci mogu se podijeliti u dvije opcije. U prvoj opciji možete odabrati samo jedan element (redak) polja s padajućim popisom, u drugoj opciji, držeći Ctrl ili Shift, možete odabrati nekoliko dostupnih stavki istovremeno.

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 ovisi o prisutnosti ili odsutnosti atributa Višestruko u oznaci Select.

Više je navedeno u Select bez parametra, budući da napisano je jednostavno Višestruko i to je to. Ako postoji, stvorit će se web obrazac padajućeg popisa s mogućnošću višestrukog odabira (držanjem Ctrl ili Shift).

Varijanta polja s padajućim popisom u kojem će se nalaziti moguć višestruki izbor, izgledat će otprilike ovako:

S desne strane je primjer web obrasca za padajući popis za višestruki odabir, koji se temelji na kodu iznad. Kao što vidite, držeći Ctrl ili Shift, možete odabrati nekoliko točaka u isto vrijeme.

Ako u oznaci Select ne postoji višestruki atribut, tada se može odabrati samo jedna stavka ovog padajućeg popisa (reda).

Primjer u kojem se može odabrati samo jedna stavka može se vidjeti ovdje:

Oznaka Odaberite web-mjesto SelectED Legend

Atributi oznake opcije

U kreiranom padajućem popisu (pomoću Select i Option) možete dodati nešto poput separatora s naslovima grupa, koji će se od ostalih stavki izbornika razlikovati po stilu fonta.

Za kreiranje grupe od stavki s padajućeg popisa potrebno ih je priložiti u oznaku za otvaranje i zatvaranje obrasca Optgroup, a u početnu oznaku Optgroup upisati atribut Label, kao parametar za potrebno je unijeti naziv željene grupe.

Na primjer ovako:

Odabir oznake
Web stranica SelectED Legend

Textarea - stvaranje tekstualnog polja u obrascu

Postoji još jedan element web obrazaca koji nismo razmatrali - Textarea (polje s mogućnošću unosa teksta u više redaka). Izrađuje se pomoću uparene Html oznake Textarea. Štoviše, u njemu možete prenijeti tekst u novi redak i on će se prenijeti na poslužitelj uzimajući u obzir izvršene prijenose.

Dakle, za kreiranje tekstualnog polja s više redaka potrebno je registrirati otvaranje i zatvaranje Textarea, a između njih možete dodati tekst koji će biti vidljiv kada se stranica s web obrascem učita. Korisnik tada može izbrisati ovaj tekst i napisati svoj.

Što možete reći o sebi?

Sljedeći se atributi mogu koristiti s Textarea:

1. Naziv - postavljate naziv za ovaj element web obrasca. Bit će proslijeđen na poslužitelj u program za obradu podataka
2. Cols - možete ga koristiti za postavljanje širine stvorenog višerednog polja u znakovima.
3. Redovi - postavite visinu kreiranog višerednog polja (u redovima). Ako tekst koji je unio korisnik ima više redaka od visine tekstualnog polja s više redaka, s desne strane polja u web obrascu pojavit će se traka za pomicanje.
4. Samo za čitanje - zabranjuje korisnicima da mijenjaju ili dodaju vlastiti tekst u ovo polje (samo za čitanje).
5. Onemogućeno - korisnik, kao i 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 znači da je neaktivno.

Oznaka - čemu služi ova Html oznaka u obrascu?

Oznaka html Label omogućuje implementaciju jedne vrlo zanimljive značajke u obrasce koja je dostupna u operativnim sustavima. Tamo, ako se sjećate, da biste aktivirali bilo koji element, nije potrebno kliknuti na njega, možete kliknuti na naziv ovog elementa - i dalje će biti aktiviran.

U web obrascima to se ne događa prema zadanim postavkama – potrebno je kliknuti na sam element HTML obrasca da biste ga aktivirali. Na primjer, trebate kliknuti na potvrdni okvir kako biste u njega stavili kvačicu. Klikanje na tekst pored potvrdnog okvira neće imati učinka. Isprobajte sami:

Označiti
Izaberi
Odabran

Kao što vidite, klikanje na tekst za aktiviranje ovog elementa je beskorisno - morate ga sami kliknuti. Upravo je takvo stanje i namijenjeno je popravljanju oznake Label. Omogućuje vam da tekst pored elementa web obrasca učinite klikljivim, što je nedvojbeno poboljšat će upotrebljivost.

Ali kako povezati Html element obrasca i teksta? Da biste to učinili, atributu dodajte ID s jedinstvenim parametrom i okružite tekst oznakama oznake za otvaranje i zatvaranje. I to nije sve. U početnoj oznaci Label morate registrirati atribut For, čiji parametar mora biti potpuno isti kao ID atribut u Html oznaci elementa obrasca. Ispada nešto ovako:

Kao što vidite, sada se, zahvaljujući korištenju Label-a, elementi web obrasca mogu aktivirati ne samo klikom na njega, već i klikom na tekst koji se nalazi pored njega.

Fieldset i Legenda - razbijanje oblika na dijelove

Vjerojatno ste često vidjeli da su veliki obrasci u Html-u podijeljeni u grupe (Fieldset), koje su okružene okvirom, a svaka takva grupa ima svoj naslov (Legenda). To se radi sa samo dvije oznake: Fieldset i Legend. Oni su upareni, t.j. moraju imati otvaranje i zatvaranje bez greške.

Dakle, da biste stvorili grupu sastavnih dijelova, trebate sve te dijelove umotati u oznake otvaranja i zatvaranja Fieldseta. A da biste postavili naslov (Legendu) za ovu grupu, potrebno je odmah nakon otvaranja Fieldseta napisati strukturu iz početne i završne Legende, između kojih trebate umetnuti tekst naslova grupe.

Evo primjera stvaranja grupa pomoću Fieldseta i Legende:

Sretno ti! Vidimo se uskoro na stranicama blog stranice

možete pogledati više videozapisa ako odete na

");">

Možda ćete biti zainteresirani

Select, Option, Textarea, Label, Fieldset, Legend - Html oznake padajućeg izbornika i obrasca za tekstni okvir
Popisi u HTML kodu - oznake UL, OL, LI i DL
MailTo - što je to i kako napraviti link u Html za slanje e-pošte
Kako se postavljaju boje u Html i CSS kodu, odabir RGB nijansi u tablicama, Yandex i drugi programi

Vrhunski povezani članci

Kako znati je li vaše računalo hakirano

Kako kalibrirati i postaviti svoj monitor kod kuće

Kako kalibrirati svoj monitor na Windows ili Mac

Kategorije:

• Programi
• Sigurnost
• Windows 10
• Željezo
• Windows 8
• U kontaktu s
• Pogreške

© 2021 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.