Si të krijoni forma html. Krijimi i formave në HTML

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ë kërkuara 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 = "Button")
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:

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

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

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 mbajtës në të cilën kutia e kontrollit vendosen kutitë e kontrollit dhe Vlera cakton 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 trajtuesit ).

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.

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

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 vet (Legjenda). 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

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

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:

Ekziston një parametër teksti për të krijuar një fushë teksti. 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:

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 me këto atribute: emri - emri i zonës; cols - numri i kolonave në zonë; rreshta - numri i rreshtave; mbështjell - një mënyrë për të mbështjellë linjat (linjat e mbështjelljes, jashtë - mos i mbështjellni linjat).</p><p>Shtoni një fushë të zonës së tekstit në kodin e mësipërm:</p><p>Një koment: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

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 me parametrin e vlerës, i cili është përgjegjës për vlerën e elementit dhe me parametra emri, i cili specifikon emrin e listës, madhësinë, e cila është përgjegjëse për numrin e elementeve të dukshme.

Struktura e hyrjes në listë:

<
teksti
teksti

Në mënyrë që elementi të zgjidhet në ngarkimin e faqes, është e nevojshme në etiketë shtoni atributin e zgjedhur. Mundësi të ndryshme të ndërtimit të një artikulli të listës dhe kodit të tij janë paraqitur në figurë.

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ët 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.