Bu modulda formalarni Bootstrap bilan yig’ish o’rganildi: maydon class’lari, guruhlash va tekshiruv holatlari.

form-control va asosiy maydonlar

HTML kursidan tanish forma elementlariga Bootstrap class’lari beriladi:

<div class="mb-3">
  <label for="ism" class="form-label">Ismingiz</label>
  <input type="text" class="form-control" id="ism">
</div>

Natija: to’liq kenglikdagi, yumaloq burchakli, focus’da ko’k halo chiqaradigan ozoda maydon.

Naqsh doim bir xil: form-label + form-control, tashqarisida bo’shliq uchun mb-3. form-control-lg / form-control-sm — o’lcham variantlari.

Select, Checks, Radios va Range

Har element turiga o’z class’i bor — eslab qolish oson:

Tipik xato. <select>ga form-control berish — ko’rinish buziladi; select uchun aynan form-select kerak.

Input group

Maydon atrofiga matn yoki tugma "yopishtirish":

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="username">
</div>

Natija: chap tomonida @ belgili yagona butunlikdek ko’rinadigan maydon — narx (so’m), qidiruv tugmasi kabi holatlarda ishlatiladi.

Floating labels va Form layout

Floating label — yorliq maydon ichida turib, yozishni boshlaganingizda tepaga "suzib" chiqadi:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="email" placeholder="[email protected]">
  <label for="email">E-mail manzil</label>
</div>

E’tibor: bu naqshda placeholder bo’lishi shart va label input’dan keyin yoziladi. Formani ustunlarga joylash esa tanish grid bilan qilinadi: row ichida col-md-6 maydonlar.

Validation

Bootstrap maydon holatini ko’rsatadigan class’lar beradi: is-invalid (qizil chegara + xabar) va is-valid (yashil):

<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">Ism kiritilishi shart.</div>

Natija: qizil chegarali maydon, ostida qizil xato matni.

needs-validation + novalidate naqshi bilan brauzerning standart xabarlari o’rniga Bootstrap ko’rinishi ishlatiladi — tekshiruvni JS yoqadi, lekin class’lar tayyor.

Amaliyot

1. Ro’yxatdan o’tish formasi: ism, e-mail, parol — hammasi form-label + form-control + mb-3 naqshida.
2. So’rovnoma qo’shing: form-select shahar, form-check qiziqishlar, form-range baho.
3. Telefon maydonini input-group bilan "+998" prefiksli qiling.
4. Login formasini floating label’larga o’tkazing.
5. Bo’sh yuborilgan maydonga is-invalid + invalid-feedback ko’rinishini qo’lda berib sinang.

Modul testini ishlang — keyingi modul kursning eng "serhosil" qismi: tayyor komponentlar.