AXV

Forma elementlari va validatsiyasi

Sayt bilan muloqot: ma'lumot kiritamiz, yuboramiz va tekshiramiz

8-sinfWeb Full-stack2-hafta · 6-dars

Bugun nimani o'rganamiz?

Forma va usullar

<form>, action, GET va POST farqi

Kiritish turlari

input, label, radio, checkbox, select, textarea

Validatsiya

required, placeholder, min, max, disabled

01

Forma nima?

<form>, action va method

Forma ma'lumotni serverga olib boradi

Forma Ism: Ali Parol: **** Yuborish Server /register action + method javob qaytadi

Birinchi forma


<form action="/login" method="POST">
  <label for="login">Login:</label>
  <input type="text" id="login" name="username">
  <button type="submit">Kirish</button>
</form>
action manzilni, method yuborish usulini belgilaydi.

GET: ma'lumot manzilda ko'rinadi

sayt.uz/login ?login=ali &parol=12345 action manzili 1-qiymat parol ochiq! POST esa ma'lumotni so'rov tanasida yashiradi

Qismlar ustiga olib boring yoki bosing. Qidiruv uchun GET, parol uchun doim POST.

Mini-test

Ro'yxatdan o'tish formasi parolni qaysi usulda yuborishi kerak?

To'g'ri: POST. GET parolni URL da ko'rsatib qo'yadi.
02

Label va input

Har bir maydon o'z nomiga ega bo'lsin

for va id: ko'rinmas ip

<label for="tel"> <input id="tel"> for = id Yozuv bosilsa, kursor maydonga o'tadi

label va input kodi


<label for="ismingiz">Ismingiz:</label>
<input type="text"
       id="ismingiz"
       name="user_name"
       placeholder="Masalan: Ali">
id: label bilan ulaydiname: serverga nomplaceholder: maslahat

Natija brauzerda

https://sayt.uz/login

Kirish

Natija brauzerda

https://sayt.uz/login

Kirish

Login:

Parol:

03

Input turlari

type atributi maydonning xatti-harakatini belgilaydi

Asosiy type qiymatlari

text

Bir qatorli oddiy matn

password

Belgilar yulduzcha bo'lib yashiriladi

email

@ belgisini tekshiradi

number

Faqat raqam, min va max bilan

Yana turlar: bosing va aylantiring

date

bosing

Kalendar ochadi: sanani tanlash oson.

file

bosing

Kompyuterdan rasm yoki hujjat yuklash.

submit

bosing

Formani serverga yuboradi. reset esa hammasini tozalaydi.

Checkbox va radio

checkbox (kvadrat)

Mustaqil tanlov: 0 ta, 1 ta yoki hammasi. Masalan: qaysi tillarni bilasiz?
VS

radio (dumaloq)

Faqat bittasi tanlanadi. Masalan: jinsingiz.

Radio kodini ko'rish uchun pastga ↓

Radio kodi


<p>Jinsingizni tanlang:</p>
<input type="radio" id="erkak"
       name="jins" value="erkak">
<label for="erkak">Erkak</label>
<input type="radio" id="ayol"
       name="jins" value="ayol">
<label for="ayol">Ayol</label>
Guruh uchun name bir xil, id esa har xil.

name guruhni belgilaydi

name bir xil O'zbek tili Rus tili Ingliz tili faqat bittasi name har xil O'zbek tili Rus tili Ingliz tili ikkalasi tanlandi: xato

Chap tomon to'g'ri, o'ng tomon xato. Ustiga bosib izohni o'qing.

04

Boshqa elementlar

select, textarea, button va validatsiya

select va textarea


<label for="shahar">Shahringiz:</label>
<select id="shahar" name="shahar">
  <option value="toshkent">Toshkent</option>
  <option value="samarqand">Samarqand</option>
  <option value="buxoro">Buxoro</option>
</select>
<textarea name="xabar" rows="4" cols="50"></textarea>
button ichiga rasm yoki ikonka ham qo'yish mumkin, input type="submit" ga esa mumkin emas.

Validatsiya atributlari qadam-baqadam

1. required

Maydonni to'ldirish majburiy: bo'sh holda yuborib bo'lmaydi.

2. min va max

Raqam yoki sana uchun eng kichik va eng katta chegara. Masalan, yosh 10 dan 18 gacha.

3. readonly

Faqat o'qish uchun: qiymatni o'zgartirib bo'lmaydi.

4. disabled

Butunlay nofaol: och kulrang bo'ladi va serverga yuborilmaydi.

placeholder yoki value?

placeholder="Ismingizni yozing"

Och kulrang maslahat. Yozishni boshlasangiz yo'qoladi va serverga ketmaydi.

value="Toshkent"

Maydon ichiga oldindan yozilgan haqiqiy matn. O'chirmasangiz, shu qiymat serverga ketadi.

Odatiy xatolar


<label for="ism">Ism:</label>
<input id="ismi" name="ism">
for va id bir xil emas: yozuvni bossangiz, kursor maydonga o'tmaydi.
Radio larda name har xil bo'lsa, bir nechtasi tanlanadi.
Parol GET bilan yuborilsa, u manzil qatorida ko'rinadi.

Bilasizmi?

0
birinchi HTML formalar paydo bo'lgan yil
0
bugun o'rgangan input turimiz
0
Google bosh sahifasidagi forma

type="color" brauzerda butun ranglar palitrasini ochadi.

Amaliy topshiriq 20 daqiqa

OsonLogin formasi: login, parol (password) va "Kirish" tugmasi. Ikkalasi required.
O'rtaSign Up: ism, parol, sana, jins (radio), viloyat (select), "Qoidalarga roziman" (checkbox).
QiyinFikr formasi: mavzu, baho (1-5, number) va textarea bilan xabar.

Tezkor nazorat 5 daqiqa

  1. GET va POST ning asosiy farqi nima?
  2. label dagi for qaysi atribut bilan bir xil bo'ladi?
  3. Faqat bitta tanlov uchun qaysi type va qanday qoida?
  4. Ko'p qatorli matn uchun qaysi teg kerak?
  5. Maydonni majburiy qilish uchun qaysi atribut yoziladi?

Xulosa

Bugun o'rgandik

form, GET/POST, label bilan input, input turlari, select, textarea, required va boshqa validatsiya atributlari.

Keyingi hafta

Semantik teglar: header, nav, main, article, section, footer, shuningdek audio va video.

2-hafta yakunlandi: rasmlar, ro'yxatlar, jadvallar va formalar. Endi interaktiv sahifa yarata olasiz.