IlmHamroh
JavaScript Full-stack/4-qism. HTML42/86-dars16 daqiqa
Mundarija (37)

HTML forma qanday ishlaydi: action, method, name va brauzer yuboradigan so'rov

Qisqacha: Forma — foydalanuvchi to'ldiradigan maydonlar to'plami. Yuborilganda brauzer har bir maydonni name=qiymat juftligiga aylantiradi va action dagi manzilga HTTP so'rov jo'natadi. method="get" da ma'lumot URL oxiriga (?ism=Ali) yoziladi, method="post" da esa so'rov tanasida (body) ketadi.

Bu darsda

  • form tegi nima qilishini va forma yuborilganda nima bo'lishini tushuntira olasiz.
  • name va value qanday qilib name=qiymat juftligiga aylanishini bilasiz.
  • action va method ni to'g'ri tanlaysiz: GET qachon, POST qachon.
  • Brauzer yuborgan haqiqiy so'rovni DevTools Network panelida topib o'qiy olasiz.
  • enctype ning uchta qiymatini va sahifa nega qayta yuklanishini bilasiz.

Oldin bilishingiz kerak: Amaliyot: semantik sahifa skeletini noldan qurish, HTTP metodlari va status kodlari, Chrome DevTools II: Network, Application va Lighthouse.

1. Nega bu kerak?

Hozirgacha «Bahor» choyxonasining sayti faqat gapirardi: menyu, manzil, tadbirlar. Mehmon esa unga hech narsa ayta olmasdi.

Har kuni kechqurun choyxona telefoni jiringlaydi: "Shanba kuni 6 kishiga joy bormi?" Administrator qog'ozga yozadi, ba'zan adashadi, ba'zan telefon band bo'ladi. Saytda "Joy band qilish" sahifasi bo'lsa-chi? Mehmon ismini, telefonini va odam sonini o'zi yozadi — ma'lumot to'g'ridan-to'g'ri choyxonaga yetib boradi.

Buning uchun HTML'da forma (form) bor. Forma — foydalanuvchidan ma'lumot olib, uni serverga yuboradigan maydonlar to'plami.

Hayotdan o'xshatish: bankdagi yoki pochtadagi qog'oz blanka. Unda har bir katakning nomi bor: "F.I.Sh.", "Telefon". Siz kataklarni to'ldirasiz va blankani aniq bir darchaga topshirasiz. HTML forma ham xuddi shunday: kataklar — maydonlar, darcha — server manzili.

Bu dars — formalar modulining boshlanishi. Keyingi darslarda shu blankani qadamma-qadam yaxshilab, «Bahor» uchun to'liq joy band qilish formasini quramiz.

2. Birinchi forma

2.1 form va input

