HTMLni o’rganishda davom etamiz.

Ushbu darsimizda sizlar bilan formalar bilan ishlashni o’rganib chiqamiz.


Biz formalarda ma'lumotlarni kiritib serverga jo'natish uchun ishlatamiz.
Forma elementlari quyidagilardan iborat:

• text (matn kiritish maydoni)
• checkboxes
• radio-buttons
• submit
• select
• textarea
• fieldset
• legend
• label
• hidden

Keling ushbu elementlarni birma bir o'rganib chiqamiz.
Formalar

<form></form>

teglari yordamida yaratiladi va uni uchiga qolgan elementlar yoziladi.

Text elementi

Ushbu element matn kiritish uchun ishlatiladi:
Misol:

<form>
    Ismingiz: <input type="text" name="ism">
    Familyangiz: <input type="text" name="familya">
</form>

Natija:


Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Agar siz password kiritish uchun ishlatmoqchi bo'lsangiz quyidagicha:

<form>
      Password: <input type="password" name="pwd">
</form>

Natija:


Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

Radio Button
RadioButton birnechta elementdan bittasini tashlash uchun ishlatiladi:
Misol:

<form>
<input type="radio" name="sex" value="male">Erkak
<input type="radio" name="sex" value="female">Ayol
</form>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:


Checkbox
Birdaniga birnechta elementni tanlash uchun ishlatiladi:
Misol:

<form>
<input type="checkbox" name="mevalar" value="olma">Olma
<input type="checkbox" name="mevalar" value="anor">Anor
<input type="checkbox" name="mevalar" value="nok">Nok
<input type="checkbox" name="mevalar" value="uzum">Uzum
</form>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:


Submit
Forma to'ldirilgandan keyin barcha ma'lumotni serverga yoki ko'rsatilgan url ga jo'natish uchun ishlatiladigan tugma hisoblanadi.
Misol:

<form name="input" action="bu yerga url yoziladi" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:


Qolgan forma elementlarini keyingi darsda o'rganamiz. Opennetdan yiroqlashmang…