تگ button و کاربرد آن در html

      ۲ دیدگاه برای تگ button و کاربرد آن در html

تگ button و کاربرد آن در html

عنصر <button> یک دکمه قابل کلیک را تعریف می کند. هر چند که این برچسب اغلب در رابطه با عنصر <FORM> استفاده می شود، اما می تواند به عنوان یک دکمه کنترلی مستقل نیز مورد استفاده قرار بگیرد.

به مثال زیر توجه کنید :

متن فوق را در یک ادیتور مانند notepad کپی کرده و آن را با پسوند html ذخیره کنید . با کلیک بر روی فایل ایجاد شده ، میتوانید نتیجه کدهای نوشته شده در فایل را در مروگر مشاهده کنید:

تگ button و کاربرد آن در html

تگ button و کاربرد آن در html

تگ button و کاربرد آن در html

تفاوت بین این عنصر و دکمه های ایجاد شده توسط عنصر <input> این است که در داخل یک عنصر <button> شما می توانید مطالبی مانند متن و تصاویر قرار دهید .

مثال زیر را در notepad به فرمت html ذخیره و با استفاده از مرورگر مشاهده کنید:

تگ button و کاربرد آن در html

تگ button و کاربرد آن در html

نکته: همیشه خاصیت type را برای یک عنصر <button> مشخص کنید. مرورگرهای مختلف از type های پیش فرض متفاوتی برای این عنصر استفاده میکنند .

توجه: در صورت استفاده از عنصر <button> در یک فرم HTML، مرورگرهای مختلف، ممکن است مقادیر مختلفی را ارسال کنند. بنابراین برای ایجاد دکمه در فرم HTML از تگ های <input> استفاده کنید.

تفاوت بین HTML 4.01 و HTML5

در HTML5 خاصیت های جدیدی برای عنصر <button> معرفی کرده است: autofocus ، form، formaction، formenctype، formmethod، formnovalidate، و formtarget.

خاصیت ها:

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد 

خاصیت ویژه عنصر :

خاصیت ها مقدار توضیحات
Autofocus  new autofocus مشخص می کند که یک دکمه پس از لود صفحه باید به طور خودکار مورد توجه قرار گیرد
disabled disabled مشخص میکند که یک دکمه باید غیر فعال باشد
Form  new form_id یک یا چند فرم برای یک دکمه تعیین میکند
Formaction  new URL محلی که داده های فرم به آن ارسال میشود را مشخص میکند. فقط برای type=submit استفاده میشود
Formenctype  new application/x-www-form-urlencodedmultipart/form-datatext/plain نحوه رمزگذاری اطلاعات فرم را قبل از ارسال به سرور مشخص میکند. فقط برای type=submit استفاده میشود
Formmethod  new getpost نحوه ارسال اطلاعات فرم را مشخص میکند . فقط برای type=submit استفاده میشود
Formnovalidate  new formnovalidate مشخص می کند که اطلاعات فرم نیاز به اعتبار سنحی ندارند. فقط برای type=submit استفاده میشود
Formtarget   new _blank_self_parent_topframename محل نمایش پاسخ بعد از ارسال فرم را مشخص میکند . فقط برای type=submit استفاده میشود
name name یک نام برای دکمه مشخص میکند
Type buttonresetsubmit نوع دکمه را مشخص میکند
value text یک مقدار اولیه برای دکمه تعیین میکند

 خاصیت های عمومی

تگ <button> از خاصیت های عمومی HTML پشتیبانی میکند

accesskey hidden itemtype
class id lang
contenteditable inert spellcheck
contextmenu itemid style
dir itemprop tabindex
draggable itemref title
dropzone itemscope translate

 

خاصیت های رویداد

تگ <button> از خاصیت های رویداد در HTML نیز پشتیبانی میکند.

onabort onended onmousewheel
oncancel onerror onpause
onblur onfocus onplay
oncanplay onformchange onplaying
oncanplaythrough onforminput onprogress
onchange oninput onratechange
onclick oninvalid onreadystatechange
oncontextmenu onkeydown onscroll
ondblclick onkeypress onseeked
ondrag onkeyup onseeking
ondragend onload onselect
ondragenter onloadeddata onshow
ondragexit onloadedmetadata onstalled
ondragleave onloadstart onsubmit
ondragover onmousedown onsuspend
ondragstart onmousemove ontimeupdate
ondrop onmouseout onvolumechange
ondurationchange onmouseover onwaiting
onemptied onmouseup

پشتیبانی مرورگر ها

برچسب <button> در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر

2 thoughts on “تگ button و کاربرد آن در html

  1. نازی

    سلام یه سوال داشتم در مورد باتون میخوام چند تا درست کنم تو یه صفحه ک بین این باتون ها یه جای خالی باشه و بعد دوباره باتون قرار بدم چجوری این کا رو انجام بدم بی زحمت راهنمایی کنید

    Reply

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *