Formalar - HTML va CSS | Softromeda Edu

Forma - foydalanuvchi bilan ikki tomonlama aloqa vositasi: ro'yxatdan o'tish, qidiruv, buyurtma, izoh qoldirish.

Eng oddiy forma #

HTML

<form action="/royxat" method="post">
    <label for="ism">Ismingiz:</label>
    <input type="text" id="ism" name="ism">

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

Atribut	Vazifasi
`action`	Ma'lumot qayerga yuboriladi
`method`	Qanday yuboriladi: `get` yoki `post`
`name`	Serverda maydon nomi (majburiy!)
`id`	`<label>` bilan bog'lash uchun

name atributisiz ma'lumot yuborilmaydi

HTML

<input type="text" id="ism">              <!-- server hech narsa olmaydi -->
<input type="text" id="ism" name="ism">   <!-- to'g'ri -->

Server ma'lumotni aynan name bo'yicha oladi: PHP da $_POST['ism'].

GET va POST farqi #

	GET	POST
Ma'lumot qayerda	URL da ko'rinadi	So'rov tanasida yashirin
Hajmi	~2000 belgi	Cheklanmagan
Keshlanadimi	Ha	Yo'q
Xatcho'pga saqlash	Mumkin	Mumkin emas
Qachon	Qidiruv, filtr	Parol, ro'yxat, to'lov

HTML

<!-- GET: natija URL da ko'rinadi -->
<form action="/qidiruv" method="get">
    <input type="search" name="q">
    <button>Qidirish</button>
</form>
<!-- Natija: /qidiruv?q=python -->

<!-- POST: ma'lumot yashirin yuboriladi -->
<form action="/kirish" method="post">
    <input type="email" name="email">
    <input type="password" name="parol">
    <button>Kirish</button>
</form>

Parolni hech qachon GET bilan yubormang

GET so'rovda parol URL da ko'rinadi va brauzer tarixi, server jurnallari hamda proksi-serverlarda saqlanib qoladi. Parol, karta raqami va shaxsiy ma'lumot uchun faqat POST.

`<label>` - eng ko'p unutiladigan element #

HTML

<!-- 1-usul: for + id -->
<label for="email">Email manzilingiz</label>
<input type="email" id="email" name="email">

<!-- 2-usul: ichiga o'rash -->
<label>
    Email manzilingiz
    <input type="email" name="email">
</label>

<label> nima uchun muhim?

Bosish maydoni kattalashadi - matn ustiga bossangiz ham maydon faollashadi. Bu telefonda ayniqsa muhim.
Ekran o'quvchisi maydon nima uchun ekanini aytadi.
Checkbox va radio uchun deyarli majburiy - kichik kvadratchani aniq bosish qiyin.

for atributi <input> ning id siga mos kelishi kerak (name ga emas).

Input turlari #

HTML

<!-- Matn -->
<input type="text" name="ism" placeholder="Husanboy">

<!-- Email - klaviaturada @ chiqadi, formatni tekshiradi -->
<input type="email" name="email" placeholder="[email protected]">

<!-- Parol - belgilar yashiriladi -->
<input type="password" name="parol">

<!-- Son -->
<input type="number" name="yosh" min="1" max="120" step="1">

<!-- Telefon - mobilda raqamli klaviatura -->
<input type="tel" name="telefon" placeholder="+998 90 123 45 67">

<!-- Manzil -->
<input type="url" name="sayt" placeholder="https://example.uz">

<!-- Qidiruv - tozalash tugmasi bilan -->
<input type="search" name="q">

<!-- Sana va vaqt -->
<input type="date" name="tugilgan_kun">
<input type="time" name="vaqt">
<input type="datetime-local" name="uchrashuv">
<input type="month" name="oy">
<input type="week" name="hafta">

<!-- Rang tanlash -->
<input type="color" name="rang" value="#2563eb">

<!-- Surgich -->
<input type="range" name="daraja" min="0" max="100" value="50">

<!-- Fayl -->
<input type="file" name="rasm" accept="image/*">
<input type="file" name="hujjatlar" multiple accept=".pdf,.docx">