«Bahor» saytida yangi sahifa yarating: bron/index.html (Ko'p sahifali sayt tuzilmasi darsidagi toza URL usuli). Uning main qismiga shu kodni yozing:

html
<h1>Joy band qilish</h1>
<form>
  <label>Ismingiz: <input type="text" name="ism"></label>
  <label>Necha kishi: <input type="text" name="odam"></label>
  <button type="submit">Joy band qilish</button>
</form>

Qatorma-qator:

  • form — butun blanka. Uning ichidagi hamma maydon birga yuboriladi.
  • input — bir qatorli maydon. U bo'sh element (void element): yopuvchi tegi yo'q, xuddi img kabi (Teg, element va atribut).
  • type="text" — "bu oddiy matn maydoni". type ning boshqa qiymatlari (email, telefon, parol) Matnli maydonlar darsida.
  • name="ism" — maydonning nomi. Bu darsning eng muhim atributi, 3-bo'limda batafsil ko'ramiz.
  • label — maydon yonidagi yozuv. Hozircha shunchaki "maydon nomi" deb qabul qiling — keyingi darsda to'liq o'rganamiz.
  • button type="submit" — yuborish tugmasi. Tugma turlarini Tugmalar va yuborish darsida ko'ramiz.

Brauzerda taxminan shunday ko'rinadi:

text
Joy band qilish
Ismingiz: [__________] Necha kishi: [__________] [Joy band qilish]

Maydonlar bir qatorga tizilib qoldi — chunki label va input qatorli (inline) elementlar. Chiroyli joylashtirish CSS'ning ishi, uni CSS nima darsidan boshlaymiz.

2.2 Yuborib ko'ring

Sahifani Live Server bilan oching (Birinchi sahifa darsida o'rnatgansiz). Ismga Ali, odam soniga 4 yozing va tugmani bosing.

Sahifa bir lahza "miltillaydi" — maydonlar bo'shab qoladi. Hech narsa bo'lmagandek. Endi manzil qatoriga qarang:

text
http://127.0.0.1:5500/bron/?ism=Ali&odam=4

Mana, forma ishladi! Brauzer siz yozgan ma'lumotni olib, manzil oxiriga qo'shdi va shu manzilni qaytadan ochdi. ? dan keyingi qism — URL anatomiyasi darsida ko'rgan query string.

Maslahat: Tugmani bosish shart emas. Maydonlardan birida turib Enter bosing — forma baribir yuboriladi. Bu yashirin yuborish (implicit submission) deyiladi: formada yuborish tugmasi bo'lsa, Enter uni bosgandek ishlaydi.

Tekshirib ko'ring: Siz form ga hech qanday atribut yozmadingiz. Shunga qaramay ma'lumot qayergadir yuborildi. Qayerga?

Javob

O'sha sahifaning o'ziga — bron/ manziliga. Forma qayerga yuborilishini action atributi belgilaydi. U yozilmasa, brauzer formani joriy sahifa manziliga yuboradi. Usul (method) yozilmasa — GET ishlatiladi. Shuning uchun ma'lumot manzil oxirida paydo bo'ldi. Ikkala atributni ham 4- va 5-bo'limlarda ko'ramiz.

3. name va value: maydon qanday "juftlik"ka aylanadi

3.1 name=qiymat

Manzilga yana bir bor qarang: ism=Ali&odam=4. Bu ikki juftlik, orasida & belgisi:

Maydon name Foydalanuvchi yozgani Yuboriladigan juftlik
Ismingiz ism Ali ism=Ali
Necha kishi odam 4 odam=4

Qoida oddiy: name — kalit, maydondagi matn — qiymat. Server faqat shu juftliklarni oladi. U sahifadagi yozuvlarni ("Ismingiz:") ko'rmaydi — faqat name ni.

Qog'oz blankada ham shunday: bank xodimi har katak nomiga qarab ma'lumotni kompyuterga kiritadi. Katakning nomi bo'lmasa, u yozilgan narsani qayerga kiritishni bilmaydi.

3.2 name siz maydon yuborilmaydi

Tajriba qiling: odam soni maydonidan name ni olib tashlang.

html
<label>Necha kishi: <input type="text"></label>

Formani yana yuboring. Manzil:

text
http://127.0.0.1:5500/bron/?ism=Ali

odam yo'qoldi. Brauzer xato bermadi, maydon ekranda ko'rinib turibdi, foydalanuvchi uni to'ldirdi — lekin ma'lumot hech qayerga ketmadi. Bu boshlovchilarning eng ko'p uchraydigan formadagi xatosi.

Diqqat: id — name ning o'rnini bosmaydi. <input type="text" id="ism"> ham yuborilmaydi. id sahifa ichida elementni topish uchun (fragment havolalar darsida ishlatgansiz), name esa serverga yuborish uchun.

3.3 value — boshlang'ich qiymat

value atributi maydonga oldindan qiymat qo'yadi:

html
<label>Necha kishi: <input type="text" name="odam" value="2"></label>

Sahifa ochilganda maydonda 2 turadi. Foydalanuvchi uni o'zgartirishi mumkin. Yuborilganda esa maydonda hozir nima tursa, o'sha ketadi — value da yozilgani emas.

3.4 Bo'sh joy, apostrof va + qanday yuboriladi

Ismga Ali Valiyev deb yozing, telefon uchun yangi maydon qo'shing:

html
<label>Telefon: <input type="text" name="telefon"></label>

Telefonga +998 90 000 00 00 yozib yuboring. Manzil:

text
?ism=Ali+Valiyev&telefon=%2B998+90+000+00+00&odam=4

Uchta qiziq narsa bor:

  • Bo'sh joy + ga aylandi: Ali+Valiyev.
  • Telefondagi haqiqiy + esa %2B ga aylandi. Chunki bu yerda + "bo'sh joy" degani — brauzer ularni adashtirmaslik uchun haqiqiy plyusni kodlaydi.
  • O'g'iloy kabi ismdagi apostrof %27 ga aylanadi: O%27g%27iloy.

Bu — URL anatomiyasi darsidagi percent-encoding. Brauzer uni o'zi bajaradi, server esa o'zi ochadi. Siz qo'lda hech narsa kodlamaysiz.

Bu yozuv usulining rasmiy nomi — application/x-www-form-urlencoded. Uni 7-bo'limda yana uchratamiz.

3.5 Bir xil name li ikki maydon

Ikki maydonga bir xil nom bersangiz, ikkalasi ham yuboriladi: ism=Ali&ism=Vali. Bu xato emas — server ikkala qiymatni ro'yxat qilib oladi. Bir nechta belgilash katakchasi (checkbox) aynan shunday ishlaydi, uni Tanlash maydonlari darsida ko'ramiz. Oddiy matn maydonlarida esa nomlar takrorlanmasin.

Tekshirib ko'ring: Formada uchta maydon bor: <input type="text" name="ism">, <input type="text" id="telefon"> va <input type="text" name="odam">. Foydalanuvchi uchalasini to'ldirdi. Serverga nechta juftlik yetib boradi?

Javob

Ikkita: ism va odam. Telefon maydonida name yo'q, faqat id bor. id yuborish uchun emas, shuning uchun telefon raqami yo'qoladi.

4. action: blanka qaysi darchaga topshiriladi

action — forma ma'lumoti yuboriladigan manzil (URL). Blanka o'xshatishida — darcha raqami.

html
<form action="https://example.com/bron">
  ...
</form>

action ga istalgan URL yozish mumkin:

Yozuv Qayerga yuboriladi
action yo'q Joriy sahifa manziliga
action="https://example.com/band" Boshqa saytdagi manzilga (absolyut)
action="yuborildi.html" Joriy papkadagi faylga (nisbiy)
action="/bron/" Sayt ildizidan boshlangan yo'lga

Nisbiy yo'llar havolalardagi kabi ishlaydi (Havola asoslari).

Odatda action — server dasturining manzili. U kelgan ma'lumotni qabul qiladi: bazaga yozadi, administratorga Telegram xabar yuboradi. Bunday dasturni JavaScript bilan Express qismida yozasiz. Hozir bizda server dasturi yo'q — shuning uchun hozircha action siz ishlaymiz va so'rovni DevTools'da kuzatamiz.

Maslahat: GET formada action manzilida o'zining query string'i bo'lsa, brauzer uni tashlab yuboradi va o'rniga forma ma'lumotini yozadi. action="?til=uz" dagi til=uz serverga yetib bormaydi. Qo'shimcha qiymat kerak bo'lsa, yashirin maydon ishlatiladi — Maydon holatlari va yashirin maydonlar darsida.

5. method: ochiq otkritka yoki yopiq konvert

method — ma'lumot qanday usulda yuborilishi. Formada faqat ikki HTTP metodi bor: get va post. Ikkalasini ham HTTP metodlari darsida ko'rgansiz — endi ularni amalda ko'ramiz.

Pochta o'xshatishi:

  • GET — ochiq otkritka. Matn tashqarida yozilgan, qo'lga olgan har kim o'qiydi.
  • POST — konvert. Matn ichkarida, tashqarida faqat manzil.

5.1 GET — ma'lumot manzilda

html
<form action="/bron/" method="get">

GET da ma'lumot URL'ning oxiriga qo'shiladi — buni 2-bo'limda ko'rdik. Bu manzilni saqlab qo'yish, Telegram'da do'stga yuborish yoki keyinroq qayta ochish mumkin.

GET qachon to'g'ri: forma hech narsani o'zgartirmaganda, faqat nimanidir so'raganda. Eng yaxshi misol — qidiruv. Sahifa landmarklari darsida «Bahor» menyusiga qidiruv formasini qo'shgan edik:

html
<search>
  <form action="/menyu/">
    <input type="search" name="q" aria-label="Menyudan qidirish">
    <button type="submit">Qidirish</button>
  </form>
</search>

osh deb qidirsangiz, manzil /menyu/?q=osh bo'ladi. Google ham shunday ishlaydi: google.com/search?q=.... Qidiruv natijasini ulashish mumkin — chunki hamma narsa manzilning o'zida.

5.2 POST — ma'lumot so'rov tanasida

html
<form action="/bron/" method="post">

POST da manzil o'zgarmaydi: /bron/. Ma'lumot esa so'rovning tanasiga (body) yoziladi. Client–server modeli darsidagi HTTP xabarini eslang: sarlavhalar, bo'sh qator, keyin tana. Forma ma'lumoti aynan o'sha tanaga tushadi.

POST qachon to'g'ri: forma serverda nimanidir yaratganda yoki o'zgartirganda. Joy band qilish, ro'yxatdan o'tish, izoh qoldirish, to'lov. Shuningdek, maxfiy ma'lumot (parol) va katta hajmdagi matn uchun ham.

5.3 POST'dan keyin sahifani yangilash

POST yuborilgan sahifada F5 bosing. Brauzer ogohlantiradi: Confirm Form Resubmission — "Formani qayta yuborishni tasdiqlaysizmi?". Chrome tushuntiradi: sahifa siz kiritgan ma'lumotdan foydalangan, qayta ochish amalni takrorlashi mumkin.

Bu HTTP metodlari darsidagi idempotentlik: POST ni takrorlash — yana bitta band qilish, yana bitta to'lov. Brauzer sizni ikki marta joy band qilishdan saqlayapti. Real saytlarda server POST'dan keyin foydalanuvchini boshqa sahifaga yo'naltiradi ("Rahmat, joyingiz band qilindi"). Shunda F5 xavfsiz bo'ladi. Bu usulni backend qismida o'rganasiz.

5.4 Solishtirish

GET POST
Ma'lumot qayerda URL'da (?ism=Ali) So'rov tanasida
Tarixda, ulashishda Ko'rinadi, saqlanadi Faqat manzil saqlanadi
F5 bosilsa Jim qayta yuboriladi Brauzer ogohlantiradi
Qachon Qidiruv, filtr, saralash Yaratish, o'zgartirish, maxfiy

method ning standart qiymati — get. Katta-kichik harf farqi yo'q: POST va post bir xil. Uchinchi qiymat dialog ham bor, lekin u serverga umuman yubormaydi — dialog darsida ko'ramiz.

Diqqat: method="delete" yoki method="put" deb yozsangiz, brauzer xato bermaydi — jimgina GET yuboradi. HTML forma faqat GET va POST biladi. PUT, PATCH, DELETE so'rovlarini JavaScript bilan yuborishni fetch darsida o'rganasiz.

Tekshirib ko'ring: Qaysi formalar uchun GET, qaysilari uchun POST to'g'ri?

  1. Menyuda narx bo'yicha saralash.
  2. Choyxonaga sharh qoldirish.
  3. Saytga parol bilan kirish.
  4. Tadbirlarni sana bo'yicha filtrlash.
Javob
  1. GET — hech narsa o'zgarmaydi, natijani ulashsa bo'ladi.
  2. POST — serverda yangi sharh yaratiladi.
  3. POST — parol URL'da, tarixda va server jurnallarida qolmasligi kerak (8-bo'lim).
  4. GET — bu ham qidiruvning bir turi.

Savol: "Forma serverda nimanidir o'zgartiradimi?" Ha — POST, yo'q — GET.

6. Haqiqiy so'rovni DevTools'da ko'rish

Manzil qatori GET ni ko'rsatadi. POST esa ko'rinmaydi — uni DevTools Network paneli orqali "ushlaymiz".

6.1 Qadamlar

  1. Formani POST ga o'zgartiring: <form method="post">. Uchta maydon bo'lsin: ism, telefon, odam.
  2. Sahifani Live Server'da oching va F12 bilan DevTools'ni oching. Network paneliga o'ting.
  3. Paneldagi Keep log katakchasini (eski versiyalarda — Preserve log) belgilang. U sahifa almashganda so'rovlar ro'yxatini tozalamaydi. Forma yuborish ham sahifa almashishi, shuning uchun bu katakcha kerak.
  4. Formani to'ldiring (Ali Valiyev, +998 90 000 00 00, 4) va yuboring.
  5. Ro'yxatda nomi bron/ bo'lgan yangi qator paydo bo'ladi, uning Status ustunida 405 turadi (nega — 6.4-bo'limda). Shu qatorni bosing.

