آموزش تگ button در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ button در HTML با من همراه باشید.
Free-Learn
تگ button در HTML
تگ button تگی است که ما با استفاده از آن میتوانیم یک دکمه ی قابل کلیک شدن را ایجاد نماییم.
اگر در جریان باشید ما بطور کلی ۲ نوع دکمه قابل کلیک شدن داریم :
- دکمه از نوع button که در این بخش میخواهیم باهاش آشنا بشیم دکمه ای است که قابل کلیک شدن می باشد و ما میتوانیم محتوایی همچون متن و.. در این دکمه قرار دهیم.
- دکمه از نوع ورودی (input) که از این نوع دکمه معمولا در فرم ها برای ارسال اطلاعات فرم به سرور استفاده می شود.
Free-Learn
مثال از تگ button در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : یک دکمه ی معمولی و قابل کلیک شدن
|
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
جدول صفات تگ button در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت 
یعنی در 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"> |
