Prijevod: Vlad Merzhevich
Svi znaju za web obrasce, zar ne? Umetnemo oznaku, nekoliko, možda, sve to upotpunimo gumbom i gotovi ste.
Ne znaš ni pola toga. HTML5 definira više od desetak novih vrsta polja koje možete koristiti u svojim obrascima. A kad kažem "upotrijebiti", mislim da se mogu upotrijebiti odmah - bez ikakvih trikova, hakiranja ili rješenja. Ne brinite previše, ne kažem da su sve ove uzbudljive nove značajke zapravo podržane u svakom pregledniku. Apsolutno ne, ne mislim na sve. U modernim preglednicima, da, vaši će obrasci pokazati sve za što su sposobni. Ali u starijim preglednicima vaši će obrasci i dalje raditi, iako ne u punom potencijalu. Odnosno, te značajke graciozno degradiraju u svakom pregledniku. Čak iu IE6.
Promptni tekst| tj. | Firefox | Safari | Krom | Opera | iPhone | Android |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Prvo HTML5 poboljšanje u vezi s obrascima je mogućnost postavljanja brzog teksta u polje za unos. Ovaj tekst se prikazuje u polju za unos ako je polje prazno i nema fokus. Čim kliknete na polje za unos (ili dođete do njega preko kartice), tekst savjeta nestaje.
Vjerojatno ste već vidjeli tekst upita. Na primjer, Mozilla Firefox uključuje sugestivni tekst u adresnoj traci koji kaže "Pretraži knjižne oznake i povijest".
Kada kliknete na adresnu traku, tekst savjeta nestaje.
Evo kako možete uključiti sugestivan tekst u svoje obrasce.
Preglednici koji ne podržavaju atribut rezerviranog mjesta jednostavno ga ignoriraju. Bez štete ili kršenja.
Pitajte profesora Markupa☞ P. Mogu li koristiti HTML oznake za atribut rezerviranog mjesta? Želim umetnuti sliku ili možda promijeniti boje.
O. Atribut rezerviranog mjesta može sadržavati samo tekst, bez HTML koda. Međutim, postoje posebna CSS proširenja koja vam omogućuju postavljanje stila teksta u nekim preglednicima.
Polja autofokusa| tj. | Firefox | Safari | Krom | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Web stranice mogu koristiti JavaScript za automatsko fokusiranje na prvo polje obrasca. Na primjer, na glavnoj stranici Google.com Polje za unos ključnih riječi za pretraživanje ima autofokus. Iako je to pogodno za većinu ljudi, može biti neugodno za napredne korisnike i osobe s posebnim potrebama. Ako pritisnete razmaknicu dok čekate da se stranica pomakne, neće biti pomicanja jer je fokus na polju za unos obrasca (umjesto pomicanja u polje će se unijeti razmak). Ako premjestite fokus na drugo polje za unos dok se stranica učitava, skripta za autofokus web mjesta može "od pomoći" pomaknuti fokus natrag na izvorno polje za unos, prekidajući vaše tipkanje i uzrokujući da tipkate na krivom mjestu.
Budući da autofokus radi putem JavaScripta, može doći do poteškoća s rukovanjem ovim ekstremnim slučajevima i malim opcijama za one ljude koji ne žele da im web stranica "ukrade" fokus.
Kako bi riješio te probleme, HTML5 uvodi atribut autofokusa za sve elemente obrasca. Atribut autofokusa radi točno ono što zvuči: čim se stranica učita, premješta fokus na navedeno polje. No budući da je ovo samo oznaka, a ne skripta, ponašanje će biti dosljedno na svim web-lokacijama. Osim toga, proizvođači preglednika (ili autori proširenja) mogu ponuditi korisnicima način da onemoguće autofokus.
Evo kako možete postaviti polje obrasca na autofokus.
Preglednici koji ne podržavaju atribut autofokusa zanemarit će ga.
Što se dogodilo? Recimo da želite da autofokus radi posvuda, ne samo u otmjenim HTML5 preglednicima? Možete ostaviti trenutnu skriptu s autofokusom, samo napravite dvije male promjene:
- dodajte atribut autofokusa u HTML kod;
- Provjerite podržava li preglednik atribut autofokusa, a ako ne, pokrenite vlastitu skriptu.
Autofokus s alternativom
if (!("autofocus" u dokumentu.createElement("input")) ) (
document.getElementById("q").focus();
}
Mnoge web stranice čekaju da se window.onload aktivira i postavi fokus. Ali događaj window.onload neće se pokrenuti dok se sve slike ne učitaju. Ako vaša stranica ima mnogo slika, takve naivne skripte potencijalno će promijeniti fokus nakon što korisnik započne interakciju s drugim dijelom vaše stranice. To je razlog zašto napredni korisnici mrze skripte za autofokus.
Na primjer, u prethodnom odjeljku, skripta za autofokus postavljena je odmah nakon polja obrasca na koje se odnosi. Ovo je optimalno rješenje, ali može uvrijediti vaš senzibilitet stavljanjem bloka JavaScript koda na sredinu stranice (ili što je običnije, vaš sustav možda neće biti toliko fleksibilan). Ako ne možete umetnuti skriptu u sredinu stranice, trebali biste postaviti fokus putem prilagođenog događaja kao što je $(document).ready() u jQuery umjesto window.onload.
Autofokus putem jQueryja
$(dokument).ready(funkcija() (
$("#q").fokus();
}
});
Prilagođeni događaj jQuery aktivira se čim DOM postane dostupan - to jest, čeka da se učita tekst stranice, ali ne čeka da se učitaju sve slike. Ovo nije optimalan pristup - ako je stranica neuobičajeno velika ili je mrežna veza spora, korisnik može i dalje biti u interakciji sa stranicom prije nego što se izvrši skripta fokusa. Ali to je još uvijek puno bolje nego čekati da se dogodi događaj window.onload.
Ako se slažete i voljni ste umetnuti skriptu s jednom naredbom u kôd svoje 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 možete ručno pokrenuti ovaj događaj čim polje autofokusa postane dostupno. Hvala E.M. Shtenbergu što me naučio ovu tehniku.
Autofokus s alternativnim prilagođenim događajem
$(dokument).bind("autofocus_ready", function() (
if (!("autofocus" u dokumentu.createElement("input")))) (
$("#q").fokus();
}
});
$(dokument).trigger("autofocus_ready");
Ovo rješenje je optimalno, kao i prvi pristup. Fokus će biti postavljen na polje obrasca čim to tehnički bude moguće dok se tekst stranice još učitava. Dio logike aplikacije (fokus u polju obrasca) premješten je iz tijela stranice u odjeljak. Ovaj se primjer temelji na jQueryju, ali koncept prilagođenih događaja nije jedinstven za jQuery. Druge JavaScript biblioteke poput YUI i Dojo nude slične mogućnosti.
Sažmimo.
- Važno je pravilno postaviti fokus.
- Ako je moguće, neka preglednik koristi atribut autofokusa na polju na kojem želite fokus.
- Ako koristite alternativni kod za starije preglednike, definirajte podršku za atribut autofokusa tako da se skripta izvodi samo u starijim preglednicima.
- Postavite fokus što je ranije moguće. Umetnite skriptu fokusa u kod odmah nakon polja obrasca. Ako vam to ne smeta, ugradite JavaScript biblioteku koja podržava prilagođene događaje i podignite događaj u kodu odmah nakon polja obrasca. Ako to nije moguće, upotrijebite događaj poput $(document).ready() iz jQueryja.
- Ni pod kojim okolnostima ne biste trebali čekati da window.onload dobije fokus.
Više od desetljeća obrasci su sadržavali samo nekoliko vrsta polja. Najčešći su sljedeći.
Sve ove vrste polja i dalje rade u HTML5. Ako "nadogradite na HTML5" (možda promjenom !DOCTYPE), nećete morati napraviti niti jednu promjenu na svojim obrascima. Bravo za kompatibilnost sa prethodnim verzijama!
Međutim, HTML5 definira 13 novih vrsta polja i nema razloga da ih ne počnete koristiti.
Prva od ovih novih vrsta adresa e-pošte. Izgleda otprilike ovako.
Htjela sam napisati rečenicu koja je počela "na preglednicima koji ne podržavaju type="email" ..." ali sam stala. Zašto? Jer nisam siguran podržavaju li preglednici type="email" . Svi preglednici "podržavaju" type="email" . Možda neće učiniti ništa posebno, ali preglednici koji ne prepoznaju type="email" tretirat će ga kao type="text" i prikazati ga kao normalno tekstualno polje.
Naglasit ću koliko je to važno. Postoje milijuni obrazaca na internetu koji od vas traže da unesete svoju adresu e-pošte, a svi oni koriste . Vidite tekstni okvir, unesite svoju e-mail adresu u njega i to je to. A onda dolazi HTML5, koji definira type="email" . Jesu li preglednici poludjeli? Ne. Svaki preglednik na Zemlji tretira atribut nepoznate vrste kao type="text" - čak i IE6. Dakle, možete "osvježiti" svoje obrasce koristeći type="email" upravo sada.
Što se događa ako kažemo da preglednik podržava type="email"? Pa, moglo bi značiti bilo što. HTML5 specifikacija ne zahtijeva nikakvo posebno korisničko sučelje za nove vrste polja. Opera dodaje malu ikonu u polje obrasca. Drugi HTML5 preglednici poput Safarija i Chromea prikazuju se kao tekstualno polje - isto kao 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 tipkovnicu. Sve se "tipka" vrši klikom na zaslonsku tipkovnicu koja se pojavljuje u odgovarajućem trenutku, na primjer, kada odete na polje obrasca na web stranici. Apple je napravio nešto pametno s iPhoneovim preglednikom. Prepoznaje neka nova HTML5 polja i dinamički mijenja zaslonsku tipkovnicu kako bi optimizirao unos.
Na primjer, adresa e-pošte je tekst, zar ne? Naravno, ali ovo je posebna vrsta teksta. Stoga gotovo sve adrese e-pošte sadrže simbol @ i barem jednu točku (.), no malo je vjerojatno da će sadržavati razmak. Dakle, kada koristite iPhone i odete na , dobit ćete zaslonsku tipkovnicu koja uključuje manju razmaknicu kao i namjenske tipke za simbole. I @.
Dopustite mi da to sažmem. Nema loše strane u trenutnom pretvaranju svih polja vaše e-pošte u type="email" . Gotovo nitko to neće primijetiti osim korisnika iPhonea, koji to vjerojatno neće ni primijetiti. Ali oni koji to primijete tiho će se nasmiješiti i zahvaliti što ste im barem malo olakšali posao.
Web adreseWeb adresa—koju su štreberi po standardima nazivali URL-ovima, osim nekolicine pedanata koji su nazivali URI-jima—druga je vrsta specijaliziranog teksta. Sintaksa web adrese ograničena je relevantnim internetskim standardom. Ako vas netko zatraži da unesete web adresu u obrazac, očekuje nešto poput "http://www.google.com/", a ne "125 Farwood Road". Kose crte su uobičajene — čak ih i Googleova početna stranica ima tri. Točke su također uobičajene, ali razmaci su zabranjeni. A svaka web adresa ima nastavak domene poput ".com" ili ".org".
I tako... (drum roll please)... . Na iPhoneu to izgleda ovako.
iPhone je redizajnirao svoju virtualnu tipkovnicu baš kao što je učinio za e-poštu, ali ju je sada optimizirao za upisivanje web adrese. Razmaknicu su u potpunosti zamijenile tri virtualne tipke: kosa crta, točka i ".com" (možete držati pritisnutu tipku ".com" da biste odabrali drugi sufiks poput ".org" ili ".net").
Preglednici koji ne podržavaju HTML5 tretirat će type="url" kao type="text" , tako da nema nedostataka u korištenju ove vrste za sva polja u koja trebate unijeti web adresu.
Brojevi kao brojačiSljedeći korak: brojevi. Zahtjev za brojem je složeniji od zahtjeva za e-poštom ili web adresom. Prije svega, brojevi su složeniji nego što mislite. Brzo odaberite broj. -1? Ne, mislio sam na broj između 1 i 10,7 ½? Ne, ne, ne budi razlomak, glupane. π? Sada ste upravo odabrali iracionalan broj.
Želio bih napomenuti da vas ne pitaju često "samo broj". Vjerojatnije 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 od 10. HTML5 pokriva sve ovo.
Odaberite broj, gotovo bilo koji
Pogledajmo jedan po jedan atribut.
- type="number" znači da je ovo numeričko polje.
- min="0" navodi minimalnu dopuštenu vrijednost za ovo polje.
- max="10" je najveća dopuštena vrijednost.
- step="2" u kombinaciji s minimalnom vrijednošću definira važeće brojeve u rasponu: 0, 2, 4 i tako dalje, do maksimalne vrijednosti.
- value="6" zadana vrijednost. Trebalo bi izgledati poznato, ovo je isti atribut koji se uvijek koristi za definiranje vrijednosti polja obrasca. Ovo ovdje spominjem kao početnu točku, da se HTML5 nadograđuje na prethodne verzije HTML-a. Ne morate ponovno učiti raditi ono što ste već učinili.
Ovo je kod za numeričko polje. Imajte na umu da su svi ovi atributi izborni. Ako imate minimum, ali ne i maksimum, možete navesti atribut min, ali ne i maksimum. Zadana vrijednost koraka je 1 i možete izostaviti atribut koraka dok ne bude potrebna druga vrijednost koraka. Ako ne postoji zadana vrijednost, tada atribut vrijednosti može biti prazan niz ili čak potpuno izostavljen.
Ali HTML5 tu ne staje. Za istu nisku, nisku cijenu slobode, dobivate ove praktične JavaScript tehnike.
- 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 uvijek je niz).
Problemi s prikazom? Pa, ispravno sučelje za upravljanje brojevima drugačije je implementirano u preglednicima. Na iPhoneu, gdje je tipkanje otežano, preglednik ponovno optimizira virtualnu tipkovnicu za unos brojeva.
U desktop verziji Opere polje type="number" pojavljuje se kao brojač s malim strelicama gore i dolje na koje možete kliknuti da biste promijenili vrijednosti.
Opera poštuje atribute min , max i step, tako da ćete uvijek postići prihvatljivu numeričku vrijednost. Ako povećate vrijednost do maksimuma, strelica prema gore u brojaču postaje siva.
Kao i sa svim ostalim poljima za unos o kojima sam govorio u ovom poglavlju, preglednici koji ne podržavaju type="number" tretirat će ga kao type="text" . Zadana vrijednost bit će prikazana u polju (jer je pohranjena u atributu vrijednosti), ali ostali atributi kao što su min i max bit će zanemareni. Možete ih sami implementirati ili koristiti JavaScript okvir koji već implementira upravljanje brojačem. Prvo provjeri ovdje.
if (! .inputtypes.number) (
// nema izvorne podrške za polje type=number
// možete isprobati Dojo ili neki drugi JavaScript okvir
}
Brojač nije jedini način predstavljanja unosa broja. Vjerojatno ste također vidjeli slider koji izgleda ovako.
Sada možete imati i klizač na obrascu. Kod izgleda neobično sličan polju brojača.
Svi dostupni atributi isti su kao za type="number" - min, max, step, value - i znače isto. Jedina razlika je korisničko sučelje. Umjesto polja za unos, od preglednika se očekuje da prikazuju type="range" kao klizač. U vrijeme pisanja, najnovije verzije Safarija, Chromea i Opere rade s ovim. Nažalost, iPhone se prikazuje kao jednostavno tekstualno polje; nije čak ni optimizirao svoju zaslonsku tipkovnicu za unos brojeva. Svi ostali preglednici jednostavno tretiraju polje kao type="text" , tako da nema razloga da odmah počnete koristiti ovaj tip.
HTML 4 ne uključuje odabir datuma putem kalendara. JavaScript okviri vam omogućuju da to zaobiđete (Dojo, jQuery UI, YUI, Closure Library), ali, naravno, svako od ovih rješenja zahtijeva "implementaciju" okvira za bilo koji ugrađeni kalendar.
HTML5 konačno definira način za omogućavanje izvornih birača datuma bez ikakvog skriptiranja. Zapravo ih je šest: datum, mjesec, tjedan, vrijeme, datum + vrijeme i datum + vrijeme s vremenskom zonom.
Do sada je podrška... oskudna.
| tip="datum" | 9.0+ | - |
| tip="mjesec" | 9.0+ | - |
| tip="tjedan" | 9.0+ | - |
| tip="vrijeme" | 9.0+ | - |
| tip="datumvrijeme" | 9.0+ | - |
| type="datetime-local" | 9.0+ | - |
Evo kako Opera prikazuje:
Ako trebate vrijeme uz datum, Opera također podržava:
Ako trebate mjesec plus godinu (na primjer, datum isteka kreditne kartice), Opera može prikazati:
Manje uobičajeno, ali dostupno, je odabir tjedna u godini putem:
Posljednje, ali ne manje važno, je vrijeme s:
Birač datuma s alternativom
...
var i = document.createElement("ulaz");
i.setAttribute("vrsta", "datum");
if (i.type == "text") (
// Nema izvorne podrške za odabir datuma :(
// Koristite Dojo/jQueryUI/YUI/Closure za stvaranje,
// zatim dinamički zamijeniti element
}
Vjerojatno će drugi preglednici s vremenom podržavati te vrste. Kao i type="email" i druge vrste, ova polja obrasca pojavit će se kao običan tekst u preglednicima koji ne prepoznaju type="date" i njegove varijante. Ako želite, možete jednostavno koristiti , usrećiti korisnike Opere i pričekati da ih drugi preglednici sustignu. Realističnije je koristiti ovo, ali provjerite ima li preglednik izvornu podršku za odabir datuma i uključite alternativno rješenje u obliku skripte po vašem izboru (Dojo, jQuery UI, YUI, Closure Library ili druge opcije).
Prozor za pretraživanjeDakle, traži. Ne samo pretraživanja s Googlea ili Yahooa (dobro, i njih). Razmislite o bilo kojem okviru za pretraživanje, na bilo kojoj stranici, na bilo kojoj web stranici. Amazon ima okvir za pretraživanje, Yandex ima okvir za pretraživanje, većina blogova također. Kako se izrađuju? , kao i svako drugo tekstno polje na webu. Popravimo ovo.
Potraga za novom generacijom
U nekim preglednicima nećete primijetiti nikakvu razliku u odnosu na obično tekstualno polje. Ali ako koristite Safari na Mac OS X, izgledat će ovako.
Jeste li pronašli razliku? Polje za unos ima zaobljene kutove! Znam, znam, teško možeš obuzdati svoje osjećaje. Ali čekaj, ima još! Kada počnete upisivati type="search" u polje, Safari će umetnuti mali "x" gumb na desnoj strani prozora. Klikom na "x" briše se sadržaj polja. Google Chrome, koji ima istu tehnologiju ispod haube, ponaša se na isti način. Oba ova mala trika izgledaju i ponašaju se slično izvornom pretraživanju u iTunesu i drugim Mac OS X klijentskim aplikacijama.
Apple.com koristi pretraživanje web-mjesta kako bi web-mjesto prenijelo osjećaj "ljubitelja ara". Ali ovdje nema ničeg specifičnog za Macove. To je samo kod, tako da svaki preglednik na svakoj platformi može odabrati način prikazivanja u skladu s konvencijama platforme. Kao i sa svim drugim novim vrstama, preglednici koji ne prepoznaju type="search" tretirat će ga 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žeSafari prema zadanim postavkama ne primjenjuje većinu stilova. Ako želite natjerati Safari da tretira polje za pretraživanje kao uobičajeno polje teksta (tako da možete primijeniti vlastite stilove), dodajte ovo pravilo svojoj tablici stilova.
ulazni(
-webkit-appearance:textfield;
}
Hvala Johnu Laneu što me naučio ovom triku.
Izbor bojaHTML5 također definira polje koje vam omogućuje odabir boje i vraća je u heksadecimalnom obliku. Nijedan preglednik ne podržava birače boja, što je šteta jer sam uvijek volio Mac OS palete. Možda jednog dana.
Bilješka prevoditelj Opera 11 podržava ovu značajku.
Provjera valjanosti obrascaU ovom poglavlju govorio sam o novim elementima obrazaca i novim značajkama poput autofokusa, ali nisam spomenuo možda najuzbudljiviji dio HTML5 obrazaca: automatsku provjeru valjanosti unosa. Pogledajmo uobičajene probleme s unosom adrese e-pošte u obrazac. Vjerojatno imate provjeru valjanosti na strani klijenta putem JavaScripta, nakon čega slijedi provjera valjanosti na strani poslužitelja putem PHP-a, Pythona ili drugog jezika na strani poslužitelja. HTML5 nikada neće zamijeniti provjeru valjanosti na strani poslužitelja, ali bi jednog dana mogao zamijeniti provjeru valjanosti na strani klijenta.
Postoje dva velika problema s provjerom adrese e-pošte u JavaScriptu:
Ozbiljno, pogriješit ćete adresu. Nevjerojatno je teško utvrditi da je skup nasumičnih znakova važeća adresa e-pošte. Što teže gledate, to postaje teže. Jesam li spomenuo da je ovo jako, jako teško? Nije li lakše objesiti ovu glavobolju na vaš preglednik?
Opera provjerava type="email"
Ovdje je snimak zaslona iz Opere 11, iako je funkcija prisutna od Opere 9. Kod uključuje postavljanje vrijednosti e-pošte za atribut tipa. Kada korisnik Opere pokuša poslati obrazac s , preglednik automatski provjerava adresu e-pošte, čak i ako su skripte onemogućene.
HTML5 također nudi provjeru valjanosti web adresa s poljem i brojeva s . Validacija broja uzima u obzir vrijednosti atributa min i max, tako da vam preglednici neće dopustiti da pošaljete obrazac ako unesete broj koji je prevelik.
Ne postoji kôd koji omogućuje provjeru valjanosti obrasca u HTML5, to se radi prema zadanim postavkama. Da biste onemogućili provjeru valjanosti, koristite atribut novalidate.
Nemoj me testirati
Preglednici sporo uključuju podršku za provjeru valjanosti obrasca u HTML5. Firefox 4 će imati punu podršku. Nažalost, Safari i Chrome implementirani su samo djelomično: provjeravaju elemente obrasca, ali ne prikazuju nikakve vidljive poruke kada polje obrasca ne prođe provjeru. Drugim riječima, ako unesete netočan (ili pogrešno napisan) datum u type="date" , 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 pogrešci kao Opera ili Firefox 4.
Obavezna polja| tj. | Firefox | Safari | Krom | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Provjera valjanosti obrasca u HTML5 nije ograničena na vrstu svakog polja. Također možete navesti da su neka polja obavezna, takva polja moraju imati vrijednost prije nego što možete poslati obrazac.
Kôd za obavezna polja je najjednostavniji.
Preglednici mogu promijeniti izvorni izgled obaveznog polja. Evo primjera kako to izgleda u Mozilla Firefoxu 4.0.
Osim toga, ako pokušate poslati obrazac bez ispunjavanja potrebne vrijednosti, Firefox će prikazati informacijsku traku koja govori da je polje obavezno i ne može biti prazno.
Dobar dan svima. Alexey Gulynin je u kontaktu. U prošlom ste članku naučili o novim strukturnim elementima u HTML5. U ovom članku želio bih vam reći što nam je novo HTML5 donio u radu s obrascima. Prije svega, ovo je provjera usklađenosti polja s određenim uvjetima, bez korištenja Javascripta. Prethodno smo specificirali sva polja za unos oznakom s atributom type="text". Zatim je javascript provjerio da polje nije prazno i da zadovoljava određene zahtjeve (na primjer, e-mail korisnika). S pojavom HTML5 cijeli je ovaj postupak postao lakši. Počnimo s primjerom. Kreirajmo obrazac i dodajmo oznaku s novim atributom type="email" (ovaj atribut će nas spriječiti da pošaljemo obrazac dok ne unesemo točnu adresu e-pošte):
Forme u HTML5
U ovom smo slučaju odredili vrstu polja kao e-pošta i, u biti, dok ne unesemo valjanu adresu e-pošte, obrazac se ne bi trebao poslati. Yandex preglednik prikazuje vrlo zanimljiv savjet kada unesemo neku besmislicu u ovo polje. Upisao sam "123" i pokušao poslati. Pojavljuje se poruka da je potreban simbol "@".
Oni. ako unesem "@", obrazac treba poslati. Što se upravo i dogodilo. Stoga ne preporučam korištenje ove vrste polja, osim ako mu ne dodate još jedan atribut - uzorak .
Ovaj atribut provjerava odgovara li ono što smo unijeli onome što je u uzorku. To zahtijeva poznavanje regularnih izraza. Neka se naš obrazac pošalje tek nakon što unesemo NORMALNU adresu e-pošte, a ne samo redak koji sadrži "@":
Email:
Ako ne znate što su regularni izrazi, u redu je. O njima će biti riječi u jednom od sljedećih članaka.
Sada naš teren radi normalno.
Potrebni atribut je potreban kako se ne bi mogao poslati prazan izraz (obavezno - obavezno ispuniti).
Postoji i atribut tipa s vrijednošću tel , koji vam omogućuje unos telefonskog broja:
Ovdje opet trebate navesti uzorak da ovo polje radi normalno, jer je svačiji telefonski format drugačiji. Na primjer, ovo je format:
Telefon: Primjer ispravnog broja 937-12-12
Dok se broj telefona ne unese na ispravan način, formular neće biti poslat nigdje. Također napominjem da se uzorak također može koristiti u jednostavnim tekstualnim poljima (type="text" ).
Još jedan novi atribut vrste s vrijednošću url, koji vam omogućuje da provjerite je li uneseni url valjan. Primjer:
URL:
. Radi ispravno u pregledniku Yandex.Još jedan novi element je klizač, koji je određen atributom tipa s rasponom vrijednosti.
Ovaj element ima minimalnu i maksimalnu vrijednost, koja se onda može negdje proslijediti. Domaća zadaća odmah:
Napravite tekstualno polje pored ovog klizača u kojem će se prikazati vrijednost klizača kada se promijeni.
Ako imate bilo kakvih poteškoća, možete vidjeti kod u nastavku:
Rad s klizačem u HTML5
|
var range = document.getElementById("myrange"); var text = document.getElementById("mytext"); range.addEventListener("change", function())( //pretplatite se na događaj promjene text.value = range.value; ));Sljedeći novi element je broj. Dat ću vam primjer i sve će vam biti jasno:
U ovom slučaju možemo odabrati elemente od 5 do 100 u koracima od 5. Ovaj element je daleko od savršenog. Ne samo da izgleda drugačije u različitim preglednicima, već možete ručno unijeti vrijednost u njega (neki preglednici to rješavaju). Iako je moj preglednik sasvim normalno obradio ovo polje (koristim preglednik Yandex). Još ne preporučujem da ga koristite, osim ako ne radite provjere u Javascriptu. Još jedan domaći zadatak (ovaj put bez šifre):
Provjerite u Javascriptu da vrijednost unesena u ovo polje mora biti višekratnik broja 5 (koristite događaj promjene).
Do sada smo ispitali samo jedan atribut, potreban . Ali postoje i drugi:
Atribut autofocus se koristi kako bi se osiguralo da kada odete na ovu stranicu fokus padne na ovo polje.
Atribut rezerviranog mjesta služi kao opis alata. Čim počnete nešto tipkati, upit će nestati. Na primjer:
Email:
U ovom ste članku naučili koji su se novi elementi za rad s obrascima pojavili u HTML5. Ovo je bio 1. dio članka, u sljedećem članku ćemo pogledati ostale elemente rada s obrascima, pretplatite se da ne propustite.
Alexey Gulynin je bio u kontaktu, ostavite svoje komentare, vidimo se u sljedećim člancima.
HTML obrazac je dio dokumenta koji korisniku omogućuje unos podataka od interesa, koji se naknadno mogu prihvatiti i obraditi na strani poslužitelja. Drugim riječima, obrasci se koriste za prikupljanje podataka koje unose korisnici.
Da biste odredili kojem elementu obrasca pripada trenutna oznaka, morate koristiti for atribut oznake. Vrijednost atributa for mora odgovarati vrijednosti globalnog atributa elementa obrasca na koji će se oznaka primijeniti. Atribut for se ne smije koristiti ako će element biti unutar elementa.
Pogledajmo primjer korištenja:
Primjer korištenja oznake Da NeNe baš
U ovom primjeru mi:
- Iznutra prvi oblici:
- Objavljeno dva radio gumbe ( ) za odabir iz ograničenog broja opcija. Ponovno imajte na umu da za radio gumbe unutar istog obrasca morate navesti isti naziv; naveli smo različite vrijednosti. Za prvi checked , što navodi da element treba biti unaprijed odabran kada se stranica učita (u ovom slučaju, radio gumb s vrijednošću yes ). Osim toga, odredili smo globalne atribute za radio gumbe, koji definiraju jedinstveni identifikator za element.
- Postavili smo dva elementa koji definiraju tekstualne oznake za naša tekstualna polja. Imajte na umu da smo koristili atribut for kako bismo odredili kojem elementu obrasca pripada trenutna oznaka. Vrijednost atributa for odgovara vrijednosti globalnog atributa radio gumba koji nam je potreban.
- Iznutra drugi oblici:
- Objavljeno dva radio gumbe ( ) za odabir iz ograničenog broja opcija. Za drugi Za radio gumbe naveli smo checked atribut, koji označava da bi element trebao biti unaprijed odabran kada se stranica učita (u ovom slučaju, radio gumb s vrijednošću no). Osim toga, odredili smo jedinstvene vrijednosti za radio gumbe unutar obrasca i ista imena.
- Postavili smo dva elementa, unutar njih smo postavili naše radio gumbe. Za razliku od prethodne metode, nema potrebe za navođenjem globalnih atributa (identifikator elementa) za radio gumbe i korištenje atributa for za tekstualne oznake za referencu na njih (napravite vezanje).
U pregledniku obje opcije (metode) za korištenje tekstualnih oznaka izgledaju identično:
Opis za polja za unosPogledajmo primjer korištenja:
Primjer korištenja atributa Login rezerviranog mjesta:Lozinka:
Unaprijediti
U ovom smo primjeru za element s tekstom tipa (tekstualno polje s jednim redom) i lozinkom tipa (polje zaporke) naveli tekstualni savjet za korisnika (atribut rezerviranog mjesta) koji opisuje očekivanu vrijednost za unos.
Rezultat našeg primjera:
Pitanja i zadaci na temuPrije nego prijeđete na sljedeću temu, dovršite zadatak za vježbanje:
- Koristeći stečeno znanje izradite sljedeću narudžbenicu:
Upozorenje: u poljima gdje se očekuje odabir, trebalo bi biti moguće odabrati klikom na tekst, a ne samo na sam element.
Nakon što završite vježbu, pregledajte kod stranice otvaranjem primjera u zasebnom prozoru kako biste bili sigurni da ste sve napravili ispravno.
Ovo je prvi od tri članka o HTML5 web obrascima. Prije nego što prijeđemo na stiliziranje i validaciju JavaScripta na strani klijenta, pogledat ćemo osnovne oznake. Preporučujem da pročitate ovaj članak čak i ako ste već upoznati s obrascima - ovdje su opisani mnogi novi atributi i dobrote!
HTML obrasci se mogu činiti jednostavnima, ali neophodni su za većinu web stranica i aplikacija. U HTML4, vrste polja za unos bile su ograničene na sljedeći popis:
- tip unosa="tekst"
- input type="checkbox"
- unos tip="radio"
- tip unosa="lozinka"
- input type="hidden" - za podatke koji su nevidljivi korisniku
- input type="file" - za učitavanje datoteka
- textarea - za unos velike količine teksta
- odaberite - za padajuće popise
- gumb - obično se koristi za slanje podataka obrasca, ali se također mogu koristiti input type="submit" i input type="image"
Osim:
- opcije oblikovanja s CSS-om su ograničene
- napredne elemente, kao što su elementi za odabir datuma i boje, potrebno je implementirati neovisno pomoću koda
- provjera valjanosti na strani klijenta zahtijeva JavaScript
HTML5 je uveo veliki broj novih vrsta polja. Oni pružaju izvorne pomoćnike za unos i provjeru valjanosti bez JavaScript koda.
| Tip | Opis |
| elektronička pošta | unos email adrese |
| tel | unos telefonskog broja - nema striktne sintakse, ali prijelomi redaka bit će uklonjeni |
| url | unesite URL |
| traži | polje za pretraživanje s prijelomima reda automatski se uklanja |
| broj | broj s pomičnim zarezom |
| domet | kontrola za unos približne vrijednosti, obično prikazana pomoću klizača |
| datum | unos dana, mjeseca i godine |
| Datum vrijeme | Unos dana, mjeseca, godine, sata, minute, sekunde i mikrosekunde u odnosu na trenutnu vremensku zonu |
| datum-vrijeme-lokalni | unos datuma i vremena bez vremenske zone |
| mjesec | unos mjeseca i godine bez vremenske zone |
| tjedan | unos broja tjedna bez vremenske zone |
| vrijeme | unos vremena bez vremenske zone |
| boja | izbor boja |
Osim gore navedenih, polja za unos mogu imati bilo koji atribut specifičan za obrazac. Neki su Booleovi tipovi, š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 | odabire potvrdni okvir ili radio gumb |
| maksimalna dužina | Maksimalna duljina unesenog tekstualnog niza. U HTML5 se također može primijeniti na polja textarea |
| minduljina | Minimalna duljina linije. Ova značajka je dokumentirana, ali u vrijeme pisanja, podrška preglednika je slaba, a HTML validatori se žale. Alternativni slučaj upotrebe je pattern=".(3,)", koji će provjeriti postoje li najmanje tri znaka u ulaznom nizu |
| rezerviranog mjesta | nenametljiv nagovještaj unutar polja |
| autofokus | postavlja fokus na navedeni element (vidljiv) kada se stranica učita |
| potreban | označava da se vrijednost mora unijeti u polje (ne prazno polje) |
| uzorak | provjerava vrijednost u odnosu na regularni izraz |
| min | minimalna dopuštena vrijednost (numerička i datumska) |
| max | najveća dopuštena vrijednost (numerička i datumska) |
| korak | korak promjene vrijednosti. Na primjer, input type="number" min="10" max="19" step="2" će dopustiti samo vrijednosti od 10, 12, 14, 16 ili 18 |
| automatsko dovršavanje | Označava pregledniku savjet za automatsko dovršavanje, na primjer "tekući račun", ili se može postaviti na "uključeno" ili "isključeno" za omogućavanje/onemogućavanje automatskog dovršavanja |
| način unosa |
označava metodu unosa. Najkorisnije značajke:
|
| veličina | veličina u broju znakova za polja kao što su tekst ili lozinka, ili broj piksela za polja kao što su e-pošta, tel, url ili pretraživanje. Vjerojatno vrijedi izbjegavati i koristiti CSS stiliziranje |
| redaka | Broj redaka teksta (samo tekstualno područje) |
| cols | broj redaka znakova (samo tekstualno područje) |
| popis | odnosi se na popis opcija |
| Provjera pravopisa | postavite na true ili false da omogućite/onemogućite provjeru dodjele za polje |
| oblik | ID forme kojoj ovo polje pripada. Općenito, polja bi trebala biti smještena unutar obrasca, ali ovaj atribut omogućuje postavljanje polja izvan obrasca, bilo gdje na stranici |
| formiranje | navodi URI koji nadjačava radnju obrasca prilikom slanja podataka (samo za gumbe za slanje/sliku) |
| metoda obrasca | navodi GET ili POST, nadjačava atribut metode obrasca (samo za gumbe za slanje/slike) |
| formenctype | navodi vrstu sadržaja prilikom slanja (text/plain, multipart/form-data ili application/x-www-form-urlencoded, samo za gumbe za slanje i slike) |
| formtarget | navodi ciljni prozor/okvir za nadjačavanje ciljnog atributa obrasca pri slanju (samo za gumbe/slike za slanje) |
| samo za čitanje | vrijednost polja ne može se promijeniti, iako će biti potvrđena i poslana |
| onemogućeno | onemogućuje polje za unos - neće biti dostavljena provjera valjanosti i nikakvi podaci |
Imajte na umu da datumska polja moraju koristiti format GGGG-MM-DD za atribute vrijednosti, min i maks.
Sljedeći primjer prikazuje polje koje zahtijeva e-poštu koja završava na @mysite.com, na koju se fokus pomiče kada se stranica učita.
Popisi podataka
Popis podataka sadrži skup prikladnih vrijednosti za bilo koju vrstu polja, na primjer:
Ako je datalist podržan, preglednik nudi popis vrijednosti za automatsko dovršavanje čim počnete upisivati podatke u polje. Cijeli popis obično se prikazuje klikom na strelicu prema dolje (ako postoji). Za razliku od standardnog padajućeg popisa, korisnik može unijeti proizvoljne vrijednosti u polje.
Moguće je odrediti vrijednosti i tekstualna objašnjenja za vrijednosti, na primjer:
Internet Explorer
ali vrijedi zapamtiti da se implementacija razlikuje u različitim preglednicima. Na primjer, Firefox automatski dovršava tekst (Internet Explorer), dok Chrome automatski dovršava vrijednosti (IE), a tekst je označen manjim sivim fontom:
Popisi podataka mogu se popuniti pomoću JavaScripta ako ih želite primati putem AJAX-a.
Onemogućivanje provjere valjanostiMožete onemogućiti provjeru valjanosti cijelog obrasca postavljanjem atributa novalidate elementu obrasca. Osim toga, možete postaviti atribut formnovalidate na gumb/sliku za slanje obrasca.
Upamtite da će postavljanje atributa disabled na polje onemogućiti provjeru valjanosti tog polja.
Izlazna poljaRanije smo govorili o ulaznim poljima, ali HTML5 također nudi izlazna polja.
- izlaz - rezultat izračuna korisničkih radnji
- napredak - traka napretka (atributi vrijednosti i max postavljaju stanje)
- mjerač - ljestvica koja može mijenjati svoju boju između zelene, žute i crvene ovisno o postavljenim vrijednostima atributa vrijednost, min, max, niska, visoka i optimalna
Prema specifikaciji, svaki element obrasca smatra se odlomkom, te je elementom odvojen od ostalih dijelova
Zanimljiv. Koristim divove za potrebe odvajanja, iako sumnjam da ima velike razlike. Oznaka p je kraća, osim što morate primijeniti dodatni stil kako biste uklonili margine.
Što je još važnije, oznake se moraju koristiti ili okružujući element obrasca ili postavljajući ih jednu pored druge i povezujući ih atributom for s odgovarajućim poljima, na primjer:
Ime
Prezime
Email adresa
Pretplatite se na naše obavijesti
Kontrole nisu standardiziraneNe postoje smjernice za dizajn elemenata obrasca koje proizvođači preglednika moraju slijediti. Ovo je namjerno: standardni element obrasca za odabir datuma orijentiran mišem može biti premalen za korisnika mobilnog uređaja, tako da se proizvođač može pobrinuti za stvaranje alternativne verzije elementa obrasca za dodirna sučelja.
Podrška za preglednikNisu sve vrste polja i atributi podržani u svim preglednicima. Općenito govoreći, svi moderni preglednici počevši od IE10+ uključuju podršku za osnovne vrste polja poput e-pošte ili numeričkih polja. Ali u vrijeme pisanja, polja datum/vrijeme podržana su samo u preglednicima temeljenim na Webkit i Blink motorima.
Za nepodržane vrste polja, preglednik će se vratiti na standardno polje za unos teksta i zanemarit će nepodržane atribute i njihove vrijednosti.
Uvijek koristite ispravnu vrstu!Važno je koristiti ispravnu vrstu polja za očekivanu vrstu ulaznih podataka. Možda je očito, ali bit će situacija u kojima ćete morati upotrijebiti jednostavno tekstualno polje.
Pogledajmo datume. Podrška preglednika je šarena, što dovodi do izazova u implementaciji.
Jednostavno rješenje bilo bi prestati koristiti polje datuma HTML5, vratiti se na tekstualno polje i implementirati vlastitu kontrolu datuma. Ne radi to. Nikada nećete stvoriti ispravan alat za odabir datuma koji radi na svim uređajima, svim razlučivostima zaslona, podržava tipkovnicu, miš i dodir i nastavlja raditi s onemogućenim JavaScriptom. Osim toga, mobilni preglednici imaju vlastite alate za obradu kontrola dizajniranih za kontrolu dodirom.
HTML5 vrste polja za unos budućnost su. Koristite ih, a ako je potrebno, koristite zamjenu za JavaScript u situacijama koje zahtijevaju dobru kompatibilnost s više preglednika. Ali zapamtite što je potrebno...
Provjera valjanosti na strani poslužiteljaProvjera valjanosti na strani preglednika nije zajamčena. Čak i ako ste sve prisilili na nadogradnju na najnoviju verziju Chromea, još uvijek ne možete izbjeći:
- pogreške preglednika ili JavaScript pogreške koje dopuštaju prolaz netočnim podacima
- korisnici mijenjaju DOM ili skripte pomoću alata preglednika
- slanje podataka iz sustava koje ne kontrolirate
- presretanje podataka na putu od preglednika do poslužitelja (obično putem HTTP-a)
Provjera valjanosti na strani klijenta nikada nije bila niti će ikada biti zamjena za provjeru valjanosti na strani poslužitelja. Validacija korisničkih podataka na strani poslužitelja od velike je važnosti. Provjera valjanosti na strani klijenta dodatna je korisna značajka.
Konačno, upamtite da se datumi mogu dobiti u različitim formatima, bilo da su GGGG-MM-DD, MM-DD-GGGG, DD-MM-GGGG i drugi. Provjerite ima li brojeva u prva četiri znaka ili upotrijebite ugrađene alate za raščlanjivanje i provjeru korištenog jezika/okvira ako je potrebno.
U ovom sam članku govorio o mnogim aspektima HTML5 označavanja obrazaca. U sljedećem članku ćemo pogledati CSS svojstva koja se odnose na forme.
Od pisanja ovog teksta, podrška za sve nove forme, elemente unosa, atribute i tipove vrlo je specifična za preglednik. Implementacija iste funkcije u različitim preglednicima može se značajno razlikovati. Uz to, krajolik podrške za HTML5 obrasce brzo se mijenja i nastavlja se poboljšavati. U vrijeme pisanja, najnovije tablice su ove, koje pružaju detaljne informacije o podršci različitih preglednika za HTML5 obrasce.
Pregled inovacija Novi elementiHTML5 uvodi pet novih elemenata koji se odnose na unos podataka i obrasce.
| napredak | Predstavlja napredak zadatka. | Element napretka može predstavljati status preuzimanja datoteke. |
| metar | Predstavlja skaliranu vrijednost unutar poznatog raspona. | Element mjerača može se koristiti za mjerenje temperature ili težine, na primjer. |
| popis podataka | Predstavlja skup elemenata opcija koji se mogu koristiti u kombinaciji s novim atributom popisa za stvaranje padajućih izbornika. | Kada korisnik ode unijeti podatke u područje povezano s popisom podataka, pojavljuje se padajući izbornik s vrijednostima s popisa popisa podataka. |
| keygen | Kontrola za stvaranje parova ključeva. | Kada pošaljete obrazac, privatni ključ se pohranjuje u lokalnu pohranu, a javni ključ se šalje na poslužitelj. |
| izlaz | Prikazuje rezultate izračuna. | Primjer korištenja izlaznog elementa bio bi prikaz zbroja vrijednosti dva ulazna elementa. |
HTML5 uvodi 13 novih ulaznih elemenata. U preglednicima koji ih ne podržavaju postaju uobičajeni elementi za unos teksta.
| tel | Unos telefonskog broja. | Element tel ne prisiljava tekst da se unese u određenom formatu: za to možete koristiti element uzorka ili metodu setCustomValidity(), koja vrši 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 dizajnu. Za vrstu pretraživanja, polje za unos može se oblikovati u skladu s poljima za pretraživanje određene platforme. |
| url | Unesite jedan URL. | Element url koristi se za unos jednog apsolutnog URL-a koji predstavlja prilično širok raspon vrijednosti. |
| elektronička pošta | Unesite jednu adresu e-pošte ili popis adresa. | Ako je naveden višestruki atribut, možete unijeti više adresa e-pošte odvojenih zarezima. |
| Datum vrijeme | Unesite datum i vrijeme u UTC vremenskoj zoni. | |
| datum | Unos datuma bez vremenske zone. | |
| mjesec | Unesite datum s godinom i mjesecom, ali bez vremenske zone. | |
| tjedan | Unesite datum koji se sastoji od broja tjedna i godine, ali bez vremenske zone. | Primjer ovog formata je 2011-W05 za peti tjedan 2011. |
| vrijeme | Unesite vrijeme sa satima, minutama, sekundama i djelićima sekundi, ali bez vremenske zone. | |
| datum-vrijeme-lokalni | Unos datuma i vremena bez vremenske zone. | |
| broj | Unos brojčanih podataka. | Važeće vrijednosti su brojevi s pomičnim zarezom. |
| domet | Unos numeričkih podataka (za razliku od vrste broja, sam broj nije bitan). | Implementacija ove kontrole raspona u većini preglednika koji je podržavaju je klizač. |
| boja | Odabir boje pomoću kotačića u boji. | Vrijednost mora biti važeća jednostavna boja malim slovima, kao što je #ffffff. |
HTML5 također uvodi nekoliko novih atributa za elemente unosa i obrazaca.
| autofokus | Fokusirajte unos na element kada se stranica učita. | Atribut autofokusa može se primijeniti na elemente unosa, odabira, tekstnog područja i gumba. |
| rezerviranog mjesta | Obavještava korisnika o vrsti podataka koje treba unijeti. | Vrijednost rezerviranog mjesta pojavljuje se svijetlim tekstom dok se element ne označi i korisnik ne unese podatke. Ovaj se atribut može specificirati na elementima input i textarea. |
| oblik | Određuje jedan ili više obrazaca kojima ulazni element pripada. | Pomoću atributa obrasca možete postaviti elemente unosa bilo gdje na stranici, a ne samo objekt obrasca. Osim toga, jedan element može biti povezan s više oblika. |
| potreban | Booleov atribut koji označava da je element potreban. | Potreban atribut je koristan kada se provodi provjera utemeljena na pregledniku bez upotrebe posebnog JavaScript koda. |
| automatsko dovršavanje | Omogućuje vam da odredite da polje ne bi trebalo koristiti automatsko dovršavanje i ne bi trebalo zamijeniti vrijednosti koje je korisnik prethodno unio. | Atribut automatskog dovršavanja koristan je za polja kao što su broj kreditne kartice ili jednokratna lozinka koja se ne bi trebala automatski dovršavati. Prema zadanim postavkama, atribut automatskog dovršavanja je uključen. Da biste ga onemogućili, isključite ga. |
| uzorak | Provjera vrijednosti elementa na temelju regularnog izraza. | Ako se koristi atribut uzorka, trebali biste također dati vrijednost naslova koja korisniku opisuje željeni uzorak unosa. |
| dirname | Dizajnirano za slanje informacija o smjeru kontrole zajedno s obrascem. | Na primjer, ako je korisnik unio tekst s desna na lijevo, a ulazni element sadrži atribut dirname, tada će parametar smjera biti poslan zajedno s unesenom vrijednošću. |
| novalidirati | Ako je ovaj atribut naveden na elementu obrasca, provjera predaje obrasca je onemogućena. | |
| formiranje | Nadjačavanje atributa akcije na elementu obrasca. | |
| formenctype | Nadjačavanje atributa enctype na elementu obrasca. | Ovaj je atribut podržan na elementima unosa i gumba. |
| metoda obrasca | Nadjačavanje atributa metode na elementu obrasca. | Ovaj je atribut podržan na elementima unosa i gumba. |
| formnovalidate | Nadjačavanje atributa novalidate na elementu obrasca. | Ovaj je atribut podržan na elementima unosa i gumba. |
| formtarget | Nadjačavanje ciljnog atributa na elementu obrasca. | Ovaj je atribut podržan na elementima unosa i gumba. |
Jedno od poboljšanja tehnologije XMLHttpRequest je uvođenje objekta FormData. Pomoću FormData možete stvarati i slati skupove parova ključ/vrijednost i datoteke koristeći XMLHttpRequest. Kada koristite ovu metodu, podaci se šalju u istom formatu kao i metoda submit() obrasca s tipom kodiranja multipart/form-data.
Objekt FormData omogućuje vam brzo stvaranje HTML obrazaca u JavaScriptu i njihovo slanje korištenjem metode XMLHttpRequest.send(). Ispod je jednostavan primjer.
Var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("dijelna_cijena", 7,95); formData.append("part_image", somefile) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);
Također možete koristiti objekt FormData za unos dodatnih podataka u postojeći obrazac prije nego što ga pošaljete.
Var formElement = document.getElementById("someFormElement"); var obrazacData = new FormData(formElement); formData.append("part_description", "Najbolji dio ikad!"); var xhr = novi XMLHttpZahtjev(); xhr.open("POST", "http://some.url/"); xhr.send(formData);
Provjera temeljena na preglednikuDoduše, provjera podataka obrazaca prilično je dosadan zadatak, ali ga se ne može izbjeći. Danas se obično koristi JavaScript kod ili posebna biblioteka na strani klijenta kako bi se provjerila valjanost unesenih podataka i njihova prisutnost u potrebnim poljima obrasca prije slanja.
Novi atributi unosa kao što su obavezni i uzorak, u kombinaciji s CSS selektorima pseudo-klasa, olakšavaju pisanje čekova i davanje povratnih informacija korisnicima. Postoje i druge napredne metode provjere valjanosti koje vam omogućuju korištenje JavaScript koda za određivanje prilagođenih pravila i poruka, kao i utvrđivanje je li element nevažeći i zašto je nevažeći.
potreban atributAko je traženi atribut naveden, polje mora sadržavati vrijednost kada se obrazac pošalje. Ispod je primjer obaveznog polja za unos adrese e-pošte koje provjerava je li unesena vrijednost važeća adresa e-pošte, kao što je opisano.
atribut uzorka
Atribut uzorka navodi regularni izraz koji se koristi za provjeru valjanosti polja za unos. Ovaj primjer pokazuje obavezno polje za unos teksta za broj dijela. Pretpostavlja se da se takav broj sastoji od tri velika slova i četiri broja. Korištenje obaveznih atributa i atributa uzorka omogućuje vam da osigurate da vrijednost unesena u polje odgovara ovom formatu. Ako korisnik lebdi iznad polja, u atributu naslova prikazuje se poruka.
Malo izmijenivši prethodni primjer, polje za unos možete označiti crvenom bojom ako je u njega unesen nevažeći broj dijela. Sve što trebate učiniti je dodati CSS stil koji stavlja polje za unos u crveni okvir ako je vrijednost nevažeća.
:nevažeće ( obrub: 2px solid #ff0000; )
formnovalidate atributAtribut formnovalidate može se primijeniti na elemente unosa i gumba. Uključuje provjeru predaje obrasca. Dolje je primjer gdje slanje obrasca pomoću gumba Pošalji zahtijeva valjanu vrijednost, ali slanje pomoću gumba Spremi je ne zahtijeva.
API za provjeru ograničenja
API za provjeru ograničenja pruža praktične alate za izvođenje specifičnih provjera. Omogućuje vam rješavanje problema kao što je postavljanje personalizirane pogreške, provjera valjanosti elementa i određivanje razloga njegove nevaljanosti. Ispod je primjer koji daje prilagođenu poruku o pogrešci ako se vrijednosti u dva polja ne podudaraju.
E-pošta: Ponovite adresu e-pošte: provjera funkcije(unos) ( if (input.value != document.getElementById("email_addr").value) ( input.setCustomValidity("Dvije adrese e-pošte moraju odgovarati."); ) else ( / / unos je važeći -- poništite poruku o pogrešci input.setCustomValidity(""); ) )
SkupštinaDolje je primjer obrasca zahtjeva za rezervaciju koji koristi različite vrste elemenata za unos, provjeru valjanosti obrasca te selektore i CSS stilove.