<!-- Yashirin (foydalanuvchi ko'rmaydi) -->
<input type="hidden" name="token" value="abc123">

Har bir input turi o'ziga xos ko'rinish va xatti-harakatga ega

Checkbox va radio #

HTML

<!-- Checkbox: ko'p tanlov mumkin -->
<fieldset>
    <legend>Qaysi tillarni bilasiz?</legend>

    <label><input type="checkbox" name="tillar[]" value="python"> Python</label>
    <label><input type="checkbox" name="tillar[]" value="js" checked> JavaScript</label>
    <label><input type="checkbox" name="tillar[]" value="php"> PHP</label>
</fieldset>

<!-- Radio: faqat bitta tanlov -->
<fieldset>
    <legend>Tajriba darajangiz</legend>

    <label><input type="radio" name="daraja" value="boshlangich" checked> Boshlang'ich</label>
    <label><input type="radio" name="daraja" value="orta"> O'rta</label>
    <label><input type="radio" name="daraja" value="yuqori"> Yuqori</label>
</fieldset>

Radio tugmalarda name bir xil bo'lishi shart

Radio tugmalar name bo'yicha guruhlanadi. Agar har biriga boshqa nom bersangiz, hammasini bir vaqtda tanlash mumkin bo'lib qoladi - ya'ni ular checkbox kabi ishlaydi.

Checkbox da esa aksincha: har birining o'z nomi bo'lishi mumkin, yoki PHP uchun name="tillar[]" shaklida massiv qilinadi.

Ochiluvchi ro'yxat #

HTML

<label for="shahar">Shahringiz</label>
<select id="shahar" name="shahar">
    <option value="">-- tanlang --</option>
    <option value="toshkent" selected>Toshkent</option>
    <option value="samarqand">Samarqand</option>
    <option value="buxoro">Buxoro</option>
</select>

<!-- Guruhlangan -->
<select name="darslik">
    <optgroup label="Dasturlash">
        <option value="python">Python</option>
        <option value="cpp">C++</option>
    </optgroup>
    <optgroup label="Veb">
        <option value="html">HTML va CSS</option>
        <option value="js">JavaScript</option>
    </optgroup>
</select>

<!-- Ko'p tanlovli -->
<select name="qiziqishlar[]" multiple size="4">
    <option value="frontend">Frontend</option>
    <option value="backend">Backend</option>
    <option value="mobil">Mobil ilovalar</option>
    <option value="si">Sun'iy intellekt</option>
</select>

Ko'p satrli matn #

HTML

<label for="xabar">Xabaringiz</label>
<textarea id="xabar" name="xabar" rows="5" cols="40"
          placeholder="Fikringizni yozing..."
          maxlength="1000"></textarea>

<textarea> da value yo'q

Boshlang'ich matn teglar orasiga yoziladi:

HTML

<!-- NOTO'G'RI -->
<textarea value="Matn"></textarea>

<!-- TO'G'RI -->
<textarea>Matn</textarea>

Diqqat: ochuvchi tegdan keyingi bo'shliq ham matn hisoblanadi.

Brauzer validatsiyasi #

HTML5 tekshiruvni JavaScript siz bajaradi:

HTML

<form>
    <label for="email">Email *</label>
    <input type="email" id="email" name="email" required>

    <label for="yosh">Yosh (18-100)</label>
    <input type="number" id="yosh" name="yosh" min="18" max="100" required>

    <label for="parol">Parol (kamida 8 belgi)</label>
    <input type="password" id="parol" name="parol"
           minlength="8" required>

    <label for="telefon">Telefon</label>
    <input type="tel" id="telefon" name="telefon"
           pattern="\+998[0-9]{9}"
           placeholder="+998901234567"
           title="Format: +998901234567">

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

Atribut	Tekshiradi
`required`	Bo'sh emasligini
`minlength` / `maxlength`	Matn uzunligini
`min` / `max`	Son chegarasini
`step`	Qadam (masalan, `0.5`)
`pattern`	Muntazam ifoda mosligini
`type="email"`	Email formatini
`type="url"`	Manzil formatini

Brauzer validatsiyasi yetarli emas

Foydalanuvchi DevTools orqali required ni o'chirib tashlashi yoki so'rovni to'g'ridan-to'g'ri yuborishi mumkin. Shuning uchun:

Har qanday ma'lumot serverda ham qayta tekshirilishi shart.

HTML validatsiyasi - qulaylik uchun, xavfsizlik uchun emas.

Foydali atributlar #

HTML

<input type="text"
       name="ism"
       placeholder="Ismingiz"     <!-- kulrang maslahat matni -->
       value="Husanboy"            <!-- oldindan to'ldirilgan -->
       autocomplete="given-name"  <!-- brauzer avtomatik to'ldiradi -->
       autofocus                  <!-- sahifa ochilganda fokus -->
       readonly                   <!-- o'qish mumkin, o'zgartirish yo'q -->
       disabled                   <!-- umuman faol emas, yuborilmaydi -->
       spellcheck="false">        <!-- imlo tekshiruvini o'chirish -->

placeholder label o'rnini bosa olmaydi

HTML

<!-- YOMON: matn kiritilganda maydon nima uchun ekani yo'qoladi -->
<input type="email" placeholder="Email">

<!-- YAXSHI -->
<label for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]">

placeholder - misol, label - nom. Ikkalasi ham kerak.

To'liq forma misoli #

HTML

