☰ Mundarija · Informatika

Web-sahifalarda formalar

Darslar 21 · 1 ta dars · N. I. Taylaqov (umumiy muharrir), A. B. Axmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatika va axborot texnologiyalari, 11-sinf, 1-nashr. «Extremum-press», Toshkent, 2018
21

Web-sahifalarda formalar yaratish va bezash

Darslik: 77–80-betlar
MaqsadHTML da forma yaratadi (form, input, label, button), kiritilgan ma’lumotni tekshirish atributlaridan foydalanadi va JavaScript yordamida kiritilgan matnlardan natija hosil qiladi; shaxsiy ma’lumotlarni yig‘ish qoidalarini biladi.
Yangi so‘zlar
<form> · <form>: the container of a form; its action says where the data goes and method how<input> · <input>: an input field; its type may be text, number, email, password, checkbox, radio and morevalidatsiya · validation: checking that entered data is complete and correct<label> · <label>: the caption of a field, linked to it with for and id; it helps screen readers and clicking
Tushuntirish

Forma foydalanuvchidan ma’lumot olish uchun xizmat qiladi: ro‘yxatdan o‘tish, anketa, qidiruv, hisoblagich. HTML da forma <form> tegi bilan o‘raladi; unda <input> maydonlari, <textarea> (ko‘p qatorli matn), <select> (ro‘yxat) va <button> bo‘ladi. Input turi type atributi bilan beriladi: text (matn), number (son), email (elektron manzil), password (belgilar yashiriladi), checkbox va radio (tanlov), date (sana). Har bir maydonning name atributi – ma’lumot serverga yuboriladigan kalit; <label for="ism"> esa id="ism" maydoniga yozuv bog‘laydi. Forma action manziliga method="post" yoki "get" bilan yuboriladi; GET ma’lumotni URL ichida ko‘rsatadi, shuning uchun parol yoki shaxsiy ma’lumotlar uchun POST va HTTPS ishlatiladi. Brauzer ma’lumotni yuborishdan oldin required (majburiy), min/max, maxlength va type="email" kabi atributlar bilan tekshiradi; bu validatsiya qulaylik uchun, lekin foydalanuvchi uni chetlab o‘tishi mumkin, shuning uchun server ham ma’lumotni qayta tekshirishi shart. Kiritilgan matn bilan JavaScript ham ishlay oladi: value xossasi maydon qiymatini beradi, textContent natijani chiqaradi. Forma yaratganda faqat zarur ma’lumotni so‘rang; shaxsga doir ma’lumotlar bilan ishlash «Shaxsga doir ma’lumotlar to‘g‘risida»gi qonun (2019) bilan tartibga solinadi, o‘quv mashqlarida esa haqiqiy odamlarning ma’lumotini emas, o‘ylab topilgan ma’lumotni kiriting.

Namunalar
Klubga yozilish formasi tekshiruvlar bilan: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎  <meta charset="utf-8"> ⏎  <title>Klubga yozilish</title> ⏎ </head> ⏎ <body> ⏎  <form action="/join" method="post"> ⏎    <p><label for="ism">Ism:</label> ⏎       <input type="text" id="ism" name="ism" required maxlength="30"></p> ⏎    <p><label for="yil">Tug‘ilgan yil:</label> ⏎       <input type="number" id="yil" name="yil" min="2005" max="2012" required></p> ⏎    <p><label for="pochta">E-pochta (ixtiyoriy):</label> ⏎       <input type="email" id="pochta" name="pochta"></p> ⏎    <button type="submit">Yuborish</button> ⏎  </form> ⏎ </body> ⏎ </html> Ism bo‘sh bo‘lsa yoki yil 2005–2012 oralig‘ida bo‘lmasa, brauzer yuborishga ruxsat bermaydi; yil uchun to‘g‘ri qiymatlar soni 2012 – 2005 + 1 = 8.
Familiya va ismdan qisqa yozuv hosil qiluvchi JavaScript forma: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎  <meta charset="utf-8"> ⏎  <title>Qisqa yozuv</title> ⏎ </head> ⏎ <body> ⏎  <p>Familiya: <input type="text" id="fam"></p> ⏎  <p>Ism: <input type="text" id="ism"></p> ⏎  <button onclick="qisqa()">Hosil qil</button> ⏎  <p id="chiqish"></p> ⏎  <script> ⏎    function qisqa() { ⏎      var f = document.getElementById("fam").value.trim(); ⏎      var i = document.getElementById("ism").value.trim(); ⏎      var out = document.getElementById("chiqish"); ⏎      if (f === "" || i === "") { ⏎        out.textContent = "Ikkala maydonni to‘ldiring"; ⏎      } else { ⏎        out.textContent = f + " " + i.charAt(0).toUpperCase() + "."; ⏎      } ⏎    } ⏎  </script> ⏎ </body> ⏎ </html> «Karimov» va «aziza» kiritilsa, natija «Karimov A.»; ismi bo‘sh bo‘lsa, «Ikkala maydonni to‘ldiring» xabari chiqadi.
Sinfda faoliyat

«Formani sinash»: juftlik forma ochib, atayin noto‘g‘ri qiymat (bo‘sh ism, 1999-yil, e-pochta «abc») kiritadi va brauzer qaysi xabarni berishini yozib chiqadi; so‘ng xabarlarni sinfdoshlari bilan solishtiradi.

Mashq
1
Input ning beshta turini ayting.
2
Yil maydoniga 2005 dan 2012 gacha (ikkalasi ham kiradi) qiymat kiritish mumkin. Nechta qiymat to‘g‘ri?
3
Misoldagi qisqa yozuv formasida familiya «Yusupov», ism «bobur» bo‘lsa, natija nima?
4
Nima uchun brauzer tekshirgan bo‘lsa ham, server ma’lumotni qayta tekshirishi kerak?