Šodienas norādē parādīšu, kā grupēt opcijas izvēles vai nolaišanās sarakstā. Opciju grupēšana ir īpaši noderīga, ja ir daudz izvēles iespēju un vēlaties uzlabot sava tīmekļa lietojumprogrammas lietotāja draudzīgumu. Tu iemācies nozīmīgākās īpašības, kā arī dažus labākos veidus, kā efektīvi ieviest grupēšanu. Ļauj mums nekavējoties iegrimt tēmā!
Svarīgākās atziņas
- Izveidojot tīmekļa formas, ir svarīgi pareizi iestatīt option elementu vērtību, lai nodrošinātu skaidrību un lietojumprogrammas draudzību.
- Opciju grupēšana notiek ar -elementu.
- Ir arī veidi, kā izcelt un iepriekš norādīt izvēli.
Pēc soļiem vadība
Šeit redzams, kas notiek, ja es izvēlos Apple opciju, nenorādot value atribūtu. Rādītais teksts tiek izmantots, lai nosūtītu vērtību. Ja es tagad izvēlos apelsīnu opciju, tiek nodots mazais burti 'orange' kā vērtība.
Tāpēc mana rekomendācija ir skaidra: vienmēr izmanto value atribūtu un norādi savas iekšējās nosaukums, piemēram, mazos burtos. Ja to nedarīsi, nodotās vērtības var būt neapskatāmas un maznozīmīgas.
Jebkurā gadījumā, ja vēlies jau pirms formas ielādes atlasīt konkrētu vērtību, vari izmantot atribūtu selected. Tādā veidā vari, piemēram, iestatīt Apple vai Strawberru kā noklusējumu.
Tagad vēlamies pievērsties opciju grupēšanai. Tas tiek veikts ar optgroup elementu. Piemēram, pieņemsim, ka vēlamies sadalīt augļu sarakstu divās grupās. Vienu vienkārši nosauksim augi 1 un otru augi 2.
Šajā grupā varam pievienot atbilstošās <option>-elementus, piemēram, Apple, Orange un Strawberry. Vari izveidot arī otro grupu, kas satur arī noteiktus augļu variantus.
Tagad, ja izveidosim augi 2 grupu, viss būs labi strukturēts un skaidrs. Viena bieži sastopama kļūda ir mēģināt aizvērt
Šeit redzam, kā grupējumi tiek parādīti lietotāja saskarnē. Opcijas grupās parasti ir pelēks fons. Tas lietotājiem vizuāli norāda, ka tās pieder noteiktai kategorijai.
Tagad vari turpināt pielāgot grupu izkārtojumu. Piemēram, vari mainīt teksta opcijas fonta lielumu vai svaru.
Lai uzlabotu izskatu, vari piemērot CSS stilus. Ja, piemēram, iestatīsi font-size uz 24px, izkārtojums mainīsies atbilstoši, un attēlojums tiks izcelts gan krāsā, gan lielumā.
Svarīgi zināt, ka nevari pielāgot individuālas opcijas vērtības starp grupām. Ja maini fonta lielumu vienā grupā, tas ietekmēs arī citas opcijas tajā pašā grupā.
Ļoti noderīga funkcija ir iespēja veikt vairāku izvēli. Ja pievienoji atribūtu multiple, lietotāji var izvēlēties vairākas opcijas no dažādām grupām, turējot nospiestu peles pogu.
Tā, zinot, kā izveidot opciju grupas nolaižamajā sarakstā, vari padarīt savus tīmekļa veidlapas ar lietotājam draudzīgāku un intuitīvāku.
Kopsavilkums
Šajā vadlīnijā esi iemācījies, kā grupēt opcijas nolaižamajā izvēlnē. Pareiza value atribūtu iestatīšana un
Bieži uzdotie jautājumi
Kāda ir value atribūta funkcija tagā?Value atribūts norāda izvēles vērtību, kas tiks izmantota, kad veidlapa tiks iesniegta.
Kā noklusējuma iestatīt izvēles opciju?Tu vari izmantot selected atribūtu attiecīgajā tagā, lai parādītu izvēles opciju kā iepriekšēji iestatītu.
Kā grupēt opcijas izvēles sarakstā?Lai izveidotu opciju grupas, izmanto tagu un nosauc grupas ar label atribūtu.
Vai varu pielietot CSS stilus izvēles elementiem?Jā, tu vari pielietot CSS stilus izvēles elementiem, taču stila iespējas tagiem ir ierobežotas.
Kā aktivizēt vairākas izvēles nolaižamajā izvēlnē?Iestatiet multiple atribūtu tagā, lai lietotājiem būtu iespēja izvēlēties vairākas opcijas.
