Kako podesiti pametne telefone i računare. Informativni portal

Primjeri HTML unosa. Tipovi INPUT elemenata

Od autora: trebali biste znati o atributu tipa u polju za unos. Ovaj atribut specificira tip unosa obrasca koji će korisnik vidjeti. Ako je atribut izostavljen ili se koristi nova vrijednost u starom pretraživaču, oznaka će i dalje raditi. Zadani tip će biti postavljen na type="text". Ovo je glavna stvar koja vam omogućava da danas koristite HTML5 obrasce, čak i ako podržavate starije pretraživače. Ako imate nove tipove poput e-pošte ili pretraživanja, stariji pretraživači će prikazati jednostavno tekstualno polje.

Naš obrazac za registraciju koristi 4 od 10 tipova koje svi poznajete: polje za potvrdu, tekst, lozinka i pošalji. Ispod je puna lista tipovi dostupni u HTML5 polja za unos:

HTML5 specifikacija govori o 9 dodatnih tipova, s kojima možete kreirati specifične elemente korisničkog sučelja, kao i izvršiti provjeru izvorne valjanosti podataka:

HTML5.1 i WHATWG HTML Living Standard uključuju još četiri tipa vezana za datume, od kojih su tri prilično dobro podržana u modernim pretraživačima:

datum i vrijeme (nije podržano ni u jednom pregledniku)

Pogledajmo svaki detaljnije novi tip, a također pogledajte kako se mogu koristiti.

Traži

Pretraga tipa unosa (type=”search”) je polje za pretragu, jednoredni unos za unos jednog ili više fraze za pretraživanje. Iz specifikacije:

"Razlika između vrste teksta i vrste pretraživanja je čisto stilska: na platformama gdje se polja za pretraživanje razlikuju od običnih tekstualnih polja, tip pretraživanja će prisiliti unos da odgovara stilovima platforme."

Mnogi pretraživači stilizuju polja za pretragu tako da liče na pretraživač operativnog sistema ili blokove za pretragu. Chrome, Safari, Opera i IE su dodali funkciju za brisanje teksta klikom na ikonu “x” koja se pojavljuje čim počnete kucati (pogledajte sliku 4.5). Chrome i Opera takođe brišu polja datuma/vremena, a IE11 dodaje ikonu "x" skoro svim tipovima, uključujući tekst.

Slika 4.5. polje tipa pretrage je stilizovano da liči na polja za pretragu operativnog sistema

Na uređajima Apple kampanje, polja za pretraživanje imaju zaobljeni uglovi po defaultu u Chromeu, Safariju i Operi, što je duplikat izgled polja za pretragu u operativni sistem. Na tabletima sa dinamičkim tastaturama, dugme Kreni se pojavljuje kao ikona za pretragu ili reč „pretraži“. Sve zavisi od uređaja. Ako dodate nestandardni atribut, ikona povećala će se pojaviti u Chromeu i Operi.

I dalje možete koristiti type=”text”, ali novi tip pretraživanja je vizualni trag korisnicima gdje trebaju kliknuti da bi pronašli web lokaciju. Dodatno, novi tip je vrlo sličan standardnim poljima za pretraživanje na koja su korisnici navikli. Ne postoji pretraga na sajtu The HTML5 Herald, ali može biti otprilike ovako:

Traži

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

U pretraživačima bez podrške, tip pretraživanja se pojavljuje kao obično tekstualno polje, tako da nema razloga da ga ne koristite tamo gdje je to prikladno.

Email adrese

Nije iznenađujuće što se tip e-pošte (type="email") koristi za postavljanje jedne ili više njih email adrese. Podržava višestruki Boolean atribut, koji vam omogućava da navedete više adresa razdvojenih zarezima (razmakom).

Promijenimo formu, upišimo type=”email” u polja e-pošte:

Moja e-mail adresa je

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

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

Ako promijenite vrstu iz teksta u e-poštu, neće biti vizualnih promjena. Unos i dalje izgleda kao obično tekstualno polje. Međutim, oni su različiti.

