Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ

Format dhe elementet e formës html. Format HTML

17.06.2019 Programet

Duke marrë parasysh etiketat bazë HTML, ne nuk mund të mos prekim një element kaq të rëndësishëm si format. Shpesh nevojiten komente në faqet e internetit. Për shembull, plotësimi i një pyetësori në faqe, regjistrimi, autorizimi, komentet, etj. Në të gjitha këto raste, përdoruesi plotëson zona të veçanta (fusha të formularit) në faqe, pas së cilës të dhënat dërgohen në server. Formularët përdoren për të krijuar reagime. Një formular është një fragment i një dokumenti HTML i destinuar për hyrjen e përdoruesit.

Figura tregon formularin e regjistrimit të studentëve në faqen e internetit të institucionit arsimor.

Një enë përdoret për të krijuar formularin

me atributin veprim, i cili specifikon faqen në server që do të përpunojë të dhënat e paraqitura nga formulari.

Struktura e formës më të thjeshtë:


elementet e formës...

Çdo formular gjithashtu ka nevojë për një buton dërgo për të dorëzuar të dhënat pasi formulari të jetë plotësuar.

Struktura e butonit:

Pra, për të regjistruar pothuajse të gjithë elementët e formës, përdoret etiketa me një atribut tip. Për të krijuar një buton që do të rivendosë të gjitha të dhënat nga formularët, përdoret struktura e mëposhtme:

Për të krijuar një fushë teksti, ekziston parametri i tekstit. Në këtë rast përdoren parametrat e mëposhtëm: emri - emri i fushës; madhësia - për fushën në simbole; maxlength - numri maksimal i mundshëm i karaktereve në fushë; vlera - informacioni i shfaqur në formë si parazgjedhje

Një shembull i një hyrje formulari me dy fusha teksti:


Shkruaj emrin tend:



Shkruani mbiemrin tuaj:





Rezultati i formularit është paraqitur në figurë.

Nëse një sasi e madhe informacioni duhet të futet në një fushë teksti, për shembull, një koment, përdoret forma e një zone teksti, e cila krijohet duke përdorur etiketën

Rezultati i funksionimit të kodit me zonën e tekstit është paraqitur në figurë.


Elementi tjetër i formularëve janë listat, duke ju lejuar të bëni një zgjedhje nga grupi i paraqitur i vlerave. Etiketat ju lejojnë të krijoni një formë liste

Në mënyrë që elementi të zgjidhet në ngarkimin e faqes, është e nevojshme në etiketë

Një metodë e ngjashme përzgjedhjeje është kutia e kontrollit dhe elementët e formës së radiobutonit. Dallimi midis këtyre elementeve është se kutia e kontrollit ju lejon të bëni zgjedhje të shumta, dhe butoni i radios vetëm një të vetëm.

Kutia e kontrollit dhe struktura e hyrjes së butonit të radios:

teksti

Butoni i radios:

teksti

Elementet e specifikuara në skicë përdorin atributin e zgjedhur për të nënvizuar kutinë e zgjedhjes dhe butonin radio si parazgjedhje. Një shembull i përdorimit të kutisë së kontrollit, butonit të radios dhe kodit HTML është paraqitur në figurë.

Një element tjetër i formës është një buton, i specifikuar duke përdorur atributin tip të etiketës me vlerën e butonit:

Në kodin e specifikuar për krijimin e një butoni, ekziston një parametër onclick, në të cilin, si rregull, një kod në gjuhën e programimit është vendosur për të kryer një veprim kur klikohet ky buton:

Komanda javascript e alarmuar përdoret për të shfaqur një mesazh në një dritare të veçantë. Rezultati i shembullit është paraqitur në figurë.

Për të futur një imazh në një buton, përdorni kodin e treguar në shembullin e mëposhtëm:

Kur regjistroheni dhe regjistroheni në sajte, përdoret një fushë me një test të fshehur të shfaqur si yll. Ky është elementi i formularit të fjalëkalimit:

Regjistrimi në sit shpesh ndahet në disa faqe dhe secila pasuese duhet të përmbajë informacion nga ajo e mëparshme. Për të fshehur informacionin e transmetuar, përdoret elementi i formës së fshehur:

Elementi i fshehur i formës do të jetë i padukshëm në dritaren e shfletuesit.

Formularët kanë një element skedari për të ngarkuar skedarë në server. Një shembull i kodit për ngarkimin e skedarëve në server është paraqitur më poshtë:

Pra, në këtë temë, ne shikuam elementët e formës për krijimin e faqeve të ndryshme HTML, të cilat, së bashku me mbajtësit e skripteve në një kompjuter ose server, ju lejojnë të zhvilloni aplikacione të plota në internet.

Ditë të mbarë, dashamirët e zhvillimit të uebit dhe ata që duan të krijojnë faqen e tyre të internetit. Para kësaj, të gjitha botimet e mia i kushtoheshin elementeve kryesore të gjuhës, si të krijohen objekte të ndryshme të përmbajtjes, formatimi i tyre, strukturimi i tyre etj. Pasi të keni zotëruar temat e mëparshme, tashmë mund të krijoni një faqe interneti mjaft të mirë. Megjithatë, do të ishte e paplotë pa temën e sotme: “Krijimi i formularëve në html”.

Ky seksion në gjuhë është shumë i rëndësishëm. Prandaj, kushtojini vëmendje të veçantë studimit të tij, përndryshe burimi në internet që keni krijuar nuk mund të lëshohet në prodhim. Kështu, pasi të keni lexuar artikullin, do të dini se çfarë ju nevojitet për të përdorur formularët, me cilat etiketa krijohen dhe gjithashtu mund të provoni shembuj specifikë në praktikë. Le të fillojmë!

Çfarë është forma dhe si funksionon ajo

Forma- ky është një nga objektet më të rëndësishme, i cili synon shkëmbimin e të dhënave të informacionit midis serverit dhe përdoruesit.