<form action="/royxatdan-otish" method="post" class="royxat-forma">
    <h2>Ro'yxatdan o'tish</h2>

    <fieldset>
        <legend>Shaxsiy ma'lumotlar</legend>

        <div class="maydon">
            <label for="toliq_ism">Ism va familiya <span class="majburiy">*</span></label>
            <input type="text" id="toliq_ism" name="toliq_ism"
                   required minlength="3" maxlength="120"
                   autocomplete="name" placeholder="Husanboy Qodirov">
        </div>

        <div class="maydon">
            <label for="email">Email <span class="majburiy">*</span></label>
            <input type="email" id="email" name="email"
                   required autocomplete="email" placeholder="[email protected]">
        </div>

        <div class="maydon">
            <label for="telefon">Telefon</label>
            <input type="tel" id="telefon" name="telefon"
                   pattern="\+998[0-9]{9}"
                   placeholder="+998901234567"
                   title="Format: +998 va 9 ta raqam">
        </div>

        <div class="maydon">
            <label for="tugilgan_kun">Tug'ilgan sana</label>
            <input type="date" id="tugilgan_kun" name="tugilgan_kun" max="2010-01-01">
        </div>
    </fieldset>

    <fieldset>
        <legend>Qiziqishlaringiz</legend>

        <label><input type="checkbox" name="qiziqish[]" value="frontend"> Frontend</label>
        <label><input type="checkbox" name="qiziqish[]" value="backend"> Backend</label>
        <label><input type="checkbox" name="qiziqish[]" value="mobil"> Mobil ilovalar</label>
    </fieldset>

    <fieldset>
        <legend>Tajriba darajangiz</legend>

        <label><input type="radio" name="daraja" value="boshlangich" checked> Boshlang'ich</label>
        <label><input type="radio" name="daraja" value="orta"> O'rta</label>
        <label><input type="radio" name="daraja" value="yuqori"> Yuqori</label>
    </fieldset>

    <div class="maydon">
        <label for="shahar">Shahar</label>
        <select id="shahar" name="shahar">
            <option value="">-- tanlang --</option>
            <option value="toshkent">Toshkent</option>
            <option value="samarqand">Namangan</option>
            <option value="buxoro">Buxoro</option>
        </select>
    </div>

    <div class="maydon">
        <label for="ozingiz">O'zingiz haqingizda</label>
        <textarea id="ozingiz" name="ozingiz" rows="4" maxlength="500"
                  placeholder="Bir necha jumla..."></textarea>
    </div>

    <div class="maydon maydon--checkbox">
        <label>
            <input type="checkbox" name="shartlar" value="1" required>
            <a href="/shartlar.html" target="_blank">Foydalanish shartlari</a>ga roziman
        </label>
    </div>

    <div class="tugmalar">
        <button type="submit">Ro'yxatdan o'tish</button>
        <button type="reset">Tozalash</button>
    </div>
</form>

Tugma turlari #

HTML

<button type="submit">Yuborish</button>   <!-- formani yuboradi (standart) -->
<button type="reset">Tozalash</button>    <!-- maydonlarni tozalaydi -->
<button type="button">Hisoblash</button>  <!-- hech narsa qilmaydi, JS uchun -->

<button> yoki <input type="submit">?

<button> afzalroq - uning ichiga rasm, ikonka yoki formatlangan matn qo'yish mumkin:

HTML

<button type="submit">
    <img src="ikonka.svg" alt=""> Saqlash
</button>

Muhim: <form> ichidagi <button> ning standart turi submit. Agar u shunchaki JavaScript uchun bo'lsa, type="button" yozishni unutmang - aks holda tugma bosilganda forma yuborilib ketadi.

Amaliy topshiriq

Restoran uchun buyurtma formasini yarating:

Ism, telefon (pattern bilan) va yetkazish manzili maydonlari.
Radio bilan: yetkazib berish yoki o'zi olib ketish.
Checkbox bilan qo'shimchalar: sous, ichimlik, shirinlik.
<select> bilan taom tanlash (<optgroup> bilan guruhlangan).
<input type="number"> bilan soni (1 dan 10 gacha).
<textarea> bilan qo'shimcha izoh.
<input type="time"> bilan yetkazish vaqti.
Har bir maydonda <label> bo'lsin, majburiylarida required.
Formani <fieldset> va <legend> bilan mantiqiy guruhlarga bo'ling.

Xulosa #

<form> da action (qayerga) va method (get/post) ko'rsatiladi.
Har bir maydonda name bo'lishi shart - usiz ma'lumot yuborilmaydi.
Parol va shaxsiy ma'lumot faqat POST bilan yuboriladi.
<label> har bir maydonga majburiy: for atributi id ga mos kelsin.
Radio tugmalarda name bir xil, checkbox larda har xil bo'lishi mumkin.
HTML5 validatsiyasi (required, pattern, min) qulaylik uchun, lekin server tekshiruvi baribir shart.
<fieldset> va <legend> uzun formani mantiqiy guruhlarga bo'ladi.

Keyingi bo'limda semantik HTML va sahifa tuzilmasini o'rganamiz.

Eng oddiy forma #

GET va POST farqi #

<label> - eng ko'p unutiladigan element #

Input turlari #

Checkbox va radio #

Ochiluvchi ro'yxat #

Ko'p satrli matn #

Brauzer validatsiyasi #

Foydali atributlar #

To'liq forma misoli #

Tugma turlari #

Xulosa #

Xatolik topdingizmi?

`<label>` - eng ko'p unutiladigan element #