Button در HTML (دکمه در HTML)

مارس 11, 2024
ارسال توسط سعید غریبی

در زمینه توسعه وب، دکمه یکی از عناصر مهم و حیاتی است که تعامل کاربر با وب‌سایت را تسهیل می‌کند. دکمه‌ها می‌توانند مختلف باشند و برای اجرای اقدامات مختلف مانند ارسال فرم، پیمایش به صفحات مختلف و … استفاده شوند. در این مقاله، با Button در HTML آشنا می‌شویم و نحوه استفاده از آن در توسعه وب را بررسی می‌کنیم.

مفهوم Button در HTML

دکمه یک عنصر فرم در HTML است که به کاربر این امکان را می‌دهد تا با کلیک کردن بر روی آن، اقدامات مختلفی را انجام دهد. دکمه‌ها می‌توانند درون فرم‌ها یا به صورت مستقل قرار گیرند. از تگ <button>، <input> با ویژگی type="button" یا type="submit" و <a> برای ایجاد دکمه‌ها استفاده می‌شود.

نحوه استفاده از دکمه HTML

`<button>`

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال دکمه HTML</title>
</head>
<body>

  <button onclick="alert('سلام!')">کلیک کنید</button>

</body>
</html>

`<input>` با `type="button"`

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال دکمه HTML</title>
</head>
<body>

  <input type="button" value="کلیک کنید" onclick="alert('سلام!')">

</body>
</html>

`<input>` با `type="submit"`

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال دکمه HTML</title>
</head>
<body>

  <form action="/submit" method="post">
    <input type="submit" value="ارسال فرم">
  </form>

</body>
</html>

`<a>` به عنوان دکمه

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال دکمه HTML</title>
</head>
<body>

  <a href="#" class="button">لینک دکمه</a>

</body>
</html>

توضیحات نمونه کد

<button>: این دستور برای ایجاد دکمه استفاده می‌شود. می‌توان به صورت مستقل یا درون فرم‌ها قرار گرفت. در مثال بالا، با کلیک بر روی دکمه، یک هشدار نمایش داده می‌شود.
<input> با type="button": استفاده از ویژگی type="button" برای ایجاد دکمه استفاده می‌شود. همچنین، می‌توان ویژگی onclick را برای افزودن رویداد کلیک به دکمه استفاده کرد.
<input> با type="submit": با input و استفاده از ویژگی type="submit" برای ایجاد دکمه ارسال فرم استفاده می‌شود. زمانی که این دکمه کلیک می‌شود، فرم به آدرسی که در ویژگی action تعیین شده، ارسال می‌شود.
<a> به عنوان دکمه: این تگ برای ایجاد دکمه به شکل لینک استفاده می‌شود. با استفاده از کلاس‌ها و سبک‌دهی CSS، این دکمه می‌تواند به صورت دلخواه زیبا شود.

کاربردهای Button در HTML

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

نکات پایانی

استفاده از دکمه HTML یک روش کارا برای افزودن تعامل به وب‌سایت‌ها است. با استفاده از انواع دکمه‌ها و ترکیب آنها با ابزارهای دیگر می‌توانید تجربه کاربری را بهبود بخشید و امکانات بیشتری به وب‌سایت خود اضافه کنید. حواستان به استفاده مناسب از تگ‌ها، ویژگی‌ها و رویدادها باعث می‌شود دکمه‌های شما به درستی عمل کنند و تجربه کاربری را به افراد ارتقا دهند