آموزش تگ button در HTML
آموزش تگ button در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ button در HTML به صورت کامل آشنا بشید.
تگ button که یکی از پراستفاده ترین تگ های HTML می باشد، تگی است که ما با استفاده از آن میتوانیم یک دکمه ی قابل کلیک شدن را ایجاد نماییم.
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
خب ما عملا ۲ نوع دکمه میتونیم داشته باشیم :
- دکمه از نوع button : که در این قسمت از آموزش میخواهیم باهاش آشنا بشیم دکمه ای است که قابلیت کلیک شدن را دارد و ما میتوانیم محتوایی همچون متن ، عکس ، فیلم و … را داخل این دکمه قرار دهیم.
مثال :
<button type="button">MyButton</button>
- دکمه از نوع سابمیت یا Submit : از این نوع دکمه در فرم ها برای ارسال اطلاعات فرم بطرف سرور استفاده می شود.
در مثال :
<input type="submit" value="ارسال">
در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده کنید.
مثال شماره یک : دکمه در حالت معمولی ( با استفاده از جاوااسکریپت نوشته شده زمانی که روی دکمه کلیک شد پیغام بده سلام خوبی؟ )
<body>
<button type="button" onclick="alert('سلام خوبی؟')">کلیک کن</button>
</body>
اما مثال شماره دو : استایل دادن به دکمه با استفاده از CSS
<style>
.mybutton{
background-color:#2196F3;
border:none;
border-radius:7px;
color:white;
padding:10px 25px;
text-align:center;
font-size:16px;
cursor:pointer;
}
.mybutton:hover{
background-color:#4287BF;
}
</style>
در مثال شماره سه : دکمه تمام عرض ( یعنی ۱۰۰درصد صفحه ) در رنگ های متنوع
<style>
.mybutton{
width: 100%;
}
</style>
و مثال شماره چهار : دکمه های لینک دار ( یعنی استفاده از تگ a )
<body> <a href="https://wppush.ir/" class="mybutton red">برو به سایت</a> <a href="https://wppush.ir/" class="mybutton green">برو به سایت</a> </body>
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ button در HTML پشتیبانی میکنند یا خیر.
در جدول زیر میتوانید مشاهده کنید که چه صفات و چه مقادیری را میتوان در این تگ استفاده کرد.
پشتیبانی از صفات و رویدادهای عمومی
تگ button قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- تلاش کنید همیشه نوع (type) دکمه را تعیین کنید ( مثلا از نوع submit یا button یا reset ) چون اگر نوع دکمه را تعیین نکنید ، این احتمال وجود داره که برخی از مرورگرها بصورت اوتوماتیک خودشون نوع دکمه رو دستکاری کنن و عملا نتیجه ای که میخواید رو نگیرید.
توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید