HTML button type: tugmalar va formani yuborish

Qisqacha: Forma ichidagi button ning type i yozilmasa, u submit bo'ladi — ya'ni bosilganda formani yuboradi. Shuning uchun har bir tugmaga type ni doim o'zingiz yozing: submit — yuborish, button — oddiy tugma, reset — tozalash. Bitta formada bir nechta yuborish tugmasi bo'lsa, name va value qaysi biri bosilganini serverga aytadi, formaction kabi atributlar esa formaning manzilini aynan shu tugma uchun o'zgartiradi.

Bu darsda

• button ning uch turini farqlay olasiz va standart submit tuzog'ini oldini olasiz.
• Enter bosilganda qaysi tugma "bosilishini" tushuntira olasiz.
• Tugmaga name va value berib, qaysi biri bosilganini serverga yubora olasiz.
• formaction, formmethod va formnovalidate bilan bitta formadan turli ishlarni qila olasiz.
• reset tugmasi nega kam ishlatilishini bilasiz.

Oldin bilishingiz kerak: Tanlash maydonlari: checkbox, radio, select, datalist, Tugma yoki havola: to'g'ri tanlov, Forma qanday ishlaydi.

1. Nega bu kerak?

Dasturchi Doniyor «Bahor» formasiga yordamchi tugma qo'shdi: "Menyuni ko'rsatish". G'oya shunday edi: bosilganda sahifada kichik menyu ochilsin. Buni keyinroq JavaScript bilan qilmoqchi edi. Hozircha shunchaki tugma yozdi.

Doniyorning kodi:

<button>Menyuni ko'rsatish</button>

Ertasi kuni administrator shikoyat qildi: "Ro'yxatda o'nlab bo'sh band qilishlar paydo bo'ldi — ismsiz, telefonsiz!"

Nima bo'ldi? Mehmonlar menyuni ko'rmoqchi bo'lib tugmani bosdi. Tugma esa formani yubordi — yarim to'ldirilgan holda. Doniyor tugmaga "formani yubor" demagan edi. Lekin HTML'da forma ichidagi tugma sukut bo'yicha aynan shuni qiladi.

Bu — formalar bilan ishlashdagi eng ko'p uchraydigan tuzoq. Bugun uni butunlay yopamiz.

2. Tugmaning uch turi

2.1 type atributi

Tugma yoki havola darsida "harakat tugmasiga doim type="button" yozing" degan qoidani olgan edik. Endi sababini to'liq ko'ramiz. button ning type i uch xil bo'ladi:

Eng muhim qoida: type yozilmasa — submit.

<form action="https://example.com/bron">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism">
  <button type="submit">Band qilish</button>
  <button type="button">Menyuni ko'rsatish</button>
</form>

• "Band qilish" — submit: formani yuboradi.
• "Menyuni ko'rsatish" — button: bosilganda hech narsa bo'lmaydi. Keyinroq unga JavaScript "jon kiritadi" (JavaScript nima bilan boshlanadigan qismda).

Doniyorning xatosini tuzatish uchun bitta so'z yetarli edi: type="button".

2.2 Nega standart submit?

Tarixiy sabab. JavaScript keng tarqalmagan paytlarda forma ichidagi tugmaning deyarli yagona vazifasi — formani yuborish edi. Standart shunday yozilgan va eski saytlar buzilmasligi uchun o'zgartirilmaydi.

Shuning uchun zamonaviy qoida: har bir button ga type ni aniq yozing, hatto submit bo'lsa ham. Kodni o'qigan odam taxmin qilmasin.

Formatlash va validatsiya darsida o'rnatgan html-validate bu qoidani o'zi tekshiradi:

error  <button> is missing recommended "type" attribute  no-implicit-button-type

Tarjimasi: "button da tavsiya etilgan type atributi yo'q." Qoidaning nomi — no-implicit-button-type, ya'ni "tugma turi yashirin bo'lmasin".

2.3 Forma tashqarisidagi tugma

form ichida bo'lmagan button hech narsani yubormaydi — hatto type="submit" bo'lsa ham. Uning uchun forma yo'q. Tugma ekranda turadi, bosiladi, lekin hech narsa bo'lmaydi.

Ba'zan dizayn tufayli tugma formadan uzoqda turishi kerak bo'ladi. Buning uchun maxsus form atributi bor — uni Maydon holatlari va yashirin maydonlar darsida ko'ramiz.

