آموزش و یادگیری تگ button در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، با تگ <button> آشنا مي‌شويم. اين تگ براي ايجاد دکمه‌هاي قابل کليک در صفحات وب استفاده مي‌شود و يکي از عناصر کليدي در فرم‌ها و رابط‌هاي کاربري (UI) است.

تگ button در HTML چيست؟

تگ <button> براي ساخت دکمه‌اي به کار مي‌رود که کاربر مي‌تواند روي آن کليک کند. اين دکمه‌ها مي‌توانند براي ارسال فرم، اجراي اسکريپت‌هاي JavaScript يا انجام هر عمل دلخواهي استفاده شوند.

ساختار کلي تگ button

<button>متن دکمه</button>

هر چيزي که بين دو تگ <button> و </button> قرار بگيرد، در داخل دکمه نمايش داده مي‌شود؛ حتي مي‌توانيد تصوير يا آيکون نيز درون آن بگذاريد.

انواع دکمه‌ها با ويژگي type

<button type="button">دکمه معمولي</button>
<button type="submit">ارسال فرم</button>
<button type="reset">بازنشاني فرم</button>

• type="button": يک دکمه معمولي که هيچ عمل خاصي انجام نمي‌دهد مگر اينکه به آن رويداد JavaScript متصل شود.
• type="submit": براي ارسال داده‌هاي فرم به سرور استفاده مي‌شود.
• type="reset": براي بازنشاني تمام مقادير فرم به حالت اوليه.

مثال با JavaScript

<button type="button" onclick="alert("سلام!")">کليک کن</button>

در اين مثال، هنگام کليک روي دکمه، پيامي در مرورگر نمايش داده مي‌شود.

افزودن استايل به دکمه با CSS

<style>
button {
  background-color: #2196f3;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
button:hover {
  background-color: #0b7dda;
}
</style>

<button>دکمه آبي زيبا</button>

با استفاده از CSS مي‌توانيد رنگ، سايز، گردي لبه‌ها و افکت‌ها را به دکمه اضافه کنيد تا ظاهري حرفه‌اي داشته باشد.

قرار دادن تصوير درون دکمه

<button>
  <img src="/icons/send.png" alt="ارسال" width="20"> ارسال
</button>

در اين حالت، دکمه شامل يک تصوير و متن است که براي رابط‌هاي کاربري مدرن بسيار پرکاربرد است.

صفات مهم تگ button

مثال دکمه غيرفعال

<button disabled>غيرفعال</button>

نکات حرفه‌اي

• بهتر است از <button> به جاي <input type="button"> استفاده کنيد، زيرا انعطاف‌پذيرتر است.
• مي‌توانيد داخل <button> عناصر HTML مانند <span>، <img> و آيکون‌ها قرار دهيد.
• براي سئو و دسترس‌پذيري، از متن مناسب در دکمه‌ها استفاده کنيد (مثلاً «ارسال فرم» به جاي «کليک کنيد»).

براي يادگيري حرفه‌اي طراحي رابط کاربري و کنترل فرم‌ها، پيشنهاد مي‌کنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.