Butoni i dorëzimit të formularit HTML me listën zbritëse. Elementet e formës HTML - një listë zbritëse (zgjidhni, opsioni, etiketat e grupit të grupeve), një zonë teksti dhe duke aplikuar një etiketë, terren dhe legjendë. Atributet e etiketës së grupit
Hartimi i listës më të thjeshtë në HTML është i lehtë për tu krijuar duke përdorur etiketën e zgjedhur. Ky është një etiketë kontejner, etiketat e opsioneve janë të vendosura në të - ato përcaktojnë artikujt e listës.
Ekzistojnë disa mundësi për listat që mund të bëhen duke përdorur etiketën zgjedhëse: një listë zbritëse (opsionet lëshohen pasi të klikoni në fushën kryesore ose rri pezull mbi të) dhe një listë me shumë zgjedhje - në të përdoruesi mund të zgjedhë disa artikuj. Të parat janë më të zakonshmet; ato janë një element i rëndësishëm navigimi në faqet e internetit moderne. Lista zbritëse me zgjedhje të shumëfishtë mund të përdoret, për shembull, në katalogë ku duhet të zgjidhni disa karakteristika të produktit.
Ju mund të ndryshoni pamjen dhe vetitë e listave duke përdorur atribute të përgjithshme dhe të personalizuara.
Zgjidhni atributet e etiketave
1. Shumëfishtë - vendos zgjedhje të shumëfishtë.
2. Madhësia - përcakton numrin e vijave të dukshme në listë, domethënë lartësinë. Dhe këtu gjithçka varet nëse atributi i shumëfishtë është i pranishëm apo jo. Nëse po, dhe nuk specifikoni madhësinë, atëherë në prani të shumëfishtë, përdoruesi do të shohë të gjitha zgjedhjet e mundshme, nëse shumëfishi mungon, atëherë do të tregohet vetëm një rresht dhe pjesa tjetër e vizitorit mund të lexojë kur të klikojë në ikonën e ashensorit në anën e djathtë. Nëse specifikohet madhësia dhe është më pak se numri i opsioneve, atëherë një shirit lëvizës do të shfaqet në të djathtë.
3. Emri - emri. Lista zbritëse mund të shpërndahet, por mund të jetë e nevojshme të ndërveproni me mbajtësin në server. Si rregull, emri tregohet ende.
Etiketa e zgjedhjes nuk i ka atributet e kërkuara, ndryshe nga etiketimi i opsionit.
Atributet e etiketës së mbivendosur
- Zgjedhur - krijuar për të zgjedhur një artikull të listës. Përdoruesi do të jetë në gjendje të zgjedhë më shumë se një artikull nëse vendoset atributi i shumëfishtë (shih më lart).
- Vlera - vlera. Kjo atribut kërkohet. Web serveri duhet të kuptojë saktësisht se cilët artikuj të listës i ka zgjedhur përdoruesi.
- Etiketa Me këtë atribut, ju mund të shkurtoni listat e artikujve që janë shumë të gjatë. Për shembull, "Milano" do të shfaqet në vend të opsionit "Milano është qendra administrative e Lombardisë" e specifikuar në etiketë. Italia Veriore ". Kjo atribut përdoret gjithashtu për të grupuar sendet në një listë.
Sa i përket gjerësisë së listës, ajo vendoset si parazgjedhje në gjatësinë e tekstit më të gjerë në listë. Sigurisht, gjerësia mund të ndryshohet duke përdorur stilet HTML.
Tërheqje në mënyra të tjera
Mund të bëhet duke përdorur CSS, për shembull, një listë do të shfaqet kur kaloni mbi një element të faqes. JavaScript ofron mundësi të shkëlqyera për krijimin e listave, e cila thjeshtohet nga biblioteka Jquery. Lista zbritëse e lidhur me këtë bibliotekë mund të jetë shumë komplekse, për shembull, kaskadë. Kjo do të thotë, kur zgjidhni një artikull në një listë, shfaqet lista e mëposhtme, për shembull, ekziston një element i menusë "Veshje e grave" (kur rri pezull, atëherë kur zgjedh një nga llojet, për shembull, "Veshje të jashtme", një listë me elementët e mëposhtëm bie: xhaketa, parqe, pallto, pallto e shkurtër, pallto lesh, etj.
Ne kemi hequr mënyrat kryesore në të cilat mund të krijoni një listë zbritëse. Sigurisht, ka shumë nuanca në dhe në JavaScript që ju lejojnë të ndryshoni funksionalitetin dhe pamjen e listave.
Në këtë artikull, ne do të shikojmë elementet që ju lejojnë të krijoni lista zbritëse, të mësoni se si të krijoni grupe në këto lista, të konsideroni se si të çaktivizoni artikuj dhe madje edhe grupe të listave, të njiheni me elementin që ju lejon të krijoni një fushë me shumë rreshta të tekstit, mund ta përdorni më vonë brenda HTML format (elementi
Përveç kësaj, ne vendosëm një buton brenda formularit që shërben për të paraqitur formën (elementin) me butonin tip "paraqes formularin": type \u003d "paraqes").
Rezultati i shembullit tonë:
Këshillë për zonën e tekstit
Dhe kështu ju dhe unë do të shqyrtojmë shembullin përfundimtar dhe do të kalojmë në detyrën praktike të artikullit në këtë manual.
Falë etiketës (HTML)
Teksti i sugjerimit fshihet kur përdoruesi fut një vlerë (ndonjë karakter) në fushën e tekstit, nëse e hiqni atë, sugjerimi do të shfaqet përsëri.
Le të shohim një shembull të përdorimit:
lloji \u003d "dorëzoni" emrin \u003d "paraqisniInfo" vlera \u003d "(! LANG: dorëzoni" > !}
Në këtë shembull, ne kemi krijuar dy zona të tekstit (element
Vini re se nëse fusha e tekstit është vetëm për lexim, atëherë përmbajtja nuk mund të ndryshohet, por përdoruesi mund të lundrojë në përmbajtje, ta zgjedhë atë dhe ta kopjojë atë.
Përveç kësaj, ne vendosëm një buton brenda formularit që shërben për të paraqitur formën (elementin) me butonin tip "paraqes formularin": type \u003d "paraqes").
Rezultati i shembullit tonë:
Pyetje dhe detyra mbi temën
Përfundoni Aktivitetin e Praktikës përpara se të kaloni në temën tjetër:
- Duke përdorur njohuritë e marra, përpiloni formularin e mëposhtëm për postimin e vendeve të lira të punës:
Para se të vazhdoni me detyrën, hapni shembullin në një dritare të re dhe shqyrtoni me kujdes formularin në mënyrë që të përsërisni të gjitha pikat e tij. Për të përfunduar detyrën, do t'ju duhet njohuria nga artikulli. Nëse e keni humbur, atëherë kthehuni ta studioni.
Pasi të keni përfunduar ushtrimin, inspektoni kodin e faqes duke hapur shembullin në një dritare të veçantë për t'u siguruar që keni bërë gjithçka në mënyrë korrekte.
Një listë zbritëse në HTML mund të bëhet duke përdorur etiketën zgjedh... Përveç listës dropdown (ose "dropdown"), etiketa zgjedh ju lejon të krijoni një artikull të listës me zgjedhje të shumëfishtë. Sintaksa e përdorimit të etiketës zgjedh HTML duket si kjo:
Këtu duke përdorur etiketën opsion vendosen elementet e listës.
Rezultati i aplikimit:
Elektronikë Syroezhkin Chizhikov Kukushkina
SELECT atributet Tag
Merrni parasysh atributet e etiketave zgjedh:
- emri
- madhësia - numri i vijave të shfaqura në listë (numri);
- shumëfish - përfshin funksionin e zgjedhjes së shumëfishtë të artikujve në listën zbritëse;
- me aftësi të kufizuara - bllokon hyrjen në element;
- formë - ju lejon të shoqëroni një listë zbritëse me një formë (mund të jetë e nevojshme nëse vetë lista është jashtë formës së cilës duhet t'i bashkëngjitet). Forma id kalohet si argument.
Ndoshta këto janë të gjitha atributet kryesore të etiketës zgjedhtë cilat përdoren më së shpeshti. Tani le të shohim se si të bëjmë një listë zbritëse në HTML duke përdorur atributet e specifikuara:
Atributet e etiketës OPTION
Etiketoj opsionsiç është vërejtur, ju lejon të përcaktoni fëmijët e zbritjes zgjedhi cili, nga ana tjetër, vepron si një enë. Etiketoj opsion ka atributet e veta:
- me aftësi të kufizuara - vendos ndalimin e zgjedhjes së këtij artikulli të listës;
- emërtim - ju lejon të vendosni një etiketë për artikullin aktual të listës (në vend të tekstit të specifikuar në etiketë, shfaqet vlera e etiketës, e cila ju lejon të shfaqni një vlerë të shkurtuar); Shënim: atributi nuk mbështetet në shfletuesin Firefox
- të zgjedhura - artikulli aktual në listë do të zgjidhet si parazgjedhje;
- vlera - vlera që do të transmetohet në server;
Le të shohim një rast përdorimi të avancuar për etiketën opsion:
Rezultati i shembullit të dhënë do të duket kështu:
Z. Electronic Syroezhkin Chizhikov Kukushkina
Në konstruktorin e faqes "Nubex" është e mundur të krijoni forma arbitrare duke përdorur modulin e konstruktorit të formave. Funksionimi i listave zbritëse në "Nubex" përshkruhet në artikull:
Përshëndetje për të gjithë lexuesit e blogut tim. Sot do t'ju tregoj se si të bëni një listë zbritëse në HTML, cilat etiketime dhe atribute duhet të përdorni, dhe gjithashtu për cilat qëllime mund t'ju nevojiten.
Zgjidhni etiketën dhe krijoni një listë zbritëse
Pra, lista zbritëse në html krijohet duke përdorur etiketën e çiftuar, në të cilën vendosen etiketat e opsionit të çiftuar. Themshtë në to që shkruhen të gjitha opsionet që do të ofrohen kur të klikoni në listë. Shembull:
Zgjidhni një kafshë
Në këtë rast, ajo që shfaqet midis pjesës hapëse dhe mbyllëse të opsionit, do ta shihni në ekran dhe vlera që përmbahet në atributin e vlerës do të dërgohet në server ose do të përpunohet duke përdorur një skenar.
Lista html mund të jetë zgjedhje e rregullt ose e shumëfishtë. Për të bërë të mundur zgjedhjen e shumë sendeve, shtoni një atribut të zbrazët të shumëfishtë për të zgjedhur. Për të zgjedhur shumë vlera, mbajeni të shtypur ctrl dhe shtypni butonin e majtë të miut.
Një atribut tjetër i dobishëm është madhësia. Kjo ju lejon të zgjidhni sa rreshta të shfaqni në dropdown.
Një atribut tjetër është me aftësi të kufizuara. Kjo e bën listën të paarritshme për klikimin dhe shikimin e artikujve, por ajo është akoma e dukshme në faqe.
Kërkohet - atribut html5. Nëse specifikohet, formulari nuk do të dorëzohet pa zgjedhur një vlerë nga lista zbritëse. Në përgjithësi, bëhet një domosdoshmëri për përzgjedhje. Ndërsa atributi nuk punon në të gjithë shfletuesit.
Atributet e etiketës së opsionit
Në të vërtetë, zgjidhni shërben vetëm si një enë për artikujt e listës, ato vetë janë vendosur duke përdorur etiketën e opsionit. Ka një parametër vlere, siç e zbuluam tashmë, por përveç kësaj ka edhe të tjerë. Për shembull:
Disabled - e bën artikullin e listës të padisponueshëm për zgjedhje. Do të shfaqet, por nuk mund ta klikoni.
Zgjedhur - artikulli do të zgjidhet si parazgjedhje. Në një listë të rregullt, kjo atribut pa vlerë mund të vendoset vetëm në një artikull, në një listë shumës - në disa.
Sqarim i rëndësishëm për funksionimin korrekt
Nëse rezultati i përzgjedhjes duhet të dërgohet në server ose të përpunohet përmes skripteve, atëherë vendosni zgjedhjen në formë që të mos lindin gabime. Fakti është që lista zbritëse fillimisht u krijua saktësisht si një nga elementët e formës.
Për çfarë është zgjedhur?
Zakonisht mund të jetë e dobishme për ju nëse regjistroheni në faqen tuaj, ose dëshironi të bëni një sondazh. Elementi ka një pengesë - nuk e ndryshon pamjen e tij shumë mirë përmes css.
Si parazgjedhje, kur klikoni në listë, shfaqet një kornizë blu, e njëjta ngjyrë përdoret për të nxjerrë në pah ato sende të listës që kursori po rri pezull. Për të parandaluar shfaqjen e kornizës kur shtypeni, ose për t'u theksuar me një ngjyrë tjetër, mund të shkruani përzgjedhësin e mëposhtëm:
Zgjidh: fokus (
skica: 1px portokalli e ngurtë;
}
Korniza tani do të jetë portokalli.
Opsioni gjithashtu mund të stilizohet, por kur kaloni sipër një sendi, sfondi i tij bëhet blu dhe për ndonjë arsye nuk ndryshon përmes stileve.
Opsioni (
ngjyra: kafe;
sfondi: aqua;
}
Nga rruga, a mund të dijë dikush nga ju se si të ndryshojë ngjyrën e sfondit kur rri pezull mbi një artikull përmes css?
Kjo, në fakt, është e gjitha për etiketën e zgjedhur dhe përdorimin e saj. Nuk ka veçori shtesë në HTML për të. Të gjitha operacionet e tjera me të mund të kryhen duke përdorur javascript dhe php. Për shembull, nëse keni nevojë të krijoni një listë për zgjedhjen e vitit të lindjes dhe mund të ketë 80-100 mundësi të ndryshme, nuk do t'i shkruani ato me dorë?
Kjo është pikërisht ajo që ju nevojitet për të përdorur programimin, domethënë një lak. Mirë, në rregull, kjo është tashmë një temë për një bisedë tjetër, por për sot këto janë të gjitha informacionet që doja të të tregoja. Ju mund të familjarizoheni me etiketat e tjera themelore në HTML.
Përshëndetje për ju, të dashur lexues të faqes së blogut. Sot dua të flas për të tilla si format HTML. Cilado qoftë motori i faqes tuaj (cm), ai patjetër do të përdorë në një formë ose në një formë tjetër të krijuar duke përdorur etiketat e Formës dhe Hyrjes, si dhe atributet dhe parametrat Button, Checked, Value, Checkbox, Radio, Checkbox, Submit ...
Epo, ju gjithashtu mund të shtoni elemente në këtë për të krijuar lista zbritëse dhe fusha teksti - Zgjidhni, Opsion, Textarea, Etiketë, Fieldset, Legjenda.
Pse na duhen dhe si funksionojnë format në faqet e internetit moderne
E njëjta varg i kërkimit të faqes () krijohet duke përdorur këto etiketime dhe më pas kërkimi në projektin tuaj do të jetë i detyrueshëm. Prandaj, të kuptuarit se si janë rregulluar dhe puna nuk do t'ju dëmtojë aspak për punën e suksesshme në dizajn, dhe 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, kështu që është koha të kalojmë drejtpërdrejt në studimin e opsioneve të tyre të mundshme.
Po, unë gjithashtu dua t'ju kujtoj 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 saj, format përbëhen nga elemente, për të krijuar të cilat, brenda kontejnerit kryesor, nga etiketat e Formës, futen etiketime të ndryshme - Kontrolluar, Vlera, Kutia e zgjedhjes, Radio, Kutia e Kontrollit, Dorëzimi, etj. Thjesht duhet të vendosim kodin e tij në çdo vend të përshtatshëm të shabllonit të faqes duke specifikuar me etiketat dhe atributet e tyre se si duhet të duket.
Kjo mund të jetë një kuti teksti me një buton dorëzimi për pyetjen që keni futur, zgjedhje me butona radio (ku mund të lini të shtypur vetëm një nga butonat e dhënë), kuti të shumta teksti me një buton dorëzimi (), dhe më shumë.
Për shembull, në rastin e "kërkimit", duke përdorur atributin Vlera, ju mund të specifikoni se çfarë saktësisht do të shkruhet në butonin e vendosur pranë fushës për të futur një pyetje. Të dhënat e futura në formularë duhet të përpunohen më tej në një farë mënyre.
Për shembull, në rastin e reagimeve, përdoruesi, pasi plotëson fushën me emrin e tij, fut E-mailin e tij dhe tekstin e mesazhit, dhe më pas klikon në butonin e dërgimit, do të ketë të drejtën të shpresojë të dërgojë të dhëna nga formulari në E-mail të autorit të faqes. Por për fat të keq, nuk është e mundur të zbatohet kjo duke përdorur vetëm një gjuhë të shënjimit të hipertekstit ().
Për këto qëllime, kërkohet një program i veçantë 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 feedback-ut 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 Action.
Zakonisht një program përpunimi është një skenar i shkruar në PHP. Prandaj, në atributin Action të etiketës Form, do t'ju duhet të specifikoni rrugën për skedarin e këtij skenari, i cili ndodhet në serverin tuaj të pritjes. Unë do të jap si shembull një pajtim në RSS feed të blogut tim përmes E-mail:
Pak e pakuptueshme, ndoshta, duket në fillim, por mendoj se gjithçka do të bëhet më e qartë ndërsa vazhdojmë historinë.
Formoni dhe futni etiketat për krijimin e butonave, kutive të zgjedhjes dhe radio butonave
Çdo formë duhet të jetë e mbyllur në etiketat hapëse dhe mbyllëse Formularin... Ky është një lloj ene për krijimin e tyre. Kjo etiketë ka një numër atributesh të kërkuara dhe opsionale:
- Emri - një emër unik që duhet të specifikohet nëse disa forma uebi do të përdoren në skedarin Html ku jeni duke bërë diçka
- Veprimi - një atribut i kërkuar që tregon shtegun drejt shkrimit, i cili do të marrë të dhëna prej tij për përpunim të mëtejshëm
- Metoda - duke e përdorur atë mund të ndryshoni metodën e transferimit të të dhënave nga kjo formë në internet në skenarin e skedarit të mbajtësit. Nëse nuk e specifikoni, atëherë do të përdoret metoda Get, e cila, në fakt, ka për qëllim kryesisht për variablat dhe mesazhet e shkurtra, dhe, për më tepër, duke transferuar të dhëna në një mënyrë të hapur përmes shiritit të adresave të shfletuesit. Stillshtë akoma më mirë të përdoret metoda POSTkrijuar posaçërisht për dërgimin e mesazheve me tekst në një mënyrë të mbyllur
Konsideroni pjesën tjetër të etiketave që ju lejojnë të krijoni një larmi formash në internet. Më e shkathët është Hyrja... Brenda tij, duhet të përshkruhet tipari Type, i cili përcakton se çfarë saktësisht do të jetë forma HTML e krijuar me këtë etiketë.
Elementet e mëposhtëm mund të krijohen duke përdorur Input dhe Type:
- fushat e tekstit me një rresht (Lloji \u003d "Teksti")
- fushat për futjen e një fjalëkalimi (Lloji \u003d "Fjalëkalimi")
- kutitë e zgjedhjes (Lloji \u003d "Kutia e zgjedhjes")
- butonat e radios (Lloji \u003d "Radio")
- fushat e fshehura (Type \u003d "Fshehur")
- butonat e rregullt (Type \u003d "Button")
- butonat për dërgimin e të dhënave te mbajtësi (Type \u003d "Dorëzo")
- butonat për sjelljen e formës në internet në gjendjen e saj origjinale (Type \u003d "Reset")
- fushat për ngarkimin e skedarëve në server (Type \u003d "File")
- butonat me një imazh (Type \u003d "Image")
Hyrja nuk ka etiketë fundore. Se 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ë me tekst 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:
- Emri - nëse të dhënat do të dërgohen në skriptin e programit të mbajtësit, atëherë duhet të specifikoni parametrin për atributin Name. Nën këtë emër, të dhënat e paraqitura nga formulari do të shfaqen në programin e mbajtësit të informacionit.
- Madhësia - vendos 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ë specifikuar, atëherë gjerësia e paracaktuar do të jetë 24 karaktere
- Gjatësia e madhësisë - si parazgjedhje, numri i karaktereve që mund të futen në formën Html nuk është i kufizuar, por duke përdorur Maxlength mund ta vendosni këtë kufizim. Më shumë karaktere sesa do të specifikohen, nuk do të jeni në gjendje të futni në këtë fushë
- Vlera - duke e përdorur atë, mund të vendosni se çfarë saktësisht do të shkruhet në mënyrë të paracaktuar në fushë ose në butonin për dërgimin e të dhënave
- E zgjedhur është një atribut i flamurit që mund të futet në hyrje për butonat e radios (radio) ose për kutitë e zgjedhjes (kutia e zgjedhjes). Në këtë rast, ky buton radio ose kutia e zgjedhjes do të jetë aktiv kur ngarkoni një faqe me një formë në internet (tashmë do të ketë një shenjë kontrolli në to)
Tani le të kalojmë gjithçka shembuj të formave me Input... Pamja e fushës së tekstit është e ngjashme me pamjen e fushës së futjes së fjalëkalimit, kështu që ne do të shqyrtojmë vetëm opsionin e krijimit të Tekstit, për shembull, për të futur një adresë emaili:
Tani le të shohim krijimin e një forme në internet me radio butona (Radio):
Vini re se kjo formë përdor etiketën Input dy herë - një herë për të krijuar secilin nga dy butonat e radios. Për më tepër, secila prej tyre përmban atributin Emër me të njëjtën vlerë (rezultat), dhe vlera e vlerës është e ndryshme (PO dhe JO).
Kjo do të thotë që gjatë përpunimit të tij, nëse zgjidhet ndonjë nga butonat e radios, do të dërgohet një ndryshore emri i së cilës është shkruar në Name, por vlera e kësaj ndryshore do të varet nga cili radio buton është zgjedhur.
Le të shqyrtojmë një shembull të krijimit të një forme në internet me kutitë e zgjedhjes:
Kutitë e zgjedhjes 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 në të cilën kutinë e zgjedhjes janë kutitë e zgjedhjes dhe Vlera vendos vlerën që do t'i dërgohet mbajtësit (nëse Vlera nuk është specifikuar, atëherë teksti i vendosur pranë kësaj kuti do të dërgohet te mbajtësi).
Zgjidhni, Opsioni, Textarea, Etiketa, Fieldset, Legjenda - listat e lëshuara, zonat e tekstit dhe elementë të tjerë të formave të uebit
Si fillim, dua t'ju kujtoj pak se cilat janë, në të vërtetë, format e uebit dhe pse nevojiten në faqet e faqes. Ato janë krijuar kryesisht për të përsëritur elementët e disponueshëm në çdo sistem operativ në një mënyrë miqësore për përdoruesit: butonat, fushat e futjes së tekstit, listat e lëshimit, kutitë e zgjedhjes, butonat e radios dhe të ngjashme.
Të gjithë përdoruesit, pa ndonjë shpjegim shtesë, e kuptojnë qëllimin e këtyre elementeve dhe nëse shohin butonin Html të formularit, ata e kuptojnë se duhet të klikojnë mbi të.
Për më tepër, të gjithë elementët përbërës të tij (si Select, Option, Textarea, Label, Fieldset, Legend) janë tashmë boshllëqe (kontejnerë) të përfunduar, për të futur të cilat do të jetë e mjaftueshme vetëm për të përdorur etiketën e kërkuar me atributet dhe parametrat e nevojshëm.
Vetë shfletuesit dinë të shfaqin një element të veçantë të një forme në internet. 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, jo në mënyrë të konsiderueshme.
Kështu që rezulton se format e uebit në Html janë një përpjekje për të transferuar çelësin elementet e përdorura në çdo sistem operativ, në faqet e faqes në internet. Por pse mund të jenë të nevojshme në faqet e faqeve?
Në parim, 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 formave, të dhënat nga përdoruesi transmetohen në server, ku ato përpunohen nga një program i veçantë (për fat të keq, gjuha e shënimit 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 gjithashtu, për shembull, me email në adresën e specifikuar në atributin Action të etiketës Form. Kur dërgon të dhëna nga Html në E-mail, përdoruesi i cili plotëson fushat, pasi të ketë shtypur butonin për dërgimin e të dhënave, do të nisë programin e postës të përdorur në kompjuterin e tij si parazgjedhje.
Në këtë rast, etiketa e Formës hapëse duhet të duket diçka e tillë:
Zgjidh dhe Opsion - etiketat zbritëse
Të gjithë elementët e një forme në internet që krijojnë fusha me lista zbritëse formohen në të njëjtën mënyrë. Së pari, ena e kutisë së kombinuar vendoset duke përdorur etiketën hapëse dhe mbyllëse Html Select. Dhe pastaj brenda kësaj ene, krijohen kontejnerë të veçantë me sendet (elementet) e kësaj liste. Kjo është bërë duke përdorur etiketat e hapjes dhe mbylljes së Opsionit.
Rezulton diçka si kjo:
Por kjo është një ndërtim i thjeshtuar, pasi select dhe Option kanë një numër atributeshqë përcaktojnë vetitë dhe pamjen e dritares së krijuar.
- Emri - duhet të specifikoni një emër unik për këtë element të formës në internet të krijuar duke përdorur Select. Ky emër do të kalojë në server në programin e mbajtësit të të dhënave si emër për ndryshoren. Vlera e atributit Vlera (e vendosur në Opsion për secilin artikull) të artikullit të listës zbritëse që përdoruesi do të kalojë si vlerë e kësaj ndryshore.
- Madhësia - mund ta përdorni për të vendosur 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 specifikoni shprehimisht vlerën e Madhësisë në etiketën Zgjidh, atëherë do të përdoret vlera e paracaktuar e lartësisë së listës zbritëse dhe do të jetë e ndryshme nëse atributi Shumëfish mungon ose është i pranishëm në Zgjidh:
- Nëse Multiple është i pranishëm në Select, atëherë lartësia e listës zbritëse në formën e uebit do të jetë e barabartë me numrin e elementeve të tij si parazgjedhje. Ata. do të shfaqen të gjithë artikujt në zgjidhjen me zgjedhje të shumëfishtë. Shihni një shembull të një shumësi më poshtë. Nëse atributi Size në Select është vendosur në më pak se numri i artikujve, një shirit lëvizës shfaqet në të djathtë.
- Nëse nuk ka shumëfish në zgjedhje, atëherë lartësia e listës zbritëse në formën e uebit do të jetë e barabartë me një rresht si parazgjedhje. Ata. vetëm një rresht do të jetë i dukshëm dhe pjesa tjetër e sendeve do të jetë në dispozicion vetëm kur shtypni butonin e ashensorit (djathtas). Shihni shembullin më poshtë
- Shumëfishtë - caktimi i kësaj atribute në etiketën Zgjidh do t'ju lejojë të krijoni një listë zbritëse me aftësinë për të zgjedhur shumë sende në të njëjtën kohë. Lexoni më shumë rreth kësaj atributi më poshtë.
Formularët zbritës mund të ndahen në dy opsione. Në opsionin e parë, ju mund të zgjidhni vetëm një artikull (rresht) të fushës me një listë zbritëse, në opsionin e dytë - duke mbajtur Ctrl ose Shift mund të zgjidhni disa nga artikujt në dispozicion në të njëjtën kohë.
Në këtë rast, në opsionin e dytë, të dhënat për të gjitha sendet e zgjedhura do të dërgohen në server. Se cila listë do të krijohet përcaktohet nga prania ose mungesa e atributit të Shumëfishtë në etiketën Zgjidh.
Shumëfishohet në Zgjidh pa një parametër, pasi është shkruar thjesht Shumëfish dhe kaq. Nëse është i pranishëm, ai do të krijojë një formë ueb-formë të drop-down me mundësinë e zgjedhjes së shumëfishtë (mbajtja e Ctrl ose Shift).
Një variant i fushës me një listë zbritëse, e cila do zgjedhja e shumëfishtë e mundur, do të duket diçka si kjo:
Në të djathtë është një shembull i një forme në internet për një listë me shumë zgjedhje, e cila bazohet në kodin e mësipërm. Siç mund ta shihni, mbajtja e Ctrl ose Shift mund të zgjedhë disa artikuj në të njëjtën kohë.
Nëse nuk ka ndonjë atribut të Shumëfishtë në etiketën Zgjidh, atëherë mund të zgjidhet vetëm një artikull i kësaj liste zbritëse (rreshti).
Një shembull ku mund të zgjidhet vetëm një artikull mund të shihet këtu:
Zgjidhni etiketën Uebfaqja e Legjendës së Zgjedhur
Karakteristikat e etiketave të opsioneve
Në listën e krijuar drop-down (duke përdorur Select and Option), ju mund të shtoni diçka si ndarës me titullin e grupeve, të cilat do të ndryshojnë nga pjesa tjetër e menuve në stilin e shkronjave.
Për të krijuar një grup nga artikujt e listës në rënie, 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 tiparin Label, si një parametër i së cilës do t'ju duhet të futni emrin e dëshiruar të grupit.
Për shembull si kjo:
Zgjidh etiketën
Uebfaqja e 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 i kemi konsideruar - Textarea (një fushë me aftësi për të futur tekst me shumë rreshta). Krijohet duke përdorur etiketën e çiftuar Html Textarea. Për më tepër, në të mund të transferoni tekst në një rresht të ri 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 Textarea hapëse dhe mbyllëse, dhe midis tyre mund të shtoni tekst që do të jetë i dukshëm kur të ngarkohet faqja me formën e internetit. Përdoruesi mund ta fshijë këtë tekst dhe të shkruajë të tijën.
Siç mund ta shihni, klikimi mbi tekstin për të aktivizuar këtë element është i padobishëm - duhet ta klikoni vetë. Kjo është pikërisht ajo që etiketimi Label ka për qëllim të rregullojë. Ju lejon ta bëni tekstin pranë elementit të formës në internet të klikueshëm, gjë që është padyshim do të përmirësojë përdorshmërinë.
Por si të lidhim elementin dhe tekstin e formës Html? Për ta bërë këtë, shtoni një ID me një parametër unik në atribut dhe rrethoni tekstin me etiketat e etiketave hapëse dhe mbyllëse. Dhe kjo nuk është e gjitha. Në etiketën e etiketës hapëse, duhet të regjistroni tiparin For, parametri i së cilës 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, në sajë të përdorimit të Label, elementet e formës në internet mund të aktivizohen jo vetëm duke klikuar mbi të, por edhe duke klikuar mbi tekstin që ndodhet pranë tij.
Terreni dhe Legjenda - thyerja e formës në copa
Ju ndoshta keni parë shpesh që 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 është bërë me vetëm dy etiketa: Fieldset dhe Legjenda. Ata janë çiftuar, d.m.th. ato duhet të kenë një hapje dhe mbyllje.
Pra, për të krijuar një grup të pjesëve përbërëse, duhet të 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ë konstruksion nga Legjenda hapëse dhe mbyllëse, midis së cilës duhet të fusni tekstin e titullit të grupit.
Këtu keni një shembull të krijimit të grupeve duke përdorur Fieldset dhe Legend:
Paç fat! Shihemi së shpejti në faqet e faqeve të blogut
Ju mund të jeni të interesuar
Zgjidhni, Opsion, Textarea, Etiketë, Fieldset, Legjenda - Html etiketat e zbritjes dhe formës së kutisë së tekstit
Listat në kodin Html - etiketon UL, OL, LI dhe DL
MailTo - çfarë është ajo dhe si të krijoni një lidhje në HTML për dërgimin e një emaili
Si vendosen ngjyrat në kodin Html dhe CSS, zgjedhja e hijeve RGB në tabela, numri i Yandex dhe programe të tjera
Çfarë është gjuha e shënimit të hipertekstit Html dhe si të shikoni një listë të të gjitha etiketave në vlerësuesin W3C
Si të fusni lidhjen dhe foton (foto) në etiketat HTML - IMG dhe A
Tabelat në HTML - etiketat Table, Tr dhe Td, si dhe Colspan, Cellpadding, Cellspacing dhe Rowspan për t'i krijuar ato
Shkronjat (Fytyra, Madhësia dhe Ngjyra), Blockquote dhe Etiketat Para janë formatimi i tekstit trashëgimi në HTML të pastër (pa CSS)
Si të krijoni një hiperlidhje (A, Href, Target bosh), si ta hapni atë në një dritare të re në sit, si dhe ta bëni një fotografi një lidhje në kodin Html