6.2 Headers yorlig'i

Headers yorlig'ining General qismida:

text
Request URL: http://127.0.0.1:5500/bron/
Request Method: POST
Status Code: 405 Method Not Allowed

Request Headers qismida esa shu sarlavhani toping:

text
Content-Type: application/x-www-form-urlencoded

Bu brauzerning serverga aytgani: "Tanada forma ma'lumoti bor, ism=...&odam=... shaklida yozilgan."

6.3 Payload yorlig'i

Payload yorlig'ini oching. Form Data qismida juftliklar chiroyli ro'yxat bo'lib turadi:

text
ism: Ali Valiyev
telefon: +998 90 000 00 00
odam: 4

Yonidagi view source tugmasini bossangiz, tanadagi asl matnni ko'rasiz:

text
ism=Ali+Valiyev&telefon=%2B998+90+000+00+00&odam=4

Hammasini birlashtirsak, brauzer serverga shu HTTP xabarini yubordi:

text
POST /bron/ HTTP/1.1
Host: 127.0.0.1:5500
Content-Type: application/x-www-form-urlencoded
Content-Length: 50

ism=Ali+Valiyev&telefon=%2B998+90+000+00+00&odam=4

Bu — 02-qismdagi HTTP xabarining aynan o'zi. Endi siz uni o'zingiz yaratdingiz: HTML'dagi bitta forma brauzerni shunday so'rov yozishga majbur qildi.

