Veb-sayt yoki blogni yaratish va uni mazmun bilan to'ldirish jarayonida, turli sabablarga ko'ra, ba'zida matnning bir qismini yashirish, ko'proq hajmli ma'lumotlarni hozircha yashirilgan blokga joylashtirish kerak bo'ladi, lekin baribir foydalanuvchiga boshqa narsa bor va unga keyingi qator yoki sahifaga o'tmasdan yashirin tarkibni ko'rish imkoniyatini bering.
Ilgari, bunday yechimni amalga oshirish uchun javascriptdan bir guruh foydalanilgan, ammo hozir bularning barchasi ajoyib xususiyatlar yordamida juda oson bajarilishi mumkin.

Bugun biz faqat CSS3 xususiyatlaridan foydalangan holda, ma'lum bir matn elementini bosganingizda ochiladigan sayt sahifalarida va alohida xabarlarda yashirin kontent bloklarini yaratishning eng oddiy usulini ko'rib chiqamiz. Kommutator bitta so'z, ajratilgan ibora, butun jumla yoki ma'lumot belgisi bo'lishi mumkin.
Bunday bloklar ko'pincha ko'p miqdordagi tarkibga ega sahifalarda qo'llaniladi, uni yanada tuzilgan va ixcham qilish uchun barcha tarkiblar foydalanuvchiga faqat sarlavhalar taqdim etiladigan guruhlarga bo'lingan, barcha matnlar sukut bo'yicha yashiringan. va ma'lum bir elementga bosish orqali ko'rish mumkin (yuqoriga qarang).

Keling, keraksiz suvsiz ishlashga harakat qilaylik, bu oddiy mexanizmni aniq misol bilan ko'rib chiqing va agar xohlasangiz, biror narsani tahrirlashingiz mumkin:

Misol № 1

Tanlanmagan va belgilanmagan matn qo'shimcha ma'lumotlarga ega bo'lgan ochiladigan bloklar uchun kalit sifatida ishlatiladi, uni bosish uchun bir ma'noli taklif bilan, siz qo'rqmasdan yoki ko'rish uchun shubhasiz qilishingiz kerak)))

Ko'rib turganingizdek, hamma narsa a'lo darajada ishlaydi, yashirin tarkib muammosiz paydo bo'ladi va sichqonchani engil bosish bilan yo'qoladi va shu bilan birga biz HTML ramkasida ham, formatlashda ham bajariladigan kodning minimal miqdoridan foydalandik. CSS uslublari. Qo'shimcha JavaScript kutubxonalarini ulamasdan, ular foydalanuvchi tomonidan o'chirilganmi yoki yo'qmi degan abadiy tashvish bilan.
Ushbu harakatlarning barchasini amalga oshirish CSS3 psevdo-sinfi tufayli mumkin bo'ldi :tekshirildi, radio tugmalari () kabi interfeys elementlariga qo'llaniladi. Tegda biz aslida nima qildik Biz tur atributiga qiymat belgilash katakchasini, shuningdek, noyob identifikatorga mos keladigan identifikator id="hd-1"ni tayinladik. for="hd-1" joriy blok kaliti. Displeyni o'rnatish orqali biz tasdiqlash qutilarini butunlay va abadiy yashiramiz: class.hide-da hech qanday xususiyat.
Aslida, bu erda tushuntirish uchun hech qanday maxsus narsa yo'q; yashirin bloklarni yoqish va o'chirishning butun mexanizmi uchta elementdan iborat:

• Belgilash katagi - teg ma'no bilan belgilash katagi xususiyat turi va maxsus bog'lovchi identifikator bilan
• Sarlavha (matnni almashtirish) - teg atribut uchun noyob identifikator qiymati bilan uchun, (identifikator teg identifikatori bilan bir xil bo'lishi kerak kiritish ma'no bilan belgilash katagi xususiyat turi).
• Kontent bloki div yorlig'i bo'lib, u yaxshi vaqtgacha, foydalanuvchi bosmaguncha, turli xil yashirin tarkibni (matn, tasvirlar, va hokazo) o'z ichiga oladi.

