Windows. Viruslar. Noutbuklar. Internet. Idora. Utilitalar. Haydovchilar
Menyu

Qaysi teg ochiladigan ro'yxat elementini tavsiflaydi. HTML-da ochiladigan ro'yxatdan tanlash. Oddiy HTML, CSS ochiladigan ro'yxati

HTML-dagi oddiy ochiladigan ro'yxatni tanlash tegi yordamida yaratish oson. Bu konteyner yorlig'i bo'lib, unda parametr teglari joylashtirilgan - ular ro'yxat elementlarini belgilaydilar.

Tanlash tegi yordamida roʻyxatlar uchun bir nechta variantlar mavjud: ochiladigan roʻyxat (variantlar asosiy maydonni bosgandan soʻng yoki kursorni uning ustiga olib kelgandan keyin paydo boʻladi) va koʻp tanlov roʻyxati – bunda foydalanuvchi bir nechta elementlarni tanlashi mumkin. Birinchisi keng tarqalgan bo'lib, ular zamonaviy saytlar navigatsiyasining muhim elementidir. Ko'p tanlov ochiladigan ro'yxati, masalan, mahsulotning bir nechta xususiyatlarini tanlashingiz kerak bo'lgan kataloglarda ishlatilishi mumkin.

Universal va maxsus atributlar yordamida ro'yxatlarning ko'rinishi va xususiyatlarini o'zgartirishingiz mumkin.

Teg atributlarini tanlang

1. Multiple - bir nechta tanlashni o'rnatadi.

2. Size - ro'yxatdagi ko'rinadigan chiziqlar sonini, ya'ni balandligini o'rnatadi. Va bu erda hammasi bir nechta atributning mavjudligi yoki yo'qligiga bog'liq. Agar ha bo'lsa va siz o'lchamni belgilamasangiz, unda bir nechta bo'lsa, foydalanuvchi barcha mumkin bo'lgan tanlov variantlarini ko'radi, lekin agar bir nechta bo'lmasa, faqat bitta qator ko'rsatiladi va tashrif buyuruvchi qolganini qachon o'qiy oladi u o'ng tarafdagi lift belgisini bosadi. Agar balandlik o'lchami ko'rsatilgan bo'lsa va u variantlar sonidan kamroq bo'lsa, o'ng tomonda aylantirish paneli paydo bo'ladi.

3. Ism - ism. Ochiladigan ro'yxat bu holda amalga oshirilishi mumkin, ammo serverdagi ishlov beruvchi dasturi bilan o'zaro aloqa qilish kerak bo'lishi mumkin. Qoida tariqasida, ism hali ham ko'rsatilgan.

Tanlash tegida opsiya tegidan farqli o‘laroq, kerakli atributlar mavjud emas.

Ichki parametr tegi atributlari

  1. Tanlangan - ro'yxat elementini ta'kidlash uchun mo'ljallangan. Agar bir nechta atribut o'rnatilgan bo'lsa, foydalanuvchi bir nechta elementni tanlashi mumkin (yuqoriga qarang).
  2. Qiymat - qiymat. Bu atribut talab qilinadi. Veb-server foydalanuvchi qaysi ro'yxat elementlarini tanlaganligini tushunishi kerak.
  3. Yorliq. Bu atribut juda uzun roʻyxat elementlarini qisqartirish uchun ishlatilishi mumkin. Masalan, opsion tegida ko'rsatilgan "Milan - Lombardiyaning ma'muriy markazi" o'rniga ekranda "Milan" ko'rsatiladi. Shimoliy Italiya". Ushbu atribut ro'yxatdagi elementlarni guruhlash uchun ham ishlatiladi.

Ro'yxat kengligiga kelsak, u sukut bo'yicha ro'yxatdagi eng keng matn uzunligiga o'rnatiladi. Albatta, kenglik HTML uslublari yordamida o'zgartirilishi mumkin.

Ochiladigan ro'yxat boshqa yo'llar bilan

