HTML formasini qanday yaratmoqchisiz?

HTML shaklini yaratish uchun <form> elementidan foydalanaman. Uning ichida matn maydonlari (<input type="text">), parol maydonlari (<input type="password">), belgilash uchun kataklar (<input type="checkbox">), radio tugmalari (<input type="radio">), tushirish ro‘yxatlari (<select> va <option>), matn maydonlari (<textarea>) va yuborish tugmalari (<button type="submit"> yoki <input type="submit">) joylashadi.

Har bir forma elementi server tomonida aniqlash uchun name atributiga ega bo‘ladi va odatda <label> bilan bog‘lash uchun id atributiga ham ega bo‘ladi.

<form> atributlari:

• action: Forma yuborilganda ma’lumotlar yuboriladigan URL.
• method: Ma’lumotlarni yuborish uchun HTTP usuli (GET yoki POST).
• enctype: Yuborilgan ma’lumotlarning kodlash turi (masalan, fayllarni yuklash uchun multipart/form-data).

Oddiy forma misoli:

<form action="/submit-form" method="post">
  <label for="username">Foydalanuvchi nomi:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Parol:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Meni eslab qol</label><br><br>

  <label for="country">Mamlakat:</label><br>
  <select id="country" name="country">
    <option value="ru">Rossiya</option>
    <option value="us">AQSh</option>
  </select><br><br>

  <label for="message">Xabar:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

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

Forma validatsiyasi ham mijoz tomonida (HTML5 validatsiya atributlari, JavaScript yordamida) ham server tomonida amalga oshirilishi mumkin.

HTML5 validatsiya atributlari:

• required: Majburiy maydon.
• minlength, maxlength: Matn maydonining minimal va maksimal uzunligi.
• min, max: Raqamli maydonlar uchun minimal va maksimal qiymatlar.
• type (email, url, number, date va boshqalar) brauzer tomonidan avtomatik validatsiya uchun.
• pattern: Kiritish uchun muntazam ifoda.

HTML5 validatsiya bilan misol:

<form action="/submit-form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Yosh (18 dan 99 gacha):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Pochta indeksi (5 raqam):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

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

Formani stilizatsiya qilish uchun CSS ishlatiladi. Murakkabroq mantiq yoki asinxron ma’lumot yuborish uchun JavaScript qo‘llaniladi. Formaning kirish imkoniyatini oshirish uchun mos ARIA atributlari va to‘g‘ri HTML tuzilishi ishlatiladi.