GET formani ham shu usulda ko'ring. Payload yorlig'ida Query String Parameters bo'ladi — o'sha juftliklar, lekin tana bo'sh.

Maslahat: Firefox'da ham xuddi shunday: Network → so'rovni bosing → Request yorlig'i. Nomlari boshqacha, ma'nosi bir xil.

6.4 Nega 405?

405 Method Not Allowed — "bu metodga ruxsat yo'q" (status kodlari). Live Server faqat fayllarni beradi: u GET ni tushunadi, lekin POST bilan kelgan ma'lumotni qabul qiladigan dasturi yo'q. Shuning uchun sahifa o'rnida bo'sh oyna yoki HTTP ERROR 405 chiqadi.

Bu xato emas — bu kutilgan natija. Sizning HTML'ingiz to'g'ri ishladi: so'rov to'g'ri tuzildi va yuborildi. Uni qabul qiladigan server dasturini backend qismida yozasiz. Hozir biz uchun muhimi — Payload'da ma'lumot bor.

Bo'sh joyni to'ldiring: POST formada ma'lumot DevTools'ning qaysi yorlig'ida ko'rinadi?

7. enctype: tanadagi ma'lumot qanday yoziladi

enctype (encoding type — kodlash turi) POST so'rov tanasi qaysi formatda yozilishini belgilaydi. Uning faqat uchta qiymati bor:

Qiymat Tana ko'rinishi Qachon
application/x-www-form-urlencoded ism=Ali+Valiyev&odam=4 Standart, oddiy matnli formalar
multipart/form-data Har maydon alohida bo'lakda Fayl yuborishda — majburiy
text/plain ism=Ali Valiyev qatorma-qator Deyarli hech qachon

Birinchisini hech narsa yozmasangiz ham brauzer o'zi tanlaydi — 6-bo'limda Content-Type da ko'rdingiz. Ikkinchisini rasm yoki hujjat yuklashda ishlatasiz — Fayl yuklash maydoni darsida. Uchinchisidan qoching: server uni ishonchli o'qiy olmaydi.

html
<form method="post" enctype="multipart/form-data">

enctype faqat POST uchun ma'noga ega. GET da tana yo'q — ma'lumot doim URL'ga yoziladi.

8. Sahifa nega qayta yuklanadi?

Forma yuborilganda brauzer yangi sahifaga o'tadi — xuddi havolani bosgandek. Farqi bitta: havola faqat manzilni ochadi, forma esa manzilga ma'lumot ham qo'shib boradi. Server javob sifatida yangi HTML yuboradi va brauzer uni ko'rsatadi.

Shuning uchun maydonlar bo'shab qoldi: bu yangi sahifa. Eski sahifa va unga yozilgan hamma narsa yo'qoldi.

Zamonaviy saytlarda ko'pincha sahifa qayta yuklanmaydi. Forma yuborilishini JavaScript "ushlab" qoladi va ma'lumotni orqa fonda jo'natadi. Buni Forma qiymatlarini o'qish va submit darsida o'rganasiz.

