آموزش HTML – تگ button

تعریف و کاربرد تگ 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	یک مقدار بصورت پیش فرض برای دکمه مشخص می کند.