دکمه یا باتن Button

دکمه یا باتن Button چیست؟

دکمه یا باتن (Button) در حوزه رابط کاربری گرافیکی به هر نوع ویجتی گفته می‌شود که روشی ساده برای شروع یک عمل یا رویداد در اختیار کاربر قرار می‌دهد. گفتنی است این المان ها با نام دکمه فرمان یا کامند باتن (Command button) نیز شناخته می‌شوند.

به عنوان مثال، کاربر با کلیک روی دکمه Save در یک پنجره فایل دیالوگ (File Dialog) که برای ذخیره کردن فایل ها در یک نرم افزار به کار می‌رود می‌تواند نام و مکان ذخیره سازی فایل را تأیید نماید. دکمه OK در پنجره های مختلف که برای تأیید محتویات و بستن همزمان پنجره مورد استفاده قرار می‌گیرد نمونه‌ای دیگر از کاربرد این المان ها به شمار می‌رود.

به عنوان مثالی دیگر معمولا در یک فرم اینترنتی، کاربر می‌تواند پس از تکمیل اطلاعات مورد نیاز با کمک یک باتن که در پایین فرم درنظر گرفته شده محتویات فرم را برای سرور سابمیت (Submit) کند.

ظاهر و نحوه تعامل با دکمه ها

دکمه ها معمولا در قالب مستطیل‌های کوچکی که دارای پهنای افقی بیشتر در مقایسه با ارتفاع عمودی هستند مشاهده می‌شوند. کاربر می‌تواند براساس متن کوتاهی که اغلب در وسط دکمه قرار می‌گیرد متوجه شود هر دکمه برای چه منظوری قابل استفاده است. به این متن، عنوان یا کپشن (Caption) دکمه گفته می‌شود.

البته این ویژگی های ظاهری الزامی نیستند و ممکن است به جای کپشن یا در کنار آن از یک آیکن یا تصویر کوچک مرتبط استفاده شود.

برای انجام عمل اختصاص یافته به یک دکمه معمولی کاربر می‌تواند از روش‌های رایج زیر کمک بگیرد:

• روی دکمه کلیک کند و یا در صفحه نمایش های لمسی آن را لمس نماید.
• در حالتی که دکمه دارای فوکس می‌باشد کلید Enter یا Space bar را فشار دهد.
• از کلید میانبر منتسب به دکمه (در صورت وجود) استفاده کند.

برخی از دکمه ها نیز رفتاری مشابه با چک باکس ها دارند. در این حالت به جای آنکه کلیک روی دکمه یا لمس آن صرفا باعث انجام یک عمل ثابت شود دکمه پس از فشرده شدن میان حالت‌های تو رفته یا عادی تغییر وضعیت پیدا می‌کند.

باتن ها در HTML

در HTML از تگ <button> مشابه با مثال زیر برای ایجاد یک دکمه قابل کلیک استفاده می‌شود. کپشن دکمه نیز میان تگ آغاز و پایان قرار می‌گیرد.

<button type="button">Click Me</button>

در HTML معمولا از button ها برای انجام اعمالی مانند سابمیت کردن محتوای فرم یا ریست کردن محتویات آن استفاده می‌شود.

ویژگی type

برای تعیین نوع باتن و رفتار پیشفرض آن از ویژگی type در تگ <button> استفاده می‌شود. در صورتی که دکمه برای سابمیت کردن اطلاعات یک فرم به کار می‌رود لازم است مقدار این ویژگی به صورت submit مشخص شود. (این مقدار، مقدار پیشفرض برای ویژگی type دکمه ای است که به یک فرم اختصاص داده شده است).

برای سایر دکمه ها معمولا از مقدار button برای این ویژگی استفاده می‌شود. در این حالت به صورت پیشفرض عمل خاصی هنگام فشرده شدن دکمه انجام نمی‌شود و اسکریپت های سمت کلاینت عهده دار واکنش در قبال رویدادهای دکمه (مانند کلیک روی آن) هستند.

مقدار دیگری که برای ویژگی type به کار می‌رود مقدار reset می‌باشد و برای ریست یا بازگردانی محتوای فرم به مقادیر اولیه استفاده می‌شود.

تگ input برای ساخت دکمه ها و تفاوت آن با تگ button

شما می‌توانید از المان <input> با نوع button (به صورت <input type=”button”>) نیز برای ایجاد یک دکمه مشابه با مثال زیر در HTML استفاده کنید.

<input type="button" value="Click Me">

هرچند حاصل هر دو مثال فوق مشابه یکدیگر است اما دکمه های ساخته شده با تگ <button> می‌توانند تگ های دیگری مانند <img> و <strong> و … را نیز شامل شوند. موضوعی که در تگ های <input> به دلیل نداشتن محتوای داخلی امکان‌پذیر نمی‌باشد.