Tugmalar har qanday veb-sayt yoki onlayn ilovaning muhim tarkibiy qismidir, chunki ular tashrif buyuruvchilarga sahifa bilan o'zaro aloqada bo'lish va turli vazifalarni bajarish imkonini beradi. HTML-dagi tugma> elementi tugmalarni qurish uchun ishlatilishi mumkin. Ushbu qo'llanmada biz HTML tugmalarini yaratish asoslarini ko'rib chiqamiz va ularni shaxsiylashtirish va bezashning bir necha usullarini ko'rib chiqamiz.
Yorliqli tugma elementi HTMLda tugma yaratishning eng oddiy asosiy usuli hisoblanadi. Masalan, quyidagi kod "Menga bosing!" Degan tugmani yaratadi.
<button>Click Me!</button>
Ushbu tugma brauzerda an'anaviy tugma sifatida paydo bo'ladi va bosilganda, u odatda shaklni yuborish bo'lgan standart amalni bajaradi.
Tugmaning yorlig'ini o'zgartirish uchun qiymat xususiyatidan foydalaning yoki matn tarkibini tugma elementiga qo'ying. Misol tariqasida:
<button value="Submit">Submit</button>
<button>Submit</button>
Bundan tashqari, foydalanish mumkin type
tugma turini belgilash uchun atribut. The type
atribut quyidagi qiymatlarga ega bo'lishi mumkin:
submit
: shaklni yuboradireset
: shaklni tiklaydibutton
: bosilganda JavaScript amalini bajaradi
Masalan:
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Hello, World!')">Say Hello</button>
Oxirgi misolda tugma turi "tugma" bo'lib, uni bosgandan so'ng u "Salom, dunyo!" ogohlantirish xabarini ko'rsatadigan JavaScript kodini ishga tushiradi. Shuningdek, "id" va "class" xususiyatlaridan foydalanib, tugmalaringizni sozlash uchun CSS-dan foydalanishingiz mumkin. Masalan, CSS-dan foydalanib, o'sha sinfdagi barcha tugmalar uchun maxsus tugma uslubini qo'llash uchun 'sinf' mulk.
Tugmani bosishning oldini olish uchun siz "diabled" xususiyatidan ham foydalanishingiz mumkin. Misol tariqasida:
<button disabled>Disabled</button>
HTML-dagi tugmalar haqida ko'proq ma'lumot olish uchun tomosha qilishingizni tavsiya qilamiz ushbu YouTube videosi.