Šajā norādījumā uzzināsi, kā ar select-elementu HTML varēsi izveidot izvēlamos sarakstus, ko sauc arī par vienkāršiem nolaišanās izvēlnēm. Šī elementu kombinācija ir būtiska lietotāju mijiedarbībai ar web formas, jo tā ļauj lietotājiem izvēlēties no iepriekš definētajiem variantiem. Mēs apskatīsim gan vairākās izvēlēs, gan vienkāršos sarakstus un pārrunāsim stila iespējas, kas tev ir pieejamas.
Svarīgākie secinājumi
- select-elementu kombinē ar option-Tagu, lai nodrošinātu izvēles iespējas.
- Izvēlnes lauku noformējums ir ierobežots un atšķiras atkarībā no pārlūkprogrammas.
- Ja vēlies lielāku kontroli pār izvēlnes lauku noformējumu, ieteicams apsvērt citas tehnoloģijas kā JavaScript vai ietvarus.
Pēc soļiem rokasgrāmata
Lai izveidotu vienkāršu nolaistās izvēlnes joslai, sāc ar select-elementu. Te noteiksi ievades lauku, kurā lietotāji var veikt savu izvēli.
select-elementam ir jābūt name-attribūtam, lai tu varētu identificēt izvēlēto opciju forma iesniegšanas laikā. Šeit mēs nosaucam to par "favorite_fruits", lai iegūtu iecienītās augļus.
Iekš select-elementa pievieno vairākus option-Tagus, kas attēlo atsevišķās izvēles iespējas. Katram no šiem Tagiem ir gan redzams teksts, gan pamatvērtība, ko izmantos formu iesniegšanas laikā.
Veic nolaistās izvēlnes joslai izveidot, varēsi size-attribūtu iestatīt uz 1, kas nozīmē, ka vienlaicīgi tiks rādīts tikai viens elements. Tas nodrošina, ka tas darbojas kā parasti nolaistās izvēlnes.
select tam ir jābūt arī multiple-attribūtam. Ja pievienosi šo atribūtu, lietotāji var izvēlēties vairākas opcijas vienlaicīgi, līdzīgi kā ar izvēles rūtiņām. Lietotāji var izmantot kontroltaustiņu (vai komandas taustiņu Mac datoros), lai atlasītu vairākus elementus.
Kad veic izvēli un iesniedz formu, izvēlēto opciju vērtība tiks nosūtīta uz serveri. Lai gan dati tiek pārraidīti kā masīvs, ir svarīgi, lai, izmantojot multiple, katru izvēlēto vērtību atrastu masīvā.
option-element var saturēt tikai vienkāršu tekstu. HTML kods, piemēram, attēli vai saites, option-Tagos netiks atbalstīts. Tomēr izskatu vari pielāgot, izmantojot CSS, piemēram, fontus vai fona krāsu.
Lai veiktu stilu pielāgojumus, piemēram, fontu un krāsu, vari izmantot optionu stilizācijas atribūtu. Tas ir vieglāk īstenot sarakstā, kas parādās normāli, jo tev ir lielāka kontrole pār izkārtojumu.
Atkarībā no pārlūkprogrammas, izvēlnes elementu izskats var atšķirties. Dažas pārlūkprogrammas, piemēram, var citādi attēlot izvēlnes fona krāsu un tekstu. Ir svarīgi ņemt vērā šo faktoru, veidojot savu formu.
Ja plāno attēlot attēlus kā izvēles iespējas, tas ar select paliek sarežģīti. Būtu saprātīgāk izmantot JavaScript vai ārējas UI bibliotēkas, jo parastus HTML elementus nevar ietvert option-Tagos.
Lai īstenotu sarežģītāku UI elementu, kuram nepieciešams elastīgs noformējums, iespējams, kombināciju no attēliem un tekstu, būtu viedāk izveidot savu nolaistās izvēlnes variantu vai izmantot esošu ietvaru.
Kopsavilkums - Pamācība par veidlapu izveidi ar izvēles sarakstiem
Šajā pamācībā tu mācēji, kā HTML izveido izvēles sarakstu ar select elementu. Šeit bija uzsvars uz izvēles lauku praktisko lietojumu, iespējām veikt vairākas izvēles un pamata stilizācijas opcijām.
Bieži uzdotie jautājumi
Kāda ir atšķirība starp un?Galvenā atšķirība ir tāda, ka piedāvā nolaižamo sarakstu, no kura tiks veikta izvēle, savukārt input type="radio" parāda vairākas opcijas, no kurām var izvēlēties tikai vienu.
Kā varu izvēlēties vairākas opcijas iekšpusē?Tu vari piemērot multiple atribūtu savam -elementam, lai ļautu veikt vairākas izvēles.
Vai es varu izmantot HTML iekšā?Nē, -elementi atbalsta tikai vienkāršu tekstu un ne HTML saturu.
Kā varu pielāgot elementu izskatu?Tu vari izmantot CSS, lai veiktu pamata stilu izmaiņas, tomēr iespējas ir ierobežotas, jo ne visas CSS īpašības ir pielietojamas -elementiem.
Kāda ir ieteicamā metode, ja vēlos izmantot attēlus izvēlēs?Lai izmantotu attēlus izvēles laukos, būtu labāk izmantot JavaScript vai ārējas UI bibliotēkas, jo -elementi neatbalsta HTML saturu iekšpusē.
