HTML forma asoslari (form, input, button)

Qidiruv, kirish, ro’yxatdan o’tish va buyurtma berish sahifalari foydalanuvchidan ma’lumot oladi. HTML forma ma’lumot kiritish boshqaruvlarini bitta mantiqiy guruhga birlashtiradi va ularni serverga yuborishga tayyorlaydi.

Bu dars yakunida <form>, <label>, <input> va <button> ni bog’laysiz, mos type tanlaysiz, name ning yuborishdagi rolini tushunasiz hamda oddiy brauzer validatsiyasidan foydalanasiz.

Formaning asosiy qismlari

<form action="/royxatdan-otish" method="post">
  <label for="ism">Ismingiz</label>
  <input id="ism" name="ism" type="text">

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

• <form> barcha maydonlarni o’raydi;
• action ma’lumot qaysi manzilga yuborilishini bildiradi;
• method yuborish usulini belgilaydi;
• <label> maydonning tushunarli nomi;
• <input> foydalanuvchi kiritadigan qiymat;
• submit tugmasi formani yuborishni boshlaydi.

GET odatda qidiruv va filtr kabi URL orqali ulashish mumkin bo’lgan so’rovlar uchun, POST esa yangi ma’lumot yuborish uchun ishlatiladi. Ularning server tomondagi farqi HTTP darsida batafsil tushuntirilgan.

Label va inputni bog’lash

label dagi for qiymati inputning id qiymatiga teng bo’lishi kerak:

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

Shunda label ustiga bosish inputni fokuslaydi. Ekran o’quvchi ham maydonning nomini aniq aytadi. placeholder qisqa namuna berishi mumkin, lekin u label o’rnini bosmaydi: foydalanuvchi yozishni boshlaganda placeholder yo’qoladi.

Input turlari

type brauzerga qanday qiymat kutilayotganini bildiradi:

type ni ma’lumotga qarab tanlang. Telefon raqami hisob-kitob qilinadigan son emas, shuning uchun ko’pincha type="tel" unga number dan mosroq.

name — yuboriladigan kalit

Forma yuborilganda qiymatlar name=qiymat juftliklari ko’rinishida tayyorlanadi:

<input name="email" value="ali@example.com">

Bu maydon taxminan email=ali@example.com sifatida yuboriladi. id elementni label, CSS va JavaScript bilan bog’laydi; name esa yuboriladigan ma’lumotga nom beradi. name bo’lmagan boshqaruv qiymati odatda forma ma’lumotiga kiritilmaydi.

Jonli forma natijasi

<form>
<p>
  <label for="foydalanuvchi">Ismingiz</label><br>
  <input id="foydalanuvchi" name="ism" type="text" autocomplete="name" required>
</p>

<p>
  <label for="pochta">Email manzil</label><br>
  <input id="pochta" name="email" type="email" autocomplete="email" required>
</p>

<p>
  <label for="yosh">Yoshingiz</label><br>
  <input id="yosh" name="yosh" type="number" min="7" max="100">
</p>

<button type="submit">Ro'yxatdan o'tish</button>
<button type="reset">Tozalash</button>
</form>

<style>
label { font-weight: 650; }
input { margin-top: 5px; padding: 8px; }
button { padding: 8px 12px; }
</style>

Email formatini buzib yoki majburiy maydonni bo’sh qoldirib yuborishga urinib ko’ring: brauzer required, type="email", min va max qoidalari asosida dastlabki tekshiruvni bajaradi. Bu tekshiruv qulaylik yaratadi, ammo xavfsizlik uchun server kelgan ma’lumotni yana tekshirishi shart.

Tugma turlarini aniq yozing

• type="submit" formani yuboradi;
• type="reset" maydonlarni boshlang’ich holatga qaytaradi;
• type="button" o’z-o’zidan hech narsa qilmaydi, odatda JavaScript bilan ishlaydi.

Forma ichidagi <button> ning standart turi submit bo’lishi mumkin. Yubormasligi kerak bo’lgan tugmaga type="button" ni aniq yozing.

Foydali atributlar

required maydonni majburiy, minlength va maxlength matn uzunligini, min va max son chegarasini belgilaydi. autocomplete="name" yoki autocomplete="email" brauzerga saqlangan mos ma’lumotni taklif qilishga yordam beradi. disabled boshqaruvni ishlatib bo’lmaydigan qiladi va uning qiymati yuborilmaydi; readonly esa qiymatni o’zgartirishni to’xtatadi, ammo uni forma bilan yuborish mumkin.

Amaliy mashq

Ism, email, tug’ilgan sana va parol maydonlari bo’lgan ro’yxatdan o’tish formasi yarating. Har bir inputga bog’langan label, name, mos type va zarur validatsiya atributlarini yozing. Submit va oddiy tugma turlarini aniq belgilang.

Qisqacha xulosa

• <form> boshqaruvlarni va yuborish sozlamalarini birlashtiradi.
• for va id labelni maydon bilan bog’laydi.
• type qiymatga mos interfeys va dastlabki tekshiruv beradi.
• name qiymatning yuboriladigan nomidir.
• HTML validatsiyasi server tekshiruvini almashtirmaydi.

Keyingi darsda select, textarea, checkbox va radio bilan murakkabroq tanlovlarni tuzamiz.