تگ 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  newautofocusمشخص می کند که یک دکمه پس از لود صفحه باید به طور خودکار مورد توجه قرار گیرد
disableddisabledمشخص میکند که یک دکمه باید غیر فعال باشد
Form  newform_idیک یا چند فرم برای یک دکمه تعیین میکند
Formaction  newURLمحلی که داده های فرم به آن ارسال میشود را مشخص میکند. فقط برای type=submit استفاده میشود
Formenctype  newapplication/x-www-form-urlencodedmultipart/form-datatext/plainنحوه رمزگذاری اطلاعات فرم را قبل از ارسال به سرور مشخص میکند. فقط برای type=submit استفاده میشود
Formmethod  newgetpostنحوه ارسال اطلاعات فرم را مشخص میکند . فقط برای type=submit استفاده میشود
Formnovalidate  newformnovalidateمشخص می کند که اطلاعات فرم نیاز به اعتبار سنحی ندارند. فقط برای type=submit استفاده میشود
Formtarget   new_blank_self_parent_topframenameمحل نمایش پاسخ بعد از ارسال فرم را مشخص میکند . فقط برای type=submit استفاده میشود
namenameیک نام برای دکمه مشخص میکند
Typebuttonresetsubmitنوع دکمه را مشخص میکند
valuetextیک مقدار اولیه برای دکمه تعیین میکند

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

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

accesskeyhiddenitemtype
classidlang
contenteditableinertspellcheck
contextmenuitemidstyle
diritemproptabindex
draggableitemreftitle
dropzoneitemscopetranslate

 

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

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

onabortonendedonmousewheel
oncancelonerroronpause
onbluronfocusonplay
oncanplayonformchangeonplaying
oncanplaythroughonforminputonprogress
onchangeoninputonratechange
onclickoninvalidonreadystatechange
oncontextmenuonkeydownonscroll
ondblclickonkeypressonseeked
ondragonkeyuponseeking
ondragendonloadonselect
ondragenteronloadeddataonshow
ondragexitonloadedmetadataonstalled
ondragleaveonloadstartonsubmit
ondragoveronmousedownonsuspend
ondragstartonmousemoveontimeupdate
ondroponmouseoutonvolumechange
ondurationchangeonmouseoveronwaiting
onemptiedonmouseup

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

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

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

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

  1. نازی

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

    Reply

پاسخ دهید

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