Tekshirib ko'ring: Forma ichida <button>Tozalash</button> bor. Dasturchi uni maydonlarni tozalaydi deb o'ylagan. Bosilganda aslida nima bo'ladi?

3. Enter bosilganda nima bo'ladi?

Mehmon ism maydoniga "Ali" deb yozdi va klaviaturada Enter ni bosdi. Forma yuborildi — u hech qanday tugmani bosmagan bo'lsa ham.

Bu yashirin yuborish (implicit submission) deyiladi. Qoidasi:

1. Matn, son yoki sana kabi maydonda Enter bosilsa, brauzer formadagi birinchi submit tugmani topadi.
2. Uni xuddi sichqoncha bilan bosilgandek "bosadi".
3. Tugma disabled bo'lsa — hech narsa bo'lmaydi.

Telefonda ham shunday: Mobil klaviatura darsidagi enterkeyhint="send" tugmasi aynan shu mexanizmni ishga tushiradi.

3.1 Tuzoq: birinchi tugma noto'g'ri

<form action="https://example.com/bron">
  <label for="ism2">Ismingiz</label>
  <input type="text" id="ism2" name="ism">
  <button type="submit" formaction="https://example.com/bekor">
    Band qilishni bekor qilish
  </button>
  <button type="submit">Band qilish</button>
</form>

Ekranda "Bekor qilish" chapda, "Band qilish" o'ngda — dizaynerga shunday yoqqan. Lekin kodda "Bekor qilish" birinchi. Mehmon ismini yozib Enter bosadi va... band qilish o'rniga bekor qilish so'rovi ketadi. formaction — tugmani boshqa manzilga yuboradigan atribut. Uni pastroqda, "Tugma formani o'zgartiradi" bo'limida batafsil ko'ramiz.

Tuzatish: asosiy harakat tugmasi kodda birinchi tursin. Ekrandagi tartibni esa CSS bilan o'zgartirish mumkin.

3.2 Tugma bo'lmasa-chi?

Formada submit tugma umuman yo'q bo'lsa, Enter faqat bitta holatda formani yuboradi: formada matn kiritiladigan maydon faqat bitta bo'lsa. Masalan, sayt tepasidagi qidiruv maydoni. Ikkita va undan ko'p maydonda tugmasiz forma Enter bilan yuborilmaydi.

Xulosa: har bir formaga ko'rinadigan submit tugma qo'ying. Sichqonchasiz va ekran o'quvchi bilan ishlaydigan foydalanuvchilar ham formani qanday yuborishni bilsin.

4. button yoki input type="submit"?

Eski kodlarda yuborish tugmasi boshqacha yozilgan bo'ladi:

<input type="submit" value="Band qilish">

Bu ham ishlaydi. Farqi:

button ichiga istalgan matnli element qo'yish mumkin — masalan, SVG ikonka:

<button type="submit">
  <svg width="16" height="16" aria-hidden="true">
    <circle cx="8" cy="8" r="6"></circle>
  </svg>
  Band qilish
</button>

input da esa faqat oddiy matn. Shuning uchun bugun deyarli hamma joyda button ishlatiladi. html-validate ham input type="submit" ni ko'rsa, Prefer to use <button> instead of <input type="submit"> ("input type="submit" o'rniga button ishlating") deb xato beradi. input type="submit", input type="reset" va input type="button" ni eski kodda uchratasiz — ularni tanish kifoya.

4.1 Rasmli tugma: input type="image"

Yana bitta eski tur bor — rasmdan iborat yuborish tugmasi:

<input type="image" src="../assets/images/yuborish.png" alt="Band qilish"
       name="rasm" width="120" height="40">

Uning g'alati odati: u serverga rasmning qaysi nuqtasi bosilganini yuboradi — rasm.x=37&rasm.y=12. Bir paytlar xaritalarda ishlatilgan. Bugun deyarli uchramaydi: rasmli tugma kerak bo'lsa, button ichiga img qo'yiladi. alt esa bu yerda ham majburiy — Yaxshi alt matn darsidagi "funksional rasm" qoidasi.

5. Qaysi tugma bosildi? name va value

5.1 Ikki tugma — ikki harakat

Ba'zan bitta forma ikki xil ish qiladi. «Bahor»da dam olish kunlari joy tez tugaydi. Mehmon ikki yo'ldan birini tanlasin:

<form action="https://example.com/bron">
  <label for="ism3">Ismingiz</label>
  <input type="text" id="ism3" name="ism">
  <button type="submit" name="amal" value="band">
    Band qilish
  </button>
  <button type="submit" name="amal" value="kutish">
    Joy bo'lmasa — kutish ro'yxatiga yozing
  </button>
</form>

Ikkala tugmada name="amal", value esa har xil. Serverga faqat bosilgan tugmaning jufti boradi:

Bosilmagan tugma umuman yuborilmaydi. Server amal qiymatiga qarab qaysi ishni qilishni hal qiladi.

5.2 Tugmaning name i yo'q bo'lsa

Oddiy "Yuborish" tugmasiga name yozish shart emas. name siz tugma so'rovga hech narsa qo'shmaydi — faqat formani yuboradi. name faqat bir nechta tugma bo'lib, server ularni farqlashi kerak bo'lganda yoziladi.

Bo'sh joyni to'ldiring: <button type="submit" name="til" value="uz"> bosilganda so'rovga qo'shiladigan juftlik:

6. Tugma formani o'zgartiradi: form* atributlari

Ba'zan ikkinchi tugma boshqa manzilga, boshqa metod bilan yuborishi kerak. Buning uchun forma atributlarining "tugma versiyalari" bor. Ular faqat submit tugmada ishlaydi va faqat shu tugma bosilganda formaning o'z atributini almashtiradi.

6.1 formaction va formmethod

«Bahor» xodimlari uchun ichki sahifa: administrator telefon orqali qabul qilingan band qilishni kiritadi. Ikki tugma kerak: saqlash va chop etish uchun ko'rish.

<form action="https://example.com/admin/bron" method="post">
  <label for="mehmon-ism">Mehmon ismi</label>
  <input type="text" id="mehmon-ism" name="ism">
  <button type="submit">Saqlash</button>
  <button type="submit"
          formaction="https://example.com/admin/chek"
          formmethod="get"
          formtarget="_blank">
    Chekni ko'rish
  </button>
</form>

• "Saqlash" — formaning o'z sozlamasi: POST bilan /admin/bron ga.
• "Chekni ko'rish" — GET bilan /admin/chek ga, yangi yorliqda (_blank, Maxsus havolalar darsidagi target kabi). Ma'lumot saqlanmaydi, faqat ko'rsatiladi.

Nega ko'rish uchun GET? HTTP metodlari darsidagi qoida: GET — faqat o'qish, POST — o'zgartirish. Chekni ko'rish hech narsani o'zgartirmaydi.

6.2 formnovalidate — tekshiruvsiz yuborish

O'tgan darslarda min va max qo'yganimizda, brauzer chegaradan tashqaridagi qiymat bilan formani yubormas edi. Ba'zan esa aynan shu kerak emas.

Masalan, uzun tadbir formasi. Mehmon yarmini to'ldirdi va "Qoralamani saqlash" ni bosdi — keyinroq davom ettirmoqchi. Mehmonlar soni hali noto'g'ri bo'lsa ham, qoralama saqlanishi kerak:

<form action="https://example.com/tadbir" method="post">
  <label for="soni">Mehmonlar soni (10–150)</label>
  <input type="number" id="soni" name="soni" min="10" max="150">
  <button type="submit">Yuborish</button>
  <button type="submit" formnovalidate
          formaction="https://example.com/tadbir/qoralama">
    Qoralamani saqlash
  </button>
</form>

Mehmon 300 yozdi:

• "Yuborish" → brauzer to'xtatadi: Value must be less than or equal to 150.
• "Qoralamani saqlash" → forma yuboriladi, tekshiruvsiz.

formnovalidate — boolean atribut. Butun formadan tekshiruvni olib tashlaydigan novalidate ham bor — uni Brauzer validatsiyasi darsida ko'ramiz.

Maslahat: Yana bitta maxsus qiymat bor: formmethod="dialog". U formani serverga emas, sahifadagi modal oynani yopishga "yuboradi". Bu dialog: native modal oyna darsining mavzusi.

Tekshirib ko'ring: Formada action="/bron" method="post". Tugmada formmethod="get" bor, formaction esa yo'q. Tugma bosilganda so'rov qayerga va qaysi metod bilan ketadi?

7. reset nega kam ishlatiladi?

type="reset" formadagi hamma maydonni boshlang'ich holatiga qaytaradi. E'tibor bering: "bo'shatadi" emas, "boshlang'ich holatiga". value="2" bo'lgan mehmonlar maydoni 2 ga qaytadi, checked bo'lgan radio yana tanlanadi.

