تعریف و کاربرد تگ button در HTML
تگ <button> یک دکمه قابل کلیک کردن را به وجود می آورد.
اگر در جریان باشید ما بطور کلی ۲ نوع دکمه قابل کلیک شدن داریم :
- دکمه از نوع button که در این بخش می خواهیم با آن آشنا شویم دکمه ای است که قابل کلیک شدن می باشد و ما می توانیم محتوایی همچون متن و.. در این دکمه قرار دهیم.
- دکمه از نوع ورودی (input) که از این نوع دکمه معمولا در فرم ها برای ارسال اطلاعات فرم به سرور استفاده می شود.
تفاوت دکمه ایجاد شده با تگ <button> و دکمه ایجاد شده با تگ <input> در این است که داخل تگ <button> می توان محتوایی شامل متن یا تصویر گذاشت.
نکته: همیشه نوع ویژگی ها (attribute) عنصر را مشخص کنید، زیرا مرورگر های مختلف مقادیر مختلفی را به طور پیش فرض برای عنصر <button> به کار می برند.
نکته : اگر در یک فرم HTML، از تگ <button> استفاده کنید، مرورگر های مختلف ممکن است مقادیر متفاوتی رو ارسال کنند، به همین دلیل در فرم ها از تگ <input> استفاده می کنیم.
تفاوت بین HTML 4.01 و HTML5
HTML5 شامل ویژگی های (attribute) جدیدی است از جمله:autofocus ،form ،formaction ،formenctypy ،formmethod formnovalidate و formtarget.
مثال و تمرین از تگ button در HTML
<button onclick="alert('به سایتکده خوش آمدید')">کلیک کن</button>
<button type="button">کلیک کنید !</button>
تمرین کنید !
نکات و توضیحات
سعی کنید همیشه نوع (type) دکمه را مشخص نمایید (مثلا از نوع submit یا button یا reset) چون اگر نوع دکمه را مشخص نکرده باشید ، ممکن است برخی از مرورگرها بصورت پیش فرض تنظیماتی را بروی دکمه ها اعمال نمایند.
اگر می خواهید با کلیک بروی دکمه ، اطلاعات فرم ها ارسال شوند بهتر است از دکمه نوع Input و درون تگ Form استفاده نمایید. (همانند دستور زیر)
<input type="submit">
صفات تگ button در HTML
صفت | مقدار | توضیحات |
autofocus | autofocus | مشخص می کند یک button (دکمه) بطور خودکار در کانون توجه قرار می گیرد زمانی که صفحه load می شود. |
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 | یک مقدار بصورت پیش فرض برای دکمه مشخص می کند. |
پشتیبانی مرورگرها از تگ <button>
Element | ![]() |
![]() |
![]() |
![]() |
![]() |
<button> | بله | بله | بله | بله | بله |