# HTML, CSS va JavaScript ko'prigi
> HTML tuzilma, CSS ko'rinish va JavaScript xatti-harakatni boshqarishini bitta forma misolida bog'lang hamda keyingi amaliy yo'lni belgilang.
Manba: https://learncode.uz/web-dasturlash/html-css-js-koprik/
Sana: 2026-05-10
*Foydalanuvchi ko'rgan bitta interfeys HTML, CSS va JavaScriptning hamkorligidan hosil bo'ladi.*
Web tizimini tushunish boshqa, brauzerda uni qurish boshqa ko'nikma. Shu
paytgacha so'rov, server va ma'lumotlar bazasi haqida gaplashdik. Endi
foydalanuvchi bevosita ko'radigan qatlamga tushamiz.
Frontendning uch tayanchi bor va ular bir-birini almashtirmaydi — **har biri
o'z vazifasini bajaradi**.
| Qatlam | Vazifasi | Forma misolida |
|---|---|---|
| HTML | Mazmun va semantika | `label`, `input`, `button` |
| CSS | Ko'rinish va layout | masofa, rang, responsive holat |
| JavaScript | Xatti-harakat va holat | tekshirish, yuborish, natijani ko'rsatish |
HTMLsiz JavaScript qaysi element bilan ishlashini bilmaydi, CSSsiz interfeys
o'qilishi qiyin bo'ladi, JavaScriptsiz esa ko'p zamonaviy interaksiya sodir
bo'lmaydi.
## Bir forma — uch qatlam
Keling, oddiy obuna formasini uch bosqichda quraylik. Avval **faqat HTML**:
```html
```
Diqqat qiling: bu bosqichda hech qanday CSS va JavaScript yo'q, lekin forma
**allaqachon ishlaydi**. Brauzer `type="email"` va `required` tufayli
kiritishni o'zi tekshiradi, `label` esa `input` bilan bog'langan.
Endi **CSS** ko'rinishni beradi:
```css
#obuna { display: grid; gap: 0.75rem; max-width: 24rem; }
#obuna input { padding: 0.6rem; border: 1px solid #999; border-radius: 6px; }
#obuna input:focus-visible { outline: 2px solid #0a58ca; }
```
`:focus-visible` qatorini tashlab ketmang — u klaviatura bilan ishlaydigan
foydalanuvchi qayerda turganini ko'rsatadi. Bu
[accessibility](https://learncode.uz/web-dasturlash/web-accessibility) darsidagi asosiy talab.
Nihoyat **JavaScript** xatti-harakatni qo'shadi:
```js
const forma = document.querySelector('#obuna');
const natija = document.querySelector('#natija');
forma.addEventListener('submit', async (hodisa) => {
hodisa.preventDefault();
natija.textContent = 'Yuborilmoqda...';
const javob = await fetch('/api/obuna', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: forma.email.value }),
});
natija.textContent = javob.ok
? 'Obuna tasdiqlandi.'
: 'Yuborib bo\'lmadi, qayta urinib ko\'ring.';
});
```
Shu 15 qatorda butun web zanjiri bor: hodisa, `fetch` orqali
[HTTP so'rov](https://learncode.uz/web-dasturlash/http-sorov-javob), JSON body va serverdan kelgan
javobga qarab interfeysni yangilash.
## Progressive enhancement
### Qatlamlarni ajratish
Yuqoridagi tartib tasodifiy emas. U **progressive enhancement** deb ataladigan
yondashuvni ko'rsatadi: avval hamma joyda ishlaydigan asos, keyin ustiga
qulaylik qatlamlari.
*Har qatlam mustaqil qiymat beradi — yuqoridagisi ishlamasa ham
pastdagisi ishlashda davom etadi.*
Bu nazariy chiroylilik emas, amaliy foyda: JavaScript yuklanmasa ham (sekin
tarmoq, xato, eski brauzer) forma `action` atributi orqali baribir yuborilishi
mumkin. Foydalanuvchi hech bo'lmasa asosiy vazifasini bajaradi.
### Har qatlam o'z ishini qilsin
Boshlovchilar tez-tez qatlamlarni aralashtirib yuboradi. Quyidagi jadval
eng ko'p uchraydigan xatolarni ko'rsatadi:
| Xato | Nega yomon | To'g'ri yechim |
|---|---|---|
| Tugma o'rniga `