Ngjarjet dropdown html php css. Ne krijojmë lista rënëse me stil. HTML e thjeshtë, me zbritje CSS

Përshëndetje, të dashur lexues të faqes së blogut. Sot dua të flas për diçka si format HTML. Cilido qoftë motori i faqes suaj (cms), ai patjetër do të përdorë forma në një formë ose në një tjetër, të krijuar duke përdorur etiketat Form dhe Input, si dhe atributet dhe parametrat Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .

Epo, ju gjithashtu mund t'i shtoni kësaj elemente për krijimin e listave rënëse dhe fushave të tekstit - Select, Option, Textarea, Label, Fieldset, Legend.

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

I njëjti varg kërkimi i faqes () krijohet duke përdorur këto etiketa dhe do të kërkohet një kërkim në projektin tuaj. Prandaj, të kuptuarit se si ato janë të strukturuara dhe funksionojnë nuk do t'ju pengojë aspak për të punuar me sukses në dizajn dhe nuk do të jetë e tepërt nëse e promovoni vetë.

Pra, duke justifikuar nevojën për të studiuar këto elemente, mendoj se nuk duhet të lindin 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ë cilave futen etiketa të ndryshme nga etiketat Form brenda kontejnerit kryesor - Checked, Value, Checkbox, Radio, Checkbox, Submit, etj. Thjesht duhet të vendosim kodin e tij në çdo të përshtatshme vendoseni në shabllonin e faqes, duke treguar përdorimin e etiketave dhe atributeve të tyre se si duhet të duket.

Kjo mund të jetë një fushë teksti me një buton për të paraqitur pyetjen e futur, zgjedhje me butona radio (ku mund të lini të shtypur vetëm një nga butonat e dhënë), fusha të shumta teksti me një buton për të paraqitur() dhe shumë më tepër.

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 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 të plotësojë fushën me emrin e tij, të futë postën elektronike të tij dhe tekstin e mesazhit dhe më pas të klikojë në butonin dërgoni, do të ketë të drejtë të shpresojë që të dhënat nga formulari do të dërgohet 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, do t'ju duhet një program i posaçëm përpunues, 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ë me email pronarit të burimit. Duhet të specifikoni se cili program do ta bëjë këtë vetë duke përdorur atributin Veprim.

Në mënyrë tipike, programi i përpunimit është një skrip i shkruar në PHP. Prandaj, në atributin Action të etiketës Form, do t'ju duhet të specifikoni shtegun për në skedarin e këtij skripti të vendosur në serverin tuaj pritës. Më lejoni t'ju jap një shembull të abonimit në burimin RSS të blogut tim nëpërmjet postës elektronike:

Mund të duket pak e paqartë në fillim, por mendoj se gjithçka do të bëhet më e qartë ndërsa historia vazhdon.

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 skedari Html ku po bëni diçka do të përdorë disa forma ueb
  2. Veprim - një atribut i kërkuar që tregon rrugën drejt skriptit në të cilin të dhënat prej tij do të transferohen për përpunim të mëtejshëm
  3. Metoda - me të 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ë, atëherë metoda Get do të përdoret si parazgjedhje, e cila, në fakt, është menduar kryesisht për variabla dhe mesazhe të shkurtra, dhe gjithashtu transmetimin e hapur të të dhënave përmes shiritit të adresave të shfletuesit. Për të transferuar të dhënat e formularit në skriptin e mbajtësit, është akoma më mirë të përdoret Metoda POST, i krijuar posaçërisht për transmetimin e mesazheve me tekst në mënyrë private

Le të shohim etiketat e mbetura që ju lejojnë të krijoni një shumëllojshmëri formash në internet. Më i gjithanshëm është Input. Brenda tij duhet të shkruhet atributi Type, i cili përcakton saktësisht se çfarë do të jetë forma HTML e krijuar duke përdorur këtë etiketë.