Lekin JavaScript'siz ishlaydigan oddiy HTML forma — poydevor. JavaScript yuklanmasa ham (sekin internet, eski telefon) forma baribir ishlaydi. Bu yondashuv progressive enhancement deyiladi — Brauzer mosligi darsida batafsil.

9. Hujumchi nigohi

Forma — saytingizga kiradigan eshik. Hujumchi uni ikki tomondan ko'radi.

Birinchisi: GET'dagi maxfiy ma'lumot. Kirish formasini GET bilan yozdingiz deylik:

text
https://example.com/kirish?login=ali&parol=Bahor2026

Parol endi brauzer tarixida, server jurnallarida (log) va ekran rasmida turibdi. Kompyuterdan keyin foydalangan odam uni tarixdan o'qiydi. Parol, karta raqami, pasport ma'lumoti — faqat POST.

Lekin POST ham shifrlash emas. Konvertni yo'lda ochib o'qish mumkin. Ma'lumotni yo'lda faqat HTTPS himoya qiladi (HTTPS va TLS). Shuning uchun forma bor sahifa doim https:// da ishlashi shart.

Ikkinchisi: forma — faqat taklif. Hujumchi sizning formangizdan foydalanishga majbur emas. U terminal orqali istalgan so'rovni o'zi yozadi:

bash
curl -d "ism=Test&odam=5000" https://example.com/bron/

Formada "Necha kishi" maydoni bor edi — 5 000 kishi yozildi. DevTools'dagi Elements panelida maydonni o'chirib, yangisini qo'shish ham mumkin. Keyingi darslarda HTML'ga ko'p cheklov qo'shamiz: maksimal uzunlik, format, majburiy maydon. Ular foydalanuvchiga yordam beradi, lekin himoya qilmaydi. Kelgan har bir qiymatni server qaytadan tekshiradi — Forma xavfsizligi darsida to'liq ko'ramiz.

10. Ko'p uchraydigan xatolar

10.1 name yo'q — ma'lumot yo'q

Maydon ko'rinadi, to'ldiriladi, lekin serverga yetmaydi. Chrome'ning Issues panelidagi ogohlantirishni Formatlash va validatsiya darsida ko'rgan edik: A form field element should have an id or name attribute — "Forma maydonida id yoki name atributi bo'lishi kerak". Tuzatish: har bir yuboriladigan maydonga name bering. Yuborilganini Payload'da tekshiring.

10.2 Maydon form dan tashqarida

html
<form method="post">
  <input type="text" name="ism">
  <button type="submit">Yuborish</button>
</form>
<input type="text" name="telefon">

Telefon maydoni ekranda formaning tagida, lekin kodda </form> dan keyin. U yuborilmaydi — forma faqat o'z ichidagi maydonlarni yig'adi. Tuzatish: maydonni form ichiga ko'chiring.

10.3 Forma ichida forma

Ikkita formani ichma-ich qo'ysangiz, parser ichki <form> tegini tashlab yuboradi (Brauzer HTML'ni qanday tahlil qiladi). Natijada hamma maydon tashqi formaga tegishli bo'ladi. Tuzatish: formalarni yonma-yon joylang. HTML'da forma ichida forma bo'lmaydi.

10.4 Noto'g'ri method

method="delete" yoki method="pots" (xato yozilgan) — brauzer jim GET yuboradi. Ma'lumot URL'da paydo bo'lsa-yu, siz POST kutgan bo'lsangiz, avval method ni harfma-harf tekshiring.

11. Mashqlar

1-mashq (oson): URL'ni oldindan ayting

Forma:

html
<form action="/menyu/" method="get">
  <input type="text" name="q" aria-label="Taom nomi">
  <input type="text" name="saralash" aria-label="Saralash">
  <button type="submit">Izlash</button>
</form>

Foydalanuvchi birinchi maydonga lag'mon, ikkinchisiga arzon yozdi. Brauzer qaysi manzilni ochadi?

Yechim
text
/menyu/?q=lag%27mon&saralash=arzon