Buni CSS yordamida amalga oshirish mumkin, masalan, kursorni sahifa elementi ustiga olib borganingizda ro‘yxat paydo bo‘ladi. Ro'yxatlarni yaratish uchun ajoyib variantlar JQuery kutubxonasi tomonidan soddalashtirilgan JavaScript tomonidan taqdim etilgan. Ushbu kutubxona yordamida ulangan ochiladigan ro'yxat juda murakkab bo'lishi mumkin, masalan, kaskad. Ya'ni, bitta ro'yxatdagi elementni tanlaganingizda, quyidagi ro'yxat paydo bo'ladi, masalan, "Ayollar kiyimlari" menyusi mavjud (uning ustiga kursorni olib borganingizda, so'ngra turlardan birini tanlaganingizda, masalan, "Ust kiyim" ”, elementlardan iborat ro'yxat tushadi: kurtkalar, parkalar, paltolar, kalta paltolar, mo'ynali kiyimlar va boshqalar.

Biz ochiladigan ro'yxatni yaratishning asosiy usullarini yuzaki sanab o'tdik. Albatta, JavaScript-da ro'yxatlarning funksionalligi va ko'rinishini o'zgartirishga imkon beruvchi juda ko'p nuanslar mavjud.

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 kontentning katta miqdori bo'lgan sahifalarda qo'llaniladi, uni yanada tuzilgan va ixcham qilish uchun barcha tarkiblar foydalanuvchiga faqat sarlavhalar taqdim etiladigan guruhlarga bo'linadi, 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 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...

Yashirin tarkib ......
Yashirin kontent...

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; ) /* yorliq matni 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: chegara-pastki: 1px nuqtali yashil ) /* kalit faol bo'lganda yorliq matnining ko'rinishi */ .hide: checked (rang: red; border-bottom: 0; ) /* 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-soya: inset 3px 3px 10px #7d8e8f: 10px;

Bularning barchasi, astsetik misol uchun, to'liq etarli minimaldir. 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'rsatib turibdi, u bir zumda minusga aylanadi va men yashirin bloklarga ozgina 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; ) /* yorliq matni 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 cheti-chap: 20px; /* 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: inline-block ) /* kalit faol bo'lganda yorliq matnining ko'rinishi */ .hide: checked + label ( color: red; border-bottom: 0; ) /* belgilash katakchasi faol bo'lganda, displey; 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; yashirin bloklar paydo bo'lganda */ @-moz-keyframes o'chib ketadi ( dan ( shaffoflik: 0; ) dan ( shaffoflik: 1 ) ) @-webkit-keyframes o'chib ketadi ( ( shaffoflik: 0 ; ) dan ( shaffoflik: 1 ) ) @keyframes so'nish ( dan ( shaffoflik: 0; ) dan ( shaffoflik: 1 ) ) .hide + label:before ( fon rangi: #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

teg bu ro'yxatning balandligini belgilaydi. Ro'yxatning kengligi tegda ko'rsatilgan eng keng matn bilan belgilanadi

Sintaksis

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

SELECT teg

