این آموزش در تاریخ ۱۳۹۸/۱۱/۱۷ آپدیت شده است.
آموزش تگ button در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ button در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ button تگی است که ما با استفاده از آن میتوانیم یک دکمه ی قابل کلیک شدن را ایجاد نماییم.
اگر در جریان باشید ما بطور کلی ۲ نوع دکمه قابل کلیک شدن داریم :
- دکمه از نوع button که در این بخش میخواهیم باهاش آشنا بشیم دکمه ای است که قابل کلیک شدن می باشد و ما میتوانیم محتوایی همچون متن و.. در این دکمه قرار دهیم.
- دکمه از نوع ورودی (input) که از این نوع دکمه معمولا در فرم ها برای ارسال اطلاعات فرم به سرور استفاده می شود.
Free-Learn
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : یک دکمه ی معمولی و قابل کلیک شدن
|
1 2 3 4 5 |
<body> <button onclick="alert('سلام خوبی؟')">کلیک کن</button> </body> |
مثال شماره ۲ : یک دکمه ایجاد شده با CSS (دکمه سفارشی)
|
1 2 3 4 5 |
<body> <button class="button" onclick="alert('سلام خوبی؟')">کلیک کن</button> </body> |
مثال شماره ۳ : دکمه تمام عرض در رنگ های مختلف
|
1 2 3 4 5 6 7 8 9 |
<body> <button class="button">کلیک کن</button> <button class="button red">کلیک کن</button> <button class="button yellow">کلیک کن</button> <button class="button green">کلیک کن</button> <button class="button purple">کلیک کن</button> </body> |
مثال شماره ۴ : دکمه ایجاد شده با CSS (با تگ a و دارای لینک)
|
1 2 3 4 5 6 7 8 9 |
<body> <a href="#" class="button"><span>دانلود </span></a> <a href="#" class="button bg-blue"><span>دانلود </span></a> <a href="#" class="button bg-red"><span>دانلود </span></a> <a href="#" class="button bg-purple"><span>دانلود </span></a> <a href="#" class="button bg-green"><span>دانلود </span></a> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ button در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت 
یعنی در HTML5 اضافه شده است)
| نام صفت | مقدار | توضیح |
|---|---|---|
| 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) چون اگر نوع دکمه را مشخص نکرده باشید ، ممکن است برخی از مرورگرها بصورت پیش فرض تنظیماتی را بروی دکمه ها اعمال نمایند.
اگر میخواهید با کلیک بروی دکمه ، اطلاعات فرم ها ارسال شوند بهتر است از دکمه نوع Input و درون تگ Form استفاده نمایید. (همانند دستور زیر)
|
1 |
<input type="submit"> |
