Forma asoslari — form, action, method, GET vs POST

~15 daq · HTML · Formalar

Muammodan boshlaylik

Saytga qidiruv maydoni qo'shdingiz:

<input placeholder="Qidirish...">
<button>Izlash</button>

Foydalanuvchi so'z yozib tugmani bosadi — hech narsa bo'lmaydi. Enter bosadi — yana hech narsa. Ma'lumot hech qayerga ketmaydi.

Sabab: input va button o'zicha faqat "maydon" va "tugma". Ularni birlashtirib, ma'lumotni qayerga va qanday yuborishni aytadigan narsa — <form> tegi.

<form action="/qidiruv" method="get">
  <input name="q" placeholder="Qidirish...">
  <button>Izlash</button>
</form>

Endi tugma bosilsa yoki Enter bosilsa, brauzer /qidiruv?q=flexbox sahifasiga o'tadi. JavaScript ning bir qatori ham yo'q.

form tegi

<form action="/royxatdan-otish" method="post">
  ...maydonlar...
  <button type="submit">Yuborish</button>
</form>

name — eng muhim atribut

<form action="/qidiruv">
  <input placeholder="Qidirish...">          <!-- ❌ name yo'q — yuborilmaydi -->
  <input name="q" placeholder="Qidirish..."> <!-- ✅ -->
</form>

Brauzer faqat name atributi bor maydonlarni yuboradi. Ma'lumot name=qiymat juftliklari ko'rinishida ketadi:

<form action="/qidiruv">
  <input name="q" value="grid">
  <input name="kurs" value="css">
</form>

/qidiruv?q=grid&kurs=css

[!WARNING] Formalar bilan eng ko'p uchraydigan xato — name ni unutish. Maydon ko'rinadi, foydalanuvchi to'ldiradi, lekin server bu ma'lumotni olmaydi. id — label va CSS/JavaScript uchun; name — serverga yuborish uchun. Ular boshqa-boshqa narsa.

Yuborish usullari

Forma uch usulda yuboriladi:

1. type="submit" tugmani bosish (forma ichidagi <button> standart holatda — submit)
2. Matn maydonida Enter bosish
3. JavaScript: form.requestSubmit()

<form>
  <button>Yuborish</button>                 <!-- submit (standart) -->
  <button type="submit">Yuborish</button>   <!-- aniq yozilgan — yaxshiroq -->
  <button type="reset">Tozalash</button>    <!-- hamma maydonni boshlang'ich holatga -->
  <button type="button">Ko'rsatish</button> <!-- hech narsa yubormaydi, JS uchun -->
</form>

[!WARNING] Forma ichidagi har qanday <button> — type yozilmasa — submit tugmasi. "Parolni ko'rsatish" yoki "Qo'shimcha maydon" kabi JavaScript tugmalar bosilganda forma kutilmaganda yuborilib, sahifa yangilanadi. Bunday tugmalarga doim type="button" yozing.

GET — ma'lumot URL da

<form action="/qidiruv" method="get">
  <input name="q">
  <button>Izlash</button>
</form>

https://devdocs.uz/qidiruv?q=flexbox+markazlash

• Ma'lumot URL ga query string (? dan keyin) sifatida qo'shiladi
• Brauzer tarixida, xatcho'plarda, server loglarida ko'rinadi
• Havolani nusxalab boshqaga yuborish mumkin — natija bir xil
• Uzunlik cheklangan (amalda bir necha ming belgi)

Qachon: ma'lumotni o'qish — qidiruv, filtrlash, saralash, sahifalash. Natijani ulashish yoki xatcho'pga qo'shish foydali bo'lgan holatlar.

/kurslar?daraja=boshlangich&til=uz&saralash=yangi

POST — ma'lumot so'rov ichida

<form action="/kirish" method="post">
  <input name="email" type="email">
  <input name="parol" type="password">
  <button>Kirish</button>
</form>

POST /kirish HTTP/1.1
Content-Type: application/x-www-form-urlencoded

email=ali%40mail.uz&parol=maxfiy123

• Ma'lumot so'rovning tanasida (body) ketadi — URL da ko'rinmaydi
• Hajmi deyarli cheklanmagan, fayllar ham yuboriladi
• Sahifani yangilasangiz, brauzer "Ma'lumotni qayta yuborasizmi?" deb so'raydi

Qachon: o'zgartiradigan amallar — ro'yxatdan o'tish, kirish, buyurtma, to'lov, izoh qoldirish, fayl yuklash.

GET va POST — taqqoslash

[!INFO] POST shifrlamaydi. Ma'lumot URL da ko'rinmaydi, lekin DevTools ning Network bo'limida to'liq ko'rinadi va HTTP orqali ochiq holda ketadi. Haqiqiy himoya — HTTPS. Parol va shaxsiy ma'lumotlar uchun POST + HTTPS — ikkalasi ham shart.

