آموزش HTML – تگ button

نویسنده : مرتضی گنج | تاریخ انتشار : 2019/11/15 | بخش : آموزش HTML

تعریف و کاربرد تگ button در HTML

تگ <button> یک دکمه قابل کلیک کردن را به وجود می آورد.

اگر در جریان باشید ما بطور کلی ۲ نوع دکمه قابل کلیک شدن داریم :

  1. دکمه از نوع button که در این بخش می خواهیم با آن آشنا شویم دکمه ای است که قابل کلیک شدن می باشد و ما می توانیم محتوایی همچون متن و.. در این دکمه قرار دهیم.
  2. دکمه از نوع ورودی (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> بله بله بله بله بله