HTML Formalari

HTML Formalari


<form> Elementi

HTML formalari foydalanuvchilarga ma’lumot kiritish va ularni to’plashni ta’minlaydi.

<form> elementi HTML formalarini belgilaydi:

<form>
.
forma elementlari .
<form>

HTML formalari forma elementlarini o’z ichiga oladi.

Forma elementlari input elements(kiritish elementlari), checkboxes(tasdiqlash qutilari), radio buttons(radio tugmalari), submit buttons(kiritish tugmalari) va shu kabilarning turli xil turlari.


<input> Elementi

<input> elementi eng muhim forma elementi hisoblanadi.

<input> elementining turli ko'rinishlari mavjud bo’lib, type (tip) atributiga qarab o’zgartirish mumkin

Ushbu bo’limda ulardan ayrimlarini ko’rsatib o’tamiz:

Type Tavsif
text Odatiy tekst kiritish uchun foydalaniladi
radio radio tugmasi(ko’pgina tanlovlardan birini tanlash uchun)
submit submit tugmasi formalarni taqdim qilish uchun

...   input elementi turlari haqida keyingi darslarda yanada batafsil to’xtalamiz


Matn Kiritish Formalari

<input type="text"> ushbu formaga bir qatorli matn kiritilishini izohlaydi:

Namuna:

<form>
  Ismingizni kiriting:<br>
  <input type="text" name="ismingiz"><br>
  Familiyangizni kiriting:<br>
  <input type = "text" name ="familiyangiz">
</form>

Brauzerdagi natija:

Ismingizni kiriting:

Familiyangizni kiriting:

...   Eslatma:Formaning standart(default) holatda harflar sigimi 20 tani tashkil qiladi


Radio Kiritish Tugmasi

<input type="radio"> ushbu forma bir necha tanlovdan faqat birini tanlash imkonini beradi:

Namuna:

<form>
  <input type="radio" name="jinsingiz" value="erkak"
  checked>Erkak<br>
  <input type="radio" name="jinsingiz" value="ayol"
  checked>Ayol<br>
</form>

Brauzerdagi natija:

Erkak
Ayol

Kiritish(Submit) Tugmasi

<input type="submit"> formani form-handlerga kiritadigan tugmani bildiradi.

Form-handler odatda kiritish ma’lumotlarni qayta ishlash uchun buyruq fayli bilan server sahifa hisoblanadi.

form-handler formaning action(harakat) atributida aniqladi.

Namuna:

<form action="action_page.php">
  Ismingizni kiriting:<br>
  <input type="text" name="ismingiz" value ="Hoshimjon"><br>
  Familiyangizni kiriting:<br>
  <input type = "text" name ="familiyangiz"
  value ="Roziyev"<br>
  <input type="submit" value="Tasdiqlash">
</form>

Brauzerdagi natija:

Ismingizni kiriting:

Familiyangizni kiriting:


Action Atributi Haqida

action atributi tasdiqlash(submit) tugmasi bosilganda biror bir harakat bajarilishini ta’minlaydi.

Buning uchun tasdiqlash tugmasi server bilan aloqa o’rnatadi.

Odatda, forma veb-server dagi veb-sahifaga kiritiladi.

Yuqoridagi misolda, server-tomon skripti kiritish formasini qabul qilishi uchun belgilangan:

<form action="action_page.php"

Harakat(action) atributi tushurib qoldirilsa, harakat joriy sahifaga o’rnatiladi.


Method Atributi

Method Atibuti - formalarni topshirish uchun HTTP metodidan(GET yoki POST) foydalanadi:

<form action="action_page.php" method="get">

yoki:

<form action="action_page.php" method="post">

Qachon GET metodidan foydalaniladi?

Siz GET metodidan(standart usul) quyidagicha foydalanishingiz mumkin:

Agar form kiritish passiv(qidiruvi so’rovi kabi) va ta’sir ko'rsatmaydigan ma’lumot bo’lsa.

Get dan foydalanganda, form ma'lumotlari sahifa manzili(adresi)da ko’rinadi:

action_page.php?firstname=Mickey&lastname=Mouse

...   GET metodi asosan kichkina malumot bazalari uchun qulay hisoblanadi. Hajm cheklovlari brauzeringizda o’rnatilgan bo’ladi.


Qachon POST metodidan foydalaniladi?

POST metodidan foydalanishingiz kerak:

Agarda forma ma’lumotlarini yangilashda yoki ta’sirchan malumotlarni(masalan parollarni) o’z ichiga olsa;

POST metodi ma’lumotlarni sahifa adreslarida ko’rinmaganligi uchun yaxshiroq havfsizlikni ta’minlaydi.


Name(Ism) Atributi

Tasdiqlash to’g’ri bajarilishi uchun, har bir forma name atributiga ega bo’lishi kerak.

Ushbu misolda kiritish maydonida faqat Familiyani tasdiqlash(Submit) ko’rsatib o’tilgan:

Namuna:

<form action="action_page.php">
  Ismingizni kiriting:<br>
  <input type="text" value ="Hoshimjon"><br>
  Familiyangizni kiriting:<br>
  <input type = "text" name ="familiyangiz"value ="Roziyev"<br>
  <input type="submit" value="Tasdiqlash">
</form>

Forma Ma’lumotlarini <fieldset> Yordamida Guruhlash

<fieldset> elementi bir biriga bog’liq ma’lumotlarni bir formada guruhlaydi.

<legend> elementi <fieldset> elementi uchun sarlavha yoki izohni ifodalaydi.

Namuna:

<form action="action_page.php">
  <fieldset>
  <legend>Shaxsiy ma’lumotlar: </legend>
    Ismingizni kiriting:<br>
    <input type="text" name="ismingiz" value ="Hoshimjon"><br>
    Familiyangizni kiriting:<br>
    <input type = "text" name ="familiyangiz" value ="Roziyev"<br>
    <input type="submit" value="Tasdiqlash">
  </fieldset>
</form>

Brauzerdagi natija:

Shaxsiy ma’lumotlar: Ismingizni kiriting:

Familiyangizni kiriting:


HTML Form Atributlari

HTML <form> elementi, hamma mumkin bo’lgan atributlari quyidagicha ko’rinishda bo’ladi:

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elementlari
.
</form>

Bu yerda <form> atributlarini ro’yhati bor.

Atribut Tavsif
accept-charset Taqdim etilgan formada foydalanilgan charsetni bildiradi.
action Formani qayerga kiritiladigan manzil(url)ni belgilaydi.
autocomplete Brauzer formani avtocomplete qilishi kerakligini bildiradi.
enctype Kiritilgan formani kodlashni bildirasi.
method Formani kiritishda ishlatilgan HTTP formani belgiladi.
name Formani aniqlashda ishlatilgan nomni bildiradi.
novalidate Brauzer formani to’g'riligini isbotlashi kerakmasligi bildiradi.
target Action atributidagi manzilning target(maqsad)ini ifodalaydi.

...   Atributlar haqida keyingi boblarda ko’proq o’rganasiz.


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017