label — maydon nomi

<!-- ❌ -->
Email: <input name="email">

<!-- ✅ for + id -->
<label for="email">Email</label>
<input id="email" name="email" type="email">

<!-- ✅ ichiga o'rash -->
<label>
  Email
  <input name="email" type="email">
</label>

<label>:

• Ekran o'quvchi maydonga kelganda nomini o'qiydi ("Email, tahrirlash maydoni")
• Label ni bosish maydonni fokuslaydi — kichik checkbox va radio tugmalar uchun ayniqsa qulay (17-dars)
• for qiymati maydonning id si bilan bir xil bo'lishi kerak

[!WARNING] placeholder label o'rnini bosmaydi: yozish boshlanishi bilan yo'qoladi, foydalanuvchi maydon nima uchun ekanini unutadi, ko'pincha past kontrastli va ba'zi ekran o'quvchilar uni o'qimaydi. Placeholder — faqat namuna uchun (ali@mail.uz).

fieldset va legend — guruhlash

<form>
  <fieldset>
    <legend>Shaxsiy ma'lumotlar</legend>
    <label for="ism">Ism</label>
    <input id="ism" name="ism">
    <label for="tel">Telefon</label>
    <input id="tel" name="tel" type="tel">
  </fieldset>

  <fieldset>
    <legend>Yetkazib berish</legend>
    ...
  </fieldset>
</form>

• <fieldset> — bog'liq maydonlarni guruhlaydi (standart holatda ramka bilan)
• <legend> — guruh nomi; ekran o'quvchi guruh ichidagi har bir maydonda uni eslatadi
• <fieldset disabled> — guruhdagi barcha maydonlarni bir yo'la o'chiradi

Radio tugmalar guruhi uchun ayniqsa muhim (17-dars).

To'liq misol

<form action="/aloqa" method="post">
  <fieldset>
    <legend>Biz bilan bog'laning</legend>

    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" autocomplete="name" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" required>

    <label for="xabar">Xabar</label>
    <textarea id="xabar" name="xabar" rows="5" required></textarea>
  </fieldset>

  <button type="submit">Yuborish</button>
</form>

Yuborilganda server ism, email va xabar ni oladi. required (19-dars) bo'sh maydon bilan yuborishga yo'l qo'ymaydi, autocomplete brauzerga avtomatik to'ldirishda yordam beradi.

JavaScript bilan

Zamonaviy saytlarda forma ko'pincha sahifani yangilamasdan, JavaScript orqali yuboriladi:

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();                    // standart yuborishni to'xtatish

  const data = new FormData(form);       // barcha name=qiymat juftliklari
  console.log(data.get('email'));

  await fetch('/aloqa', { method: 'POST', body: data });
});

Muhim: hatto JavaScript bilan ham <form>, name va type="submit" ni ishlating. FormData maydonlarni name bo'yicha yig'adi, Enter bilan yuborish bepul ishlaydi, va brauzer validatsiyasi (19-dars) avtomatik ishga tushadi.

Nima uchun shunday?

Nima uchun HTML formasi JavaScript siz ham ishlaydi — bugun hamma narsa JavaScript bilan qilinadi-ku?

Formalar web ning eng eski qismlaridan biri — 1993 yilda paydo bo'lgan, JavaScript dan ikki yil oldin. Ular brauzerning o'ziga qurilgan: yuborish, Enter bilan ishlash, avtoto'ldirish, parol menejeri, validatsiya, ekran o'quvchi bilan ishlash — hammasi tayyor. JavaScript yuklanmasa (sekin internet, xato, bloklangan skript) ham forma ishlaydi. Shuning uchun yaxshi amaliyot — avval to'g'ri HTML forma qurish, keyin JavaScript bilan yaxshilash (progressive enhancement). Teskari yo'l — div va onclick lardan forma yasash — bu bepul imkoniyatlarning hammasini qo'lda qayta yozish demak.

Xulosa

Eslab qoling:

• <form action="..." method="..."> — maydonlarni birlashtiradi va qayerga, qanday yuborishni aytadi
• Faqat name li maydonlar yuboriladi
• Forma ichidagi <button> — standart holatda submit; JS tugmalarga type="button"
• GET — URL da, ulashsa bo'ladi: qidiruv, filtr
• POST — so'rov tanasida: kirish, buyurtma, fayllar; shifrlash — HTTPS ning ishi
• Har maydonga <label> (for = id); placeholder label emas
• <fieldset> + <legend> — guruhlash
• JS bilan: e.preventDefault() + new FormData(form)

Keyingi dars

16-dars: Input turlari — text, email, password, number, tel, url, date