Duke përdorur Input dhe Type mund të krijoni elementët e mëposhtëm:

  1. fusha teksti me një rresht (Type = "Text")
  2. fushat për futjen e një fjalëkalimi (Type = "Fjalëkalimi")
  3. kutitë e kontrollit (Type = "Kutia e kontrollit")
  4. butonat e radios (Type = "Radio")
  5. fushat e fshehura (Type="Hidden")
  6. butona të rregullt (Type = "Button")
  7. butonat për dërgimin e të dhënave te mbajtësi (Type="Submit")
  8. butonat për sjelljen e formularit të uebit në gjendjen e tij origjinale (Type="Rivendos")
  9. fushat për ngarkimin e skedarëve në server (Type="File)
  10. butona me një imazh (Type = "Image")

Hyrja nuk ka një etiketë mbyllëse. Si do të duket saktësisht një formë ueb e krijuar duke përdorur atë varet tërësisht nga parametri i specifikuar në atributin Type. Nëse Lloji nuk është specifikuar, 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 hyrëse dhe shembuj të përdorimit të tyre

Le të shohim se për çfarë nevojiten atributet e tjera:

  1. Emri – nëse të dhënat duhet të dërgohen në skriptin e programit mbajtës, atëherë duhet të specifikoni një parametër për atributin Emri. Nën këtë emër, të dhënat e dërguara nga formulari do të shfaqen në programin e përpunuesit të informacionit.
  2. Madhësia - përdoret për të vendosur madhësinë e fushës së formës së internetit që po krijohet. 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 do të jetë e paracaktuar në 24 karaktere
  3. Maxlength - si parazgjedhje, numri i karaktereve që mund të futen në një formë 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 tregohen në fushë.
  4. Vlera - mund ta përdorni për të specifikuar se çfarë saktësisht do të shkruhet si parazgjedhje në fushë ose në butonin e dorëzimit të të dhënave
  5. E zgjedhur është një atribut i flamurit që mund të futet në butonat ose kutitë e kontrollit të hyrjes për radio. Në këtë rast, ky buton radio ose kuti zgjedhjeje do të jetë aktive kur të ngarkohet faqja me formularin e internetit (ata tashmë do të kenë një shenjë kontrolli)

Tani le të shohim 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ë le të shqyrtojmë vetëm opsionin e krijimit të një Teksti, për shembull, për të futur një adresë emaili:

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 e vlerës është e ndryshme (PO dhe JO).

Kjo do të thotë se gjatë përpunimit të tij, nëse zgjidhet ndonjë nga ndërprerësit, do të dërgohet një variabël, emri i së cilës shkruhet në Name, por vlera e kësaj ndryshore do të varet nga cili switch është zgjedhur.

Le të shohim një shembull të krijimit të një formulari në internet me kutitë e kontrollit:

Kutitë e kontrollit ndryshojnë nga butonat e radios duke ju lejuar të zgjidhni 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 vendosen kutitë e kontrollit dhe Vlera specifikon 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 - lista rënëse, zona teksti dhe elementë të tjerë të formës së internetit

Për të filluar, do të doja t'ju kujtoja pak se çfarë janë në të vërtetë format e internetit dhe pse nevojiten në faqet e internetit. Ato janë krijuar kryesisht për të replikuar elementet që gjenden në çdo sistem operativ në një formë miqësore për përdoruesit: butonat, fushat e futjes së tekstit, listat rënëse, kutitë e kontrollit, çelësat dhe të ngjashme.

Të gjithë përdoruesit, pa ndonjë shpjegim shtesë, kuptojnë qëllimin e këtyre elementeve dhe nëse shohin një buton të formularit HTML, 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ë boshllëqe të kompletuara (kontejnerë), për t'i futur të cilat thjesht duhet të përdorni etiketën e dëshiruar me atributet dhe parametrat e nevojshëm.

Vetë shfletuesit dinë të shfaqin këtë apo atë element të formës së internetit. Vërtetë, opsionet e shfaqjes për të njëjtin element në shfletues të ndryshëm mund të ndryshojnë pak nga njëri-tjetri, por, si rregull, jo dukshëm.

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

Në parim, për të njëjtin qëllim që elementë të ngjashëm përdoren në sistemet operative - transferimi i të dhënave nga përdoruesi. Në rastin e formularëve, të dhënat nga përdoruesi transferohen në server, ku përpunohen nga një program i veçantë (gjuha e shënjimit të hipertekstit, për fat të keq, 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 Veprim të etiketës Form. Kur dërgoni të dhëna nga Html në E-mail, përdoruesi që plotëson fushat, pasi të klikojë butonin dërgoni të dhënat, do të nisë programin e paracaktuar të postës që përdoret në kompjuterin e tij.

Etiketa hapëse e Formës në këtë rast duhet të duket diçka si kjo:

Zgjidh dhe Option - etiketat e listës rënëse

Të gjithë elementët e formës së uebit që krijojnë fushat e listës rënëse formohen në të njëjtën mënyrë. Së pari, kontejneri i kutisë së kombinuar vendoset duke përdorur etiketën e hapjes dhe mbylljes së 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 hapjen dhe mbylljen e etiketave Option.

Rezulton diçka si kjo:

Por ky është një dizajn i thjeshtuar, sepse Zgjidh dhe Option kanë një numër atributesh, të cilat përcaktojnë vetitë dhe pamjen e fushës së krijuar të listës rënëse.

  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 kësaj ndryshoreje do të jetë vlera e atributit Value (e vendosur në Option për çdo artikull) të artikullit të listës rënëse që zgjedh përdoruesi.
  2. Madhësia—mund ta përdorni për të vendosur numrin e artikujve të shfaqur. Me fjalë të tjera, duke përdorur Size 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, do të përdoret lartësia e paracaktuar e listës rënëse dhe do të jetë e ndryshme nëse atributi Select mungon ose është i pranishëm në atributin 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 si parazgjedhje do të jetë e barabartë me numrin e elementeve të saj. Ato. Të gjithë artikujt e listës rënëse të përzgjedhjes së shumëfishtë do të shfaqen. Shih shembullin e shumësit më poshtë. Nëse atributi Size në Select është caktuar në më pak se numri i artikujve, një shirit lëvizës do të shfaqet në të djathtë.
    2. Nëse Multiple nuk është i pranishëm në Select, atëherë lartësia e listës rënëse në formularin e uebit do të jetë një rresht si parazgjedhje. Ato. Vetëm një rresht do të jetë i dukshëm dhe artikujt e mbetur do të jenë të aksesueshëm vetëm duke shtypur butonin e ashensorit (në të djathtë). Shih shembullin më poshtë
  3. Shumëfish - caktimi i këtij atributi te etiketa 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 me lista rënëse 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 njëkohësisht disa nga artikujt e disponueshëm.

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, sepse Thjesht shkruhet Multiple dhe kaq. Nëse është e pranishme, do të krijohet një uebform me listë rënëse me aftësi të shumta përzgjedhjeje (duke mbajtur Ctrl ose Shift).

Një variant i një fushe 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ë ueb me përzgjedhje të shumëfishtë që bazohet në kodin e mësipërm. Siç mund ta shihni, duke mbajtur Ctrl ose Shift mund të zgjidhni disa artikuj në të njëjtën kohë.

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

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

Etiketa Zgjidhni Legjendën e sajtit të 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 tituj grupi, të cilët do të ndryshojnë nga pjesa tjetër e artikujve të menusë në stilin e shkronjave.

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

Për shembull si kjo:

Zgjidh Etiketën
Uebsajti i Zgjedhur Legjenda

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, mund ta mbështillni tekstin në të në një rresht të ri dhe ai do të transmetohet në server duke marrë parasysh përkthimet e bëra.

Pra, për të krijuar një fushë teksti me shumë rreshta, duhet të specifikoni një 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 formularin e internetit. Përdoruesi më pas mund ta fshijë këtë tekst dhe të shkruajë të tijin.

Siç mund ta shihni, klikimi në tekst për të aktivizuar këtë element është i padobishëm - duhet të klikoni vetë mbi të. Kjo është pikërisht gjendja që është krijuar për të korrigjuar etiketa 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 e formës Html dhe tekstin? Për ta bërë këtë, duhet të shtoni një ID me një parametër unik në atribut dhe teksti duhet të rrethohet nga hapja dhe mbyllja e etiketave Label. Dhe kjo nuk është e gjitha. Në etiketën Label hapëse duhet të përfshini atributin For, parametri i të cilit duhet të jetë saktësisht i njëjtë me atë të atributit 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 - ndarja e formës në pjesë

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 tij (Legjenda). Kjo zbatohet duke përdorur vetëm dy etiketa: Fieldset dhe Legend. Ata janë të çiftëzuar, d.m.th. Ata duhet të kenë një hapje dhe një mbyllje.

Pra, për të krijuar një grup pjesësh përbërëse, duhet t'i mbyllni të gjitha këto pjesë në etiketat e hapjes dhe mbylljes së 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 të një Legjende hapëse dhe mbyllëse, midis të cilave 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

Ju mund të jeni të interesuar

Zgjidh, Option, Textarea, Label, Fieldset, Legend - Etiketat Html për formën e listave rënëse dhe fushat e tekstit
Listat në kodin Html - etiketat UL, OL, LI dhe DL
MailTo - çfarë është dhe si të krijoni një lidhje në Html për të dërguar një email
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e hijeve RGB në tabela, prodhimi Yandex dhe programe të tjera
Çfarë është gjuha e shënjimit të hipertekstit Html dhe si të shikoni një listë të të gjitha etiketave në validatorin W3C
Si të futni një lidhje dhe një fotografi (foto) në etiketat HTML - IMG dhe A
Tabelat në Html - Etiketat Table, Tr dhe Td, si dhe Colspan, Cellpadding, Cellspacing dhe Rowspan për krijimin e tyre
Fonti (Fytyra, Madhësia dhe Ngjyra), Blockquote dhe etiketat para - formatimi i tekstit të vjetër në HTML të pastër (nuk përdoret CSS)
Si të krijoni një hiperlink (A, Href, Target bosh), si ta hapni atë në një dritare të re në sit, dhe gjithashtu të bëni një foto një lidhje në kodin Html

Gjatë dy viteve të fundit, zhvillimi i aplikacioneve në internet (faqet e internetit) ka përparuar shumë dhe ajo që kemi përdorur për të krijuar një faqe interneti më herët është tashmë e vjetëruar ose janë shfaqur metoda më të fundit.

Më parë, për të krijuar një listë rënëse në html ( në Anglisht. - dropdown), sapo kemi përdorur

Në këtë shembull ne etiketojmë

Në shfletues duket kështu:

Grupimi i artikujve të menusë

Le të shohim etiketën e mëposhtme , e cila përdoret për të grupuar të dhënat e lidhura në një listë rënëse emri = "bardh e zi" > label = "Lista e bardhë" >

Në këtë shembull, ne kemi theksuar 2 grupe me etiketën . Atributi i etiketës së elementit specifikon emrin e grupit të zgjedhur, të shkruar me shkronja të zeza:

Në shembullin e mëposhtëm, duke përdorur atributin boolean të çaktivizuar, ne do të çaktivizojmë një grup (" Grupi B"):

</span> Një shembull i përdorimit të atributit të çaktivizuar të një etikete HTML <optgroup><span>

Rezultati i shembullit tonë:

Çaktivizo listën dhe zgjidh shumë

</span> Atributet e çaktivizuara dhe të shumta të etiketave <select><span>

Në këtë shembull, ne krijuam dy lista rënëse. Për listën e parë, ne përdorëm atributin disabled, i cili parandalon ndërveprimin me listën (e çaktivizon atë).

Për listën e dytë, ne përdorëm atributin e shumëfishtë, i cili tregon se është e mundur të zgjidhni disa opsione në listë menjëherë (nëpërmjet Ctrl në Windows dhe nëpërmjet Komanda në Mac).

Në shfletues duket kështu:

Zona e tekstit

Rezultati i shembullit tonë:

Çaktivizimi i zonës së tekstit

Në analogji me elementët e etiketës të diskutuar më parë



type = "submit" name = "submitInfo" value = "submit" > !}

Në këtë shembull, ne kemi krijuar dy zona teksti (elementi