IlmHamroh
JavaScript Full-stack/4-qism. HTML50/86-dars14 daqiqa
Mundarija (29)

disabled va readonly: forma maydonlari holatlari va yashirin maydonlar

Qisqacha: disabled maydonni o'zgartirib ham, Tab bilan tanlab ham bo'lmaydi — va u serverga umuman yuborilmaydi. readonly maydonni faqat o'zgartirib bo'lmaydi: u fokus oladi va qiymati serverga yuboriladi. type="hidden" maydon ekranda ko'rinmaydi, lekin yuboriladi. U sir saqlamaydi: har kim DevTools'da uni ko'radi va o'zgartiradi.

Bu darsda

  • disabled va readonly farqini aytib, qaysi biri serverga yuborilishini bilasiz.
  • Yashirin maydon (type="hidden") nima uchun kerakligini va nega u sir emasligini tushuntira olasiz.
  • Brauzerdan kelgan ma'lumotga nega ishonib bo'lmasligini o'z qo'lingiz bilan sinab ko'rasiz.
  • form atributi bilan formadan tashqaridagi maydonni formaga ulay olasiz.
  • autofocus va dirname atributlari nima qilishini bilasiz.

Oldin bilishingiz kerak: Forma qanday ishlaydi, Tugmalar va yuborish, Teg, element va atribut.

1. Nega bu kerak?

«Bahor» choyxonasining bron formasini bir necha darsdan beri yig'yapmiz. Endi egasi yangi talablar qo'ydi:

  1. Choyxonaning ikkita filiali bor. Chilonzor filiali sahifasidagi formada filial nomi o'zgarmasin, lekin serverga albatta borsin.
  2. Alohida xona bu hafta ta'mirda. U ro'yxatda ko'rinsin, lekin uni tanlab bo'lmasin.
  3. Server mijoz qaysi sahifadan kelganini bilsin. Mijozga esa buni ko'rsatish shart emas.

Uchala talab uchun HTML'da tayyor vosita bor: readonly, disabled va type="hidden". Ular bir-biriga o'xshaydi, lekin bitta muhim farqi bor — qaysi biri serverga yuboriladi. Noto'g'ri tanlasangiz, ma'lumot jimgina yo'qoladi va server "filial bo'sh keldi" deb xato qaytaradi.

Hayotdan o'xshatish — choyxonadagi menyu:

  • Chizib qo'yilgan "tugadi" taom — disabled. Uni buyurtma qila olmaysiz, ofitsiant uni oshxonaga ham aytmaydi.
  • Menyuda bosilgan narx — readonly. O'zgartira olmaysiz, lekin u chekka tushadi.
  • Ofitsiant daftariga yozgan stol raqami — hidden. Siz unga qaramaysiz, lekin u oshxonaga boradi. Daftar esa ochiq turibdi — xohlagan odam ko'rishi mumkin.

2. Nima yuborilayotganini qanday ko'ramiz

Forma qanday ishlaydi darsidan eslang: method="get" bo'lsa, maydonlar URL oxiriga ?nom=qiymat&nom=qiymat ko'rinishida qo'shiladi. action yozilmasa, forma shu sahifaning o'ziga yuboriladi.