E thënë thjesht, nëse dëshironi të krijoni një dyqan online me aftësinë për të porositur produkte në sit, të kërkoni regjistrimin në një burim në internet dhe të punoni me llogari, ose t'u ofroni klientëve reagime nga menaxherët e kompanisë, atëherë nuk mund të bëni pa formularë.

Forma vendoset duke përdorur një element të veçantë të gjuhës html

.

Vini re se një dokument kodi mund të përmbajë deklarata të shumta të etiketave , megjithatë, vetëm një kërkesë mund t'i dërgohet serverit për të përpunuar të dhënat. Kjo është arsyeja pse informacioni që futet nga përdoruesi në fushat e caktuara për këtë dhe i referohet formave të ndryshme nuk duhet të jetë i varur. Gjithashtu, nuk lejohet të bëhen forma të folezuara brenda njëri-tjetrit.

Për ata që janë të paduruar dhe të etur për të hedhur një vështrim të shpejtë në pamjen e kodit, unë kam bashkangjitur një shembull të thjeshtë të përdorimit të një paneli me një fushë teksti për një fjalëkalim me një buton:

1 2 3 4 5 6 7 8 9 10 11 12 Shembull

Shembull

Mund të mos jetë shumë e qartë tani se çfarë dhe si ndërvepron në këtë program të vogël, por ju garantoj që pasi të keni lexuar të gjithë artikullin, do të jeni në gjendje të krijoni aplikacione shumë herë më të vështira.

Dërgimi i të dhënave në anën e serverit

Për të dërguar informacionin e shtypur (ose të zgjedhur) në kutinë e dialogut, duhet të përdorni mekanizmin standard - Butoni i dorëzimit.

Kodi për një metodë të tillë duket si ky:

Kur linja e paraqitur të hapet, do të shfaqet një buton me mbishkrimin: "Dërgo".

Një mënyrë tjetër për të dërguar të dhëna në anën e serverit është duke shtypur Enter brenda kutisë së dialogut.

Pas konfirmimit të dërgimit të informacionit të specifikuar, ai nuk shkon menjëherë në server. Së pari, ai përpunohet nga shfletuesi, duke rezultuar në formën "emri = vlera".

Parametri i atributit është përgjegjës për emrin lloji etiketë , dhe për vlerën - të dhënat e futura nga përdoruesi. Më pas, vargu i transformuar i kalohet mbajtësit, i cili më së shpeshti vendoset në atribut veprim element

.

Vetë parametri i veprimit nuk kërkohet, dhe në disa momente nuk nevojitet fare. Për shembull, nëse një faqe siti është shkruar duke përdorur php ose js, atëherë përpunimi bëhet në faqen aktuale dhe lidhjet nuk janë të nevojshme.