Muammo — tugma "Yuborish" yonida turadi. Mehmon 10 ta maydonni to'ldirdi, shoshib noto'g'ri tugmani bosdi — hammasi o'chdi. "Orqaga" qaytarib bo'lmaydi. Foydalanuvchi tajribasi bo'yicha mutaxassislar yillardan beri "reset tugmasini deyarli hech qachon qo'ymang" deb maslahat beradi.

Qachon o'rinli? Maydonlar ko'p, tez-tez qaytadan to'ldiriladigan ichki tizimlarda. Masalan, kassada har bir xaridordan keyin formani tozalash. Unda ham reset "Yuborish" dan uzoqroqda turishi kerak.

8. «Bahor»: formaning tugmalari

Band qilish formasining oxiri endi shunday:

<form action="https://example.com/bron" method="get">
  <!-- ... ism, telefon, sana, vaqt, odam, joy ... -->
  <p>
    <button type="submit" name="amal" value="band">
      Band qilish
    </button>
    <button type="submit" name="amal" value="kutish">
      Joy bo'lmasa — kutish ro'yxatiga yozing
    </button>
  </p>
  <p>
    <a href="../menyu/">Avval menyuni ko'rish</a>
  </p>
</form>

Uchta qaror:

1. Asosiy harakat — "Band qilish" — kodda birinchi. Enter aynan uni bosadi.
2. Ikkala submit tugmada name="amal" — server qaysi biri bosilganini biladi.
3. "Menyuni ko'rish" — tugma emas, havola. U boshqa sahifaga olib boradi — Tugma yoki havola darsidagi qoida. Havola formani yubormaydi, shuning uchun Doniyorning muammosi bu yerda umuman paydo bo'lmaydi.

Forma bron/index.html da turibdi, shuning uchun menyuga yo'l ../menyu/ — Ko'p sahifali sayt tuzilmasi darsida papkadagi sahifadan ../ bilan bir pog'ona yuqoriga chiqishni ko'rgan edik.

9. Hujumchi nigohi

Hujum. «Bahor» administratori sahifasida ikki tugma bor: "Tasdiqlash" va "O'chirish". Oddiy xodim uchun "O'chirish" tugmasi disabled:

<button type="submit" name="amal" value="ochirish" disabled>
  O'chirish
</button>

Xodim DevTools'ni ochadi, Elements panelida disabled so'zini o'chiradi va tugmani bosadi. Yoki tugmaga tegmay, amal=ochirish ni so'rovga o'zi yozadi. Server faqat HTML'ga ishongan bo'lsa, band qilish o'chiriladi.

Himoya. Tugmani yashirish yoki disabled qilish — faqat interfeys. Server har bir so'rovda o'zi tekshiradi: "Bu foydalanuvchining o'chirishga huquqi bormi?" Bu tekshiruv avtorizatsiya deyiladi — nimaga ruxsat borligini aniqlash. Uni kursning backend qismida o'rganamiz.

Yana bir tuzoq — ikki marta bosish. Sekin internetda mehmon "Band qilish" ni bosadi, hech narsa bo'lmayotganini ko'rib, yana bosadi. Server ikkita band qilish oladi. HTML'ning o'zi bunga qarshi hech narsa bermaydi. Frontend tugmani birinchi bosishdan keyin JavaScript bilan o'chiradi. Server esa bir xil so'rovni ikki marta bajarmaslikni o'zi ta'minlaydi (Idempotency-Key darsida).

10. Ko'p uchraydigan xatolar

10.1 type siz tugma formani yuboradi

"Parolni ko'rsatish", "Maydon qo'shish", "Menyuni ochish" kabi yordamchi tugmalar forma ichida type siz yozilgan — bosilganda forma ketadi. Tuzatish: type="button".

10.2 Enter noto'g'ri tugmani bosadi

Kodda birinchi turgan submit — "Bekor qilish" yoki "Orqaga". Tuzatish: asosiy tugmani kodda birinchi qo'ying.

10.3 Server qaysi tugma bosilganini bilmaydi

Ikki submit tugma bor, lekin name yo'q. So'rov ikkala holatda ham bir xil. Tuzatish: ikkalasiga bir xil name, har xil value.

10.4 Tugma o'rniga havola

<a href="#">Yuborish</a> — havola formani yubormaydi, maydonlar ham yuborilmaydi. Tuzatish: <button type="submit">. Havolaga o'xshatish kerak bo'lsa — CSS bilan.