Umid qilamanki, mening xaotik tushuntirishimdan gap nimada ekanligi ayon bo'ldi. CSS yangi uslublarni qo'llaydi (psevdo-sinf yordamida tekshirildi) foydalanuvchi noyob identifikator tomonidan belgilash katakchasi bilan bog'langan elementni bosgandagina avval yashirin bo'lgan kontent blokini ko'rsatish uchun.

Bularning barchasidan kelib chiqadi muhim eslatma:

Xuddi shu sahifada bir nechta yashirin bloklardan foydalanganda, har bir radio tugmasi boshqa bloklardagi identifikatorlardan farq qiladigan noyob identifikatorga ega bo'lishi kerak.

Shunday qilib, so'zlar bilan biz nima qaerga va nima uchun ketishini aniqladik, endi butun tuzilmaning html ramkasini ko'rib chiqamiz:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Ochish uchun shu yerni bosing! < div>Yashirin tarkib ...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Batafsil o'qish uchun shu yerni bosing! < div>Yashirin kontent...

Ochish uchun shu yerni bosing!

Batafsil o'qish uchun shu yerni bosing!

Keyinchalik, biz to'g'ridan-to'g'ri CSS uslublarini shakllantirishga o'tamiz, ularsiz bu dizayn ishlamaydi. Kodning eng kami, hech qanday bezaksiz, siz uchun belgilash va yashirin matn ramkasini ko'rsatish uchun ochiladigan blok uchun fonni biroz ajratib ko'rsatdi. Siz bloklarni xohlaganingizcha loyihalashingiz, chegaralar, yumaloq burchaklar qo'shishingiz, matnni ajratib ko'rsatishingiz yoki .

1.CSS

. yashirish, . hide + label ~ div (ko'rsatish: yo'q; ) /* teg matn turi */. yashir + teg, . yashirish: belgilangan + yorliq (to‘ldirish: 0; rang: yashil; kursor: ko‘rsatgich; chegara - pastki: 1px nuqtali yashil; ). yashirish: belgili + label + div (displey: blok; fon: #efefef; - moz- box- soya: inset 3px 3px 10px #7d8e8f; - webkit- box- soya: inset 3px 3px 10px #7d8e8f; box- soya: inset 3px 3px 10px #7d8e8f; toʻldirish: 10px; )

/* katakchalar va kontent bloklarini yashirish */ .hide, .hide + label ~ div (displey: none; ) /* label text ko‘rinishi */ .hide + label, .hide:checked + label ( padding: 0; rang: yashil ; kursor: ko'rsatgich; chegara-pastki: 1px nuqta yashil; ) /* kalit faol bo'lganda yorliq matnining ko'rinishi */ .hide: checked + label (rang: qizil; chegara-pastki: 0; ) /* qachon belgilash katakchasi faol, kontentli bloklarni ko'rsatish */ .hide:checked + label + div (displey: blok; fon: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; quti soyasi: kiritish 3px 3px 10px #7d8e8f; toʻldirish: 10px; )

Bularning barchasi, astsetik misol uchun, to'liq etarli minimal. Ammo hech bo'lmaganda ba'zi yaxshi narsalarni qo'shmasak, biz umuman o'zimiz bo'lmaymiz va foydalanuvchiga qaerga bosish kerakligini vizual ravishda aytib berish yaxshiroqdir.
Ikkinchi misolda men plyus ko'rinishidagi oddiy belgini qo'shdim, bu bu erda boshqa narsa yashiringanligini aniq ko'rsatadi; bosilganda, u bir zumda minusga aylanadi va men yashirin bloklarga mazmunli kichik animatsiya qo'shdim. ular paydo bo'ladi va bularning barchasi faqat CSS3 sehrining yordami bilan.

2.CSS

/* belgilash katakchalari va kontent bloklarini yashirish */. yashirish, . hide + label ~ div (ko'rsatish: yo'q; ) /* teg matn turi */. yashirish + yorlig'i (chekka: 0; to'ldirish: 0; rang: yashil; kursor: ko'rsatgich; displey: inline-blok; ) /* kalit faol bo'lganda yorliq matnining ko'rinishi */. yashirish: belgilangan + yorliq (rang: qizil; chegara - pastki: 0; ) /* belgilash katakchasi faol bo'lganda, kontent bilan bloklarni ko'rsatish */. yashirish: belgili + label + div (displey: blok; fon: #efefef; - moz- box- soya: inset 3px 3px 10px #7d8e8f; - webkit- box- soya: inset 3px 3px 10px #7d8e8f; box- soya: inset 3px 3px 10px #7d8e8f;chet-chap: 20px; toʻldirish: 10px; /* paydo bo'lganda kichik animatsiya */- webkit- animatsiya: fade ease- 0. 5 soniyada; - moz- animatsiya: pasayish qulayligi- 0. 5 soniyada; animatsiya: pasayish qulayligi - 0. 5 soniyada; ) /* yashirin bloklar paydo bo'lganda animatsiya */@- moz- asosiy kadrlar oʻchib ketadi ( dan ( shaffoflik: 0 ; ) dan ( shaffoflik: 1 ) ) @- webkit- kalit kadrlar oʻchadi ( dan ( shaffoflik: 0 ; ) dan ( shaffoflik: 1 ) ) @ asosiy kadrlar oʻchadi ( dan ( shaffoflik: 0 ; ) dan ( shaffoflik: 1 ) ). yashirish + yorliq: oldin (fon rangi: #1e90ff; rang: #fff; tarkib: " \002 B"; displey: blok; float: chap; shrift o'lchami: 14px; shrift vazni: qalin; balandligi: 16px; chiziq balandligi: 16px; chegara: 3px 5px; matnni tekislash: markaz; kengligi: 16px; - webkit-chegara- radius: 50%; - moz- chegara- radius: 50%; chegara radiusi: 50%; ). yashirish: belgilangan + yorliq: oldin (kontent: " \221 2" ; }

/* belgilash katakchalari va kontent bloklarini yashirish */ .hide, .hide + label ~ div (displey: yo‘q; ) /* yorliq matni ko‘rinishi */ .hide + label (chekka: 0; to‘ldirish: 0; rang: yashil; kursor : ko'rsatgich; display: inline-block; ) /* kalit faol bo'lganda yorliq matnining ko'rinishi */ .hide:checked + label (rang: qizil; chegara-pastki: 0; ) /* belgilash katakchasi faol bo'lganda, ko'rsatish mazmunli bloklar */ . hide:checked + label + div (displey: blok; fon: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; chekka-chap: 20px; toʻldirish: 10px; /* paydo boʻlganda ozgina animatsiya */ -webkit-animation:fade ease-da 0,5s; -moz-animation:fade ease -0,5 soniyada; animatsiya: 0,5 soniyada pasayadi; ) /* yashirin bloklar paydo bo'lganda animatsiya */ @-moz-keyframes o'chib ketadi ( ( opacity: 0; ) dan ( opacity: 1 ) ) @-webkit-keyframes fade ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) @keyframes fade ( from ( opacity: 0; ) to ( opacity: 1 ) ) .hide + label:before ( background-color: #1e90ff; rang: #fff; tarkib: "\002B"; displey: blok; float: chap; shrift o'lchami: 14px; shrift vazni: qalin; balandligi: 16px; chiziq balandligi: 16px; chegara: 3px 5px; matnni tekislash: markaz; kengligi: 16px; -webkit-border-radius: 50%; -moz-chegara-radius: 50%; chegara radiusi: 50%; ) .hide:checked + label:oldin (kontent: "\2212"; )

Barcha hisob-kitoblarga ko'ra, usul shubhasiz yaxshi, lekin har doimgidek va hayratlanarli emas, taraqqiyotning abadiy tormozi, IE brauzeri, psevdo-sinf bilan bog'liq muammolar paydo bo'ladi. tekshirildi faqat ushbu brauzerning 9 va undan keyingi versiyalarini qo'llab-quvvatlaydi. IE ning eski versiyalari uchun hamma narsa bir xil bo'lib qoladi, siz javascriptdan foydalanishingiz kerak bo'ladi.

Yashirin belgilash katakchalaridan foydalanib, uslubli bloklar, slayderlar, galereyalar va boshqa ko'p narsalarni osongina amalga oshirishingiz mumkin.

Hurmat bilan, Endryu

Tavsif

HTML teg forma elementi bosilganda paydo bo'ladigan va saytga tashrif buyuruvchiga oldindan belgilangan variantlardan birini tanlash imkonini beruvchi ochiladigan (ochiladigan) ro'yxatni yaratish uchun foydalaniladi.

Element

ikki yoki undan ortiq tegni o'z ichiga olishi mumkin , ochiladigan ro'yxatda mavjud tanlovlarni belgilash. Birinchi yordamchi elementning matni dastlab ochiladigan ro'yxatda ko'rsatiladi, ya'ni u ro'yxat uchun standart qiymat bo'ladi. Standart qiymatni o'zgartiring yoki o'rnating Tanlangan atributni kerakli parametrga qo'shishingiz mumkin:

Volvo Saab VW Audi

Ochiladigan ro'yxatning kengligi tegda ko'rsatilgan eng uzun matn bilan belgilanadi .

Atributlar

avtofokus: Veb-sahifa yuklanganda element avtomatik ravishda fokus olishi kerakligini bildiradi. Avtofokusning mantiqiy atributi uchun mumkin bo'lgan qiymatlar: Misol »

Eslatma: Avtofokus atributi IE9 va undan oldingi versiyalarda va Firefox-da qo'llab-quvvatlanmaydi.

O'chirilgan: element faol emasligini bildiradi, ya'ni foydalanuvchi element bilan o'zaro aloqada bo'lmaydi. O'chirilgan mantiqiy atribut uchun mumkin bo'lgan qiymatlar:

Misol »forma: Element bog'langan shaklni belgilaydi. Atribut qiymati element identifikatoridir

. Bu atribut elementni joylashtirish imkonini beradi faqat elementning avlodi sifatida emas, balki hujjatning istalgan joyida .

Eslatma: Firefox-da forma atributi qo'llab-quvvatlanmaydi.

Bir nechta: bir vaqtning o'zida bir nechta variantni tanlash mumkinligini ko'rsatadi. Operatsion tizimga qarab bir nechta variantlar farqlanadi:

• Windows: Bir nechta variantni tanlash uchun CTRL tugmasini bosib turing.
• Mac: Bir nechta variantni tanlash uchun CMD tugmachasini bosib turing.

Bir nechta mantiqiy atribut uchun mumkin bo'lgan qiymatlar: Misol »

Eslatma: Bir nechta elementlarni tanlashning turli usullari va foydalanuvchilarga bir nechta tanlovlar mavjudligi haqida qo'shimcha bildirishnoma tufayli, ochiladigan ro'yxat o'rniga belgilash katakchalaridan foydalanish tavsiya etiladi.

Ism: ochiladigan ro'yxat nomini belgilaydi. U topshirilgandan so'ng shakl ma'lumotlariga kirish yoki JavaScript-dagi elementga murojaat qilish uchun ishlatilishi mumkin. o'lcham: ochiladigan ro'yxatdagi ko'rinadigan variantlar sonini belgilaydi. Agar o'lcham atributining qiymati 1 dan katta bo'lsa, lekin ro'yxatdagi parametrlarning umumiy sonidan kam bo'lsa, brauzer ko'rish uchun ko'proq imkoniyatlar mavjudligini bildirish uchun avtomatik ravishda aylantirish panelini qo'shadi.

Saytdagi HTML shakllarini belgilaydigan HTML teglari

Biz Internetda veb-saytlar va individual sahifalar yaratamiz tashrif buyuruvchilar bilan muloqot qilish.

HTML shakllari saytga tashrif buyuruvchilarni ro'yxatdan o'tkazish, interaktiv so'rovlar va ovoz berish uchun ishlatiladi, xabarlar yuborish, xaridlarni amalga oshirish va hokazo. HTML Shakl bitta maqsad uchun yaratilgan: dasturiy ta'minot skripti yoki elektron pochta orqali qayta ishlash uchun ma'lumotlarni to'plash va keyinchalik uzatish.

Misol HTML formasi | Saytga kiring

Teglar, atributlar va qiymatlar

- shaklini aniqlang.
• name="" - shakl nomini belgilaydi.
• method="" - formadan ma'lumotlarni jo'natish usulini belgilaydi. Qiymatlar: "olish" (standart) va "post" . Ko'pincha "post" usuli qo'llaniladi, chunki u katta hajmdagi ma'lumotlarni uzatish imkonini beradi.
• action="" - ma'lumotlar qayta ishlash uchun yuboriladigan urlni belgilaydi. Bizning holatda - enter_data.php ..
• - tugmalar, kalitlar, ma'lumotlarni kiritish uchun matn maydonlari kabi shakl elementlarini aniqlash.
• type="matn" - ma'lumotlarni kiritish uchun matn maydonini belgilaydi.
• type="password" - parolni kiritish maydonini belgilaydi, matn yulduzcha yoki doira shaklida ko'rsatiladi.
• type="checkbox" - radio tugmani belgilaydi.
• type="hidden" - yashirin shakl elementini belgilaydi - serverga qo'shimcha ma'lumotlarni uzatish uchun ishlatiladi.
• size="25" - matn maydonining belgilar bilan uzunligi.
• maxlength="30" - kiritilgan belgilarning ruxsat etilgan maksimal soni.
• value="" - agar u radio tugmalari yoki kalitlarga tegishli bo'lsa, ishlov berish uchun yuboriladigan qiymatni belgilaydi. Matn maydoni yoki tugma qismi sifatida ushbu atributning qiymati yuqoridagi misolda, masalan, Vasya yoki Login sifatida ko'rsatiladi.

Misol HTML formasi | Saytdagi sharhlar

Ism Pochta

Teglar, atributlar va qiymatlar

• action="http://site/comments.php" - formadagi ma'lumotlar yuboriladigan urlni belgilaydi.
• id="" - forma elementining nomi va identifikatorini belgilaydi.
• name="" - shakl elementining nomini belgilaydi.
• - shaklning bir qismi sifatida matn maydonini belgilash.
• cols="" - shakl matn maydonining ustunlar sonini aniqlaydi.
• rows="" - shakl matn maydonining qatorlar sonini belgilaydi.

Agar orasida matnni joylashtiring, u osongina olib tashlanishi mumkin bo'lgan misol sifatida maydon ichida ko'rsatiladi.

Misol HTML formasi | Ochiladigan ro'yxat

Birinchi pozitsiya Ikkinchi pozitsiya Uchinchi pozitsiya To'rtinchi pozitsiya

Teglar, atributlar va qiymatlar

• - tanlash uchun pozitsiyalar bilan ro'yxatni belgilang.
• size="" - ko'rinadigan ro'yxat pozitsiyalari sonini aniqlaydi. Agar qiymat 1 bo'lsa, biz ochiladigan ro'yxat bilan ishlaymiz.
• - ro'yxatning pozitsiyalarini (bandlarini) aniqlash.
• value="" - shakl tomonidan ko'rsatilgan url-ga ishlov berish uchun yuboriladigan qiymatni o'z ichiga oladi.
• seçilmiş="tanlangan" - misol sifatida ro'yxat elementini ajratib ko'rsatadi.

Misol HTML formasi | O'tkazish paneli bilan ro'yxat

Size="" atributining qiymatini oshirish orqali biz aylantirish paneli bilan ro'yxatni olamiz:

Birinchi pozitsiya Ikkinchi o'rin Uchinchi pozitsiya To'rtinchi pozitsiya

Birinchi pozitsiya Ikkinchi pozitsiya Uchinchi pozitsiya To'rtinchi pozitsiya

Ushbu parametr uchun bir nechta pozitsiyani tanlash imkonini beruvchi multiple="multiple" bayrog'idan foydalaning. Uning yo'qligi faqat bitta elementni tanlash imkonini beradi.

type="submit" - tugmani belgilaydi.

type="reset" - qayta o'rnatish tugmachasini belgilaydi.

value="" - tugmachadagi yorliqni belgilaydi.

Qo'shimcha qarang:

Tavsif

teg quyida ko'rsatilganidek, ochiladigan ro'yxat shaklida interfeys elementini, shuningdek, bitta yoki bir nechta tanlovli ro'yxatni yaratishga imkon beradi. Yakuniy ko'rinish tegning o'lcham atributidan foydalanishga bog'liq bu ro'yxatning balandligini belgilaydi. Ro'yxatning kengligi tegda ko'rsatilgan eng keng matn bilan belgilanadi , va uslublar yordamida ham o'zgartirilishi mumkin. Har bir element teg yordamida yaratiladi , bu konteynerga joylashtirilishi kerak . Agar siz ro'yxat ma'lumotlarini serverga yuborishni rejalashtirmoqchi bo'lsangiz, unda elementni joylashtirishingiz kerak forma ichida. Bu ro'yxat ma'lumotlariga skriptlar orqali kirishda ham zarur.

Sintaksis

1-band 2-band

Atributlar

Ba'zi klaviatura yorliqlari yordamida ro'yxatga o'tish imkonini beradi. Roʻyxatni sahifa yuklangandan soʻng fokus olish uchun oʻrnatadi. Elementga kirish va o'zgartirishni bloklaydi. Ro‘yxatni shakl bilan bog‘laydi. Bir vaqtning o'zida bir nechta ro'yxat elementlarini tanlash imkonini beradi. Serverga yuboriladigan yoki skriptlar orqali kirish uchun element nomi. Shaklni yuborishdan oldin ro'yxat tanlanishi kerak. Ko'rsatiladigan ro'yxat qatorlari soni. Tab tugmachasini bosganda elementlar orasidagi o'tish ketma-ketligini belgilaydi

Yopish belgisi

Majburiy.

HTML5 IE Cr Op Sa Fx

Qahramonni tanlang Cheburashka Timsoh Gena Shapoklyak Kalamush Larisa

HTML parametr tegi foydalanuvchiga oldindan belgilangan qiymatlar toʻplamidan bitta variantni tanlash imkonini beruvchi ochiladigan roʻyxatni yaratish uchun ishlatiladi.

Foydalanuvchiga ko'rinadigan matn qiymat atributida ko'rsatilgan matndan farq qilishi mumkin. Ochiladigan ro'yxatni qanday yaratish mumkin:

Yashil Sariq Qora

• Ochiladigan ro'yxat teg yordamida yaratiladi ;
  Teg ichida
  tanlash imkoniyatlari teg yordamida aniqlanadi ;
• Tegda PHP, JS, JQuery va boshqalar yordamida tanlangan parametrga kirish uchun qiymat atributidan foydalanishingiz mumkin.

Ochiladigan ro'yxatni shakllantirish uchun ID dan foydalanish o'rniga CSS sinfini belgilash ham mumkin.

Keyingi bo'limda men JavaScript/JQuery-da HTML ochiladigan ro'yxatidan foydalanish misollarini ko'rsataman. Misollar uslublarni qanday o'rnatishni ham ko'rsatadi CSS/CSS3 yordamida va Bootstrap ramka.

Oddiy ochiladigan ro'yxatni yaratish misoli

Ushbu misolda uchta variantdan iborat ochiladigan roʻyxat yaratish uchun HTML tanlash opsiyasidan foydalaniladi:

Yuqoridagi misolda ochiladigan roʻyxat yaratish uchun quyidagi belgilar qoʻllaniladi:

5 10 15 20 25

Qiymat atributidan foydalanish

Yuqorida aytib o'tilganidek, qiymat atributining qiymati sahifada ko'rsatilgan matndan farq qilishi mumkin. Masalan, siz foydalanuvchilar uchun mamlakatlar yoki ranglar nomlarini ko'rsatishingiz va qiymat atributida qisqa kodlardan foydalanishingiz mumkin.

Quyidagi misolda biz qiymat atributi bilan ochiladigan ro'yxatni yaratamiz:

Onlayn demo va kodni ko'ring

Teg uchun Quyidagi kod ishlatiladi:

Maroon Yashil Sariq Moviy Qizil

JavaScript-da tanlangan variantga kirishga misol

Endi tanlangan variantning qiymatiga kirish va ba'zi amallarni bajarish misolini yaratamiz. Yuqoridagi misoldagi kabi rang variantlari bilan bir xil ro'yxatni yaratamiz. Tanlangandan so'ng, ushbu rangni hujjatga qo'llash uchun tugmani bosing:

Onlayn demo va kodni ko'ring

Variant qiymati HTML uchun quyidagi kod ishlatiladi:

Maroon Yashil Sariq Moviy Qizil Boshqa

JavaScript-da parametrning qiymat atributining qiymatiga kirish uchun quyidagi kod qatoridan foydalaniladi :

var seltheme = document.getElementById(“selcolor”).value;

Tugma bosilganda, JS funksiyasi chaqiriladi, u ochiladigan ro'yxatda tanlangan qiymatni o'zgaruvchiga belgilaydi. Ushbu qiymat joriy hujjatga rang qo'llash uchun ishlatiladi.

JQuery-da ko'rinadigan matnga kirish

Bu safar tanlangan variantning qiymatiga kirish uchun JQuery-dan foydalanaman: matn va qiymat. Ushbu demoda men HTML-dagi variant tegidagi ko'rinadigan matnga kiraman:

Onlayn demo va kodni ko'ring

Tegdagi har bir variant uchun kodda

mazmuni matndan farq qiladi. Rangni tanlaganingizdan so'ng, jQuery ogohlantirishda ko'rinadigan matnni ko'rsatadi. Teg kodi Keyingisi:

Maroon Yashil Sariq Moviy Qizil

Mana bu qiymatga qanday kirish mumkin HTML JavaScript-ni tanlang:

var selectedcolor = $("#jqueryselect variant:tanlangan").text();

Siz qiymatga JQuery $.val() usuli yordamida ham kirishingiz mumkin:

var selectedcolor = $("#jqueryselect").val();

Yuqoridagi misolda ushbu qatorni almashtiring va kod ko'rinadigan matn emas, balki qiymat atributida qisqa kod/rang qiymatini ko'rsatadi.

PHP skriptida qiymat olish misoli

Ochiladigan ro'yxatdan tanlangan variantning qiymatini olishning ushbu misolida forma teg yordamida yaratilgan belgilash bo'limida. Ochiladigan ro'yxatdan rangni tanlagandan so'ng, "Yuborish" tugmasini bosing. Shakl ma'lumotlari bir xil PHP fayliga uzatiladi, shundan so'ng tanlangan rang ko'rsatiladi:

Onlayn demo va kodni ko'ring

Misolda ishlatiladigan shakl usuli POST, shuning uchun siz PHP $_POST[“”] massividan foydalanib shakl qiymatlarini olishingiz mumkin. Bu misolda ishlatiladigan forma kodi:

Rangni tanlang:

Maroon Yashil Sariq Moviy Qizil