این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ button در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ button در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ button که یکی از پراستفاده ترین تگ های HTML می باشد، تگی است که ما با استفاده از آن میتوانیم یک دکمه ی قابل کلیک شدن را ایجاد نماییم.
خب ما بطور کلی ۲ نوع دکمه میتونیم داشته باشیم :
- دکمه از نوع button : که در این بخش میخواهیم باهاش آشنا بشیم دکمه ای است که قابل کلیک شدن می باشد و ما میتوانیم محتوایی همچون متن ، عکس و.. در این دکمه قرار دهیم.
مثال :
|
1 |
<button type="button">MyButton</button> |
- دکمه از نوع سابمیت یا Submit : که از این نوع دکمه در فرم ها برای ارسال اطلاعات فرم بسمت سرور استفاده می شود.
مثال :
|
1 |
<input type="submit" value="ارسال"> |
Free-Learn
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : دکمه در حالت معمولی ( با استفاده از جاوااسکریپت گفتیم وقتی روی دکمه کلیک شد پیغام بده سلام خوبی؟ )
|
1 2 3 4 5 |
<body> <button type="button" onclick="alert('سلام خوبی؟')">کلیک کن</button> </body> |
مثال شماره ۲ : استایل دادن به دکمه با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
مثال شماره ۳ : دکمه تمام عرض ( که ۱۰۰درصد عرض سطر باشه ) در رنگ های مختلف
|
1 2 3 4 5 6 7 |
<style> .mybutton{ width: 100%; } </style> |
مثال شماره ۴ : دکمه های لینک دار ( یعنی استفاده از تگ a )
|
1 2 3 4 5 6 |
<body> <a href="https://free-learn.ir/" class="mybutton red">برو به سایت</a> <a href="https://free-learn.ir/" class="mybutton green">برو به سایت</a> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ button در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| autofocus | autofocus | مشخص میکنه که بصورت خودکار با بالا اومدن صفحه روی کدوم دکمه فوکوس شه |
| disabled | disabled | برای غیرفعال کردن دکمه |
| form | form_id | مشخص میکنه که این دکمه اطلاعاتش بهمراه فلان فرم بسمت سرور ارسال شود |
| formaction | URL | مشخص میکند که داده های کدام فرم باید ارسال شود (فقط در دکمه از نوع submit عمل میکند) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
نحوه کدگذاری داده های فرم را در هنگام ارسال بسمت سرور مشخص میکند (فقط در دکمه از نوع submit عمل میکند) |
| formmethod | get post |
نوع متد ارسالی داده هارو بسمت سرور مشخص میکند ( فقط در دکمه از نوع submit عمل میکند ) |
| formnovalidate | formnovalidate | مشخص میکند که در هنگام ارسال اطلاعات فرم ، داده ها اعتبار سنجی نشوند ( فقط در دکمه از نوع submit عمل میکند) |
| formtarget | _blank _self _parent _top framename |
نحوه باز شدن صفحه مقصد را پس از کلیک بروی دکمه ارسال فرم مشخص میکند ( فقط در دکمه از نوع submit عمل میکند ) |
| name | name | یک نام برای دکمه مشخص میکند |
| type | button reset submit |
نوع دکمه را مشخص میکند |
| value | text | یک مقدار بصورت پیش فرض برای دکمه مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ button از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- سعی کنید همیشه نوع (type) دکمه را مشخص نمایید ( مثلا از نوع submit یا button یا reset ) چون اگر نوع دکمه را مشخص نکرده باشید ، ممکنه برخی از مرورگرها بصورت خودکار خودشون نوع دکمه رو دستکاری کنن و عملا نتیجه ای که میخوایم بدست نیاد.