...shakl tarkibi...

  • Shakl elementining ichida boshqaruv elementlari bo'lishi kerak, ulardan istalgancha ko'p bo'lishi mumkin.

    • Shakl atributlari:

    • Harakat atributi formadan yuborilgan ma'lumotlarni asosiy qayta ishlash uchun mas'ul bo'lgan skriptga ega server faylini belgilaydi. Odatda, ushbu fayl uchun kod server tomonidagi dasturlash tilida yoziladi, masalan php yoki perl.
    • Enctype atributi serverga uzatiladigan ma'lumotlarning turini ko'rsatadi, agar u faqat matnli ma'lumotlar bo'lsa - matn / tekis, agar fayllar forma bilan yuborilgan bo'lsa, unda ko'p qismli/forma-ma'lumotlar ko'rsatilishi kerak.
    • Metod atributi ma'lumotlarni uzatish shaklini belgilaydi va belgilaydi. Biz bu haqda batafsil to'xtalmaymiz, lekin shuni aytish kerakki, ishonchliroq uzatish uchun post usulini ko'rsatish kerak.

    HTML forma elementlari

      <kiritish turi = "matn" nomi = "kirish" hajmi = "20" qiymati = "Kirish" maxlength = "25" > !}

      Natija:

      • Type atributining qiymati - matn - bu matn maydoni ekanligini ko'rsatadi
      • size — matn maydonining belgilar bilan oʻlchami
      • maxlength — maydonga sig'adigan belgilarning maksimal soni
      • qiymat - matn maydonidagi boshlang'ich matn
      • nom - ishlov beruvchi faylidagi ma'lumotlarni qayta ishlash uchun zarur bo'lgan element nomi

      Natija:


      Matn o'rniga maydonda niqob ko'rsatiladi - yulduzlar yoki doiralar

      <kirish turi = "yuborish" qiymati = "Ma'lumotlarni yuborish">

      Natija:

      Yuborish tugmasi foydalanuvchi tomonidan kiritilgan barcha shakl ma'lumotlarini to'playdi va uni shaklning harakat atributida ko'rsatilgan manzilga yuboradi.

      <kirish turi = "qayta tiklash" qiymati = " Shaklni tozalash" > !}

      Natija:

      Tugma barcha boshqaruv elementlarining holatini asl holatiga qaytaradi (shaklni tozalaydi)

      <kiritish turi = "tasdiqlash qutisi" nomi = "asp" qiymati = " ha" > !} A.S.P.<br> <kiritish turi = "checkbox" nomi = "js" qiymati = "ha" checked = "checked" > !} javascript<br> <kiritish turi = "checkbox" nomi = "php" qiymati = "ha" > !} PHP<br> <kiritish turi = "checkbox" nomi = "html" qiymati = "ha" checked = "checked" > !} HTML<br>

      A.S.P.
      javascript
      PHP
      HTML


      Natija:

      A.S.P.
      javascript
      PHP
      HTML

      Htmlda bir nechta tanlovni tashkil qilish uchun katakchadan foydalaniladi, ya'ni. bir nechta javob variantlarini tanlash zarur va mumkin bo'lganda

      <kirish turi = "radio" nomi = "kitob" qiymati = "asp" > !} A.S.P.<br> <kirish turi = "radio" nomi = "kitob" qiymati = "js" > !} Javascript<br> <kirish turi = "radio" nomi = "kitob" qiymati = "php" > !} PHP<br> <kirish turi = "radio" nomi = "kitob" qiymati = "html" checked = "checked" > !} HTML<br>

      A.S.P.
      Javascript
      PHP
      HTML

      Natija:

      A.S.P.
      Javascript
      PHP
      HTML

      radio tugmasi html bir nechta variantlardan bitta tanlov uchun xizmat qiladi

      Belgilangan atribut darhol elementni tekshirilgan sifatida o'rnatadi

    Muhim: Elementlar uchun radio atribut qiymati bo'lishi kerak nomi guruhdagi barcha elementlar bir xil edi: bu holda elementlar bir-biriga bog'langan holda ishlaydi, bir element yoqilganda, qolganlari o'chadi.

    HTML ochiladigan ro'yxati

    Keling, ochiladigan ro'yxatni qo'shish misolini ko'rib chiqaylik:

    1 2 3 4 5 6 <nomini tanlang = "kitob" hajmi = "1" > <variant qiymati = "asp" > !} A.S.P.</opsiya> <variant qiymati = "js" > !} JavaScript</opsiya> <variant qiymati = "php" > !} PHP</opsiya> <variant qiymati = "html" selected = "selected" > !} HTML</opsiya> </tanlash>

    Natija:

    • Ochiladigan ro'yxat yopilish juftiga ega bo'lgan asosiy teg - tanlash -dan iborat va har bir ro'yxat elementi parametr tegi bo'lib, uning ichida element matni ko'rsatiladi.
    • qiymatli o'lcham atributi "1" yopilgan ro'yxatda bitta element ko'rsatilishini bildiradi, qolganlari menyu o'qini bosish orqali ochiladi
    • Ob'ektning tanlangan atributi (variant) bu alohida element dastlab ko'rinib turishini, qolgan elementlar esa "yiqilgan"ligini bildiradi.

    Katta va murakkab ro'yxatlar uchun variant mavjud sarlavhalarni qo'shing— label atributiga ega optgroup tegi:

    1 2 3 4 5 6 7 8 9 10 11 12 <nomini tanlang = "kitob" hajmi = "1" > <optgroup label = "inglizcha" > <variant qiymati = "asp" > !} A.S.P.</opsiya> <variant qiymati = "js" > !} JavaScript</opsiya> <variant qiymati = "php" > !} PHP</opsiya> <variant qiymati = "html" selected = "selected" > !} HTML</opsiya> </optgroup> <optgroup label = "ruslar" > <parametr qiymati = "asp_rus" > !} Rus tilida ASP</opsiya> <variant qiymati = "js_rus" > !} Rus tilida JavaScript</opsiya> </optgroup> </tanlash>


    Imkoniyatni ta'minlash uchun bir vaqtning o'zida bir nechta elementlarni tanlash bir nechta atributni qo'shishingiz kerak. Ammo bu holda, size atributi 1 dan katta qiymatga o'rnatilishi kerak:

    Natija:

    • Elementning kengligi cols atributiga bog'liq bo'lib, u gorizontal holatda qancha belgilar mos kelishini belgilaydi.
    • rows atributi elementdagi qatorlar sonini belgilaydi

    Boshqa elementlar

    Qo'shimcha elementlar va atributlar

    • Boshqaruv uchun radio Va belgilash katagi Qo'shimcha elementlardan foydalanish qulay, ular birinchi navbatda matnni radio yoki katakcha elementining o'ziga bog'laydi, ikkinchidan, bosilganda zarba qo'shadi:
      • <kiritish turi = "checkbox" id = "book1" > <= "book1" > uchun yorliq A.S.P.</yorliq>

      Misolda, tasdiqlash qutisi elementi uchun yozuv (yorliq yorlig'i) yaratilgan. Bog'lanish id atributi orqali amalga oshiriladi, uning qiymati yorliqning for atributida ko'rsatilgan.

      Natija:

    • Disabled atributi elementni blokirovka qilishga imkon beradi va uni foydalanuvchi tomonidan o'zgartirilmaydi:
      • <kiritish turi = "matn" nomi = "kirish" hajmi = "20" qiymati = "Kirish" maxlength = "25" disabled = "disabled" >!}
      <kiritish turi = "tasdiqlash qutisi" nomi = "asp" qiymati = " ha" > !} A.S.P.<br> <kiritish turi = "checkbox" nomi = "js" qiymati = "ha" checked = "checked" disabled = "disabled" > !} javascript<br>


      A.S.P.
      javascript

    Ushbu maqolada biz ochiladigan ro'yxatlarni yaratishga imkon beruvchi elementlarni ko'rib chiqamiz, ushbu ro'yxatlarda guruhlarni qanday shakllantirishni o'rganamiz, elementlarni va hatto ro'yxatlar guruhlarini qanday o'chirishni ko'rib chiqamiz, yaratishga imkon beruvchi element bilan tanishamiz. Ko'p qatorli matn maydoni, uni keyinchalik HTML shakllari ichida ishlatishingiz mumkin (element

    ).

    Ochiladigan ro'yxat

    Ro'yxatdagi birinchi element odatda tanlangan sifatida ko'rinadi, lekin oldindan belgilangan variantni belgilash uchun elementga tanlangan atributni qo'shishingiz mumkin.

    Keling

    </span> Elementdan foydalanishga misol <select><span>

    Ushbu misolda biz belgilaymiz

    Brauzerda u quyidagicha ko'rinadi:

    Menyu bandlarini guruhlash

    Keling, quyidagi tegni ko'rib chiqaylik , bu ochiladigan ro'yxatdagi tegishli ma'lumotlarni guruhlash uchun ishlatiladi nomi = "qora va oq" > label = "Oq ro'yxat" >

    Ushbu misolda biz teg bilan 2 guruhni ajratib ko'rsatdik . Elementning label atributi qalin harf bilan yozilgan tanlangan guruh nomini bildiradi:

    Quyidagi misolda, o'chirilgan boolean atributidan foydalanib, biz bitta guruhni o'chirib qo'yamiz (" B guruhi"):

    </span> HTML tegining disabled atributidan foydalanishga misol <optgroup><span>

    Bizning misolimiz natijasi:

    Ro'yxat va ko'p tanlovni o'chirib qo'ying

    </span> O'chirilgan va bir nechta teg atributlari <select><span>

    Ushbu misolda biz ikkita ochiladigan ro'yxatni yaratdik. Birinchi ro'yxat uchun biz disabled atributidan foydalandik, bu ro'yxat bilan o'zaro aloqani oldini oladi (uni o'chiradi).

    Ikkinchi ro'yxat uchun biz bir nechta atributdan foydalandik, bu ro'yxatda bir vaqtning o'zida bir nechta variantni tanlash mumkinligini ko'rsatadi (orqali Ctrl Windows va orqali Buyruq Mac-da).

    Brauzerda u quyidagicha ko'rinadi:

    Matn maydoni

    Bizning misolimiz natijasi:

    Matn maydonini o'chirish

    Oldin muhokama qilingan teg elementlariga o'xshash


    type = "yuborish" nomi = "submitInfo" qiymati = "submit" > !}

    Ushbu misolda biz ikkita matn maydonini yaratdik (element