10.5 reset "Yuborish" yonida

Bitta xato bosish — butun forma o'chdi. Tuzatish: reset ni olib tashlang yoki uzoqroqqa, boshqa ko'rinishda qo'ying.

11. Mashqlar

1-mashq (oson): Nima bo'ladi?

Har bir tugma forma ichida. Bosilganda nima bo'ladi: yuboriladi, tozalanadi yoki hech narsa?

1. <button>Saqlash</button>
2. <button type="button">Rasmni aylantirish</button>
3. <button type="reset">Qaytadan</button>
4. <input type="submit" value="Yuborish">
5. <button type="Button">Yordam</button>

2-mashq (o'rta): So'rovni to'ldiring

<form action="https://example.com/savat">
  <label for="soni">Nechta?</label>
  <input type="number" id="soni" name="soni" value="1">
  <button type="submit" name="harakat" value="qoshish">
    Savatga qo'shish
  </button>
  <button type="submit" name="harakat" value="hozir">
    Hozir sotib olish
  </button>
</form>

• Mehmon soniga 3 yozib, "Hozir sotib olish" ni bosdi. So'rov: soni=3&harakat=
• Mehmon 2 yozib, Enter bosdi. harakat qiymati:

3-mashq (qiyin): Tuzating

Doniyor taksi xizmati uchun forma yozdi. Unda to'rtta xato bor. Toping va tuzating.

Noto'g'ri:

<form action="https://example.com/taksi" method="post">
  <label for="manzil">Qayerga?</label>
  <input type="text" id="manzil" name="manzil">
  <button type="reset">Tozalash</button>
  <button>Xaritada ko'rsatish</button>
  <button type="submit">Taksi chaqirish</button>
  <button type="submit" formaction="https://example.com/narx">
    Narxni bilish
  </button>
</form>

Talablar: "Xaritada ko'rsatish" keyinroq JavaScript bilan ishlaydi. "Narxni bilish" hech narsani saqlamaydi, faqat narxni ko'rsatadi. Enter taksi chaqirsin.

<form action="https://example.com/taksi" method="post">
  <label for="manzil">Qayerga?</label>
  <input type="text" id="manzil" name="manzil">
  <button type="submit">Taksi chaqirish</button>
  <button type="submit" formaction="https://example.com/narx"
          formmethod="get">
    Narxni bilish
  </button>
  <button type="button">Xaritada ko'rsatish</button>
</form>

12. Real ishda

• "Nega formam o'zi yuborilyapti?" — frontend forumlarida eng ko'p beriladigan savollardan biri. Javob deyarli har doim type siz button. React yoki Vue'da (kursda alohida o'rganamiz) ham bu qoida aynan shunday ishlaydi.
• Linterlar. Ko'p jamoalarda type siz tugma kodni birlashtirishdan oldin avtomatik ushlanadi: HTML'da html-validate, React'da ESLint'ning react/button-has-type qoidasi.
• Onlayn do'konlar. "Savatga qo'shish" va "Hozir sotib olish" — bitta formadagi ikki submit tugma, name/value bilan farqlanadi.
• Intervyuda: "Forma ichidagi button ning standart turi qanday?" — klassik savol. Endi javob: submit, va shuning uchun type ni doim yozamiz.

Xulosa

• button ning uch turi: submit (yuboradi), reset (boshlang'ich holatga qaytaradi), button (hech narsa qilmaydi).
• type yozilmasa — submit; shuning uchun har bir tugmaga type ni aniq yozing.
• Enter formadagi birinchi submit tugmani "bosadi" — asosiy tugma kodda birinchi tursin.
• Faqat bosilgan tugmaning name=value jufti yuboriladi — server shu orqali harakatni farqlaydi.
• formaction, formmethod, formtarget, formenctype, formnovalidate — formani faqat shu tugma uchun o'zgartiradi.
• disabled yoki yashirilgan tugma — himoya emas; huquqni server tekshiradi.

Keyingi dars: Fayl yuklash maydoni — mehmon to'lov chekining rasmini yuklaydi: type="file", accept va multipart/form-data.

Manbalar

• MDN: <button>, <input type="submit">, <input type="image"> — developer.mozilla.org
• WHATWG HTML: "Implicit submission" va "Form submission" — html.spec.whatwg.org
• html-validate: no-implicit-button-type qoidasi — html-validate.org