Prijevod: Vlad Merzhevich
Svi znaju za web forme, zar ne? Umetnite oznaku
Preglednici koji ne podržavaju atribut placeholdera jednostavno ga ignoriraju. Bez štete ili kršenja.
Pitajte profesora Markupa
☞ P. Mogu li koristiti HTML oznake za atribut čuvara mjesta? Želim da ubacim sliku ili možda promenim boje.
O. Atribut čuvara mjesta može sadržavati samo tekst, bez HTML koda. Međutim, postoje posebne CSS ekstenzije koje vam omogućavaju da postavite stil teksta u nekim pretraživačima.
Polja autofokusa
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Web lokacije mogu koristiti JavaScript kako bi se automatski fokusirale na prvo polje obrasca. Na primjer, na početnoj stranici Google.com polje za unos ključnih reči za pretragu ima autofokus. Iako je ovo zgodno za većinu ljudi, može biti neugodno za napredne korisnike i osobe sa posebnim potrebama. Ako pritisnete razmak dok čekate da se stranica pomakne, neće biti pomicanja jer je fokus na polju za unos obrasca (u polje će se upisati razmak umjesto pomicanja). Ako premjestite fokus na drugo polje za unos dok se stranica učitava, skripta za autofokus web-mjesta može "od pomoći" pomjeriti fokus nazad na izvorno polje za unos, prekidajući vaše kucanje i uzrokujući da kucate na pogrešnom mjestu.
Budući da autofokus radi preko JavaScript-a, može biti teško nositi se s ovim rubnim slučajevima i malim prilikama za ljude koji ne žele da im web stranica ukrade fokus.
Kako bi riješio ove probleme, HTML5 uvodi atribut autofokusa na sve elemente obrasca. Atribut autofokusa radi upravo ono što zvuči: čim se stranica učita, pomjera fokus na navedeno polje. Ali pošto je ovo samo označavanje, a ne skripta, ponašanje će biti dosljedno na svim web lokacijama. Pored toga, proizvođači pretraživača (ili autori ekstenzija) mogu korisnicima ponuditi način da onemoguće autofokus.
Ovako možete postaviti polje obrasca za automatsko fokusiranje.
Preglednici koji ne podržavaju atribut autofokusa će ga zanemariti.
Šta se desilo? Recite da želite da autofokus radi svuda, a ne samo u otmjenim HTML5 pretraživačima? Možete ostaviti trenutnu skriptu sa autofokusom, samo napravite dvije male promjene:
- dodajte atribut autofokusa svom HTML kodu;
- provjerite podržava li pretraživač atribut autofokusa, a ako ne, pokrenite vlastitu skriptu.
Autofokus sa alternativom
Postavite fokus što je ranije moguće
Mnoge web stranice čekaju da se window.onload pokrene i postavi fokus. Ali događaj window.onload se neće pokrenuti dok se sve slike ne učitaju. Ako vaša stranica ima puno slika, takve naivne skripte će potencijalno promijeniti fokus nakon što korisnik započne interakciju s drugim dijelom vaše stranice. Zbog toga napredni korisnici mrze skripte za autofokus.
Na primjer, u prethodnom dijelu, skripta za autofokus je postavljena odmah iza polja obrasca na koje se odnosi. Ovo je optimalno rješenje, ali može uvrijediti vaša čula ako stavite blok JavaScript koda na sredinu stranice (ili što je uobičajenije, vaš sistem možda nije toliko fleksibilan). Ako ne možete umetnuti skriptu u sredinu stranice, morate postaviti fokus preko prilagođenog događaja kao što je $ (document) .ready () u jQueryju umjesto window.onload.
Autofokus putem jQueryja
Prilagođeni događaj jQuery pokreće se čim je DOM dostupan – to jest, čeka da se tekst stranice učita, ali ne čeka da se učitaju sve slike. Ovo nije najbolji pristup – ako je stranica neobično velika ili je mrežna veza spora, korisnik može i dalje komunicirati sa stranicom prije nego što se fokusirana skripta izvrši. Ipak, mnogo je bolje nego čekati da dođe do događaja window.onload.
Ako se slažete i spremni ste da ubacite skriptu sa jednim operatorom u kod stranice, ovo je kompromis koji je manje gadan od prve opcije i bolji od druge. Možete koristiti jQuery prilagođene događaje za postavljanje vlastitih događaja, recimo autofocus_ready. Zatim ovaj događaj možete pokrenuti ručno, čim je polje za autofokus dostupno. Hvala EM Shtenbergu što me je naučio ovoj tehnici.
Autofokus sa alternativnim prilagođenim događajem
Ovo rješenje je optimalno, kao i prvi pristup. Fokus će biti postavljen na polje obrasca čim je to tehnički moguće, dok se tekst stranice još uvijek učitava. Dio logike aplikacije (fokus u polju obrasca) premješten je iz tijela stranice u odjeljak
... Ovaj primjer je baziran na jQueryju, ali koncept prilagođenih događaja nije jedinstven za jQuery. Druge JavaScript biblioteke poput YUI i Dojo nude slične mogućnosti.Hajde da sumiramo.
- Važna je ispravna postavka fokusa.
- Ako je moguće, neka pretraživač koristi atribut autofokusa u polju na koje želite da se fokusirate.
- Ako koristite alternativni kod za starije pretraživače, definišite podršku za atribut autofokusa tako da se skripta izvodi samo na starijim pretraživačima.
- Postavite fokus što je ranije moguće. Zalijepite skriptu fokusa u kod odmah nakon polja obrasca. Ako vam to ne smeta, ugradite JavaScript biblioteku koja podržava prilagođene događaje i pozovite događaj u svom kodu odmah nakon polja obrasca. Ako to nije moguće, koristite događaj kao što je $ (document) .ready () iz jQueryja.
- Ni u kom slučaju nemojte čekati da window.onload postavi fokus.
Email adrese
Više od jedne decenije, obrasci su sadržavali samo nekoliko vrsta polja. Najčešći su sljedeći.
Svi ovi tipovi polja i dalje rade u HTML5. Ako "nadogradite na HTML5" (moguće promjenom! DOCTYPE), ne morate napraviti nijednu promjenu u svojim formularima. Ura za kompatibilnost unatrag!
Međutim, HTML5 definira 13 novih tipova polja i nema razloga da ih ne počnete koristiti.
Prva od ovih novih vrsta je adresa e-pošte. Izgleda otprilike ovako.
Hteo sam da napišem rečenicu koja je počela "u pretraživačima koji ne podržavaju tip =" email "...", ali je stala. Zašto? Jer nisam siguran da pretraživači ne podržavaju tip = "e-pošta". Svi pretraživači "podržavaju" tip = "e-pošta". Možda neće učiniti nešto posebno, ali pretraživači koji ne prepoznaju type = "email" će ga tretirati kao type = "text" i prikazati ga kao obično polje za tekst.
Naglasit ću koliko je to važno. Na internetu postoje milioni obrazaca koji traže da unesete adresu e-pošte i svi oni koriste ... Vidite okvir za tekst, unesite svoju email adresu u njega i to je to. I ovdje dolazi HTML5, koji definira tip = "e-pošta". Da li će pretraživači poludjeti? br. Svaki pretraživač na Zemlji tretira nepoznati atribut tipa kao tip = "tekst" - čak i IE6. Tako da možete "ažurirati" svoje obrasce koristeći type = "e-mail" upravo sada.
Šta se dešava ako, recimo, pretraživač podržava tip = "e-pošta"? Pa, to bi moglo značiti svašta. HTML5 specifikacija ne zahtijeva nikakvo specifično korisničko sučelje za nove tipove polja. Opera dopunjuje polje obrasca malom ikonicom. Drugi HTML5 pretraživači kao što su Safari i Chrome prikazuju kao tekstualno polje - isto što i type = "text" - tako da vaši korisnici neće primijetiti razliku (sve dok ne pogledaju izvorni kod).
A tu je i iPhone.
iPhone nema fizičku tastaturu. Sve "kucanje" se vrši klikom na tastaturu na ekranu koja se pojavljuje u odgovarajućem trenutku, na primjer, kada dođete do polja obrasca na web stranici. Apple je uradio nešto lukavo sa iPhone pretraživačem. Prepoznaje neka od novih HTML5 polja i dinamički mijenja tastaturu na ekranu kako bi optimizirao unos.
Na primjer, adresa e-pošte je tekst, zar ne? Naravno, ali ovo je posebna vrsta teksta. Na primjer, skoro sve adrese e-pošte sadrže simbol @ i barem jednu tačku (.), ali malo je vjerovatno da će sadržavati razmak. Dakle, kada koristite iPhone i idite na stavku , dobijate tastaturu na ekranu koja sadrži manje prostora nego inače, kao i namenske tastere za karaktere. i @.
Dozvolite mi da sumiram. Nema loše strane da odmah prevedete sva polja vaše adrese e-pošte u tip = "e-pošta". Gotovo niko to neće primijetiti, osim korisnika iPhonea, koji vjerovatno neće ni primijetiti. Ali oni koji to primjete tiho će se nasmiješiti i zahvaliti vam što ste im malo olakšali posao.
Web adrese
Web adresa - koju su grčevi standarda zvali URL-ovi, s izuzetkom nekoliko pedantnih koji su nazivali URI-je - je još jedna vrsta specijalizovanog teksta. Sintaksa web adrese ograničena je relevantnim Internet standardom. Ako vas neko zamoli da unesete web adresu u obrazac, očekuje nešto poput “http://www.google.com/”, a ne “125 Farwood Road”. Kose linije su uobičajene - čak i Google početna stranica ima tri. Razdoblji su također uobičajeni, ali razmaci nisu dozvoljeni. I svaka web adresa ima sufiks domene kao što je ".com" ili ".org".
I tako ... (bubanj, molim) ... ... Na iPhoneu to izgleda ovako.
iPhone je promijenio svoju virtuelnu tastaturu kao i za adresu e-pošte, ali ju je sada optimizovao za kucanje web adrese. Razmaknicu u potpunosti zamjenjuju tri virtuelna ključa: kosa crta, tačka i ".com" (možete držati pritisnutu tipku ".com" da odaberete drugi sufiks poput ".org" ili ".net").
Pregledači koji ne podržavaju HTML5 tretirat će type = "url" kao tip = "text", tako da nema loše strane korištenja ovog tipa za sva polja u koja trebate unijeti web adresu.
Brojevi kao brojači
Sljedeći korak: brojevi. Traženje broja je složenije od traženja e-pošte ili web adrese. Prije svega, brojevi su lukaviji nego što mislite. Brzo odaberite broj. -jedan? Ne, mislim na broj između 1 i 10,7 ½? Ne, ne, ni djelić, glupane. π? Sada ste upravo odabrali iracionalan broj.
Želim da istaknem da vas ne pitaju često “samo broj”. Vjerovatnije je da će tražiti broj u određenom rasponu. Možda želite samo određene vrste brojeva unutar tog raspona — možda cijele brojeve, ali ne razlomke ili decimale, ili nešto egzotičnije poput višekratnika broja 10. HTML5 pokriva sve.
Odaberite broj, gotovo bilo koji
min = "0"
max = "10"
korak = "2"
vrijednost = "6">
Pogledajmo jedan po jedan atribut.
- type = "broj" znači da je ovo numeričko polje.
- min = "0" označava minimalnu dozvoljenu vrijednost za ovo polje.
- max = "10" je maksimalna dozvoljena vrijednost.
- korak = "2" u kombinaciji sa minimalnom vrijednošću određuje važeće brojeve u rasponu: 0, 2, 4, i tako dalje, do maksimalne vrijednosti.
- vrijednost = "6" zadana vrijednost. Trebalo bi izgledati poznato, ovaj isti atribut se uvijek koristi za definiranje vrijednosti za polja obrasca. Ovo ovdje spominjem kao polaznu tačku koju HTML5 gradi na prethodnim verzijama HTML-a. Ne morate ponovo učiti da biste radili ono što ste već uradili.
Ovo je brojčani kod polja. Imajte na umu da su svi ovi atributi opcioni. Ako imate minimum, ali ne i maksimum, možete odrediti atribut min, ali ne i maksimum. Prema zadanim postavkama, vrijednost koraka je 1 i možete izostaviti atribut koraka dok vam ne zatreba drugačija vrijednost koraka. Ako nema zadane vrijednosti, onda atribut value može biti prazan niz ili čak potpuno izostavljen.
Ali HTML5 se tu ne zaustavlja. Za istu nisku, nisku cijenu slobode, dobijate ove zgodne JavaScript metode.
- input.stepUp (n) povećava vrijednost polja za n.
- input.stepDown (n) smanjuje vrijednost polja za n.
- input.valueAsNumber vraća trenutnu vrijednost kao broj s pomičnim zarezom (svojstvo input.value je uvijek niz).
Problemi s prikazom? Pa, ispravan interfejs za manipulisanje brojevima u pretraživačima je drugačije implementiran. Na iPhone uređajima, gdje je kucanje teško, pretraživač ponovo optimizuje virtuelnu tastaturu za unos brojeva.
Na desktop verziji Opera, polje type = "number" se pojavljuje kao brojač sa malim strelicama nagore i nadole koje možete kliknuti da biste promenili vrednosti.
Opera poštuje atribute min, max i step, tako da ćete uvijek postići prihvatljivu numeričku vrijednost. Ako povećate vrijednost na maksimum, strelica nagore na brojaču postaje siva.
Kao i sa svim drugim poljima za unos o kojima sam govorio u ovom poglavlju, pretraživači koji ne podržavaju tip = "broj" će ga tretirati kao tip = "tekst". Zadana vrijednost će se pojaviti u polju (pošto je pohranjena u atributu vrijednosti), ali će drugi atributi kao što su min i max biti zanemareni. Možete ih slobodno implementirati sami ili koristiti JavaScript okvir koji već implementira upravljanje šalterima. Prvo provjeri kako je ovdje.
if (! .inputtypes.number) (
// nema ugrađene podrške za polje tipa = broj
// može isprobati Dojo ili neki drugi JavaScript okvir
}
Brojevi klizača
Brojač nije jedini način predstavljanja unosa brojeva. Vjerovatno ste vidjeli i klizač koji izgleda ovako.
Sada možete imati i klizač u obliku. Kod izgleda čudno kao spin box.
min = "0"
max = "10"
korak = "2"
vrijednost = "6">
Svi dostupni atributi su isti kao za tip = "broj" - min, max, korak, vrijednost - i znače istu stvar. Jedina razlika je korisnički interfejs. Umjesto polja za unos, od pretraživača se očekuje da prikažu tip = "range" kao klizač. U vrijeme pisanja ovog teksta, najnovije verzije Safarija, Chromea i Opera su radile s ovim. Nažalost, iPhone se prikazuje kao jednostavno tekstualno polje, čak ni ne optimizuje svoju tastaturu na ekranu za unos brojeva. Svi ostali pretraživači samo zamišljaju polje kao tip = "tekst", tako da nema razloga da odmah počnete koristiti ovaj tip.
HTML 4 ne uključuje biranje datuma preko kalendara. JavaScript okviri vam omogućavaju da zaobiđete ovo (Dojo, jQuery UI, YUI, Closure Library), ali, naravno, svako od ovih rješenja zahtijeva "ugradni" okvir za bilo koji ugrađeni kalendar.
HTML5 konačno definira način da se omogući inline birač datuma bez ikakvih skripti. Zapravo ih ima šest: datum, mjesec, sedmica, vrijeme, datum + vrijeme i datum + vrijeme sa vremenskom zonom.
Za sada je podrška ... oskudna.
| Tip | Opera | Drugi pretraživači |
|---|---|---|
| type = "datum" | 9.0+ | - |
| type = "mjesec" | 9.0+ | - |
| type = "sedmica" | 9.0+ | - |
| type = "vrijeme" | 9.0+ | - |
| type = "datetime" | 9.0+ | - |
| type = "datetime-local" | 9.0+ | - |
Ovako se prikazuje Opera :
Ako vam treba vrijeme uz datum, Opera također podržava :
Ako vam treba mjesec plus godina (npr. datum isteka kreditne kartice), Opera može prikazati :
Manje uobičajen, ali pristupačan je izbor jedne sedmice u godini :
Na kraju, ali ne i najmanje važno, je tajming sa :
Birač datuma s alternativom
...
Vjerovatno će i drugi pretraživači na kraju podržavati ove tipove. Kao i tip = "e-pošta" i drugi tipovi, ova polja obrasca će se pojaviti kao običan tekst u pretraživačima koji ne prepoznaju tip = "datum" i njegove varijante. Ako želite možete jednostavno koristiti nego usrećiti korisnike Opere i čekati da drugi pretraživači sustignu. Realnije ga je koristiti ali provjerite da li pretraživač ima ugrađenu podršku za biranje datuma i uključite alternativno rješenje skripte po vašem izboru (Dojo, jQuery UI, YUI, Closure Library ili druge opcije).
Okvir za pretragu
Dakle, traži. Ne samo pretraživanja sa Google-a ili Yahooa (pa, i one također). Zamislite bilo koji okvir za pretragu, bilo koju stranicu, bilo koju web lokaciju. Amazon ima okvir za pretraživanje, Yandex ima okvir za pretraživanje, a većina blogova također ima. Kako se prave? kao i svaki drugi tekstualni okvir na mreži. Hajde da popravimo ovo.
U potrazi za sljedećom generacijom
U nekim pretraživačima nećete primijetiti nikakvu razliku u odnosu na uobičajeno tekstualno polje. Ali ako koristite Safari na Mac OS X-u, to će izgledati ovako.
Jeste li našli razliku? Polje za unos ima zaobljene uglove! Znam, znam, jedva možeš obuzdati svoja osećanja. Ali čekajte, to nije sve! Kada počnete da kucate u polje type = "search", Safari će umetnuti malo dugme "x" na desnoj strani prozora. Klikom na "x" brišete sadržaj polja. Google Chrome, koji ima istu tehnologiju ispod haube, ponaša se na isti način. Oba ova mala podešavanja izgledaju i ponašaju se slično kao izvorna pretraga u iTunes-u i drugim Mac OS X klijentskim aplikacijama.
Apple.com koristi da pretražite vašu web lokaciju kako biste pomogli vašoj web-lokaciji da prenese sablasni osjećaj. Ali ovdje nema ničeg specifičnog za Mac. To je samo kod, tako da svaki pretraživač na bilo kojoj platformi može izabrati način prikaza u skladu sa konvencijama platforme. Kao i sa svim drugim novim tipovima, pretraživači koji ne prepoznaju type = "search" će ga tretirati kao type = "text", tako da nema apsolutno nikakvog razloga da ne počnete koristiti type = "search" za sve svoje okvire za pretraživanje danas. . ..
Profesor Markup kaže
Safari se prema zadanim postavkama ne odnosi na većina stilova. Ako želite da Safari tretira polje za pretraživanje kao uobičajeno tekstualno polje (tako da možete primijeniti vlastite stilove), dodajte ovo pravilo u svoju tablicu stilova.
unos (
-webkit-appearance: textfield;
}
Hvala Johnu Laneu što me naučio ovom triku.
Izbor boja
HTML5 također definira polje koja vam omogućava da odaberete boju i vraća je u heksadecimalnom zapisu. Nijedan pretraživač ne podržava birač boja, što je šteta jer sam oduvijek volio Mac OS palete. Možda jednog dana.
Pribl. prevodilac. Opera 11 podržava ovu funkciju.
Validacija obrasca
U ovom poglavlju sam govorio o novim elementima obrasca i novim funkcijama kao što je autofokus, ali nisam spomenuo možda najuzbudljiviji dio HTML5 obrazaca: automatsku provjeru valjanosti unosa. Pogledajmo uobičajene probleme unosa adrese e-pošte u obrazac. Vjerovatno imate provjeru valjanosti na strani klijenta putem JavaScript-a, nakon čega slijedi validacija na strani servera putem PHP-a, Pythona ili drugog jezika na strani servera. HTML5 nikada ne može zamijeniti validaciju na strani servera, ali može jednog dana zamijeniti validaciju na strani klijenta.
Postoje dva velika problema sa JavaScript validacijom e-pošte:
- Neki od vaših posjetitelja (vjerovatno oko 10%) ne uključuju JavaScript.
- Primit ćete pogrešnu adresu.
Ozbiljno, pogrešno ste dobili adresu. Utvrđivanje da li je skup nasumičnih znakova važeća adresa e-pošte je neverovatno teško. Što više gledaš, postaje teže. Jesam li spomenuo da je ovo veoma, veoma teško? Zar ne bi bilo lakše objesiti ovu glavobolju na svoj pretraživač?
Opera provjerava tip = "e-pošta"
Evo snimka ekrana iz Opera 11, iako je funkcionalnost prisutna još od Opera 9. Kod uključuje postavljanje vrijednosti e-pošte za atribut tipa. Kada korisnik Opera pokuša da pošalje obrazac sa , pretraživač automatski provjerava adresu e-pošte čak i ako su skripte onemogućene.
HTML5 također nudi provjeru valjanosti polja za web adrese i brojevi sa ... Validacija za brojeve uzima u obzir vrijednosti atributa min i max, tako da vam pretraživači neće dozvoliti da pošaljete obrazac ako unesete preveliki broj.
Ne postoji kod koji bi omogućio provjeru valjanosti HTML5 obrasca, to se radi po defaultu. Da biste onemogućili provjeru valjanosti, koristite atribut novalidate.
Ne testiraj me
Pretraživači sporo omogućavaju podršku za provjeru valjanosti HTML5 obrasca. Firefox 4 će imati punu podršku. Nažalost, Safari i Chrome samo djelomično implementiraju: provjeravaju valjanost elemenata obrasca, ali ne prikazuju nikakve vidljive poruke kada polja obrasca ne provjere valjanost. Drugim riječima, ako unesete netačan (ili pogrešno napisan) datum u tip = "datum", Safari i Chrome neće poslati obrazac, ali vam neće reći zašto nisu. Oni će postaviti fokus na polje koje sadrži nevažeću vrijednost, ali neće prikazati poruku o grešci kao što je Opera ili Firefox 4.
Obavezna polja
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Provjera valjanosti obrasca u HTML5 nije ograničena na tip svakog polja. Također možete odrediti da su neka polja obavezna, takva polja moraju biti važeća prije nego što možete poslati obrazac.
Kod za obavezna polja je što jednostavniji.
Pretraživači mogu promijeniti originalni izgled traženog polja. Na primjer, ovako to izgleda u Mozilla Firefox 4.0.
Osim toga, ako pokušate poslati obrazac bez popunjavanja tražene vrijednosti, Firefox će prikazati informacijsku traku koja vam govori da je polje obavezno i da ne može biti prazno.
Dobar dan svima. Alexey Gulynin je u kontaktu. U prošlom članku naučili ste o novim strukturnim elementima u HTML5. U ovom članku želim vam reći šta nam je novi HTML5 donio u radu sa obrascima. Prije svega, ovo je provjera polja da li su u skladu sa određenim uslovima, bez upotrebe Javascript-a. Prethodno smo postavili sva polja za unos sa oznakom sa atributom type = "text". Zatim smo pomoću javascripta provjerili da li polje nije prazno i da ispunjava određene zahtjeve (na primjer, e-mail korisnika). Sa dolaskom HTML5, ceo ovaj proces je pojednostavljen. Počnimo s primjerom. Kreirajmo obrazac i dodajmo oznaku sa novim atributom type = "e-mail" (ovaj atribut će nas spriječiti da podnesemo obrazac dok se ne unese ispravna adresa e-pošte):
U ovom slučaju smo naveli tip polja za e-poštu, i zapravo, sve dok ne unesemo ispravnu email adresu, obrazac ne treba slati. Yandex - pretraživač prikazuje vrlo zanimljiv savjet kada unesemo neku glupost u ovo polje. Uneo sam "123" i pokušao da pošaljem. Izašla je poruka da je potreban simbol "@".
One. ako unesem "@", onda nam obrazac treba poslati. Šta se zapravo dogodilo. Stoga ne preporučujem korištenje ovog tipa polja, osim ako mu ne dodate još jedan atribut - obrazac.
Ovaj atribut potvrđuje da ono što smo unijeli odgovara onome što je u obrascu. Ovdje je potrebno poznavanje regularnih izraza. Učinimo da se naš obrazac pošalje tek nakon što unesemo NORMALNU adresu e-pošte, a ne samo red koji sadrži "@":
Email:
Ako ne znate šta su regularni izrazi, onda nema veze. U jednom od sljedećih članaka oni će biti razmotreni.
Sada naš teren radi normalno.
Traženi atribut je potreban da se ne može poslati prazan izraz (obavezno je obavezno).
Postojao je i atribut type sa vrijednošću tel, koji vam omogućava da unesete broj telefona:
Ovdje opet morate navesti obrazac da bi ovo polje radilo normalno, jer je format telefona različit za sve. Na primjer, ovo je format:
Telefon: Primjer važećeg broja je 937-12-12
Sve dok se broj telefona ne unese na ispravan način, formular neće ići nikuda. Također imajte na umu da se obrazac također može koristiti u jednostavnim tekstualnim poljima (type = "text").
Još jedan novi atribut tipa sa url vrijednošću koja vam omogućava da provjerite da li je url zaista unet. primjer:
URL:
... Radi ispravno u Yandex pretraživaču.Još jedan novi element je klizač, koji je specificiran atributom tipa sa vrijednošću raspona.
Ovaj element ima minimalnu i maksimalnu vrijednost, koja se onda može negdje prenijeti. Domaći zadatak odmah:
Napravite tekstualni okvir pored ovog klizača koji će prikazati vrijednost klizača kada se promijeni.
Ako imate bilo kakvih poteškoća, kod možete pogledati u nastavku:
Sljedeći novi element je broj. Odmah ću vam dati primjer i sve će biti jasno:
U ovom slučaju možemo odabrati elemente od 5 do 100 sa korakom od 5. Ovaj element je daleko od savršenog. Ne samo da izgleda drugačije u različitim pretraživačima, već možete ručno unijeti vrijednost u njega (neki pretraživači to rješavaju). Iako je moj pretraživač sasvim normalno obradio ovo polje (koristim Yandex pretraživač). Još ne preporučujem da ga koristite, osim ako ne obavite Javascript provjere. Još jedan domaći zadatak (ovaj put bez šifre):
Provjerite Javascript da li je unesena vrijednost u ovo polje trebala biti višestruka od 5 (koristite događaj promjene).
Do sada smo pokrili samo jedan obavezni atribut. Ali ima i drugih:
Atribut autofokusa se koristi tako da kada odete na datu stranicu, fokus je upravo u ovom polju.
Atribut placeholder se koristi za nagoveštaje. Čim počnete nešto da kucate, prompt će nestati. Na primjer:
Email:
U ovom članku ste naučili šta novi elementi za rad sa formama pojavili su se u HTML5... Ovo je bio prvi dio članka, u sljedećem članku ćemo pogledati ostale elemente za rad sa obrascima, pretplatite se da ne propustite.
Alexey Gulynin je bio u kontaktu, ostavite svoje komentare, vidimo se u sljedećim člancima.
Obrazac u HTML-u je dio dokumenta koji omogućava korisniku da unese informacije koje nas zanimaju, a koje potom mogu prihvatiti i obraditi na strani servera. Drugim riječima, obrasci se koriste za prikupljanje informacija koje unose korisnici.
Da biste odredili kojem elementu forme pripada trenutna oznaka, morate koristiti for atribut oznake
Pogledajmo primjer upotrebe:
Da
U ovom primjeru, mi:
- Unutra prvi oblici:
- Objavljeno dva radio dugmad ( ) za odabir jedne od ograničenog broja opcija. Imajte na umu ponovo da za radio dugmad unutar jednog obrasca mora biti navedeno isto ime, vrijednosti koje smo naveli su različite. Za prvi označeno, što označava da element treba da bude prethodno izabran pri učitavanju stranice (u ovom slučaju radio dugme sa vrednošću da). Osim toga, specificirali smo globalne atribute za radio dugmad, koji definiraju jedinstveni identifikator za element.
- Postavljene dvije stavke
- Unutra sekunda oblici:
- Objavljeno dva radio dugmad ( ) za odabir jedne od ograničenog broja opcija. Za sekunda Za radio dugmad smo naveli atribut checked, koji označava da element treba biti prethodno odabran pri učitavanju stranice (u ovom slučaju radio dugme sa vrijednošću ne). Osim toga, naveli smo jedinstvene vrijednosti unutar obrasca i ista imena za radio dugmad.
- Postavljene dvije stavke
U pretraživaču obje varijante (metoda) korištenja tekstualnih oznaka izgledaju identično:
Tooltip za polja za unos
Pogledajmo primjer upotrebe:
U ovom primjeru smo specificirali za element sa tekstom tipa (tekstno polje u jednom redu) i lozinkom (polje lozinke) tekstualni nagovještaj za korisnika (atribut rezerviranog mjesta) koji opisuje očekivanu vrijednost za unos.
Rezultat našeg primjera:
Pitanja i zadaci na temu
Završite vježbu prije nego pređete na sljedeću temu:
- Koristeći stečeno znanje, sastavite sljedeću narudžbu:
Nijansa: u poljima u kojima je predviđena selekcija trebalo bi da bude moguće izvršiti selekciju klikom na tekst, a ne samo na sam element.
Nakon što završite vježbu, provjerite kod stranice otvaranjem primjera u zasebnom prozoru kako biste bili sigurni da ste sve uradili ispravno.
Ovo je prvi od tri članka o HTML5 web obrascima. Prije nego što pređemo na stiliziranje na strani klijenta i JavaScript validaciju, proći ćemo kroz neke osnovne oznake. Preporučam da pročitate ovaj članak čak i ako ste već upoznati s obrascima - ovdje je pokriveno mnogo novih atributa i dobrota!
HTML obrasci mogu izgledati jednostavni, ali su neophodni za većinu web stranica i aplikacija. U HTML4, tipovi polja za unos bili su ograničeni na sljedeću listu:
- vrsta unosa = "tekst"
- tip unosa = "kvačica"
- tip unosa = "radio"
- tip unosa = "lozinka"
- tip unosa = "hidden" - za podatke nevidljive korisniku
- input type = "file" - za upload fajlova
- textarea - za unos velike količine teksta
- odaberite - za padajuće liste
- dugme - obično se koristi za slanje podataka obrasca, ali možete koristiti i tip unosa = "pošalji" i tip unosa = "slika"
Osim toga:
- Opcije CSS stila su ograničene
- napredne elemente, kao što su elementi za odabir datuma i boje, morate sami implementirati koristeći kod
- Validacija na strani klijenta zahtijeva JavaScript
Dodatne vrste polja
U HTML5 je uveden ogroman broj novih tipova polja. Oni pružaju pomoćnike za izvorni unos i validaciju bez JavaScripta.
| Tip | Opis |
| unesite email adresu | |
| tel | unošenje telefonskog broja - nema stroge sintakse, ali će prijelomi redova biti uklonjeni |
| url | URL unos |
| traži | okvir za pretragu sa prijelomima redova se automatski uklanja |
| broj | broj s pomičnim zarezom |
| domet | kontrola za unos približne vrijednosti, obično predstavljena pomoću klizača |
| datum | unos dana, mjeseca i godine |
| datetime | unos dana, mjeseca, godine, sata, minuta, sekunde i mikrosekunde u odnosu na trenutnu vremensku zonu |
| datetime-local | unos datuma i vremena bez vremenske zone |
| mjesec | unos mjeseca i godine bez vremenske zone |
| sedmica | unos broja sedmice bez vremenske zone |
| vrijeme | unos vremena bez vremenske zone |
| boja | izbor boja |
Atributi polja za unos
Pored gore navedenih, polja za unos mogu imati bilo koji od atributa specifičnih za obrazac. Neki od njih su boolean, što znači da ne zahtijevaju vrijednosti, na primjer:
naravno, možete ih dodati ako vam se sviđa sintaksa XHTML stila, na primjer
| Atribut | Opis |
| ime | naziv polja za unos |
| vrijednost | izvorno značenje |
| provjereno | označi polje za potvrdu ili radio dugme |
| maxlength | Maksimalna dužina unesenog tekstualnog niza. U HTML5 se također može primijeniti na polja za tekst |
| minlength | Minimalna dužina žice. Ova karakteristika je dokumentovana, ali u vreme pisanja, podrška pretraživača je slaba, a HTML validatori se kunu. Alternativni slučaj upotrebe je obrazac = ". (3,)", koji će provjeriti prisustvo najmanje tri znaka u ulaznom nizu |
| čuvar mjesta | nenametljiv nagovještaj unutar polja |
| autofokus | postavlja fokus na navedeni element (vidljiv) pri učitavanju stranice |
| potrebno | označava da u polje treba unijeti vrijednost (ne prazno polje) |
| uzorak | provjerava vrijednost u odnosu na regularni izraz |
| min | minimalna dozvoljena vrijednost (broj i datum) |
| max | maksimalna dozvoljena vrijednost (broj i datum) |
| korak | korak promjene vrijednosti. Na primjer, tip unosa = "broj" min = "10" max = "19" korak = "2" će dozvoliti samo vrijednosti 10, 12, 14, 16 ili 18 |
| autocomplete | ukazuje pregledniku nagoveštaj za autodovršavanje, na primjer, "trenutni račun", ili se može postaviti na "uključeno" ili "isključeno" da omogući/onemogući autodovršavanje |
| način unosa |
označava metod unosa. Najkorisnije karakteristike:
|
| veličina | veličina u broju znakova za polja teksta ili lozinke ili pikseli za e-poštu, tel, url ili polja za pretragu. Vjerovatno ga treba izbjegavati i stilizirati sa CSS-om |
| redova | Broj redova teksta (samo za tekstualno područje) |
| cols | broj redova znakova (samo za tekstualno područje) |
| lista | odnosi se na listu opcija |
| provjera pravopisa | postavite na true ili false da omogućite/onemogućite provjeru pravopisa za polje |
| formu | identifikator obrasca kojem ovo polje pripada. Općenito, polja bi trebala biti smještena unutar obrasca, ali ovaj atribut vam omogućava da postavite polje izvan obrasca, bilo gdje na stranici |
| formiranje | specificira URI koji nadjačava radnju obrasca prilikom slanja podataka (samo za dugmad/slike za slanje) |
| formmethod | postavlja GET ili POST, poništava atribut metode obrasca (samo za gumbe / slike za slanje) |
| formenctype | specificira tip sadržaja prilikom slanja (tekst / običan, višedijelni / podaci obrasca ili aplikacija / x-www-form-urlencoded, samo za gumbe za slanje i slike) |
| formtarget | specificira ciljni prozor/okvir koji će nadjačati ciljni atribut obrasca prilikom slanja (samo za dugmad/slike za slanje) |
| samo za čitanje | vrijednost polja se ne može promijeniti, iako će biti potvrđena i poslana |
| onemogućeno | onemogućuje polje za unos - nema provjere valjanosti i neće biti poslani podaci |
Imajte na umu da polja datuma moraju koristiti format GGGG-MM-DD za atribute vrijednosti, min i max.
Sljedeći primjer pokazuje polje koje zahtijeva obaveznu e-poštu koja se završava sa @mysite.com, na koju se fokus pomjera na učitavanje stranice.
Liste podataka
Lista podataka sadrži skup odgovarajućih vrijednosti za bilo koju vrstu polja, na primjer:
Ako je data lista podržana, pretraživač daje listu vrednosti za autodovršavanje čim počnete da unosite podatke u polje. Kompletna lista se obično prikazuje klikom na strelicu nadole (ako postoji). Za razliku od standardne padajuće liste, korisnik može unijeti proizvoljne vrijednosti u polje.
Moguće je odrediti vrijednosti i tekstualna objašnjenja za vrijednosti, na primjer:
ali imajte na umu da se implementacija razlikuje u različitim pretraživačima. Na primjer, Firefox vrši autodovršavanje teksta (Internet Explorer), dok Chrome - na vrijednostima (IE), a tekst označava smanjenim sivim fontom:
Liste podataka mogu biti popunjene JavaScriptom ako želite da ih primate preko AJAX-a.
Onemogućavanje validacije
Možete onemogućiti provjeru valjanosti cijelog obrasca postavljanjem atributa novalidate na element obrasca. Osim toga, možete postaviti atribut formnovalidate na dugme za slanje obrasca / sliku.
Zapamtite da će postavljanje polja na onemogućeno onemogućiti provjeru valjanosti tog polja.
Izlazna polja
Ranije smo raspravljali o poljima za unos, ali HTML5 takođe pruža polja za prikaz informacija.
- izlaz - rezultat izračunavanja radnji korisnika
- napredak - traka napretka (atributi vrijednosti i max postavljaju stanje)
- metar - skala koja može mijenjati svoju boju između zelene, žute i crvene ovisno o postavljenim vrijednostima vrijednosti atributa, min, max, niska, visoka i optimalna
Polja za podjelu i potpisivanje
Prema specifikaciji, svaki element forme se smatra paragrafom, a od ostalih je odvojen elementom
Zanimljivo. Koristim div za potrebe razdvajanja, iako sumnjam da je to mnogo važno. Oznaka p je kraća, osim ako ne trebate primijeniti dodatni stil za uklanjanje margina.
Što je još važnije, oznake se moraju koristiti, ili okružujući element obrasca, ili ih postavljajući jedan pored drugog i povezujući ih s atributom for s odgovarajućim poljima, na primjer:
Kontrole nisu standardizovane
Ne postoje smjernice dizajna za elemente obrasca koje dobavljači pretraživača moraju slijediti. Ovo je po dizajnu: standardni birač datuma usmjeren na miša može biti premali za mobilnog korisnika, tako da se proizvođač može pobrinuti za kreiranje alternativne verzije elementa obrasca za dodirna sučelja.
Podrška za pretraživač
Nisu svi tipovi polja i atributi podržani u svim pretraživačima. Uopšteno govoreći, svi moderni pretraživači od IE10 + uključuju podršku za osnovne tipove polja kao što su polja e-pošte i broj. Ali u vrijeme pisanja ovog teksta, polja datuma/vremena su podržana samo u Webkit i Blink pretraživačima.
Za nepodržane tipove polja, pretraživač će se vratiti na standardno polje za unos teksta i zanemariti nepodržane atribute i njihove vrijednosti.
Uvijek koristite ispravan tip!
Važno je koristiti ispravan tip polja za očekivani tip unosa. Ovo može biti očigledno, ali će biti trenutaka kada ćete morati da koristite jednostavan okvir za tekst.
Uzmite u obzir datume. Podrška pretraživača je neujednačena i to dovodi do problema sa implementacijom.
- Standardno polje datuma uvijek vraća datum u GGGG-MM-DD formatu, bez obzira koji se format datuma koristi u vašoj regiji.
- IE i Firefox će se vratiti na standardno tekstualno polje, a vaši korisnici treba da unesu datume u engleskom formatu MM-DD-GGGG ili u evropskom formatu DD-MM-GGGG
- JavaScript dodatak kao što je jQuery UI omogućava vam da definišete sopstveni format - da čak i GGGG-MM-DD - ali ne možete garantovati da će JavaScript biti omogućen na mašini korisnika.
Jednostavno rješenje bi bilo da napustite HTML5 polje datuma, vratite ga u tekstualno polje i implementirate vlastitu kontrolu datuma. Ne radi to. Nikada nećete kreirati normalan birač datuma koji radi na svim uređajima, svim rezolucijama ekrana, podržava tastaturu, miš i dodir i nastavlja da radi sa onemogućenim JavaScriptom. Osim toga, mobilni pretraživači imaju svoje alate za rukovanje kontrolama koje su izoštrene za kontrolu dodirom.
HTML5 tipovi polja za unos su budućnost. Koristite ih, i ako je potrebno, koristite zamjene za JavaScript u situacijama koje zahtijevaju dobru kompatibilnost među pretraživačima. Ali zapamtite šta je potrebno...
Validacija na strani servera
Provjera valjanosti na strani pretraživača nije zajamčena. Čak i ako ste natjerali sve da nadograde na najnoviju verziju Chromea, ni tada ne možete izbjeći:
- greške pretraživača ili JavaScript greške kojima nedostaju nevažeći podaci
- korisnici koji modificiraju DOM ili skripte koristeći alate pretraživača
- slanje podataka sa sistema koje ne kontrolišete
- presretanje podataka na putu od pretraživača do servera (obično putem HTTP-a)
Validacija na strani klijenta nikada nije bila i nikada neće biti zamjena za validaciju na strani servera. Provjera valjanosti korisničkih podataka na strani servera je neophodna. Provjera valjanosti na strani klijenta je dodatna korisna funkcija.
Na kraju, zapamtite da se datumi mogu primati u različitim formatima, bilo da se radi o GGGG-MM-DD, MM-DD-GGGG, DD-MM-GGGG i drugim. Provjerite ima li cifara u prva četiri znaka ili koristite ugrađene alate za raščlanjivanje i provjeru valjanosti za jezik / okvir koji koristite ako je potrebno.
U ovom članku pokrio sam mnoge aspekte HTML5 označavanja obrasca. U sljedećem članku ćemo pogledati CSS svojstva vezana za obrasce.
U vrijeme pisanja ovog teksta, podrška za sve nove forme, elemente unosa, atribute i tipove u velikoj mjeri ovisi o pretraživaču. Implementacija iste funkcije u različitim pretraživačima može značajno varirati. Imajući to u vidu, pejzaž podrške za HTML5 forme se brzo menja i nastavlja da se poboljšava. U vrijeme pisanja ovog teksta, najrelevantnije tabele su ove, koje pružaju detalje o podršci za više pretraživača za HTML5 obrasce.
Pregled inovacija
Nove stavke
HTML5 uvodi pet novih elemenata koji se odnose na unos podataka i forme.
| Element | Imenovanje | Bilješke (uredi) |
|---|---|---|
| napredak | Predstavlja napredak zadatka. | Element progresa može predstavljati status preuzimanja datoteke. |
| metar | Predstavlja skaliranu vrijednost u poznatom rasponu. | Element mjerača može se koristiti, na primjer, za mjerenje temperature ili težine. |
| datalist | Predstavlja skup elemenata opcija koji se mogu koristiti zajedno s novim atributom liste za kreiranje padajućih izbornika. | Kada korisnik nastavi da unese podatke u oblast koja je povezana sa listom podataka, pojavljuje se padajući meni sa vrednostima iz liste podataka. |
| keygen | Kontrola za generiranje parova ključeva. | Kada se obrazac preda, privatni ključ se unosi u lokalnu memoriju, a javni ključ se šalje serveru. |
| izlaz | Prikazuje rezultate proračuna. | Primjer korištenja izlaznog elementa je da se prikaže zbir vrijednosti dva ulazna elementa. |
Nove vrste ulaznih elemenata
HTML5 uvodi 13 novih ulaznih elemenata. U pretraživačima koji ih ne podržavaju, oni se pretvaraju u obične elemente za unos teksta.
| Tip ulaznog elementa | Imenovanje | Bilješke (uredi) |
|---|---|---|
| tel | Unos telefonskog broja. | Element tel ne prisiljava tekst da se unese u određenom formatu: možete koristiti element uzorka ili metodu setCustomValidity () za dodatnu provjeru valjanosti. |
| traži | Traži od korisnika da unese tekst koji će pronaći. | Razlika između pretraživanja i teksta uglavnom je u stilu. Za tip pretrage, polje za unos se može stilizovati u skladu sa poljima za pretragu ove platforme. |
| url | Unos jednog URL-a. | Url element se koristi za unos jednog apsolutnog URL-a koji predstavlja prilično širok raspon vrijednosti. |
| Unesite jednu adresu e-pošte ili listu adresa. | Ako je naveden višestruki atribut, može se unijeti više adresa e-pošte, odvojenih zarezima. | |
| datetime | Unos datuma i vremena u UTC vremenskoj zoni. | |
| datum | Unos datuma bez vremenske zone. | |
| mjesec | Unos datuma sa godinom i mjesecom, ali bez vremenske zone. | |
| sedmica | Unesite datum koji se sastoji od broja sedmice i godine, ali bez vremenske zone. | Primjer ovog formata je 2011-W05 za petu sedmicu 2011. |
| vrijeme | Unos vremena sa satima, minutama, sekundama i delićima sekunde, ali bez vremenske zone. | |
| datetime-local | Unos datuma i vremena bez vremenske zone. | |
| broj | Unos numeričkih podataka. | Važeće vrijednosti su brojevi s pomičnim zarezom. |
| domet | Unošenje numeričkih podataka (za razliku od vrste broja, sam broj nije bitan). | Implementacija ove kontrole opsega u većini pretraživača koji je podržavaju je klizač. |
| boja | Odabir boje pomoću kruga boja. | Vrijednost mora biti važeća obična boja malim slovima, kao što je #ffffff. |
Novi ulazni atributi
HTML5 također uvodi nekoliko novih atributa za unos i elemente forme.
| Atribut | Imenovanje | Bilješke (uredi) |
|---|---|---|
| autofokus | Fokusiranje unosa na element kada se stranica učita. | Atribut autofokusa može se primijeniti na elemente unosa, odabira, područja teksta i gumba. |
| čuvar mjesta | Savjet za korisnika o vrsti podataka koje treba unijeti. | Vrijednost čuvara mjesta se prikazuje u svijetlom tekstu sve dok se stavka ne odabere i korisnik ne unese podatke. Ovaj atribut se može specificirati na elementima unosa i textarea. |
| formu | Određuje jedan ili više oblika kojima pripada ulazni element. | Sa atributom forme, elementi za unos mogu se postaviti bilo gdje na stranici, ne samo na objekt obrasca. Osim toga, jedna stavka može biti povezana s više obrazaca. |
| potrebno | Boolean atribut koji znači da je element obavezan. | Traženi atribut je koristan za provođenje validacije zasnovane na pretraživaču bez korištenja posebnog JavaScript koda. |
| autocomplete | Omogućava vam da navedete da polje ne bi trebalo koristiti autodovršavanje i ne bi trebalo biti popunjeno vrijednostima koje je korisnik prethodno unio. | Atribut autocomplete je koristan za polja kao što su broj kreditne kartice ili jednokratna lozinka koja se ne bi trebala popunjavati automatski. Prema zadanim postavkama, atribut autocomplete je uključen. Da biste ga onemogućili, isključite ga. |
| uzorak | Provjera vrijednosti elementa na osnovu regularnog izraza. | Ako koristite atribut uzorka, morate također dati vrijednost naslova koja opisuje željeni obrazac unosa za korisnika. |
| dirname | Namijenjen je slanju informacija o smjeru kontrole zajedno sa formom. | Na primjer, ako je korisnik unio tekst s desna na lijevo, a element unosa sadrži atribut dirname, tada će parametar smjera biti poslan zajedno sa unesenom vrijednošću. |
| novalidate | Ako je ovaj atribut naveden na elementu obrasca, provjera valjanosti njegovog podnošenja je onemogućena. | |
| formiranje | Nadjačavanje atributa akcije na elementu obrasca. | |
| formenctype | Nadjačavanje atributa enctype na elementu obrasca. | Ovaj atribut je podržan na elementima ulaza i gumba. |
| formmethod | Nadjačavanje atributa metode na elementu obrasca. | Ovaj atribut je podržan na elementima ulaza i gumba. |
| formnovalidate | Poništavanje atributa novalidate na elementu obrasca. | Ovaj atribut je podržan na elementima ulaza i gumba. |
| formtarget | Nadjačavanje ciljnog atributa na elementu obrasca. | Ovaj atribut je podržan na elementima ulaza i gumba. |
FormData objekt
Jedno od poboljšanja tehnologije XMLHttpRequest je uvođenje FormData objekta. Sa FormData, možete kreirati i slati skupove parova ključ/vrijednost i datoteke koristeći XMLHttpRequest. Kada se koristi ova metoda, podaci se šalju u istom formatu kao i korištenje metode submit () obrasca s tipom kodiranja višedijelnih / obrasca-podataka.
FormData objekat vam omogućava da brzo kreirate HTML obrasce u JavaScript-u i pošaljete ih pomoću metode XMLHttpRequest.send (). Ispod je jednostavan primjer.
Var formData = new FormData (); formData.append ("part_num", "123ABC"); formData.append ("part_price", 7.95); formData.append ("part_image", somefile) var xhr = novi XMLHttpRequest (); xhr.open ("POST", "http: //some.url/"); xhr.send (formData);
Također možete koristiti FormData objekt za unos dodatnih podataka u postojeći obrazac prije nego što ga pošaljete.
Var formElement = document.getElementById ("someFormElement"); var formData = novi FormData (formElement); formData.append ("part_description", "Najbolji dio ikada!"); var xhr = novi XMLHttpRequest (); xhr.open ("POST", "http: //some.url/"); xhr.send (formData);
Validacija zasnovana na pretraživaču
Doduše, provjera valjanosti podataka obrasca je dosadna, ali neizbježna. Danas se JavaScript kod ili prilagođena biblioteka obično koristi na klijentu za provjeru valjanosti unesenih podataka i njihovog prisustva u obaveznim poljima obrasca prije slanja.
Novi ulazni atributi kao što su obavezan i obrazac, u kombinaciji sa CSS selektorima pseudoklasa, olakšavaju pisanje validacija i povratnih informacija korisnika. Postoje i druge napredne tehnike provjere valjanosti koje vam omogućavaju da koristite JavaScript za postavljanje prilagođenih pravila i poruka, te da odredite je li element nevažeći i zašto.
Obavezni atribut
Ako je naveden traženi atribut, polje mora sadržavati vrijednost kada se obrazac pošalje. Slijedi primjer potrebnog polja za unos adrese e-pošte koje provjerava da li je vrijednost unesena i da li je valjana adresa e-pošte kao što je opisano.
Atribut uzorka
Atribut uzorka specificira regularni izraz koji se koristi za provjeru valjanosti polja za unos. Ovaj primjer pokazuje potrebno polje za unos teksta za broj dijela. Pretpostavlja se da je broj tri velika slova i četiri cifre. Korištenje atributa obaveznog i uzorka osigurava da unesete vrijednost u polje koja odgovara tom formatu. Ako korisnik pređe mišem iznad polja, u atributu naslova prikazuje se poruka.
Blagom modifikacijom prethodnog primjera možete označiti polje za unos crvenom bojom ako je u njega unesen nevažeći broj dijela. Da biste to učinili, jednostavno dodajte CSS stil koji stavlja polje za unos u crveni okvir ako je vrijednost nevažeća.
: nevažeći (obrub: 2px pun # ff0000;)
Formnovalidate atribut
Atribut formnovalidate se može primijeniti na elemente unosa i gumba. Uključuje validaciju podnošenja obrasca. Ispod je primjer gdje je potrebna valjana vrijednost za slanje obrasca pomoću dugmeta Pošalji, ali nije potrebna važeća vrijednost za slanje pomoću dugmeta Sačuvaj.
API za provjeru ograničenja
Constraint Checker API pruža praktične alate za izvođenje prilagođenih provjera. Omogućava vam rješavanje zadataka kao što je postavljanje personalizirane greške, provjera valjanosti stavke i utvrđivanje razloga za njegovu neprihvatljivost. Ispod je primjer koji prikazuje personaliziranu poruku o grešci ako se vrijednosti u dva polja ne podudaraju.
Skupština
Ispod je primjer obrasca zahtjeva za rezervaciju koji koristi različite tipove ulaznih elemenata, provjeru valjanosti obrasca i CSS selektore i stilove.
