Përditësimi i fundit: 08.04.2016
Pra, kemi në dispozicion elementë të ndryshëm që mund t'i përdorim në formular. Ne mund të fusim vlera të ndryshme në to. Megjithatë, nuk është e pazakontë që përdoruesit të fusin vlera jo plotësisht të sakta: për shembull, ata pritet të fusin numra dhe përdoruesi fut shkronja, etj. Dhe për të parandaluar dhe kontrolluar hyrjen e pasaktë në HTML5, ekziston një mekanizëm vërtetimi.
Avantazhi i përdorimit të vlefshmërisë në HTML5 është se pas një hyrje të pasaktë, përdoruesi mund të marrë menjëherë një mesazh gabimi dhe të bëjë ndryshimet e duhura në të dhënat e futura.
Një numër atributesh përdoren për të krijuar vërtetimin në elementët e formularit HTML5:
kërkohet: Kërkon një vlerë të kërkuar. Për zonën e tekstit, zgjidhni elementet e futjes (me llojin e tekstit, fjalëkalimin, kutinë e zgjedhjes, radio, skedarin, datën-lokale, datën, muajin, orën, javën, numrin, emailin, url, kërkimin, tel)
min dhe max: minimale dhe maksimale vlerat e lejuara... Për një element hyrës të tipit datatime-lokal, datë, muaj, orë, javë, numër, interval
model: Përcakton modelin që duhet të përputhet hyrja. Për një element hyrës të tipit tekst, fjalëkalim, email, url, kërkim, tel
Atributi i kërkuar
Atributi i kërkuar kërkon një vlerë të kërkuar:
Nëse nuk fusim asnjë të dhënë në këto fusha, duke i lënë bosh, dhe klikojmë në butonin e dërgimit, atëherë shfletuesi do të na shfaqë mesazhe gabimi dhe të dhënat nuk do të dërgohen në server:
Përkthimi i mesazhit mund të ndryshojë pak në varësi të shfletuesit. Gjithashtu, kufijtë e një fushe hyrëse të pasaktë mund të ngjyrosen me ngjyrë të kuqe. Për shembull, sjellja kur dërgoni mesazhe boshe në Firefox është:
Atributet maksimale dhe min
Atributet max dhe min përdoren për të kufizuar gamën e vlerave hyrëse:
Atributi i modelit
Atributi model specifikon modelin që të dhënat duhet të përputhen. Për të përcaktuar një shabllon, gjuha e të ashtuquajturit. Le të shqyrtojmë shembujt më të thjeshtë:
Këtu, shprehja e rregullt \ + \ d- \ d (3) - \ d (3) - \ d (4) përdoret për të futur numrin e telefonit. Do të thotë që shenja plus + duhet të jetë elementi i parë në numër. \ D përfaqëson çdo shifër nga 0 në 9. \ d (3) do të thotë tre shifra të njëpasnjëshme, dhe \ d (4) do të thotë katër shifra të njëpasnjëshme. Kjo do të thotë, kjo shprehje do të përputhet me një numër telefoni në formatin "+ 1-234-567-8901".
Nëse futim të dhëna që nuk përputhen me këtë model dhe klikojmë në Submit, atëherë shfletuesi do të shfaqë një gabim:
Çaktivizimi i vërtetimit
Verifikimi nuk është gjithmonë i dëshirueshëm, ndonjëherë ju duhet ta çaktivizoni atë. Dhe në këtë rast, ne mund të përdorim ose atributin novalidate në elementin e formës, ose atributin formnovalidate në butonin e paraqitjes:
Shënim: Për shkak se një fushë vetëm për lexim nuk mund të ketë një vlerë, kërkohet nuk ka ndonjë efekt në hyrjet me atributin vetëm për lexim të specifikuar gjithashtu.
madhësia
Atributi i madhësisë është një vlerë numerike që tregon se sa karaktere duhet të jetë e gjerë fusha e hyrjes. Vlera duhet të jetë një numër më i madh se zero dhe vlera e paracaktuar është 20. Meqenëse gjerësia e karaktereve ndryshojnë, kjo mund të jetë ose jo e saktë dhe nuk duhet të mbështetet se është kështu; hyrja që rezulton mund të jetë më e ngushtë ose më e gjerë se numri i specifikuar i karaktereve, në varësi të karaktereve dhe fontit (cilësimet e fontit në përdorim).
Kjo bën jo vendosni një kufi për numrin e karaktereve që përdoruesi mund të futë në fushë. Ai specifikon vetëm përafërsisht sa mund të shihen në të njëjtën kohë. Për të vendosur një kufi të sipërm në gjatësinë e të dhënave hyrëse, përdorni atributin.
Atribute jo standarde
Atributet e mëposhtme jo standarde janë të disponueshme në fushat e futjes së numrit të telefonit. Si rregull i përgjithshëm, ju duhet të shmangni përdorimin e tyre përveç nëse nuk mund të ndihmohet.
| atribut | Përshkrim |
|---|---|
| Nëse do të lejohet apo jo korrigjimi automatik gjatë redaktimit të kësaj fushe hyrëse. Vetëm Safari. | |
| Një varg që tregon llojin e veprimit që do të kryhet kur përdoruesi shtyp tastin Enter ose Return gjatë redaktimit të fushës; kjo përdoret për të përcaktuar një etiketë të përshtatshme për atë çelës në a tastierë virtuale. Firefox për Android vetëm. |
autokorrekt
Një shtesë Safari, atributi autocorrect është një varg që tregon nëse duhet të aktivizohet apo jo korrigjimi automatik ndërsa përdoruesi është duke redaktuar këtë fushë. Vlerat e lejuara janë:
Aktiv Aktivizo korrigjimin automatik të gabimeve shkrimore, si dhe përpunimin e zëvendësimeve të tekstit nëse ka të konfiguruara. çaktivizoni korrigjimin automatik dhe zëvendësimin e tekstit.
mozactionhint
Një shtesë e Mozilla-s, e mbështetur nga Firefox për Android, e cila jep një sugjerim se çfarë lloj veprimi do të ndërmerret nëse përdoruesi shtyp tastin Enter ose Return gjatë redaktimit të fushës. Ky informacion përdoret për të vendosur se çfarë lloj etikete të përdoret në tastin Enter në tastierën virtuale.
Vlerat e lejuara janë: shko, u krye, më pas, kërko dhe dërgo. Shfletuesi vendos, duke përdorur këtë aluzion, se çfarë etikete të vendosë në tastin enter.
Përdorimi i hyrjeve të tel
Numrat e telefonit janë një lloj i të dhënave që mblidhen shumë shpesh ueb... Për shembull, kur krijoni ndonjë faqe regjistrimi ose e-commerce, do t'ju duhet t'i kërkoni përdoruesit një numër telefoni, qoftë për qëllime biznesi ose për qëllime kontakti emergjente. Duke pasur parasysh se sa janë numrat e telefonit që futen zakonisht, është për të ardhur keq që një zgjidhje e vetme për të gjithë "për vërtetimin e numrave të telefonit nuk është praktike.
Për fat të mirë, ju mund të merrni parasysh kërkesat e faqes suaj dhe të zbatoni vetë një nivel të përshtatshëm vërtetimi. Shihni më poshtë për detaje.
Tastierë të personalizuar
Një nga avantazhet kryesore të është se bën që shfletuesit celularë të shfaqin një tastierë të veçantë për futjen e numrave të telefonit. Për shembull, këtu "s cfare tastiera duken si në disa pajisje.
| Firefox për Android | WebKit iOS (Safari / Chrome / Firefox) |
|---|---|
 |