Bu darsda shu usuldan "rentgen" sifatida foydalanamiz. Tajriba uchun bron/ papkasida alohida tajriba.html faylini yarating va Live Server bilan oching (asosiy forma bron/index.html da o'zgarmay turadi):

html
<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <title>Stol bron qilish — «Bahor»</title>
</head>
<body>
  <h1>Stol bron qilish</h1>
  <form method="get">
    <label for="ism">Ismingiz</label>
    <input type="text" id="ism" name="ism" value="Ali">

    <label for="filial">Filial</label>
    <input type="text" id="filial" name="filial"
           value="Chilonzor" disabled>

    <button type="submit">Bron qilish</button>
  </form>
</body>
</html>

"Bron qilish" tugmasini bosing va manzil qatoriga qarang:

text
http://127.0.0.1:5500/bron/tajriba.html?ism=Ali

filial yo'q! Maydon ekranda turibdi, qiymati ham bor, lekin serverga bormadi. Sababi — disabled. Keling, har bir holatni alohida ko'ramiz.

Maslahat: Haqiqiy formada method="post" bo'ladi va ma'lumot URL'da ko'rinmaydi. U holda DevTools'ning Network panelida so'rovni bosib, Payload yorlig'iga qarang. Bu yerda ham xuddi shu nom=qiymat juftliklarini ko'rasiz.

3. disabled: o'chirilgan maydon

O'chirilgan maydon (disabled) — foydalanuvchi uchun ham, forma uchun ham "yo'q" hisoblanadigan maydon. U ekranda ko'rinadi, lekin ishlamaydi.

disabled qo'yilgan maydonda besh narsa bo'ladi:

  1. Brauzer uni kulrang, xira qilib chizadi.
  2. Uni bosib ham, unga yozib ham bo'lmaydi.
  3. Tab tugmasi uni o'tkazib yuboradi — fokus unga tushmaydi.
  4. Forma yuborilganda u yuborilmaydi.
  5. Brauzer uni tekshirmaydi. Masalan, bo'sh bo'lsa ham "to'ldiring" demaydi — buni Brauzer validatsiyasi darsida ko'ramiz.

disabled quyidagi elementlarda ishlaydi: input, select, textarea, button, option, optgroup va fieldset. Oxirgisini keyingi darsda ko'ramiz — u butun maydonlar guruhini birdaniga o'chiradi.

3.1 Qachon disabled to'g'ri tanlov

disabled — "bu variant hozir mavjud emas" degan xabar. Alohida xona misoli aynan shunday:

html
<p>Qaysi joyni tanlaysiz?</p>
<label>
  <input type="radio" name="joy" value="zal" checked> Umumiy zal
</label>
<label>
  <input type="radio" name="joy" value="ayvon"> Ayvon
</label>
<label>
  <input type="radio" name="joy" value="xona" disabled>
  Alohida xona (bu hafta ta'mirda)
</label>

Mijoz alohida xona borligini ko'radi, lekin uni tanlay olmaydi. Qavs ichidagi izoh muhim: nega o'chirilganini aytmasangiz, mijoz "sayt buzilgan" deb o'ylaydi.

3.2 Boolean atribut tuzog'i

Teg, element va atribut darsidan eslang: disabled — boolean atribut. Uning ma'nosi faqat "bor yoki yo'q"qa bog'liq, qiymatiga emas.

Shuning uchun bu maydon ham o'chirilgan:

html
<input type="text" name="filial" value="Chilonzor"
       disabled="false">

"false" so'zi brauzer uchun hech narsa anglatmaydi. U faqat disabled so'zi borligini ko'radi. Maydonni yoqish uchun atributni butunlay olib tashlash kerak. Bu qoida readonly, required, checked va autofocus uchun ham to'g'ri.

Tekshirib ko'ring: Formada <input type="text" name="promo" value="BAHOR10" disabled> bor. Forma yuborilganda server promo ni oladimi?

Javob

Yo'q. disabled maydon forma ma'lumotlariga umuman qo'shilmaydi — na nomi, na qiymati. Server uchun bu maydon umuman bo'lmagandek.

4. readonly: faqat o'qish uchun

Faqat o'qish uchun maydon (readonly) — foydalanuvchi o'zgartira olmaydigan, lekin forma bilan birga yuboriladigan maydon.

Filial misolini tuzatamiz:

html
<label for="filial">Filial</label>
<input type="text" id="filial" name="filial"
       value="Chilonzor" readonly>

Endi URL:

text
http://127.0.0.1:5500/bron/tajriba.html?ism=Ali&filial=Chilonzor

filial keldi. readonly maydon:

  • Oddiy maydondek ko'rinadi (brauzer uni xira qilmaydi).
  • Fokus oladi, Tab uni o'tkazib yubormaydi.
  • Ichidagi matnni belgilab, nusxa olish mumkin.
  • Serverga yuboriladi.
  • Brauzer tekshiruvidan o'tkazilmaydi — required bilan birga kelsa ham, bo'shligi uchun to'xtatmaydi.

4.1 readonly hamma joyda ishlamaydi

readonly faqat matn yoziladigan maydonlarda ishlaydi: text, email, tel, url, search, password, number, sana va vaqt maydonlari hamda textarea.

Checkbox, radio, select, fayl, rang va range maydonlarida brauzer readonly ni e'tiborsiz qoldiradi. Mijoz ularni baribir o'zgartira oladi.

Masalan, select ni "qotirib qo'yish" kerak bo'lsa-chi? Ikki yo'l bor:

  1. Umuman select qo'ymang — qiymatni oddiy matn bilan ko'rsating va yashirin maydon bilan yuboring — uni pastroqda ko'ramiz.
  2. select ga disabled qo'ying va yoniga shu name bilan hidden maydon qo'shing. Ko'rinadigani — ko'rsatish uchun, yashirini — yuborish uchun.

4.2 Farqlar bitta jadvalda

Xususiyat disabled readonly
O'zgartirish mumkinmi Yo'q Yo'q
Fokus va Tab Yo'q Ha
Serverga yuboriladi Yo'q Ha
Brauzer tekshiradimi Yo'q Yo'q
Ko'rinishi Kulrang, xira Oddiy maydondek
Qaysi maydonlarda Hamma maydon va tugmada Faqat matnli maydonlarda

Ekran o'quvchi ham ularni turlicha e'lon qiladi. disabled maydon haqida "mavjud emas" (unavailable) deydi, readonly haqida — "faqat o'qish uchun" (read only).

Eslab qolish uchun bitta savol: "Bu qiymat serverga kerakmi?" Kerak bo'lsa — readonly. Kerak bo'lmasa, variant shunchaki mavjud emas — disabled.

Tekshirib ko'ring: Mijoz profilidagi "Telefon raqam" maydoni o'zgarmasligi kerak, lekin server bron qaysi raqamga yozilganini bilishi shart. disabled qo'yasizmi yoki readonly?

Javob

readonly. Raqam serverga yetib borishi kerak, disabled esa uni yubormaydi. Bundan tashqari, readonly maydondagi raqamni mijoz nusxa olishi mumkin — bu ham qulay.

5. Yashirin maydon: type="hidden"

Uchinchi talab: server mijoz qaysi sahifadan kelganini bilsin. Buni ko'rsatish shart emas, lekin yuborish kerak. Buning uchun yashirin maydon (hidden input) bor:

html
<input type="hidden" name="qayerdan" value="instagram">

Yashirin maydon:

  • Ekranda umuman ko'rinmaydi — joy ham egallamaydi.
  • Unga label kerak emas: foydalanuvchi u bilan ishlamaydi.
  • Forma bilan birga yuboriladi.
  • Brauzer tekshiruvidan o'tmaydi.

Endi URL shunday bo'ladi:

text
bron/tajriba.html?ism=Ali&filial=Chilonzor&qayerdan=instagram

5.1 Yashirin maydon nimalar uchun ishlatiladi

  • Yozuvning ID raqami. "Bronni tahrirlash" formasida server qaysi bronni o'zgartirishni bilishi kerak: name="bron_id" value="1042".
  • Kontekst. Filial, til, qaysi sahifadan kelgani, reklama manbasi.
  • Himoya belgisi (CSRF token). Bu — server har bir formaga qo'yadigan tasodifiy belgi. U boshqa sayt sizning nomingizdan forma yuborishiga to'sqinlik qiladi. Uni Forma xavfsizligi darsida batafsil ko'ramiz.
  • Belgilanmagan checkbox uchun "yo'q" javobi. Tanlash maydonlari darsida ko'rdik: belgilanmagan checkbox umuman yuborilmaydi. Server "yo'q" javobini ham aniq olishi kerak bo'lsa, checkbox'dan oldin shu name li yashirin maydon qo'yiladi:
html
<input type="hidden" name="sms" value="yoq">
<input type="checkbox" id="sms" name="sms" value="ha">
<label for="sms">SMS eslatma yuborilsin</label>

Belgilanmasa — sms=yoq boradi. Belgilansa — ikkalasi ham: sms=yoq&sms=ha. Server kodi shu nomdagi oxirgi qiymatga qaraydi — ha. Bu kelishuv backend dasturchi bilan oldindan qilinadi.

5.2 Yashirin — sir degani emas

Bu darsning eng muhim gapi. "Yashirin" so'zi aldamasin: maydon faqat ko'zdan yashirilgan.

Ctrl + U bosing — View Source'da hammasi turibdi:

html
<input type="hidden" name="qayerdan" value="instagram">

Elements panelida esa uni o'zgartirish ham mumkin. Demak, yashirin maydonga hech qachon sir qo'yilmaydi: parol, maxfiy kalit, boshqa mijozlarning ma'lumoti. Unga qo'yilgan qiymatga server ham ko'r-ko'rona ishonmaydi. Bu haqda keyingi bo'lim.

Diqqat: type="hidden" va hidden atributini adashtirmang. <input type="text" name="x" hidden> — bu oddiy matn maydoni, faqat ko'rinmaydigan qilingan. U ham yuboriladi. hidden atributini Global atributlar darsida o'rganamiz. Forma uchun yashirin qiymat kerak bo'lsa — type="hidden" ishlating.

6. Hujumchi nigohi

Choyxona egasi bron uchun oldindan to'lovni formaga shunday qo'ydi:

html
<label for="depozit">Oldindan to'lov, so'm</label>
<input type="text" id="depozit" name="depozit"
       value="50000" readonly>
<input type="hidden" name="joy_narxi" value="20000">

Mijoz summani o'zgartira olmaydi — to'g'rimi? Yo'q. Hujumchi buni 10 soniyada qiladi. O'zingiz sinab ko'ring:

  1. Sahifada F12 bosing, Elements panelini oching.
  2. depozit maydonidagi value="50000" ustiga ikki marta bosing va 1 deb yozing.
  3. Xuddi shunday readonly so'zini o'chiring — endi maydonga yoza olasiz.
  4. Alohida xonaning disabled atributini o'chiring — endi uni tanlash mumkin.
  5. Formani yuboring va URL'ga qarang. U taxminan shunday bo'ladi:
text
bron/tajriba.html?ism=Ali&joy=xona&depozit=1&joy_narxi=20000

Server ta'mirdagi alohida xonani 1 so'mga bron qilib qo'ydi. disabled, readonly va hidden — bular foydalanuvchi uchun qulaylik, himoya emas. Hujumchi brauzersiz ham so'rov yubora oladi: Tarmoqni terminaldan tekshirish darsidagi curl bilan istalgan nom=qiymat ni jo'natish mumkin.

Server qanday himoyalanadi:

  • Narxni o'zi hisoblaydi. Brauzerdan kelgan depozit ga qaramaydi — narxni o'z bazasidan oladi.
  • Mavjudlikni o'zi tekshiradi. "Alohida xona hozir band emasmi, ta'mirda emasmi?" — bu savolga baza javob beradi, forma emas.
  • ID'ga egalikni tekshiradi. bron_id=1042 kelsa, bu bron shu mijozniki ekanini tekshiradi. Aks holda Ali ID raqamni 1043 ga o'zgartirib, Malikaning bronini tahrirlab qo'yadi.

Oltin qoida: brauzerdan kelgan hamma narsa — foydalanuvchi yozgan narsa. Hatto u yashirin yoki o'zgartirib bo'lmaydigan maydondan kelgan bo'lsa ham. Serverda buni qanday tekshirishni Validatsiya: nima uchun, qayerda va qanday darsida o'rganamiz.

7. form atributi: formadan tashqaridagi maydon

Oddiy qoida: maydon form tegi ichida tursa, u shu forma bilan yuboriladi. Lekin ba'zan sahifa dizayni buni buzadi. Masalan, bron formasi sahifaning o'rtasida, "Bron qilish" tugmasi esa pastki qatorda — formadan tashqarida.

Buning uchun form atributi bor. Unga formaning id si yoziladi:

html
<form id="bron" method="get">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism" value="Ali">
</form>

<footer>
  <label for="izoh">Izoh</label>
  <input type="text" id="izoh" name="izoh" form="bron">
  <button type="submit" form="bron">Bron qilish</button>
</footer>

izoh maydoni va tugma form tegidan tashqarida. Lekin form="bron" ularni id="bron" formaga ulaydi. Tugma bosilsa, forma yuboriladi va izoh ham unga qo'shiladi.

form atributi input, select, textarea, button, fieldset va output da ishlaydi. Undan ehtiyot bo'lib foydalaning: kodni o'qigan odam maydon qaysi formaga tegishli ekanini darhol ko'rmaydi. Iloji bo'lsa, maydonlarni forma ichida saqlang.

8. autofocus: sahifa ochilishi bilan fokus

autofocus atributi qo'yilgan maydon sahifa ochilishi bilan fokus oladi — kursor darhol o'sha yerda miltillaydi:

html
<label for="qidiruv">Taom qidirish</label>
<input type="search" id="qidiruv" name="q" autofocus>

Qachon foydali:

  • Sahifaning yagona vazifasi shu maydon bo'lsa. Masalan, qidiruv sahifasi yoki kirish sahifasi.
  • Ochilgan oyna ichidagi birinchi maydon uchun. Buni dialog darsida ko'ramiz.

Qachon zararli:

  • Maydon sahifaning pastida bo'lsa. Brauzer sahifani o'sha joyga "sakratadi" va mijoz sarlavhani ko'rmay qoladi.
  • Telefonda. Fokus maydonga tushishi bilan klaviatura ochiladi va ekranning yarmini yopadi.
  • Ekran o'quvchi uchun. U sahifa boshidagi matnni o'qimay, to'g'ri maydonga o'tib ketadi. Ko'zi ojiz mijoz qaysi sahifada ekanini bilmay qoladi.

Sahifada faqat bitta autofocus bo'lishi kerak. Fokusni boshqarishning boshqa usullari Fokus va tahrir atributlari darsida.

9. dirname: matn yo'nalishini ham yuborish

Ko'p tilli matn darsida matnning yo'nalishi bor ekanini ko'rgan edik: o'zbekcha chapdan o'ngga (ltr), arabcha esa o'ngdan chapga (rtl).

Choyxonaga arab mehmonlar ham keladi deylik. Ular izohni arabcha yozadi. Server bu matnni keyinroq to'g'ri ko'rsatishi uchun uning yo'nalishini bilishi kerak. dirname atributi buni avtomatik yuboradi:

html
<label for="izoh">Izoh</label>
<input type="text" id="izoh" name="izoh" dirname="izoh.dir">

Mijoz o'zbekcha yozsa, URL shunday bo'ladi:

text
bron/tajriba.html?izoh=Deraza+yonida&izoh.dir=ltr

dirname ga yozilgan nom (izoh.dir) bilan qo'shimcha maydon yuboriladi. Uning qiymati — ltr yoki rtl. dirname matn maydonlarida va textarea da ishlaydi. Kundalik ishda kam uchraydi, lekin ko'p tilli saytlarda asqotadi.

Tekshirib ko'ring: Tugma formadan tashqarida turibdi va bosilganda hech narsa bo'lmayapti. Nimani tekshirasiz?

Javob

Tugmada form atributi bormi va uning qiymati formaning id si bilan harfma-harf bir xilmi. form="Bron" va id="bron" — ikki xil nom, katta-kichik harf farqlanadi.

10. Ko'p uchraydigan xatolar

10.1 "Maydon ko'rinib turibdi, lekin serverga kelmayapti"

Eng ko'p uchraydigan holat. Dasturchi maydonni "o'zgarmasin" deb disabled qildi — endi server uni olmaydi. Tuzatish: qiymat serverga kerak bo'lsa, readonly yoki hidden ishlating.

Ikkinchi sabab — name yo'q. Forma qanday ishlaydi darsidan eslang: name siz maydon yuborilmaydi. Yuborilmagan maydonni topish uchun URL'ni yoki Network panelini tekshiring.

10.2 disabled="false" bilan yoqishga urinish

Boolean atribut qiymatiga qaralmaydi. disabled="false", disabled="no", disabled="" — hammasi maydonni o'chiradi. html-validate bunday yozuvni xato deb ko'rsatadi: Attribute "disabled" has invalid value "false" — "disabled atributida noto'g'ri qiymat". Tuzatish: atributni butunlay olib tashlang.

10.3 Checkbox'da readonly "ishlamayapti"

readonly checkbox, radio va select da e'tiborsiz qoldiriladi. Tuzatish: "readonly hamma joyda ishlamaydi" bo'limidagi ikki usuldan birini ishlating.

10.4 Yashirin maydonda sir yoki narx

Yashirin maydonga parol, maxfiy kalit yoki narx yozish — xavfsizlik teshigi. Tuzatish: sir serverda qoladi, narxni server o'zi hisoblaydi.

10.5 Sabab aytilmagan disabled

Mijoz kulrang "Bron qilish" tugmasini ko'radi va nega bosilmasligini tushunmaydi. Tuzatish: yoniga sababini yozing ("Avval sanani tanlang"). Buni Qulay va accessible forma darsida chuqurroq ko'ramiz.

11. Mashqlar

1-mashq (oson): Nima yuboriladi?

Forma yuborilganda URL'da qaysi nomlar bo'ladi?

html
<form method="get">
  <label for="a">Ism</label>
  <input type="text" id="a" name="ism" value="Malika">
  <label for="b">Filial</label>
  <input type="text" id="b" name="filial" value="Yunusobod"
         readonly>
  <label for="c">Promokod</label>
  <input type="text" id="c" name="promo" value="BAHOR10"
         disabled>
  <input type="hidden" name="til" value="uz">
  <label for="d">Izoh</label>
  <input type="text" id="d" value="Deraza yonida">
  <button type="submit">Yuborish</button>
</form>
Yechim
text
?ism=Malika&filial=Yunusobod&til=uz
  • ism — oddiy maydon, yuboriladi.
  • filial — readonly, yuboriladi.
  • promo — disabled, yuborilmaydi.
  • til — yashirin, yuboriladi.
  • Izoh maydonida name yo'q — yuborilmaydi.

2-mashq (o'rta): «Bahor» formasini yangilang

Bron formangizga quyidagilarni qo'shing:

  1. "Filial" maydoni — Chilonzor, o'zgartirib bo'lmaydi, lekin serverga boradi.
  2. "Qaysi joy" radio guruhi: Umumiy zal, Ayvon, Alohida xona. Alohida xona tanlanmaydi va yonida sababi yozilgan.
  3. Yashirin qayerdan maydoni, qiymati sayt.

Formani method="get" bilan yuborib, URL'ni tekshiring.

Yechim
html
<form method="get">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism">

  <label for="filial">Filial</label>
  <input type="text" id="filial" name="filial"
         value="Chilonzor" readonly>

  <p>Qaysi joyni tanlaysiz?</p>
  <label>
    <input type="radio" name="joy" value="zal" checked>
    Umumiy zal
  </label>
  <label>
    <input type="radio" name="joy" value="ayvon"> Ayvon
  </label>
  <label>
    <input type="radio" name="joy" value="xona" disabled>
    Alohida xona (bu hafta ta'mirda)
  </label>

  <input type="hidden" name="qayerdan" value="sayt">
  <button type="submit">Bron qilish</button>
</form>

Ismga Ali yozib yuborsangiz:

text
bron/?ism=Ali&filial=Chilonzor&joy=zal&qayerdan=sayt

filial — readonly bo'lgani uchun keldi. Alohida xonani tanlab bo'lmaydi. qayerdan ko'rinmaydi, lekin URL'da bor.

3-mashq (qiyin): O'z formangizni "buzing"

2-mashqdagi formada hujumchi rolini o'ynang:

  1. DevTools'da filial qiymatini Yunusobod ga o'zgartiring.
  2. Alohida xonadagi disabled ni o'chirib, uni tanlang.
  3. qayerdan qiymatini reklama qiling.
  4. Formani yuboring va URL'ni yozib oling.
  5. Endi server dasturchisi sifatida o'ylang: bu uchta maydondan qaysi biriga server ishonishi mumkin emas va u nimani tekshirishi kerak?
Yechim

URL:

text
bron/?ism=Ali&filial=Yunusobod&joy=xona&qayerdan=reklama

Uchalasiga ham ko'r-ko'rona ishonib bo'lmaydi:

  • filial — server bu filial haqiqatan borligini va bron uning ish vaqtiga to'g'ri kelishini tekshiradi.
  • joy=xona — server alohida xona hozir bron qilinishi mumkinmi, o'z bazasidan tekshiradi. Ta'mirda bo'lsa — rad etadi.
  • qayerdan — bu faqat statistika uchun. Uni noto'g'ri yuborish hech kimga zarar bermaydi. Shuning uchun server uni "shunchaki ma'lumot" deb qabul qiladi va unga qarab muhim qaror qabul qilmaydi.

Xulosa: brauzerdagi cheklovlar faqat halol mijozga yo'l ko'rsatadi. Qoidalarni server ta'minlaydi.

12. Real ishda

  • Admin panellar. Mahsulotni tahrirlash sahifasida ID raqam va "yaratilgan sana" readonly bo'ladi. Mahsulot ID si esa ko'pincha hidden maydonda yuboriladi.
  • Freymvorklardagi himoya belgisi. Django (Python), Laravel (PHP) va Rails (Ruby) kabi freymvorklar har formaga avtomatik yashirin maydon qo'shadi. Laravel'da u _token, Django'da — csrfmiddlewaretoken deb ataladi. Bu nomlarni hozir yodlash shart emas — ularni ko'rsangiz, nima ekanini bilasiz.
  • "Yuborilyapti..." holati. Tugma bosilgach, ikkinchi marta bosilmasligi uchun JavaScript uni disabled qiladi. Buni JavaScript qismida qilamiz.
  • Xavfsizlik testlari. Pentester (saytlarni ruxsat bilan buzib, zaif joyini topadigan mutaxassis) birinchi navbatda yashirin va readonly maydonlarni o'zgartirib ko'radi. Narx yoki ID'ga ishonadigan server — eng keng tarqalgan zaifliklardan biri.
  • Intervyu savoli: "disabled va readonly farqi nima?" Javob: "ikkalasini ham o'zgartirib bo'lmaydi, lekin disabled yuborilmaydi va fokus olmaydi, readonly esa yuboriladi va fokus oladi".

Xulosa

  • disabled — maydon o'chirilgan: fokus olmaydi, yuborilmaydi, tekshirilmaydi.
  • readonly — faqat o'qish uchun: fokus oladi, yuboriladi; faqat matnli maydonlarda ishlaydi.
  • Boolean atributni o'chirish uchun uni olib tashlaysiz — disabled="false" ham o'chiradi.
  • type="hidden" ko'rinmaydi, lekin yuboriladi; u sir saqlamaydi — View Source va DevTools'da ochiq.
  • Brauzerdagi hech bir cheklov himoya emas: narx, mavjudlik va egalikni server tekshiradi.
  • form="id" formadan tashqaridagi maydonni ulaydi; autofocus — faqat bitta va o'ylab; dirname matn yo'nalishini yuboradi.

Keyingi dars: Guruhlash va natija elementlari — fieldset bilan maydonlarni nomli guruhlarga yig'amiz va output, progress, meter bilan natija ko'rsatamiz.

Manbalar

  • MDN: "HTML attribute: disabled", "HTML attribute: readonly", <input type="hidden"> — developer.mozilla.org
  • WHATWG HTML: "Constructing the entry list" (qaysi maydonlar yuboriladi) — html.spec.whatwg.org
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
disabled va readonly: forma maydonlari holatlari va yashirin maydonlar — IlmHamroh