Mundarija (37)
- Bu darsda
- 1. Nega bu kerak?
- 2. Birinchi forma
- 2.1 form va input
- 2.2 Yuborib ko'ring
- 3. name va value: maydon qanday "juftlik"ka aylanadi
- 3.1 name=qiymat
- 3.2 name siz maydon yuborilmaydi
- 3.3 value — boshlang'ich qiymat
- 3.4 Bo'sh joy, apostrof va + qanday yuboriladi
- 3.5 Bir xil name li ikki maydon
- 4. action: blanka qaysi darchaga topshiriladi
- 5. method: ochiq otkritka yoki yopiq konvert
- 5.1 GET — ma'lumot manzilda
- 5.2 POST — ma'lumot so'rov tanasida
- 5.3 POST'dan keyin sahifani yangilash
- 5.4 Solishtirish
- 6. Haqiqiy so'rovni DevTools'da ko'rish
- 6.1 Qadamlar
- 6.2 Headers yorlig'i
- 6.3 Payload yorlig'i
- 6.4 Nega 405?
- 7. enctype: tanadagi ma'lumot qanday yoziladi
- 8. Sahifa nega qayta yuklanadi?
- 9. Hujumchi nigohi
- 10. Ko'p uchraydigan xatolar
- 10.1 name yo'q — ma'lumot yo'q
- 10.2 Maydon form dan tashqarida
- 10.3 Forma ichida forma
- 10.4 Noto'g'ri method
- 11. Mashqlar
- 1-mashq (oson): URL'ni oldindan ayting
- 2-mashq (o'rta): Menyu qidiruvi
- 3-mashq (qiyin): Yo'qolgan telefon
- 12. Real ishda
- Xulosa
- Manbalar
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=qiymatjuftligiga aylantiradi vaactiondagi 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
formtegi nima qilishini va forma yuborilganda nima bo'lishini tushuntira olasiz.namevavalueqanday qilibname=qiymatjuftligiga aylanishini bilasiz.actionvamethodni to'g'ri tanlaysiz: GET qachon, POST qachon.- Brauzer yuborgan haqiqiy so'rovni DevTools Network panelida topib o'qiy olasiz.
enctypening 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:
<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, xuddiimgkabi (Teg, element va atribut).type="text"— "bu oddiy matn maydoni".typening 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:
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:
http://127.0.0.1:5500/bron/?ism=Ali&odam=4Mana, 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
Enterbosing — forma baribir yuboriladi. Bu yashirin yuborish (implicit submission) deyiladi: formada yuborish tugmasi bo'lsa,Enteruni bosgandek ishlaydi.
Tekshirib ko'ring: Siz
formga 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.
<label>Necha kishi: <input type="text"></label>Formani yana yuboring. Manzil:
http://127.0.0.1:5500/bron/?ism=Aliodam 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—namening o'rnini bosmaydi.<input type="text" id="ism">ham yuborilmaydi.idsahifa ichida elementni topish uchun (fragment havolalar darsida ishlatgansiz),nameesa serverga yuborish uchun.
3.3 value — boshlang'ich qiymat
value atributi maydonga oldindan qiymat qo'yadi:
<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:
<label>Telefon: <input type="text" name="telefon"></label>Telefonga +998 90 000 00 00 yozib yuboring. Manzil:
?ism=Ali+Valiyev&telefon=%2B998+90+000+00+00&odam=4Uchta qiziq narsa bor:
- Bo'sh joy
+ga aylandi:Ali+Valiyev. - Telefondagi haqiqiy
+esa%2Bga aylandi. Chunki bu yerda+"bo'sh joy" degani — brauzer ularni adashtirmaslik uchun haqiqiy plyusni kodlaydi. O'g'iloykabi ismdagi apostrof%27ga 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.
<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
actionmanzilida o'zining query string'i bo'lsa, brauzer uni tashlab yuboradi va o'rniga forma ma'lumotini yozadi.action="?til=uz"dagitil=uzserverga 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
<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:
<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
<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"yokimethod="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?
- Menyuda narx bo'yicha saralash.
- Choyxonaga sharh qoldirish.
- Saytga parol bilan kirish.
- Tadbirlarni sana bo'yicha filtrlash.
Javob
- GET — hech narsa o'zgarmaydi, natijani ulashsa bo'ladi.
- POST — serverda yangi sharh yaratiladi.
- POST — parol URL'da, tarixda va server jurnallarida qolmasligi kerak (8-bo'lim).
- 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
- Formani POST ga o'zgartiring:
<form method="post">. Uchta maydon bo'lsin:ism,telefon,odam. - Sahifani Live Server'da oching va
F12bilan DevTools'ni oching. Network paneliga o'ting. - 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.
- Formani to'ldiring (
Ali Valiyev,+998 90 000 00 00,4) va yuboring. - Ro'yxatda nomi
bron/bo'lgan yangi qator paydo bo'ladi, uningStatusustunida405turadi (nega — 6.4-bo'limda). Shu qatorni bosing.
6.2 Headers yorlig'i
Headers yorlig'ining General qismida:
Request URL: http://127.0.0.1:5500/bron/
Request Method: POST
Status Code: 405 Method Not AllowedRequest Headers qismida esa shu sarlavhani toping:
Content-Type: application/x-www-form-urlencodedBu 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:
ism: Ali Valiyev
telefon: +998 90 000 00 00
odam: 4Yonidagi view source tugmasini bossangiz, tanadagi asl matnni ko'rasiz:
ism=Ali+Valiyev&telefon=%2B998+90+000+00+00&odam=4Hammasini birlashtirsak, brauzer serverga shu HTTP xabarini yubordi:
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=4Bu — 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.
<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:
https://example.com/kirish?login=ali&parol=Bahor2026Parol 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:
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
<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:
<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
/menyu/?q=lag%27mon&saralash=arzonMetod 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.
- Manzil qanday o'zgardi?
- Network panelida so'rovni toping. Uning metodi, statusi va Payload'i qanday?
- Olingan manzilni nusxalab, yangi yorliqda oching. Nima bo'ldi?
Yechim
http://127.0.0.1:5500/menyu/?q=somsa.- Metod
GET, status200 OK. Payload'da Query String Parameters:q: somsa. Live Server GET ni tushunadi vamenyu/index.htmlni qaytaradi. Qidiruv natijalarini ko'rsatish esa server dasturining ishi — hozircha sahifa o'zgarmaydi. - 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?
<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:
<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
namelar server kodida kalit bo'lib keladi: masalan, Express'dareq.body.ism(req obyekti). Frontend va backend dasturchinamelarni 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=qiymatjuftligiga aylanadi;namesiz 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: standarturlencoded, fayl uchunmultipart/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
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!