Një hyrje e thjeshtë tel
Në formën e tij më themelore, një input tel mund të zbatohet si kjo:
Këtu nuk po ndodh asgjë magjike. Kur dorëzohen në server, të dhënat hyrëse të mësipërme do të përfaqësohen si, për shembull, telNo = + 12125553151.
Vendmbajtësit
Ndonjëherë është e dobishme të ofrohet një sugjerim në kontekst se çfarë forme duhet të kenë të dhënat hyrëse. Kjo mund të jetë veçanërisht e rëndësishme nëse Faqja dizajni "nuk ofron etiketa përshkruese për çdo element përdoret për të krijuar kontrolle ndërvepruese për format e bazuara në ueb në mënyrë që të pranohen të dhëna nga përdoruesi; një shumëllojshmëri e gjerë e llojeve të të dhënave hyrëse dhe miniaplikacioneve të kontrollit janë të disponueshme, në varësi të pajisjes dhe përdoruesit agjent. "> ... Ky është vendi ku mbajtësit e vendeve hyr brenda. Një vendmbajtës është një vlerë që demonstron formën që duhet të marrë vlera duke paraqitur një shembull të një vlere të vlefshme, e cila shfaqet brenda kutisë së redaktimit kur elementi "s vlera është" ". Pasi të dhënat futen në kuti, mbajtësi i vendndodhjes zhduket ; nëse kutia zbrazet, mbajtësi i vendndodhjes rishfaqet.
Këtu, ne kemi një hyrje tel me mbajtësin e vendit 123-4567-8901. Vini re se si mbajtësi i vendndodhjes zhduket dhe rishfaqet ndërsa manipuloni përmbajtjen e fushës së redaktimit.
Kontrollimi i madhësisë së hyrjes
Ju mund të kontrolloni jo vetëm gjatësinë fizike të kutisë së hyrjes, por edhe gjatësinë minimale dhe maksimale të lejuar për vetë tekstin e hyrjes.
Madhësia e elementit të hyrjes fizike
Madhësia fizike e kutisë hyrëse mund të kontrollohet duke përdorur atributin e madhësisë. Me të, ju mund të specifikoni numrin e karaktereve që kutia e hyrjes mund të shfaqë në të njëjtën kohë. Në këtë shembull, për shembull, kutia e redaktimit tel është 20 karaktere e gjerë:
Gjatësia e vlerës së elementit
Madhësia është e ndarë nga kufizimi i gjatësisë në numrin e telefonit të futur. Mund të specifikoni një gjatësi minimale, në karaktere, për numrin e telefonit të futur duke përdorur atributin minlength; në mënyrë të ngjashme, përdorni maxlength për të vendosur gjatësinë maksimale të numrit të telefonit të futur.
Shembulli i mëposhtëm krijon një kuti të hyrjes së numrit telefonik me 20 karaktere, duke kërkuar që përmbajtja të mos jetë më e shkurtër se 9 karaktere dhe jo më e gjatë se 14 karaktere.
Ofrimi i vlerave të sugjeruara
Duke e bërë një hap më tej, mund të jepni një listë të vlerave të paracaktuara të numrit të telefonit nga të cilat përdoruesi mund të zgjedhë. Për ta bërë këtë, përdorni atributin listë. Kjo nuk e kufizon përdoruesin në ato opsione, por i lejon ata të zgjedhin më shpejt numrat e telefonit të përdorur zakonisht. Kjo gjithashtu ofron sugjerime për plotësimin automatik. Atributi i listës specifikon ID-në e një elementi përmban një grup
Me elementin përmban një grup të
Këtu është një pamje e ekranit se si mund të duket:
Vleresimi
Siç e kemi "prekur më parë," është mjaft e vështirë të ofrohet një zgjidhje e njëanshme e verifikimit nga ana e klientit për numrat e telefonit. Pra, çfarë mund të bëjmë? Le të shqyrtojmë disa opsione.
E rëndësishme: Forma HTML vërtetimi është jo një zëvendësim për skriptet nga ana e serverit që sigurojnë që të dhënat e futura janë në formatin e duhur përpara se të lejohen në bazën e të dhënave. Është shumë e lehtë për dikë që të bëjë rregullime në HTML që i lejojnë ata të anashkalojnë vërtetimin ose ta heqin plotësisht. Është gjithashtu e mundur që dikush thjesht të anashkalojë plotësisht HTML-në tuaj dhe t'i dërgojë të dhënat direkt në serverin tuaj. Nëse kodi juaj nga ana e serverit nuk arrin të vërtetojë të dhënat që merr, fatkeqësia mund të godasë kur të dhënat e formatuara në mënyrë jo të duhur (ose të dhëna që janë shumë të mëdha, janë të llojit të gabuar, e kështu me radhë) futen në bazën e të dhënave tuaja.
Kërkohet krijimi i numrave të telefonit
Ju mund ta bëni atë në mënyrë që një hyrje bosh të jetë e pavlefshme dhe nuk do t'i dërgohet serverit duke përdorur atributin e kërkuar. Për shembull, le të përdorim këtë HTML:
Dhe le të përfshijë CSS-në e mëposhtme për të theksuar hyrjet e vlefshme me një shenjë kontrolli dhe hyrjet e pavlefshme me një kryq:
Div (margjina e poshtme: 10 px; pozicioni: relative;) hyrja (gjerësia: 100 px;) hyrja + hapësira (mbushje-djathtas: 30 px;) hyrja: e pavlefshme + hapësira: pas (pozicioni: absolute; përmbajtja: "✖"; mbushje -majtas: 5px; ngjyra: # 8b0000;) hyrja: e vlefshme + hapësira: pas (pozicioni: absolute; përmbajtja: "✓"; mbushje-majtas: 5 px; ngjyra: # 009000;)
Prodhimi duket si ky:
Vërtetimi i modelit
Nëse dëshironi të kufizoni më tej numrat e futur në mënyrë që ata gjithashtu të jenë në përputhje me një model specifik, mund të përdorni atributin model, i cili merr si vlerë një shprehje të rregullt që vlerat e futura duhet të përputhen.
Në këtë shembull, ne do të përdorim të njëjtën CSS si më parë, por HTML-ja jonë është ndryshuar që të duket kështu:
Div (margjina e poshtme: 10 px; pozicioni: relative;) hyrja (gjerësia: 100 px;) hyrja + hapësira (mbushje-djathtas: 30 px;) hyrja: e pavlefshme + hapësira: pas (pozicioni: absolute; përmbajtja: "✖"; mbushje -majtas: 5px; ngjyra: # 8b0000;) hyrja: e vlefshme + hapësira: pas (pozicioni: absolute; përmbajtja: "✓"; mbushje-majtas: 5 px; ngjyra: # 009000;)
Vini re se si vlera e futur raportohet si e pavlefshme nëse nuk përputhet modeli xxx-xxx-xxxx; për shembull, 41-323-421 "nuk do të pranohet. As 800-MDN-ROCKS. Megjithatë, 865-555-6502 do të pranohet. Ky model i veçantë është padyshim i dobishëm vetëm për zona të caktuara - në një aplikacion real ju" d ndoshta duhet të ndryshojë modelin e përdorur në varësi të vendndodhjes së përdoruesit.
Shembuj
Në këtë shembull, ne paraqesim një ndërfaqe të thjeshtë me një element që përfaqëson një kontroll që ofron një menu opsionesh ">
Çdo hyrje ka një atribut mbajtës vendi për të treguar një sugjerim për përdoruesit me shikim se çfarë duhet të futin në të, një model për të zbatuar një numër specifik karakteresh për seksionin e dëshiruar dhe një atribut të etiketës arie që të përmbajë një sugjerim për t'u lexuar tek lexuesi i ekranit përdoruesit se çfarë duhet të hyjnë në të.
JavaScript është relativisht i thjeshtë - ai përmban një mbajtës të ngjarjeve onchange që, kur të
Var selectElem = document.querySelector ("zgjedh"); var inputElems = document.querySelectorAll ("input"); zgjidhniElem.onchange = funksioni () (për (var i = 0; i< inputElems.length; i++) { inputElems[i].value = ""; } if(selectElem.value === "SHBA") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "Kodi i zonës"; inputElems.pattern = "{3}"; inputElems.placeholder = "Pjesa e parë"; inputElems.pattern = "{3}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "Pjesa e dytë"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } else if(selectElem.value === "MB") { inputElems.parentNode.style.display = "none"; inputElems.placeholder = "Kodi i zonës"; inputElems.pattern = "{3,6}"; inputElems.placeholder = "Numri lokal"; inputElems.pattern = "{4,8}"; inputElems.setAttribute("aria-label","Local number"); } else if(selectElem.value === "Gjermania") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "Kodi i zonës"; inputElems.pattern = "{3,5}"; inputElems.placeholder = "Pjesa e parë"; inputElems.pattern = "{2,4}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "Pjesa e dytë"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } }
Shembulli duket si ky:
Kjo është një ide interesante, e cila tregon një zgjidhje të mundshme për problemin e trajtimit të numrave ndërkombëtarë të telefonit. Natyrisht, do t'ju duhet të zgjeroni shembullin për të dhënë modelin e duhur për potencialisht çdo vend, gjë që do të ishte shumë punë, dhe nuk do të kishte ende asnjë garanci të pagabueshme që përdoruesit do t'i fusnin saktë numrat e tyre.
Ju bën të pyesni veten nëse ia vlen të kaloni gjithë këtë telash në anën e klientit, kur thjesht mund ta lini përdoruesin të fusë numrin e tij në çfarëdo formati që dëshironte në anën e klientit dhe më pas ta verifikoni dhe dezinfektoni atë në server. Por kjo zgjedhje është e juaja për të bërë.
Div (margjina e poshtme: 10 px; pozicioni: relative;) hyrja (gjerësia: 100 px;) hyrja + hapësira (mbushje-djathtas: 30 px;) hyrja: e pavlefshme + hapësira: pas (pozicioni: absolute; përmbajtja: "✖"; mbushje -majtas: 5px; ngjyra: # 8b0000;) hyrja: e vlefshme + hapësira: pas (pozicioni: absolute; përmbajtja: "✓"; mbushje-majtas: 5 px; ngjyra: # 009000;)
Specifikimet
| Specifikim | Statusi | Komentoni | |||||||
|---|---|---|---|---|---|---|---|---|---|
| Standardi i jetesës HTML Përkufizimi i " "në atë specifikim. | Opera | Safari | Pamja në internet e Android | Chrome për Android | Edge celular | Firefox për Android | Opera për Android | Safari në iOS | Internet Samsung |
| lloji = "tel" | Mbështetje e plotë e Chrome Po | Edge Mbështetje e plotë Po | Mbështetje e plotë e Firefox-it Po | IE Mbështetje e plotë 10 |
Ky koleksion i fragmenteve të dobishme HTML5 mund t'ju ndihmojë të përmirësoni faqen tuaj.
Plotësimi automatik në fushat e tekstit
Duke përdorur elementin e listës së të dhënave HTML5, mund të krijoni një kuti teksti të plotësimit automatik. Shumë komode!Fushat e hyrjes me email, url dhe tel
HTML5 prezanton shumë lloje të reja për fushat e hyrjes, duke përfshirë email, url dhe tel. Ato ju lejojnë të shkruani më shumë kod i bukur, bëni të gjithë punën e vërtetimit të përmbajtjes për ju, dhe gjithashtu detyroni shfletuesit celularë të shfaqin një tastierë me prekje me butona të veçantë (si @ dhe.com) kur plotësojnë këto fusha.
Modele për përputhjen e fushave të formës me shprehjen e rregullt
Më parë, duhej të përdorje JavaScript për të vërtetuar përmbajtjen në front. Tani, me atributin e modelit HTML5, thjesht mund të specifikoni regex-in që duhet të përputhet me hyrjen tuaj!Menyja e personalizuar e kontekstit
HTML5 ju lejon të shtoni elementë në menyja e kontekstit(kjo është e njëjta meny që shfaqet nëse klikoni me të djathtën kudo në faqen tuaj).Në kohën e këtij shkrimi, elementi ContextMenu është i pajtueshëm vetëm me Firefox-in, por shpresojmë se shfletuesit e tjerë do të shtojnë mbështetje për të shumë shpejt.
Po, mund të klikoni me të djathtën këtu.
Video HTML5, me Flash backback.
Një nga veçoritë e reja më të mëdha në HTML5 është padyshim aftësia e tij për të luajtur video pa përdorur Flash. Por për shfletuesit më të vjetër që nuk janë të pajtueshëm me HTML5, duhet të zbatoni një Flash player si rezervë. V shembullin e mëposhtëm tregon se si të futni videot mp4 dhe ogv në HTML5, me një riprodhues rezervë për shfletuesit më të vjetër.Elementet e fshehura në HTML5
HTML5 prezantoi atributin e fshehur që mund të aplikohet në çdo element. Efekti i tij është i ngjashëm me ekranin: asnjë pronë CSS.Ju nuk do ta shihni këtë tekst
Fokusimi automatik për fushat e tekstit
Atributi i fokusimit automatik ju lejon të vendosni fokusin në një element specifik në ngarkimin e faqes. I dobishëm për faqet e kërkimit, hyrjes ose regjistrimit, për shembull.Ngarkimi paraprak në HTML5
Jean-Baptiste Jung shkroi për ngarkimin paraprak në HTML5. Me pak fjalë, kjo është një mënyrë e thjeshtë për të njoftuar shfletuesin se cilat burime mund të nevojiten së shpejti, në mënyrë që t'i ngarkojë ato paraprakisht (për shembull, imazhet e ngarkuara nga ajax). Kodi më poshtë zbaton ngarkimin paraprak të imazhit.Luaj skedarë audio në HTML5
HTML5 mund të luajë video dhe natyrisht mund të luajë gjithashtu skedarë audio si formati mp3. Kodi i mëposhtëm zbaton një luajtës audio minimalist por funksional.Etiketa më e zakonshme e përdorur në forma është ... Nuk ka etiketë fundore. I gjithë informacioni që shfletuesi duhet të përpunojë përmbahet drejtpërdrejt në etiketë dhe vendoset duke përdorur atribute të ndryshme. Semantika ndryshon shumë në varësi të vlerës së atributit të tij lloji.
Atributet e etiketimit
type Atributi kryesor që specifikon llojin e elementit. Nëse atributi nuk është i specifikuar, atëherë është i paracaktuar teksti.Vlerat e mundshme:
Jo të gjithë shfletuesit mbështesin llojet e shtuara në HTML5.
Nëse shfletuesi nuk mbështet asnjë nga llojet e reja, atëherë do të supozojë se ky është një lloj. Si të organizoni mbështetja për shfletuesit më të vjetër përshkruhet duke përdorur shembullin e datës.
Autokomplete = "off" Çaktivizon plotësimin automatik për të kësaj fushe... Shumë i dobishëm për fushat e hyrjes për kodet një herë, captchas, etj. .setAttribute ("autocomplete", "off"); fokusim automatik Merrni fokusin automatik në ngarkimin e faqes. Vlera mund të vendoset në tre mënyra: ...
...
...
Një shembull i imitimit të vetive të fokusimit automatik për shfletuesit më të vjetër... i çaktivizuar E bën elementin të padisponueshëm. Artikujt e padisponueshëm nuk ngarkohen në server. emri Emri i fushës. Çdo fushë hyrëse që krijoni duhet të ketë emrin e saj unik, përndryshe skripti nuk do të përcaktojë se cilat fusha i përkasin vlerat e marra. Natyrisht, emri i fushës së hyrjes duhet të përputhet me emrin që përshkruhet për të në programin e përpunimit. vlera Vlera e paracaktuar e fushës ose etiketës në buton. madhësia Madhësia e fushës së tipit. maxlength Kufizoni numrin e karaktereve që mund të futen në një fushë tipi. readonly = "readonly" ose "" Parandalon ndryshimet në artikull. kërkohet Kontrollon automatikisht nëse fusha është e plotësuar.
Për të nënvizuar një fushë të kërkuar të plotësuar saktë, mund të përdorni strukturën e mëposhtme të stilit: min Vlera minimale e një numri në një fushë të llojit numri... max Vlera maksimale e një numri në një fushë të llojit numri... hap Hapi i ndryshimit të numrit në fushën e tipit numri... model Modeli i fushës së hyrjes. Kontrollimi i korrektësisë së futjes së të dhënave. Modelet e mostrave për modelin e hyrjes në formë html5... mbajtës i vendndodhjes Teksti i këshillimit në fushën e formës, i cili zhduket automatikisht kur merret fusha e fokusit.
Një shembull i vendosjes së një stili të këshillës së veglave:
IE dhe Firefox (deri në versionin 18) vendmbajtes konsiderohet pseudo-klasë, dhe në të tjera konsiderohet pseudo-element.
REZULTATI:
Lista Një listë opsionesh që mund të zgjidhni ndërsa shkruani në kutinë e tekstit.
Fillimisht, kjo listë fshihet dhe bëhet e disponueshme kur fusha merr fokusin ose kur shkruan.
Llojet e elementeve INPUT
Butoni BUTONI
Butoni BUTONIështë menduar për ato raste kur duhet të ekzekutoni ndonjë skript. Kjo do të thotë, një ngjarje është e varur në buton OnСlick dhe thirret funksioni i dëshiruar. atribut vlerë vendos etiketën në buton. atribut ne klikim specifikon një mbajtës JavaScript që thirret kur klikohet butoni. atribut emri shërben për emërtimin JavaScript të butonit (nuk transmetohet në server).
Shembull
REZULTATI:
Butoni SUBMIT
Ky buton është për dërgimin e një formulari. Në shumicën e shfletuesve, duket pothuajse i padallueshëm nga një buton. Ai në vetvete nuk transmetohet, por shërben vetëm për kontroll.
atribut ne klikim për butonin DORËZOJ praktikisht nuk përdoret, pasi është më mirë të përdorni një mbajtës ngjarjesh më dorëzo specifikuar në etiketë ... Në fund të fundit, për të transferuar të dhënat e futura në formular, në rastin e përgjithshëm, nuk është aspak e nevojshme të klikoni në butonin. DORËZOJ... Thjesht mund të shtypni tastin në tastierë HYN ndërsa në çdo fushë të futjes së tekstit. Kjo do të transferojë të dhëna.
Shembull
REZULTATI:
atribut vlerë ofron disa avantazhe kur përdorni më shumë se një buton për transferimin e të dhënave. Në këtë rast, bazuar në vlerën e ndryshores së marrë, skripti do të jetë në gjendje të përcaktojë se si të përpunojë më tej informacionin e marrë.
Shembull
REZULTATI:
atribut formnovalidate mund të aplikohet për të parandaluar vërtetimin e vlerave të formularit.
Shembull
REZULTATI:
Butoni RESET
Ky është butoni për pastrimin e formularit. Kur shtypet, të gjithë artikujt e ndryshuar kthehen në vlerat e tyre të paracaktuara. Përdoret rrallë. Megjithatë, në disa raste mund të jetë mjaft i dobishëm.
Këshillë: bëni kujdes me zgjedhjen e etiketës në buton RISET... Diçka si "Pastro", "Fillo nga e para", "Fshi hyrjen", etj. do të jetë mjaft vizuale (dhe, më e rëndësishmja, intuitivisht e kuptueshme edhe për një çajnik). Në përgjithësi, është e nevojshme që përdoruesi të mos ketë një hije dyshimi për qëllimin e këtij çelësi.
Shembull
REZULTATI:
Fusha e futjes TEXT
Fusha e futjes së tekstit është kutia e tekstit më e përdorur në formularë. Për më tepër, me të drejtë mund të konsiderohet elementi kryesor dhe më i rëndësishëm i formave. Ky lloj përdoret nga etiketa
si parazgjedhje, mund ta lini bosh për të shfaqur një kuti teksti. Megjithatë, nëse është e nevojshme të vendosni stilin për përzgjedhësin hyrje, pastaj atributin lloji = "tekst" nuk mund të anashkalohet.
Emri i fushës i specifikuar nga atributi emri, është gjithmonë i nevojshëm, pasi bazuar në këtë parametër, shfletuesi i kalon skriptit emrin = çiftin e vlerës.
Shembull
REZULTATI:
Teksti "Ivanov" vendoset në fushën e krijuar si vlerë fillestare. Nëse përdoruesi nuk bën ndryshime ose klikon butonin, vlera Ivanov do t'i dërgohet skriptit si mbiemri i përdoruesit.
Fusha e futjes së numrit NUMBER
Fusha është për futjen e numrave. Pjesa e pjesshme kur futet mund të ndahet ose me pikë (2.5) ose me presje (2.5). Nëse përdoruesi fut shkronja, formulari nuk do t'i dërgohet serverit.
Shembull
REZULTATI:
Mund të vendosni vlerën minimale, maksimale të fushës dhe hapin e ndryshimit të numrit. Vlera e hapit mund të jetë ose pozitive ose negative, por duhet të jetë më e madhe se 0. Nëse numri i futur në fushë nuk i plotëson kufijtë e specifikuar, atëherë dërgimi në server nuk do të ndodhë.
Shembull
REZULTATI:
Për të specifikuar ndonjë hap, përdorni hap = "çdo".
Shembull
REZULTATI:
Fusha numri shfaqet ndryshe: disa shfletues shfaqin gjithmonë shigjeta, disa vetëm kur fusha rri pezull ose merr fokus.
fushë e fshehtë HIDDEN
Ky është një lloj i veçantë (i fshehur). kuti teksti... Nëse një skript trajton disa forma të ndryshme, atëherë në fushën e fshehur të çdo formulari, mund të specifikoni një identifikues që do t'ju lejojë të përcaktoni se me cilën formë keni të bëni.
Shembull
Shfletuesi nuk shfaq fushën e fshehur, megjithëse mund të zbulohet duke e vendosur shfletuesin në modalitetin e pamjes HTML dhe duke analizuar tekstin e faqes së internetit. Fushat e fshehura janë të dobishme kur ju duhet të jepni informacionin që kërkohet për një skript, por nuk dëshironi që përdoruesi të jetë në gjendje të bëjë ndryshime në të. Megjithatë, vini re se një përdorues i zgjuar mund ta ruajë formularin tuaj në një skedar, ta modifikojë atë dhe më pas ta dërgojë atë formular në server në një formë të modifikuar. Prandaj, mos u mbështetni në fushat e fshehura për të krijuar një lloj mbrojtjeje.
Shembull
Skripti do të marrë një variabël me emrin FormVersion, të cilit do t'i caktohet vlera 1.2. Ky informacion mund të përdoret për të përcaktuar se si përpunohet pjesa tjetër e informacionit të marrë nga formulari. Nëse përdoruesi e ndryshon këtë vlerë, programi i skriptit mund të sillet në mënyra të papritura.
Fusha e futjes së adresës së emailit
Për të futur adresa të shumta, mund të shtoni atributin të shumëfishta, dhe një presje (,) përdoret për të ndarë adresat