Për të kuptuar më mirë të gjithë pamjen e funksionimit të faqes, do të doja të shtoja se puna me të dhënat në server kryhet duke përdorur gjuhë të tjera. Pra, gjuhët e serverit janë: Python, php, gjuhë të ngjashme me C (C #, C, etj.), Java dhe të tjera.

Tani do të doja të ndalem dhe t'ju tregoj më shumë për elementin ... Me fjalë të thjeshta, atëherë nevojiten për të krijuar fusha teksti, butona radio, butona të ndryshëm, fusha të fshehura, kuti kontrolli dhe objekte të tjera.

Etiketa nuk ka nevojë të çiftohet , megjithatë, nëse keni nevojë të përpunoni të dhënat e përdoruesve ose t'i futni ato, për shembull, në një bazë të dhënash, atëherë nuk mund të bëni pa një kontejner.

Atributet kryesore të këtij elementi të gjuhës së shënjimit të hipertekstit janë:

  • Teksti- krijon një fushë teksti;
  • Paraqisni- krijon një buton për dërgimin e të dhënave në server;
  • Imazhi- është përgjegjës për butonin me një foto;
  • Rivendos- vendos një buton për të pastruar formularin;
  • Fjalëkalimi- vendos një fushë teksti posaçërisht për fjalëkalimet;
  • Kutia e kontrollit- përgjigjet për fushat me flamuj;
  • Radio- është përgjegjës për fushat me zgjedhjen e një elementi;
  • Butoni- krijon një buton;
  • I fshehur- përdoret për fusha të fshehura;
  • Skedari- vendos fushën përgjegjëse për dërgimin e skedarëve.

Metodat e transferimit të informacionit

Ka 2 mënyra për të transferuar të dhënat e përdoruesit në anën e serverit: Marr dhe Posto... Këto metoda bëjnë të njëjtën gjë, por ato ndryshojnë ndjeshëm nga njëra-tjetra. Prandaj, para se të specifikojmë ndonjë prej tyre, le të njihemi me veçoritë e tyre.

Posto Marr
Madhësia e dokumenteve që do të transferohen I kufizuar në anën e serverit. Maksimumi - 4 KB.
Si shfaqet informacioni i dërguar E disponueshme vetëm kur shikohet përmes shtesave të shfletuesit ose produkteve të tjera softuerike speciale. Menjëherë në dispozicion për të gjithë.
Përdorimi i faqeshënuesve Nuk ka asnjë mënyrë për të shtuar në faqerojtësit, pasi kërkesat nuk përsëriten (të gjitha faqet lidhen me të njëjtën adresë). Çdo faqe me një kërkesë mund të ruhet në faqeshënues dhe të shkojë në të pas një kohe.
Caching Bazuar në paragrafin e mëparshëm, të gjitha kërkesat janë në një faqe. Çdo faqe mund të ruhet veçmas.
Qëllimi Përdoret për të dërguar skedarë të mëdhenj (libra, imazhe, video, etj.), mesazhe, komente. E shkëlqyeshme për gjetjen e vlerave të kërkuara në një burim ueb ose për dërgimin e mesazheve të shkurtra me tekst.

Për të treguar se me cilën nga dy metodat e transmetimit të të dhënave duhet të punojë shfletuesi, në element përdorni parametrin e dhënë metodë(Për shembull, metoda = "post").

Le të shohim një shembull të dytë. Le të krijojmë një formular në të cilin duhet të futni të dhënat tuaja personale (emrin dhe mbiemrin, datën e lindjes) dhe të dilni me një fjalëkalim. Pas kësaj ne i dërgojmë të gjitha këto në server duke përdorur metodën Posto.

Metoda POST

Futni të dhënat tuaja personale!

Për shembull, për të futur datën, ka çelsat për datën e secilit prej parametrave (dita, muaji dhe viti), si dhe për lehtësi një panel zbritës me vetë kalendarin.

Krijimi i panelit të regjistrimit

Etiketat dhe atributet bazë janë shqyrtuar. Kjo është arsyeja pse ka ardhur koha për të krijuar një formular regjistrimi të plotë duke përdorur shënimin e stiluar të css dhe vërtetimin e të dhënave hyrëse. Sigurisht, ne nuk do të jemi në gjendje të shikojmë punën e serverit me ta, por do të ofrojmë dizajnin dhe detajet e rëndësishme.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 regjistrimin
regjistrim në sit

Emri:

Mbiemri:

Email:

Fjalëkalimi:

Përsëritja e fjalëkalimit:

regjistrimin

regjistrim në sit

Për punën e mëvonshme të saktë në shërbimin tonë, ju lutemi vendosni të dhënat e sakta!

Emri:

Mbiemri:

Email:

Fjalëkalimi:

Përsëritja e fjalëkalimit:

Unë ju këshilloj ta ruani këtë kod programi në një dokument me zgjerimin .html dhe kodimin utf-8 dhe ta hapni këtë të fundit në një dritare të shfletuesit. Para jush do të shfaqet në të gjithë lavdinë e tij një panel regjistrimi me fusha për futjen e emrit, mbiemrit, e-mail dhe fjalëkalimit me një përsëritje. Vini re se kur fillon faqja, kursori pozicionohet menjëherë në kutinë e parë të tekstit. Kjo teknikë arrihet përmes atributit fokusim automatik.

Jam absolutisht i sigurt që, duke funksionuar në internet, më shumë se një herë keni hasur në forma të ndryshme, për shembull, një formular regjistrimi, një formular hyrjeje, një formular reagimi dhe shumë e shumë të tjera. Format HTML.

Në fakt, formulari përbëhet nga elementë të ndryshëm të hyrjes: fushat e tekstit, zonat e tekstit, butonat e radios, butonat e radios, butonat, etj.

Dhe në këtë artikull do të mësoni se si të krijoni absolutisht ndonjë.

Krijo fillimisht më të thjeshtën Faqe HTML, në të cilën shtoni enën (etiketë

) që përafron përmbajtjen e tij në qendër. Shpresoj se mund ta përballoni lehtësisht këtë.

Tani le të kalojmë te forma. Formulari fillon me një etiketë

, respektivisht, përfundon me një etiketë mbyllëse
... Ky etiketë ka disa atribute që janë shumë të dëshirueshme për t'u plotësuar. Por së pari, le të krijojmë një formë të thjeshtë me atribute të etiketave
, në mënyrë që të kuptoni qëllimin e secilit prej tyre:


Këtu fillojmë të përshkruajmë një formë që ka atributet e mëposhtme:

1) Atributi " emri". Vlera e këtij atributi do të thotë emër Format HTML... Shtrohet pyetja, pse është e nevojshme kjo? Përgjigja është shumë e thjeshtë: nëse përdorni më shumë se një formë, por disa, atëherë për të dalluar një formë nga një tjetër, duhet të specifikoni emra të ndryshëm. Dhe vetë emrat nevojiten për t'iu referuar formave, për shembull, përmes JavaScript... Unë do t'ju tregoj një sekret të vogël, të cilin nuk ju këshilloj ta përdorni, por për hir të ndershmërisë do t'ju tregoj për të. Në fakt, format mund të dallohen lehtësisht pa emra, kështu që, në përgjithësi, emri i formularit nuk është aspak i nevojshëm. Por une VËRTETË Unë rekomandoj t'i jepni emrat e formularëve, sepse do ta keni më të lehtë të kuptoni se për çfarë është përgjegjës secili prej formularëve.

2) Atributi " veprim". Vlera e këtij atributi është përgjegjëse për rrugën drejt skedarit të skriptit që do të përpunojë formularin. Kjo do të thotë, nuk mjafton të futni të dhëna në formular, ato ende duhet të përpunohen në përputhje me rrethanat, dhe kjo është vetëm rruga për këtë mbajtës i skedarëve dhe është në vlerën e atributit " veprim".

3) Atributi " metodë". Mund të ketë një nga dy kuptimet shumë të njohura:" postim"dhe" marr". Ky atribut përcakton metodën e dërgimit. Nuk do të hyj në detaje, do të them vetëm se metoda e parë është një dërgim i fshehur i të dhënave dhe e dyta është e hapur. Për ta bërë edhe më të qartë, le të shqyrtojmë dy adresa kërcimi:

a) http://mysite.ru/scipt/request.php

b) http://mysite.ru/script/request.php?a=7&b=Michael