Metod GET, shuning uchun ma'lumot URL'ga yoziladi. Juftliklar maydonlar tartibida & bilan ulanadi. Apostrof %27 ga aylanadi (3.4-bo'limdagi percent-encoding). aria-label — landmarklar darsidagi ko'rinmas nom, u yuborilmaydi.

2-mashq (o'rta): Menyu qidiruvi

«Bahor» saytining menyu/index.html sahifasidagi qidiruv formasini ishlating (5.1-bo'limdagi kod). Live Server'da somsa deb qidiring.

  1. Manzil qanday o'zgardi?
  2. Network panelida so'rovni toping. Uning metodi, statusi va Payload'i qanday?
  3. Olingan manzilni nusxalab, yangi yorliqda oching. Nima bo'ldi?
Yechim
  1. http://127.0.0.1:5500/menyu/?q=somsa.
  2. Metod GET, status 200 OK. Payload'da Query String Parameters: q: somsa. Live Server GET ni tushunadi va menyu/index.html ni qaytaradi. Qidiruv natijalarini ko'rsatish esa server dasturining ishi — hozircha sahifa o'zgarmaydi.
  3. Aynan o'sha so'rov qaytadan yuborildi. GET natijasini ulashsa bo'lishi shu: hamma ma'lumot manzilning o'zida.

3-mashq (qiyin): Yo'qolgan telefon

Administrator shikoyat qildi: "Band qilishlarda telefon raqami kelmayapti!" Formada nima xato? Network panelida qanday isbotlaysiz va qanday tuzatasiz?

html
<form method="post">
  <label>Ismingiz: <input type="text" name="ism"></label>
  <label>Telefon: <input type="text" id="telefon"></label>
  <label>Necha kishi: <input type="text" name="odam"></label>
  <button type="submit">Joy band qilish</button>
</form>
Yechim

Telefon maydonida name yo'q — faqat id. Shuning uchun u yuborilmaydi.

Isbot: Keep log yoqilgan Network panelida formani yuboring. POST so'rovning Payload yorlig'ida faqat ism va odam bor, telefon yo'q.

Tuzatish:

html
<label>Telefon: <input type="text" name="telefon"></label>

Tuzatgach, formani qayta yuboring va Payload'da telefon: +998 ... paydo bo'lganini ko'ring. Tekshirmasdan "tuzatdim" demang — Payload eng aniq isbot.

12. Real ishda

  • Har bir sayt formaga ega: ro'yxatdan o'tish, kirish, qidiruv, buyurtma, to'lov. Uzum Market'dagi qidiruv satri — GET forma, "Buyurtma berish" — POST so'rov.
  • Network → Payload — frontend va backend dasturchi o'rtasidagi bahsning hakami. "Ma'lumot kelmayapti" desa, birinchi savol: "Payload'da bormi?" Bor bo'lsa — muammo serverda, yo'q bo'lsa — formada.
  • Backend'da siz yozgan name lar server kodida kalit bo'lib keladi: masalan, Express'da req.body.ism (req obyekti). Frontend va backend dasturchi name larni oldindan kelishib oladi.
  • Intervyuda ko'p so'raladi: "GET va POST farqi nima?" va "Forma qaysi formatda yuboriladi?" Endi ikkalasiga ham javobingiz bor.

Xulosa

  • Forma yuborilganda har bir maydon name=qiymat juftligiga aylanadi; name siz maydon yuborilmaydi.
  • action — qayerga yuborish (standart: joriy sahifa), method — qanday (standart: get).
  • GET — ma'lumot URL'da, qidiruv va filtr uchun; POST — so'rov tanasida, yaratish, o'zgartirish va maxfiy ma'lumot uchun.
  • Haqiqiy so'rovni DevTools → Network → Headers va Payload yorliqlarida ko'rasiz.
  • enctype — tanadagi format: standart urlencoded, fayl uchun multipart/form-data.
  • HTML'dagi cheklovlar faqat yordam; himoya — HTTPS va serverdagi tekshiruv.

Keyingi dars: label: har maydonning nomi — maydon yonidagi yozuvni unga to'g'ri bog'laymiz: bosiladigan hudud kattalashadi, ekran o'quvchi esa har maydonni nomi bilan aytadi.

Manbalar

  • MDN: "Sending form data" va "<form>: The Form element" — developer.mozilla.org
  • WHATWG HTML: "Form submission" — html.spec.whatwg.org
  • Chrome DevTools: "Network features reference" (Payload yorlig'i) — developer.chrome.com
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML forma qanday ishlaydi: action, method, name va brauzer yuboradigan so'rov — IlmHamroh