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

  1. 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).
  2. 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.
  3. 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

).

Lista zbritëse

Pika e parë në listë zakonisht shfaqet si e zgjedhur, por ju mund të shtoni atributin e zgjedhur në atë artikull për të vendosur një opsion të paracaktuar.

le të

</span>Shembull i përdorimit të një elementi <select><span>

Në këtë shembull kemi etiketuar

Në shfletuesin duket kështu:

Grupimi i artikujve të menusë

Le të hedhim një vështrim në etiketën tjetër e cila përdoret për të grupuar të dhënat e lidhura në një zbritje name \u003d "e zezë dhe e bardhë"\u003e etiketë \u003d "Lista e Bardhë"\u003e

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

Në shembullin vijues, duke përdorur tiparin boolean disable, ne do të çaktivizojmë një grup (" Grupi B"):

</span>Shembull i përdorimit të atributit me aftësi të kufizuara të etiketës HTML <optgroup><span>

Rezultati i shembullit tonë:

Rendit memecin dhe zgjidh shumë

</span>Karakteristikat e çaktivizuara dhe të shumëfishta <select><span>

Në këtë shembull, ne kemi krijuar dy lista zbritëse. Për listën e parë, ne përdorëm atributin e paaftë, i cili nuk na lejon të ndërveprojmë me listën (e çaktivizon atë).

Për listën e dytë, ne përdorëm atributin e shumëfishtë, i cili tregon se lejohet të zgjedhim disa opsione në listë në të njëjtën kohë (përmes Ctrl në Windows dhe përmes Komanda në Mac).

Në shfletuesin duket kështu:

Zona e tekstit

Rezultati i shembullit tonë:

Paaftësia e zonës së tekstit

Ngjashëm me elementet e diskutuar më parë, etiketimi


lloji \u003d "dorëzoni" emrin \u003d "paraqisniInfo" vlera \u003d "(! LANG: dorëzoni" > !}

Në këtë shembull, ne kemi krijuar dy zona të tekstit (element

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