Në rastin e parë, përdoruesi nuk e sheh atë që po dërgon (" postim"), dhe në të dytën, ai në të vërtetë sheh emrat e variablave dhe vlerat e tyre (the" marr Ju, në fund të artikullit, mund të provoni të dorëzoni formularin duke përdorur dy metoda të ndryshme dhe të siguroheni që ato janë të ndryshme. Por tani për tani, unë do të them që SHUMË më shpesh përdorni " postim“, pra dërgim i fshehur.

Ky ishte përshkrimi i vetë formularit, por tani mund të filloni të shtoni elementë në formular.

Gjëja e parë që do të shtojmë është një kuti teksti. Shtimi i një kutie teksti duke përdorur një etiketë , ose më mirë duke përdorur atributin e këtij etiketimi " lloji"me kuptim" teksti". Gjithashtu, para se të krijoni një fushë teksti, rekomandohet të shkruani se çfarë është kjo fushë, për shembull." Emri juaj". Brenda etiketës

shkruani këtë rresht:

Emri juaj:

Përsëri, le të zbërthejmë atributet:

1) Atributi " lloji"është përgjegjës për llojin e elementit të hyrjes. Në këtë rast, ne treguam se kjo është një fushë e rregullt teksti. Në elementët e ardhshëm do të ndryshojmë vlerën e këtij atributi.

2) Atributi " emri"është përgjegjës për emrin e elementit. Këtu kemi treguar se emri i kësaj fushe Emri.

3) Atributi " vlerë"është përgjegjës për vlerën e paracaktuar të kësaj fushe.

Siç thotë shprehja, është më mirë të shohësh një herë sesa të dëgjosh njëqind herë, kështu që më mirë shkruani ( për më tepër, thjesht shkruani, jo kopjoni!) këtë tekst në redaktues dhe më pas shikoni rezultatin në shfletues.

Tani le të krijojmë një fushë tjetër të ngjashme, por jo për futjen e karaktereve të zakonshme, por për futjen e një fjalëkalimi. Kjo do të thotë, gjithçka duhet të jetë e njëjtë, por vetëm teksti duhet të fshihet pas yjet... Prandaj, duke shkuar në rreshtin tjetër (etiketë
), shkruani kodin e mëposhtëm:

Fjalëkalimi juaj:

Siç mund ta shihni, tani vlera e " shkruani " eshte nje " fjalëkalimin". Pjesa tjetër e atributeve janë të njëjta si për një kuti teksti të rregullt.

Artikulli tjetër është lista rënëse. Është krijuar pak më e ndërlikuar, pasi këtu është e nevojshme jo vetëm të deklarohet krijimi i një liste rënëse, por edhe të shtohen elementë në këtë listë. Le të shkruajmë, duke shkuar në rreshtin tjetër (më tej, nuk do ta përmend këtë) sa vijon Kodi HTML.

Zgjidhni një opsion:

Etiketë ... atribut " emri"Është e qartë, pasi e kam shpjeguar tashmë disa herë. Artikujt e listës krijohen duke përdorur etiketën ... vlera e atributit " vlerë"do të thotë se çfarë vlere do të ketë ndryshorja zgjedhje(për shembull, në JavaScript), domethënë ose zgjedhje = 1 ose zgjedhje = 2 ose Zgjedhja = 3... Menjëherë pas përfundimit të përshkrimit të etiketës vendosni atë që përdoruesi do të shohë në listën rënëse. Përsëri, është më mirë të shikoni në një shfletues dhe menjëherë do të kuptoni gjithçka.

Tani le të shtojmë një zonë teksti duke përdorur etiketën

Këtu krijojmë një zonë teksti me lartësi prej 10 vargjet (vlera e atributit " rreshtave") dhe një gjerësi prej 15 karaktere (vlera e atributit " cols").

Brenda kësaj etikete çiftimi, teksti specifikohet në zonën e tekstit të paracaktuar. Në fakt, këtu nuk ka asgjë për të thënë më shumë. Duke ecur përpara.

Elementi tjetër është një buton radio. Një buton radio është një grup i tillë " rrathët", nga të cilat mund të zgjidhet vetëm një. Butonat e radios krijohen duke përdorur Etiketa HTML , ose, më saktë, duke përdorur vlerën " radio"atribut" lloji". Le të shkruajmë këtë Kodi HTML:

Zgjidhni një ose më shumë:
opsioni 1
Opsioni 2
Opsioni 3

Këtu do të përqendrohem në atributin " emri“Sepse përveç vendosjes së emrit, ai ka edhe një veçori shumë të rëndësishme. Nëse ju JO nëse i bëni emrat e këtyre tre butonave të radios të njëjtë, ata do të bëhen të pavarur dhe, për rrjedhojë, mund të zgjidhni disa opsione menjëherë. Për t'u bindur për këtë, ndryshoni emrat dhe më pas përpiquni të zgjidhni disa opsione në të njëjtën kohë dhe menjëherë do të bindeni për fjalët e mia. Prandaj, një grup butonash radio duhet të ketë të njëjtën vlerë atributi " emri". atribut" vlerë"do të thotë vlera e një ndryshoreje" radio zgjedhore(përsëri, për shembull, në JavaScript). Menjëherë pas përshkrimit të etiketës ekziston një tekst që përdoruesi do ta shohë pranë butonit përkatës të radios.

Një element tjetër i formës janë butonat e radios ( kutia e kontrollit). Ato krijohen përsëri duke përdorur etiketën ... Le të shkruajmë rreshtat e mëposhtëm:

Ju pranoni rregullat tona:

Mendoj se këtu gjithçka është transparente, ndaj nuk do ta shpjegoj. Unë thjesht ju këshilloj të shihni se si duket në një shfletues. Dhe unë do të them që nëse kontrollohet kutia e kontrollit, atëherë vlera e ndryshores " kushtet"do" po", nëse nuk qëndron, atëherë vlera e kësaj ndryshore do të jetë" ", pra një varg bosh.

Një element tjetër është fusha e përzgjedhjes së skedarit. Me siguri, ju keni ngarkuar ndonjëherë skedarë në server dhe shpesh ju është dashur të përdorni fushën e futjes së emrit të skedarit për këtë. Një fushë e tillë krijohet duke përdorur etiketën tashmë të bezdisshme ... Le të shkruajmë kështu:

Zgjidhni një skedar për të shkarkuar:

Përshëndetje për ju, të dashur lexues të faqes së blogut. Sot dua të flas për forma të tilla si HTML. Cilido qoftë motori i faqes tuaj (cms), ai patjetër do të përdorë forma të krijuara duke përdorur etiketat Form dhe Input, si dhe atribute dhe parametra Buton, Checked, Value, Checkbox, Radio, Checkbox, Submit ...

Epo, mund t'i shtoni edhe elementë kësaj për të krijuar lista rënëse dhe fusha teksti - Select, Option, Textarea, Label, Fieldset, Legend.

Pse na nevojiten dhe si funksionojnë formularët në faqet moderne të internetit

I njëjti varg i kërkimit të faqes () krijohet duke përdorur këto etiketa, dhe më pas kërkimi në projektin tuaj do të jetë i detyrueshëm. Prandaj, të kuptuarit se si janë rregulluar dhe punojnë nuk do t'ju dëmtojë aspak për punë të suksesshme në dizajn, madje edhe me vetëpromovim dhe promovim nuk do të jetë e tepërt.

Pra, me arsyetimin për nevojën e studimit të këtyre elementeve, mendoj se nuk duhet të ketë më pyetje, ndaj është koha që të kalojmë drejtpërdrejt në studimin e opsioneve të tyre të mundshme.

Po, dua t'ju kujtoj gjithashtu se ne kemi shqyrtuar tashmë shumë materiale në temën e gjuhës së shënjimit të hipertekstit, për shembull, tre) dhe.

Në thelbin e tyre, formularët përbëhen nga elementë, për krijimin e të cilëve, brenda kontejnerit kryesor, nga etiketat Form, futen etiketa të ndryshme - Checked, Value, Checkbox, Radio, Checkbox, Submit etj. Mjafton të vendosim kodin e saj. në çdo vend të përshtatshëm të shabllonit të faqes duke specifikuar, duke përdorur etiketat dhe atributet e tyre, se si duhet të duket.

Kjo mund të jetë një kuti teksti me një buton dërgimi për pyetjen që keni futur, zgjedhje me butonat e radios (ku mund të lini të shtypur vetëm një nga butonat e dhënë), kuti të shumta teksti me një buton dërgimi () dhe më shumë.

Për shembull, në rastin e "kërkimit", duke përdorur atributin Vlera, mund të specifikoni se çfarë saktësisht do të shkruhet në butonin që ndodhet pranë fushës për futjen e një pyetjeje. Të dhënat e futura në formularë duhet të përpunohen më tej në një farë mënyre.

Për shembull, në rastin e feedback-ut, përdoruesi, pasi të plotësojë fushën me emrin e tij, fut e-mail-in e tij dhe tekstin e mesazhit dhe më pas klikon në butonin dërgoni, do të ketë të drejtë të shpresojë të dërgojë të dhëna. nga formulari në E-mailin e autorit të faqes. Por për fat të keq, nuk është e mundur të zbatohet kjo duke përdorur vetëm një gjuhë shënjimi të hipertekstit ().

Për këto qëllime, kërkohet një program i posaçëm mbajtës, i cili pasi përdoruesi të klikojë në butonin e dërgimit, do të marrë të gjitha të dhënat nga fushat e komenteve dhe do t'ia dërgojë pronarit të burimit me E-mail. Cili program do ta bëjë këtë, duhet të specifikoni veten duke përdorur atributin Veprim.

Në mënyrë tipike, një program përpunimi është një skrip i shkruar në PHP. Prandaj, në atributin Action të etiketës Form, do t'ju duhet të regjistroni shtegun për në skedarin e këtij skripti, i cili ndodhet në serverin tuaj pritës. Unë do të jap si shembull duke u abonuar në burimin RSS të blogut tim nëpërmjet postës elektronike:

"name =" titull ">

Pak e pakuptueshme, ndoshta, duket në fillim, por mendoj se gjithçka do të bëhet e qartë me zhvillimin e historisë.

Etiketat e formularit dhe të hyrjes për krijimin e butonave, kutive të kontrollit dhe butonave të radios

Çdo formë duhet të jetë e mbyllur në etiketat hapëse dhe mbyllëse Forma... Ky është një lloj enë për krijimin e tyre. Ky etiketë ka një numër atributesh të detyrueshme dhe opsionale:

  1. Emri - një emër unik që duhet të specifikohet nëse disa forma ueb do të përdoren në skedarin Html ku jeni duke bërë diçka
  2. Veprimi - një atribut i kërkuar që tregon rrugën drejt skriptit, i cili do të marrë të dhëna prej tij për përpunim të mëtejshëm
  3. Metoda - duke përdorur atë ju mund të ndryshoni metodën e transferimit të të dhënave nga kjo formë ueb në skriptin e skedarit mbajtës. Nëse nuk e specifikoni, atëherë si parazgjedhje do të përdoret metoda Get, e cila, në fakt, është menduar kryesisht për variabla dhe mesazhe të shkurtra, dhe, për më tepër, duke transferuar të dhëna në mënyrë të hapur përmes shiritit të adresave të shfletuesit. Për të kaluar të dhënat e formularit në skriptin e mbajtësit, është akoma më mirë të përdoret Metoda POST projektuar posaçërisht për transmetimin e mesazheve me tekst në mënyrë të mbyllur

Le të shqyrtojmë pjesën tjetër të etiketave që ju lejojnë të krijoni një shumëllojshmëri formash në internet. Më i gjithanshëm është Input... Brenda tij duhet të përshkruhet atributi Type, i cili përcakton se çfarë saktësisht do të jetë forma HTML e krijuar me këtë etiketë.