Promjene se mogu vidjeti na dodirnom uređaju. Kada polje e-pošte dobije fokus, većina dodirni uređaji(kao što je iPad ili Android telefon sa Chromiumom) će prikazati tastaturu optimizovanu za unos adresa Email. Tastatura će prikazati simbol @, tačku, razmak, ali bez zareza, kao što je prikazano na slici 4.6.

Slika 4.6. polje za vrstu e-pošte sa prilagođenom tastaturom na uređaju ispod iOS kontrola

IN Firefox pretraživači, Chrome, Opera i Internet Explorer 10 Ako pogrešno unesete svoju e-poštu, pojavljuje se poruka o grešci. Ovo se dešava kada pokušate da pošaljete obrazac sa tekstom koji nije prepoznat kao jedna ili više adresa. Standardna poruka o grešci prikazana je na slici 4.7.

Slika 4.7. poruka o grešci o pogrešno unesenoj email adresi Opera pretraživač(lijevo) i Firefox (desno)

Napomena: Prilagođene verifikacione poruke

Ne sviđa vam se standardna poruka o grešci pretraživača? Postavite svoje pomoću .setCustomValidity(errorMsg). SetCustomValidity uzima samo jedan parametar - poruku o grešci. Ako ste postavili vlastitu poruku za verifikaciju, onda nakon ispravnog unosa trebate obrisati red s porukom (vrijednost je lažna) kako bi obrazac bio poslan:

funkcija setErrorMessages(formControl) ( var validityState_object = formControl.validity; if (validityState_object.valueMissing) ( formControl.setCustomValidity("Molimo postavite starosnu dob (obavezno)"); ) else if (validityState_object.Validity). \"previše si mlad"); ) else if (validityState_object.rangeOverflow) (formControl.setCustomValidity("Prestar si"); ) else if (validityState_object.stepMismatch) (formControl.setCustomValidity("Brojanje pola rođendana?") ); ) else ( //ako je unos ispravan, mora biti lažan ili će doći do greške formControl.setCustomValidity(""); ) )

funkcija setErrorMessages(formControl) (

var validityState_object = formControl . validnost ;

if (validityState_object . valueMissing ) (

formControl. setCustomValidity ("Postavite dob (obavezno)" ) ;

) else if (validityState_object . rangeUnderflow ) (

formControl. setCustomValidity ("Premladi ste");

) else if (validityState_object. rangeOverflow) (

formControl. setCustomValidity ("Prestari ste" ) ;

) else if (validityState_object . stepMismatch ) (

Specifikacija Obavezni atribut Vrijednosti

U tabeli 1 navodi moguće vrijednosti atributa tipa i rezultirajućeg tipa polja obrasca.

Table 1. Unesite vrijednosti Tip Opis Pogled
dugme Dugme.
polje za potvrdu Zastave. Omogućava vam da odaberete više od jedne opcije od predloženih. Pivo Čaj Kafa
fajl Polje za unos naziva datoteke koja se šalje na server.
skriveno Skriveno polje. Ni na koji način se ne prikazuje na web stranici.
slika Polje sa slikom. Kada kliknete na sliku, podaci obrasca se šalju na server.
lozinka Uobičajeno tekstualno polje, ali se od njega razlikuje po tome što su svi znakovi prikazani kao zvjezdice. Dizajniran da spriječi bilo koga da njuška unesenu lozinku.
radio Prekidači. Koriste se kada trebate izabrati jednu opciju od više ponuđenih. Pivo Čaj Kafa
resetovati Dugme za vraćanje podataka obrasca na originalnu vrijednost.
submit Dugme za slanje podataka obrasca na server.
tekst Polje za tekst. Dizajniran za unos znakova pomoću tastature.

Nove vrijednosti su dodane u HTML5, prikazane u tabeli. 2.

Podrška pretraživača za ove vrijednosti prikazana je u tabeli. 3.

Table 3. Podrška pretraživača za HTML5 vrijednosti
Značenje Internet Explorer Chrome Opera Safari Firefox Android iOS
boja 21.0+ 11.01+
datum 5.0+ 10.62+ 5.0+ 5.0+
datetime 5.0+ 10.62+ 5.0+ 5.0+
datetime-local 5.0+ 10.62+ 5.0+ 5.0+
email 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
mjesec 5.0+ 10.62+ 5.0+ 5.0+
broj 10.0 6.0+ 10.62+ 5.0+ 2.3+ 4.0+
domet 10.0 5.0+ 10.62+ 5.0+ 23.0+ 5.0+
traži 10.0 5.0+ 11.01+ 5.0+ 4.0+ 4.0+
tel 10.0 5.0+ 11.01+ 5.0+ 4.0+ 3.1+
vrijeme 5.0+ 10.62+ 5.0+ 5.0+
url 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
sedmica 5.0+ 10.62+ 5.0+ 5.0+
Zadana vrijednost

HTML5 IE Cr Op Sa Fx

Ulazna oznaka, atribut tipa

Pivo
Tea
Kafa

HTML5 IE Cr Op Sa Fx

Ulazna oznaka, atribut tipa

Unesite broj od 1 do 10

Oznaka INPUT je jedan od raznovrsnih elemenata forme i omogućava vam da kreirate različite elemente interfejsa i omogućite interakciju korisnika. INPUT je uglavnom namijenjen za kreiranje tekstualnih polja, raznih dugmadi, radio dugmadi i potvrdnih polja. Iako INPUT element Nema potrebe da se FORM stavlja unutar kontejnera koji definiše obrazac, ali ako se korisnički unos mora poslati na server gde se obrađuje od strane CGI programa, onda je OBRAZAC potreban. Isto vrijedi iu slučaju obrade podataka korištenjem klijentske aplikacije, na primjer, skripte u JavaScriptu.

Glavni parametar INPUT tag, koji određuje tip elementa - tip . Omogućava vam da postavite sledeće elemente obrasci: tekstualno polje (tekst), polje lozinke (lozinka), radio dugme (kvačica), polje za potvrdu (radio dugme), skriveno polje (skriveno), dugme (dugme), dugme za slanje obrasca (pošalji), dugme za brisanje obrasca (resetovanje), polje za slanje fajla (fajla) i dugme sa slikom (slika). Svaki element ima svoju listu parametara koji određuju njegov izgled i karakteristike.

Sintaksa


Oznaka za zatvaranje
Nije potrebno.

Opcije
align - definira poravnanje slike.
alt - alternativni tekst za dugme sa slikom.
granica - debljina okvira oko slike.
označeno - prethodno aktivirano radio dugme ili polje za potvrdu.
onemogućeno - blokira pristup i modifikaciju elementa.
maksimalna dužina - maksimalni iznos dozvoljenih znakova u tekstu.
ime - naziv polja, koji je namijenjen tako da ga procesor obrasca može identificirati.
readonly - specificira da korisnik ne može promijeniti polje.
veličina - širina tekstualnog polja.
src - vrijednost elementa.

Primjer 1: Korištenje oznake INPUT



Tvoje ime:



Koji pretraživač najčešće koristite:



Internet Explorer

Netscape

Opera

FireFox

Mozilla


Komentar








Opis parametara INPUT tag parametar ALIGN

Opis
Određuje kako poravnati polje slike u odnosu na tekst ili druge elemente obrasca.

Sintaksa

Primjenjivo

Argumenti
Tabela 1 liste moguće značenje parametar poravnanja i rezultat njegove upotrebe.

Tablica 1. Korištenje vrijednosti parametara poravnanja align value Opis Primjer
absbottom Donja granica slike je poravnata sa najnižom ivicom trenutna linija.
absmiddle Središte slike je poravnato sa središnjom linijom teksta. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
donja ili osnovna linija Donja granica slike je poravnata s osnovnom linijom teksta. Ova vrijednost je postavljena po defaultu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
lijevo Slika se postavlja na lijevu ivicu nadređenog elementa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
srednji Sredina slike je poravnata sa osnovnom linijom trenutnog reda teksta. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
u pravu Slika je poravnata sa desnom ivicom nadređenog elementa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
texttop Gornja granica slike je poravnata s najvišom tekstualni element trenutna linija. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top Gornja granica slike je poravnata sa najvišim elementom trenutne linije. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Zadana vrijednost
dnu

Primjer 2: Poravnavanje polja sa slikom




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



Bilješka
Iako pretraživači podržavaju sve vrijednosti parametra align, argumenti absbottom, absmiddle, baseline i texttop nisu pokriveni HTML 4 specifikacijom.

ALT parametar

Opis
Parametar alt postavlja alternativni tekst za polje slike. Ovaj tekst vam omogućava da dobijete tekstualne informacije o crtežu kada je učitavanje slike onemogućeno u pretraživaču. Budući da se slike učitavaju nakon što pretraživač primi informacije o njima, zamjenski tekst slike pojavljuje se ranije. I dok se učitava, tekst će biti zamijenjen slikom. Pretraživači također prikazuju zamjenski tekst kao opis alata kada postavite pokazivač miša preko slike.

Sintaksa

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

Zadana vrijednost
br.

Primjer 3: Dodavanje alternativnog teksta




...



BORDER parametar

Opis
Pretraživači tretiraju slike dodane preko INPUT oznake slično slikama kreiranim pomoću IMG tag. Također možete dodati okvir oko slike, čija boja odgovara boji teksta.

Sintaksa

Argumenti
Bilo koja cjelina pozitivan broj u pikselima.

Zadana vrijednost
0

Primjer 4: Dodavanje okvira slici




...



Bilješka
Trenutno ovu opciju podržava samo Netscape pretraživač; drugi pretraživači je ignorišu i prikazuju sliku bez ivice.

CHECKED parametar

Opis
Ovaj parametar određuje da li je element obrasca, kao što je okvir za potvrdu ili radio dugme, prethodno označen. U slučaju korištenja prekidača (checkbox) može se označiti samo jedan element grupe, a za checkboxove (radiobuton) dozvoljeno je označiti najmanje sve elemente.

Sintaksa

Argumenti
br.

Zadana vrijednost

Primjer 5. Označavanje radio dugmadi




S kojim operativni sistemi da li se poznajete?

Windows 95/98

Windows 2000

Sistem X
Linux
X3-DOS


DISABLED parametar

Opis
Blokira pristup i izmjenu polja obrasca. U tom slučaju je prikazan sivo i korisnik ga ne može aktivirati. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, korištenjem miša ili na neki drugi način. Međutim, ovo stanje polja može se promijeniti pomoću skripti.

Sintaksa

Primjenjivo
Za sve elemente forme.

Argumenti
br.

Zadana vrijednost
Podrazumevano, ova opcija je onemogućena.









MAXLENGTH parametar

Opis
Instalira maksimalan broj znakove koje korisnik može unijeti u tekstualno polje. Kada se ovaj broj dostigne tokom kucanja, dalji unos postaje nemoguć.

Sintaksa

Argumenti
Bilo koji pozitivan cijeli broj u znakovima.

Zadana vrijednost
Unos karaktera nije ograničen.

Primjer 7: Ograničavanje broja znakova unesenih u polje









Parametar NAME

Opis
Definira jedinstveno ime za element obrasca. Obično se ovo ime koristi prilikom slanja podataka na server ili za pristup unesenim podacima polja putem skripti.

Sintaksa

Primjenjivo
Za sve elemente forme.

Argumenti
Ime je skup karaktera, uključujući brojeve i slova. JavaScript je osjetljiv na velika i mala slova, pa kada se pozivate na element po imenu, koristite isti oblik kao parametar imena.

Zadana vrijednost
br.

Primjer 8: Korištenje imena polja



funkcija dataField(f) (
alert("Uneli ste: " + f.comment.value);




Unesite tekst





Parametar SAMO ČITANJE

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

Sintaksa

Argumenti
br.

Zadana vrijednost
Podrazumevano je ova vrijednost onemogućena.

Primjer 9: Polje samo za čitanje





SIZE parametar

Opis
Širina tekstualnog polja, koja je određena brojem znakova u monospace fontu. Drugim riječima, širina je određena 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čki fajl, koji će biti prikazan na web stranici u polju za sliku. Najpopularniji fajlovi u GIF format i JPEG.

Sintaksa

Argumenti
Vrijednost se uzima kao puna ili relativni put u fajl.

Zadana vrijednost
br.

Primjer 11. Put do grafičke datoteke



...


TYPE parametar

Opis
Govori pretraživaču koji je tip elementa obrasca.

Sintaksa

Argumenti
Tabela 2 navodi moguće vrijednosti parametra tipa i rezultirajućeg tipa polja obrasca.



VALUE parametar

Opis
Definira vrijednost elementa obrasca koja će biti poslana serveru ili primljena pomoću klijentskih skripti. Par ime/vrijednost se šalje na server, gdje je ime specificirano parametrom name oznake INPUT, a vrijednost je specificirana parametrom vrijednosti.

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

  • za dugmad (input type=button | reset | submit) postavlja tekstualnu oznaku na njih;
  • za tekstualna polja (tip unosa=lozinka | tekst) specificira prethodno uneti niz. Korisnik može obrisati tekst i uneti svoje znakove, ali kada se koristi u obrascu, dugme Reset briše korisnički tekst i vraća ono što je uneto u parametar vrednosti;
  • za potvrdne okvire i radio dugmad (input type=checkbox | radio ) jedinstveno definira svaki element tako da klijent ili serverski program mogao jasno odrediti koju je stavku korisnik odabrao.

Sintaksa

Primjenjivo
Za sve elemente forme.

Argumenti
Bilo koji tekstualni niz.

Zadana vrijednost
br.

Primjer 13: Dodavanje vrijednosti polja



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

Oficiri

operativni sistem

Odlična prugasta muva

Nove vrste elemenata

Jedna od čudnih stvari u vezi sa HTML formama je upotreba jednog elementa sa nejasnim imenom za kreiranje raznih kontrola, od okvira za potvrdu preko tekstualnih polja do dugmadi. Specifičan izgled kontrole zavisi od atributa tipa elementa.

Ako pretraživač naiđe nepoznata vrsta element, web pretraživač ga tretira kao normalno tekstualno polje. To znači da se sljedeća tri elementa tretiraju potpuno isto od strane svih pretraživača:

HTML5 koristi prednosti ovog ponašanja. Naime, elementu je dodano nekoliko novih tipova, a ako ih bilo koji pretraživač ne podržava tretirat će ih kao normalne tekstualna polja. Na primjer, da unesete adresu e-pošte, možete kreirati novo polje tipa email:


Ako vidite stranicu sa ovim kodom u pretraživaču koji ne podržava tip elementa e-pošte (na primjer, Internet Explorer), ovo polje će se pojaviti kao obično tekstualno polje. Ali pretraživači koji podržavaju HTML5 forme mogu učiniti sljedeće malo pametnije:

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

    Sprečiti moguće greške. Na primjer, pretraživač možda neće prihvatiti slova prilikom unosa polja kao što je broj, ili 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. Pretraživači mogu učiniti više složene provjere nakon što korisnik klikne na dugme za slanje podataka.

HTML5 specifikacija ne pruža nikakva uputstva programerima pretraživača o prvoj tački. Pregledači mogu slobodno kontrolirati prikaz i uređivanje različite vrste podatke na bilo koji smislen način, i različitim pretraživačima može dodati razne male pogodnosti.

Ali važnije je sposobnost provjere i otklanjanja grešaka. U najmanju ruku, pretraživač koji podržava HTML5 forme trebao bi spriječiti podnošenje obrasca koji sadrži podatke koji krše pravila o tipu podataka. Stoga, ako pretraživač ne može spriječiti greške direktno tokom unosa (prema drugoj tački na listi iznad), mora ih provjeriti kada korisnik pokuša da pošalje obrazac (prema trećoj tački).

Nažalost, ne svi moderni pretraživači zadovoljiti ove zahtjeve. Neki prepoznaju nove tipove podataka i pružaju neke mogućnosti uređivanja, ali ne i validaciju. Mnogi pretraživači razumiju jedan tip podataka, ali ne i drugi. Mobilni pretraživači su posebno problematični u tom pogledu – oni pružaju neke pogodnosti za uređivanje, ali ne i mogućnost verifikacije.

Tabela ispod prikazuje nove tipove podataka i nivo pune podrške u glavnim pretraživačima. Potpuna podrška znači da ako je tip podataka prekršen, obrazac neće biti dostavljen.

Podrška za nove tipove podataka u glavnim pretraživačima
Tip podataka I.E. Firefox Chrome Safari Opera Safari iOS Android
email - 4 10 5 10.6 - -
url - 4 10 5 10.6 - -
traži(bez verifikacije)
tel(bez verifikacije)
broj - - 10 5 - - -
domet - - 6 5 11 - -
datum i vrijeme, datum, mjesec, sedmica, vrijeme - - 10 - 11 - -
boja - - - - 11 - -

Iako Safari mobilni pretraživači za iOS i Android ne podržavaju validaciju, obezbeđivanje specijalizovanih tastatura od strane ovih pretraživača predstavlja značajnu pogodnost, pa je vredno koristiti specijalizovane tipove podataka u aplikacijama za ove veb pretraživače.

Email adrese

Tip podaci e-pošte koristi se za polja namijenjena unosu email adresa. U principu, adresa e-pošte se sastoji od niza znakova (neki znakovi nisu dozvoljeni). Važeća adresa mora sadržavati simbol @ i tačku, s najmanje jednim znakom između njih i najmanje dva znaka nakon točke:

Tip e-pošte podržava višestruki atribut, koji vam omogućava da unesete više adresa u polje. Ali ovih nekoliko adresa i dalje izgleda kao jedan red teksta, samo odvojenih zarezima.

Ne zaboravite to prazne vrijednosti se provjeravaju. Da biste spriječili prazno polje adrese, potrebno je umetnuti traženi atribut u njegov element.

URL-ovi

Url tip se koristi za polja za unos URL-a. Pitanje šta čini valjani URL i dalje se žestoko raspravlja. Ali većina pretraživača koristi relativno slab algoritam za verifikaciju. Adresa mora sadržavati prefiks (koji može biti ili stvaran, poput http://, ili fiktivan, poput bonk//) i dozvoljava razmake i većinu specijalni znakovi, osim debelog crijeva.

Neki pretraživači takođe nude moguće predloge URL-a u padajućoj listi, koji se obično uzimaju iz istorije nedavno posećenih stranica pretraživača.

Polja za pretragu

Tip pretrage se koristi za polja za pretragu. Obično su namijenjeni za unos ključne riječi, koji se zatim koriste za obavljanje neke vrste pretraživanja. To može biti pretraživanje na cijelom Internetu (kao što je Google), pretraživanje na jednoj stranici ili posebna procedura pretraživanja koja ispituje katalog informacija. U svakom slučaju, polje za pretragu izgleda i ponaša se skoro isto kao i obično tekstualno polje.

U nekim pretraživačima, kao što je Safari, polje za pretragu izgleda malo drugačije i ima zaobljene uglove. Osim toga, kada korisnik počne unositi podatke u polje za pretragu u Safari pretraživač ili Chrome, sa desna strana polju, pojavljuje se mala ikonica X, klikom na koju možete obrisati polje.

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

Brojevi telefona

Tip podataka tel se koristi za označavanje polja za unos brojevi telefona, koji se može predstaviti u većini različitim formatima. U nekim slučajevima se koriste samo brojevi, u drugim razmaci, crtice, plus znaci i okrugle zagrade. Ovaj nedostatak jedinstvenog formata može biti razlog zašto HTML5 standard ne zahtijeva od pretraživača da izvrše provjeru valjanosti telefonskog broja. Istovremeno, nije jasno zašto polje poput tel ne odbija barem slova.

Trenutno, jedina prednost korištenja polja kao što je tel je pružanje specijaliziranih virtuelna tastatura za unos brojeva telefona mobilni pretraživači, koji sadrži brojeve, ali ne i slova.

Brojevi

HTML5 definira dva numerička tipa podataka. Tip broja je za regularne brojeve.

Ova vrsta podataka ima očigledan potencijal. Uobičajena 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 kao što je broj, pretraživač automatski ignoriše sve znakove osim brojeva. Slijedi primjer koda za kreiranje polja ove vrste:

Dob *

Naravno, postoji mnogo brojeva koji ne odgovaraju svakoj vrsti numeričkih podataka. Na primjer, gornja oznaka dozvoljava starost poput 43.000 ili -6 godina, što je donekle u suprotnosti sa stvarnošću. Ovaj problem je riješen korištenjem atributa min i max. Sljedeći kod daje primjer ograničavanja dobi na razuman raspon:


Tipično, brojčana polja prihvataju samo cijele brojeve, a razlomci kao što je 30,5 nisu dozvoljeni. (Zapravo, neki pretraživači vam ne dozvoljavaju čak ni da unesete decimalno mjesto.) Ali ovo ponašanje se također može promijeniti pomoću atributa step, koji specificira korak u kojem se broj mijenja (gore ili dolje). Na primjer, postavljanjem vrijednosti koraka na 0,1, možete unijeti vrijednosti poput 0,1, 0,2, 0,3, itd. Ali pokušajte poslati obrazac s vrijednošću 0,15 i dobit ćete poznatu poruku o grešci koja će se pojaviti. Zadana vrijednost koraka je 1.


Atribut koraka također utiče na rad dugmadi polja sa brojačem:

Klizači

Drugi HTML5 numerički tip je raspon. Kao i tip broja, ovaj tip može predstavljati cjelobrojne i razlomke. Također podržava min atributa i max za postavljanje raspona vrijednosti. Slijedi primjer koda za kreiranje polja ove vrste:

Dob *

Razlika je u načinu na koji polje raspona predstavlja svoje informacije. Umjesto brojača, kao kod polja s brojevima, pametni pretraživači prikazuju klizač:

Da biste postavili vrijednost tipa raspona, jednostavno povucite klizač na željenu poziciju između minimalnog i maksimalne vrijednosti. Ali pretraživači koji podržavaju ovu vrstu polja ne daju nikakve povratne informacije o postavljena vrijednost. Da biste dobili ove informacije, morate dodati JavaScript proceduru u svoju oznaku koja reaguje 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 vremenskih tipova podataka. Pretraživači koji podržavaju tipove datuma mogu pružiti zgodan padajući kalendar iz kojeg korisnik može odabrati željeni datum i/ili vrijeme. Ovo ne samo da eliminiše nesigurnost u vezi sa ispravnim formatom datuma, već i sprečava da slučajno (ili namerno) postavite datum koji ne postoji. Pametni pretraživači može učiniti još više, kao što je podrška za integraciju sa ličnim kalendarom.

Ispod je primjer korištenja datuma:

Datum rođenja *

Tabela ispod navodi šest novih HTML5 formata za datume i vremena, sa kratkim opisom:

Preglednici koji podržavaju tipove podataka za datume i vremena također podržavaju atribute min i max za njih, što vam omogućava da postavite minimalne i maksimalne datume sve dok koristite ispravan format datuma. Ovo je demonstrirano u gornjem primjeru.

Boja

Tip podataka o boji se koristi za polja boja. Tip podataka o boji je zanimljiva, ako se rijetko koristi, sekundarna karakteristika koja omogućava posjetitelju web stranice da odabere boju iz padajuće palete, slično paleti grafički editor:

Odaberite svoju omiljenu boju Boja

Nekoliko neobičnih atributa elementa

HTML5 standard prepoznaje još nekoliko atributa koji se koriste za kontrolu pretraživača prilikom popunjavanja obrazaca. Nisu svi ovi atributi podržani od strane svih pretraživača. Međutim, s njima je dobro eksperimentirati:

atribut provjere pravopisa

Neki pretraživači pokušavaju da popune praznine u korisnikovom znanju pravopisa provjeravanjem pravopisa unesenog teksta. Očigledni problem Problem sa ovom uslugom je u tome što se ne sastoji sav tekst od pravih reči, a slikanje vijugavih crvenih podvlačenja može brzo početi da ide na živce korisnika. Da biste spriječili preglednik da provjerava pravopis teksta u polju, postavite atribut provjere pravopisa na false, a atribut provjere na true.

Podrazumevano, različiti pretraživači se ponašaju različito kada je u pitanju provjera pravopisa, ali postavljanje atributa provjere pravopisa rezultira dosljednim ponašanjem.

atribut autocomplete

Neki pretraživači pokušavaju uštedjeti vrijeme korisnika predlažući, prilikom unosa informacija u polje, vrijednosti koje su prethodno unesene u ovo polje. Ovakvo ponašanje nije uvijek poželjno - kao što HTML5 specifikacija ističe, neke informacije mogu biti osjetljive (npr. kodovi za lansiranje nuklearnih projektila;) ili ostati relevantni samo kratko vrijeme (npr. jednokratna lozinka ulaz u bankarski sistem samoposluga). Za takva polja postavite vrijednost atributa autocomplete na isključeno kako biste spriječili preglednik da pita moguće opcije završetak teksta unesenog u polje. A za automatsko dovršavanje određenog polja, postavite njegov atribut autocomplete na uključeno.

Atributi autocorrect i autocapitalize

Ovi atributi se koriste za kontrolu sposobnosti automatska korekcija i upotreba velikih slova na nekim mobilnim pretraživačima, naime Safari verzije za iPad i iPhone

višestruki atribut

Web programeri koriste višestruki atribut sa elementom za kreiranje višestrukih lista izbora od pamtivijeka. Ali sada mogu koristiti ovaj atribut sa određene vrste element, uključujući tip datoteke (za učitavanje datoteka) i e-poštu. U pretraživaču koji podržava ovaj atribut, korisnik može odabrati nekoliko datoteka za otpremanje na server odjednom ili umetnuti nekoliko adresa e-pošte u jedno polje.

Pozdrav dragi čitaoci blog stranice. Danas želim da pričam o nečemu sličnom HTML forme. Bez obzira na motor vašeg sajta (cms), on će sigurno koristiti forme u ovom ili onom obliku, kreirane pomoću tagova Form i Input, kao i atributa i parametara Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Pa, ovome možete dodati i elemente za kreiranje padajućih lista i tekstualnih polja - Select, Option, Textarea, Label, Fieldset, Legend.

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

Isti niz za pretraživanje web lokacije () kreira se pomoću ovih oznaka, a pretraga će biti potrebna na vašem projektu. Stoga vam razumijevanje kako oni rade i funkcioniraju neće nimalo naškoditi. uspješan rad preko dizajna, pa čak i kada samopromocija i promocija neće biti suvišna.

Dakle, nakon što sam opravdao potrebu proučavanja ovih elemenata, mislim da ne bi trebalo više postavljati pitanja, tako da je vrijeme da prijeđemo direktno na proučavanje njihovih mogućih opcija.

Da, također bih vas podsjetio da smo već pregledali mnogo materijala na temu jezika za označavanje hiperteksta, na primjer, tri ) i .

U svojoj srži, obrasci se sastoje od elemenata za čije kreiranje se iz tagova obrasca ubacuju različite oznake unutar glavnog kontejnera - Checked, Value, Checkbox, Radio, Checkbox, Submit, itd. Samo trebamo postaviti njegov kod na bilo koji pogodan način. mjesto u predlošku stranice, naznačujući korištenjem oznaka i njihovih atributa kako bi trebao izgledati.

To može biti tekstualno polje sa dugmetom za slanje unesenog upita, izbori sa radio dugmadima (gde možete ostaviti pritisnuto samo jedno od ponuđenih dugmadi), višestruka tekstualna polja sa dugmetom za slanje() i još mnogo toga.

Na primjer, u slučaju „pretraživanja“, pomoću atributa Value možete odrediti šta će tačno biti napisano na dugmetu koje se nalazi pored polja za unos upita. Podaci uneseni u obrasce moraju se na neki način dalje obraditi.

Na primjer, u slučaju povratne informacije, korisnik, 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 će vam trebati poseban program rukovalac koji će, nakon što korisnik klikne na dugme za slanje, uzeti sve podatke iz polja za povratne informacije i poslati ih e-poštom vlasniku resursa. Morate navesti koji će program to učiniti sami koristeći atribut Action.

Obično je program za obradu skripta napisana PHP jezik. Stoga u Atribut akcije U oznaci Form, morat ćete navesti putanju do datoteke ove skripte koja se nalazi na vašem hosting serveru. Dozvolite mi da vam dam primjer pretplate na RSS feed moj blog putem e-maila:

Najbolji članci na ovu temu