چه موقع از عنصر Button استفاده کنیم؟

چه موقع از المان Button استفاده کنیم؟

مثال اولیه استفاده از المان button

<button>
  Do Something
</button>

رایج ترین نتیجه کلیک کردن بر روی المان‌های یک وب سایت چیست؟

رفتن به یک URL جدید، مانند کلیک کردن روی لینک (یک المان <a href=”/example/”></a>).

المان <button> به خودی خود نمی تواند این کار را انجام دهد. در طول سال‌ ها بحث ‌های مختلفی در مورد اجازه دادن به «href در هر مکانی» وجود داشته است، اما هیچ نتیجه ‌ای حاصل نشده است.

Button یک المان فرم است

فرم های وب دارای دکمه های ارسال هستند. در این مثال از input type=”submit” استفاده شده است. این فرم را ببینید:

<form action="/" method="post">
  <input type="submit" value="Submit">
</form>

یک المان <button> در یک <form>، به طور پیش‌فرض، موارد پر شده کاربر را ارسال (Submit) می‌کند:

<form action="/" method="post">
  <button>Submit</button>
</form>

هرچند بر اساس نیاز وبسایت و UX آن، فرم ها می توانند دکمه Reset نیز داشته باشند. می ‌توانید با تغییر نوع ارسال پیش ‌فرض به Reset، این کار را کنید:

<form action="/" method="post">
  <button type="reset">Reset</button>
</form>

با کلیک بر روی آن دکمه، تمام ورودی های دیگر (و مناطق متنی) در <form> والد پاک می شود.

دکمه ها می توانند محتوا داشته باشند

دلیل اصلی استفاده از <button> این است که هم تگ باز و هم بسته (</button>) دارد. به این معنی که ممکن است چیزهایی در داخل آن وجود داشته باشد. یک مورد استفاده رایج چیزی شبیه به مورد زیر است:

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Submit
</button>

در حالی که یک ورودی می تواند <input type=”image”> باشد، این محتوای ترکیبی به سختی به دست می آید. احتمالا می‌توانید با قرار دادن کدهای HTML در یک دکمه کنار بیایید، اما MDN اشاره می‌ کند که «محتوای مجاز» یک دکمه به «عبارت ‌بندی محتوا» محدود می ‌شود. محتوای عبارتی یک زیرمجموعه محدود از عناصر HTML است که «متن و نشانه‌ گذاری آن را تعریف می ‌کند. مجموعه ‌ای از محتوای عبارت‌بندی، پاراگراف ‌ها را تشکیل می ‌دهند.»

از شبه المان (Pseudo elements) نیز می توان استفاده کرد.

بیایید از استایل دادن <button> بگذریم، اما مرورگرهای مختلف معمولا استایل خاصی دارند که روی دکمه ها اعمال می کنند. باید آن را به حال خود رها کرد تا پیش ‌فرض ارائه شود یا کاملا حذف شود تا استایل خودتان را جایگزین آن کنید.

بیایید در نظر بگیریم: «اگر دکمه ای تگ href معناداری ندارد، یک <button> است.»

این موضوع همان چیزی است که باعث شد این مقاله را شروع کنم. در آن زمان به این فکر می کردم که چقدر از معنای آن لذت می برم. همانطور که در مورد زیر دیده می شود:

<a href="#0">
  I'm kinda sick of doing this for buttons.
</a>

هیچ href معناداری در آنجا وجود ندارد. ۰ فقط آنجاست بنابراین به صفحه منتقل نمی شود، زیرا ID ها نمی توانند با یک عدد شروع شوند.

به احتمال زیاد، کد HTML بالا به این معنی است: من قصد دارم با کلیک بر روی آن کاری با جاوا اسکریپت انجام دهم. به نوعی احساس بهتری نسبت به <div> دارد، زیرا شما تغییر مکان نما و هر استایل پیش فرض دیگری را دریافت می کنید.

اگر از آن href های بی معنی خوشتان نمی آید، یک <button> می تواند جایگزین خوبی به نظر برسد. اما متاسفانه خارج از چارچوب یک <form>، یک <button> به همان اندازه بی معنی است. این بدین معنی است که استفاده از Button برای اجرای کدهای جاوا اسکریپت، گزینه ای بهتر بنظر می‌رسد.

<button>
  Outside of a <form>, I'm just as useless.
</button>

اما به هر حال <button> احساس بهتری دارد!

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

المان button را با جاوا اسکریپت درج می کنیم

این موضوع احتمالا بهترین راه حل است. اگر جاوا اسکریپت برای انجام هر کاری مورد نیاز باشد، ممکن است اصلا هیچ کاری انجام ندهد مگر اینکه جاوا اسکریپت اجرا شود. ما می توانیم کار زیر را انجام دهیم:

// Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// Add event handler
button.addEventListener ("click", function() {
  alert("did something");
});

شما به راحتی می توانید کد «افزودن دکمه» را بخشی از گردش کار جاوا اسکریپت خود کنید.

وقتی لینک ها معنی بیشتری پیدا می کنند که موارد زیر رعایت شود

اگر هر نوع href ای وجود دارد که می توانید به آن لینک دهید کاری منطقی است، به هر حال از یک Anchor استفاده کنید. حتی اگر آن را با جاوا اسکریپت لغو کنید. این کار در بهترین حالت پیشرفتی تدریجی است. برای مثال:

• یک دکمه جستجو معمولا یک مورد جستجوی ajax پیش از تایپ را راه ‌اندازی می‌کند اما href فقط می ‌تواند به صفحه /search/ اشاره کند.
• یک دکمه انتشار مرحله بعدی انتشار چیزی را که کاربر ساخته است راه اندازی می کند اما href می تواند فقط به یک صفحه /publish/ اشاره کند.
• یک دکمه thumbnail یک لایت باکس با نسخه بزرگتر را باز می کند اما href فقط می تواند به URL آن نسخه بزرگتر اشاره کند.

اگر چیزی منطقی نیست، دکمه را با جاوا اسکریپت طراحی کنید.

نگرانی های دسترسی

اجازه دهید بگوییم استفاده از یک لینک Anchor منطقی است. پس از مهارت یافتن، امکان دسترسی نیز وجود دارد که باید در نظر بگیرید.

شما ممکن است کار زیر را انجام دهید:

<a href="#meaningful" class="button" role="button">
  I'm good
</a>

اما شما هنوز مشکل را حل نکرده اید. MDN آن را به خوبی پوشش می دهد:

هشدار: هنگام علامت گذاری لینک ها با دکمه مراقب باشید. انتظار می رود دکمه ها با استفاده از کلید Space فعال شوند، در حالی که انتظار می رود لینک ها از طریق کلید Enter فعال شوند. به عبارت دیگر، وقتی از لینک ها برای رفتار دکمه ‌ای استفاده می‌ شود، افزودن role=”button” به تنهایی کافی نیست. همچنین لازم است یک کنترل کننده رویداد کلید اضافه شود که از کلید Space پیروی می کند تا با دکمه های اصلی سازگار باشد.

لینک ها و دکمه ها را با کلیدهای مختلف فعال می کنید، پس این موضوع را در نظر بگیرید.