Elementët e mëposhtëm mund të krijohen duke përdorur Input dhe Type:

  1. fushat e tekstit me një rresht (Lloji = "Tekst")
  2. fushat për futjen e një fjalëkalimi (Lloji = "Fjalëkalimi")
  3. kutitë e kontrollit (Lloji = "Kutia e kontrollit")
  4. butonat e radios (Lloji = "Radio")
  5. fushat e fshehura (Lloji = "Fshehur")
  6. butona të rregullt (Lloji = "Buton")
  7. butonat për dërgimin e të dhënave te mbajtësi (Lloji = "Dorëzo")
  8. butonat për sjelljen e webformës në gjendjen e tij origjinale (Lloji = "Rivendos")
  9. fushat për ngarkimin e skedarëve në server (Lloji = "File)
  10. butona me një imazh (Lloji = "Imazhi")

Hyrja nuk ka etiketë fundore. Si do të duket saktësisht forma e internetit e krijuar me të varet tërësisht nga parametri i specifikuar në atributin Type. Nëse Lloji nuk është specifikuar, atëherë një fushë teksti do të krijohet si parazgjedhje.

Shembuj të formave të krijuara në Input me vlera të ndryshme për Type

Atribute të tjera të etiketës Input dhe shembuj të përdorimit të tyre

Le të shohim se për çfarë shërbejnë pjesa tjetër e atributeve:

  1. Emri - nëse të dhënat do të dërgohen në skriptin e programit mbajtës, atëherë duhet të specifikoni parametrin për atributin Emri. Nën këtë emër, të dhënat e dorëzuara nga formulari do të shfaqen në programin e mbajtësit të informacionit.
  2. Madhësia - përdoret për të vendosur madhësinë e fushës së formës së krijuar në internet. Vlera tregohet në numrin e karaktereve që mund të përshtaten në këtë fushë. Nëse Madhësia nuk është e specifikuar, gjerësia e paracaktuar do të jetë 24 karaktere
  3. Maxlength - si parazgjedhje, numri i karaktereve që mund të futen në formën Html nuk është i kufizuar, por duke përdorur Maxlength mund të vendosni këtë kufizim. Nuk do të mund të futni më shumë karaktere sesa do të tregohen në fushë.
  4. Vlera - duke përdorur atë mund të vendosni se çfarë saktësisht do të shkruhet si parazgjedhje në fushë ose në butonin për dërgimin e të dhënave
  5. E zgjedhur është një atribut i flamurit që mund të futet në hyrje për butonat e radios (radio) ose për kutitë e kontrollit (kutia e kontrollit). Në këtë rast, ky buton radio ose kuti kontrolli do të jetë aktiv kur ngarkoni një faqe me një formular ueb (ata tashmë do të kenë një shenjë kontrolli)

Tani le të kalojmë mbi gjithçka shembuj të një formulari me Input... Pamja e fushës së tekstit është e ngjashme me pamjen e fushës për futjen e një fjalëkalimi, kështu që ne do të shqyrtojmë vetëm mundësinë e krijimit të një teksti, për shembull, për të futur një adresë emaili:

Shkruani E-mailin tuaj:

(! GJUHË: Tani le të shohim krijimin e një formulari në internet me butonat e radios (Radio):

A ju pëlqen burimi KtoNanNovenkogo.ru?

Po?
Jo?

Vini re se kjo formë përdor dy herë etiketën Input - një herë për të krijuar secilin nga dy butonat e radios. Për më tepër, secila prej tyre përmban atributin Emri me të njëjtën vlerë (rezultat), dhe vlera Vlera është e ndryshme (PO dhe JO).

Kjo do të thotë se gjatë përpunimit të tij, nëse zgjidhet ndonjë nga butonat e radios, do të dërgohet një variabël, emri i së cilës shkruhet në Emër, por vlera e kësaj variabli do të varet nga cili radio buton është zgjedhur.

Le të shqyrtojmë një shembull të krijimit të një formulari në internet me kutitë e kontrollit (Checkbox):

Cilin motor (s) sajti preferoni?

WordPress
Joomla
SMF

Kutitë e kontrollit ndryshojnë nga butonat e radios nga aftësia për të zgjedhur disa opsione në të njëjtën kohë. Emri përdoret për të përcaktuar në skedarin e mbajtësit se në cilën kuti të kontrollit janë kutitë e kontrollit dhe Vlera vendos vlerën që do t'i dërgohet mbajtësit (nëse Vlera nuk është specifikuar, atëherë teksti që ndodhet pranë kësaj kutie të kontrollit do t'i dërgohet mbajtësit) .

Zgjidh, Option, Textarea, Label, Fieldset, Legend - listat rënëse, zonat e tekstit dhe elementë të tjerë të formave të internetit

Për të filluar, unë dua t'ju kujtoj pak se çfarë janë, në fakt, format e internetit dhe pse ato nevojiten në faqet e faqes. Ato janë krijuar kryesisht për të përsëritur elementet e disponueshme në çdo sistem operativ në një mënyrë miqësore për përdoruesit: butonat, fushat e futjes së tekstit, listat rënëse, kutitë e kontrollit, butonat e radios dhe të ngjashme.

Të gjithë përdoruesit, pa ndonjë shpjegim shtesë, kuptojnë qëllimin e këtyre elementeve dhe nëse shohin butonin Html të formularit, kuptojnë se duhet të klikojnë mbi të.

Për më tepër, të gjithë elementët e tij përbërës (si Select, Option, Textarea, Label, Fieldset, Legend) janë tashmë pjesë pune të përfunduara (kontejnerë), për të futur të cilat do të mjaftojë vetëm përdorimi i etiketës së kërkuar me atributet dhe parametrat e nevojshëm.

Vetë shfletuesit dinë të shfaqin një element të veçantë të një forme ueb. Vërtetë, opsionet për shfaqjen e të njëjtit element të tij në shfletues të ndryshëm mund të ndryshojnë pak nga njëri-tjetri, por, si rregull, nuk është thelbësore.

Se. rezulton se format e ueb-it në Html janë një përpjekje për të transferuar çelësin elementet e përdorur në çdo sistem operativ, në faqet e faqes së internetit. Por pse mund të nevojiten në faqet e sajtit?

Në thelb, për të njëjtin qëllim për të cilin përdoren elementë të ngjashëm në sistemet operative - transferimi i të dhënave nga përdoruesi. Në rastin e formularëve, të dhënat nga përdoruesi transmetohen në server, ku përpunohen nga një program i veçantë (për fat të keq, gjuha e shënjimit të hipertekstit nuk lejon përpunimin e të dhënave).

Megjithëse, të dhënat mund të dërgohen jo vetëm në server, por edhe, për shembull, me e-mail në adresën e specifikuar në atributin Veprim të etiketës Form. Gjatë dërgimit të të dhënave nga Html në E-mail, përdoruesi që plotëson fushat, pasi të shtyp butonin për dërgimin e të dhënave, do të nisë programin e postës që përdoret në kompjuterin e tij si parazgjedhje.

Në këtë rast, etiketa hapëse e Formës duhet të duket diçka si kjo:

Zgjidh dhe Option - etiketat me rënie

Të gjithë elementët e formularit të internetit që krijojnë fusha me lista rënëse formohen në të njëjtën mënyrë. Së pari, kontejneri i kutisë së kombinuar vendoset duke përdorur një etiketë hapëse dhe mbyllëse Html Select. Dhe më pas brenda këtij kontejneri krijohen kontejnerë të veçantë me artikujt (elementet) e kësaj liste. Kjo bëhet duke përdorur etiketat e hapjes dhe mbylljes së opsioneve.

Rezulton diçka si kjo:

Por ky është një ndërtim i thjeshtuar, pasi Zgjidh dhe Option kanë një numër atributesh që përcaktojnë vetitë dhe pamjen e kutisë së listës rënëse të krijuar.

  1. Emri - duhet të specifikoni një emër unik për këtë element të formës së internetit të krijuar duke përdorur Zgjidh. Ky emër do t'i kalohet serverit në programin e mbajtësit të të dhënave si emër për variablin. Vlera e atributit Vlera (e vendosur në Option për çdo artikull) të artikullit të listës rënëse që zgjedh përdoruesi do të kalohet si vlerë e kësaj ndryshore.
  2. Madhësia - duke përdorur atë mund të vendosni numrin e artikujve të shfaqur. Me fjalë të tjera, me ndihmën e Size, ju mund të vendosni lartësinë e listës, të matur në numrin e linjave të shfaqura. Nëse nuk e specifikoni në mënyrë eksplicite vlerën Size në etiketën Select, atëherë do të përdoret vlera e paracaktuar e lartësisë së listës rënëse dhe do të jetë e ndryshme në mungesë ose prani të atributit Multiple në Select:
    1. Nëse Multiple është i pranishëm në Select, atëherë lartësia e listës rënëse në formën e ueb-it do të jetë e barabartë me numrin e elementeve të saj si parazgjedhje. ato. do të shfaqen të gjithë artikujt në listën rënëse me shumë zgjedhje. Shihni një shembull të një shumësi më poshtë. Nëse atributi Size në Select është vendosur në më pak se numri i artikujve, atëherë një shirit lëvizës do të shfaqet në të djathtë.
    2. Nëse nuk ka Multiple në Select, atëherë lartësia e listës rënëse në formularin e internetit do të jetë e barabartë me një rresht si parazgjedhje. ato. vetëm një rresht do të jetë i dukshëm, dhe pjesa tjetër e artikujve do të jenë të disponueshëm vetëm kur shtypni butonin e ashensorit (në të djathtë). Shih shembullin më poshtë
  3. Shumëfish - caktimi i këtij atributi në etiketën Select do t'ju lejojë të krijoni një listë rënëse me aftësinë për të zgjedhur disa artikuj në të njëjtën kohë. Lexoni më shumë rreth këtij atributi më poshtë.

Format dropdown mund të ndahen në dy opsione. Në opsionin e parë, mund të zgjidhni vetëm një element (vijë) të fushës me një listë rënëse, në opsionin e dytë, duke mbajtur Ctrl ose Shift, mund të zgjidhni disa nga artikujt e disponueshëm në të njëjtën kohë.

Në këtë rast, në opsionin e dytë, të dhënat për të gjithë artikujt e zgjedhur do të dërgohen në server. Cila listë rënëse do të krijohet përcaktohet nga prania ose mungesa e atributit Multiple në etiketën Select.

Shumëfishi është specifikuar në Zgjidh pa një parametër, pasi shkruhet thjesht Multiple dhe kaq. Nëse është e pranishme, atëherë do të krijohet një uebform me listë rënëse me mundësinë e zgjedhjes së shumëfishtë (duke mbajtur Ctrl ose Shift).

Një variant i fushës me një listë rënëse, në të cilën do të ketë zgjedhje e shumëfishtë e mundshme, do të duket diçka si kjo:

Në të djathtë është një shembull i një formulari në internet për një listë rënëse me shumë përzgjedhje, e cila bazohet në kodin e mësipërm. Siç mund ta shihni, duke mbajtur Ctrl ose Shift, mund të zgjidhni disa pika në të njëjtën kohë.

Nëse nuk ka atribut Multiple në etiketën Select, atëherë mund të zgjidhet vetëm një artikull i kësaj liste rënëse (rreshti).

Një shembull në të cilin mund të zgjidhet vetëm një artikull mund të shihet këtu:

Etiketa Zgjidhni faqen e internetit të Legjendës së Zgjedhur

Atributet e etiketës së opsionit


Në listën rënëse të krijuar (duke përdorur Zgjidh dhe Option), mund të shtoni diçka si ndarës me titullin e grupeve, të cilat do të ndryshojnë nga pjesa tjetër e artikujve të menusë në stilin e shkronjave.

Për të krijuar një grup nga artikujt në listën rënëse, duhet t'i mbyllni ato në etiketat hapëse dhe mbyllëse të formës Optgroup dhe në etiketën hapëse të Optgroup, shkruani atributin Label, si parametër i të cilit do duhet të futni emrin e dëshiruar të grupit.

Për shembull si kjo:

Zgjidh Etiketën
Uebsajti i Legjendës së Zgjedhur

Textarea - krijimi i një fushe teksti në një formë

Ekziston edhe një element tjetër i formave të internetit që nuk e kemi marrë parasysh - Textarea (një fushë me aftësinë për të futur tekst me shumë rreshta). Është krijuar duke përdorur etiketën e çiftuar Html Textarea. Për më tepër, në të mund të transferoni tekst në një linjë të re dhe ai do të transmetohet në server duke marrë parasysh transferimet e bëra.

Pra, për të krijuar një fushë teksti me shumë rreshta, duhet të regjistroni hapjen dhe mbylljen e Textarea, dhe midis tyre mund të shtoni tekst që do të jetë i dukshëm kur të ngarkohet faqja me formularin e internetit. Përdoruesi më pas mund ta fshijë këtë tekst dhe të shkruajë të tijin.

Çfarë mund të thoni për veten tuaj?

Atributet e mëposhtme mund të përdoren me Textarea:

  1. Emri - ju vendosni një emër për këtë element të formës së internetit. Do t'i kalohet serverit te programi i trajtuesit të të dhënave
  2. Cols - mund ta përdorni për të vendosur gjerësinë e fushës me shumë rreshta të krijuar në karaktere.
  3. Rreshtat - vendosni lartësinë e fushës së krijuar me shumë rreshta (në rreshta). Nëse teksti i futur nga përdoruesi ka më shumë rreshta se lartësia e fushës së tekstit me shumë rreshta, një shirit lëvizës do të shfaqet në të djathtë të fushës në formularin e internetit.
  4. Vetëm për lexim - i ndalon përdoruesit të ndryshojnë ose shtojnë tekstin e tyre në këtë fushë (vetëm për lexim).
  5. I çaktivizuar - përdoruesi, si në rastin e atributit Readonly, nuk do të jetë në gjendje të ndryshojë përmbajtjen e fushës së tekstit në formën e ueb-it, por do të ndryshojë ngjyrën e saj në gri, duke treguar se është joaktive.

Etiketa - për çfarë shërben kjo etiketë Html në formë?

Etiketa html Label ju lejon të zbatoni një veçori shumë interesante në format që disponohen në sistemet operative. Atje, nëse ju kujtohet, për të aktivizuar ndonjë element, nuk është e nevojshme të klikoni mbi të, mund të klikoni në emrin e këtij elementi - ai do të aktivizohet akoma.

Në format e uebit, kjo nuk ndodh si parazgjedhje - duhet të klikoni në vetë elementin e formularit Html për ta aktivizuar atë. Për shembull, duhet të klikoni në një kuti kontrolli në mënyrë që të vendosni një shenjë në të. Klikimi mbi tekstin pranë kutisë së kontrollit nuk do të ketë efekt. Provojeni vetë:

Etiketa
Zgjidhni
ZGJEDHUR

Siç mund ta shihni, klikimi në tekst për të aktivizuar këtë element është i padobishëm - duhet ta klikoni vetë. Kjo është pikërisht gjendja e punëve dhe ka për qëllim të rregullojë etiketën Label. Kjo ju lejon të bëni tekstin pranë elementit të formës së internetit të klikueshëm, gjë që është padyshim do të përmirësojë përdorshmërinë.

Por si të lidhni elementin Html të formës dhe tekstit? Për ta bërë këtë, shtoni një ID me një parametër unik në atribut dhe rrethoni tekstin me hapjen dhe mbylljen e etiketave Label. Dhe kjo nuk është e gjitha. Në etiketën e hapjes Label, duhet të regjistroni atributin For, parametri i të cilit duhet të jetë saktësisht i njëjtë me atributin ID në etiketën Html të elementit të formës. Rezulton diçka si kjo:



Siç mund ta shihni, tani, falë përdorimit të Label, elementët e formës së internetit mund të aktivizohen jo vetëm duke klikuar mbi të, por edhe duke klikuar në tekstin që ndodhet pranë tij.

Fieldset dhe Legend - thyerja e formës në copa

Me siguri e keni parë shpesh se format e mëdha në Html ndahen në grupe (Fieldset), të cilat janë të rrethuara nga një kornizë dhe secili grup i tillë ka titullin e tij (Legend). Kjo bëhet me vetëm dy etiketa: Fieldset dhe Legend. Ata janë të çiftëzuar, d.m.th. ato duhet të kenë një hapje dhe mbyllje pa dështuar.

Pra, për të krijuar një grup pjesësh përbërëse, duhet t'i mbështillni të gjitha këto pjesë në etiketat hapëse dhe mbyllëse të Fieldset. Dhe për të vendosur një titull (Legjendë) për këtë grup, duhet që menjëherë pas hapjes Fieldset të shkruani një strukturë nga Legjenda hapëse dhe mbyllëse, midis së cilës duhet të futni tekstin e titullit të grupit.

Këtu është një shembull i krijimit të grupeve duke përdorur Fieldset dhe Legend:



Paç fat! Shihemi së shpejti në faqet e faqes së blogut

mund të shikoni më shumë video duke shkuar te
");">

Ju mund të jeni të interesuar

Zgjidh, Option, Textarea, Label, Fieldset, Legend - Etiketat Html të formës me zbritje dhe të kutisë së tekstit
Listat në kodin Html - etiketat UL, OL, LI dhe DL
MailTo - çfarë është dhe si të krijoni një lidhje në Html për dërgimin e një emaili
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e hijeve RGB në tabela, Yandex dhe programe të tjera

Format HTML janë elementë komplekse të ndërfaqes. Ato përfshijnë elemente të ndryshme funksionale: fushat hyrëse dhe