تگ button در HTML: راهنمای جامع
تگ <button> یکی از عناصر کلیدی در طراحی فرم‌ها و تعاملات کاربری در صفحات وب است. این تگ امکان ایجاد دکمه‌های قابل کلیک را فراهم می‌کند که می‌توانند برای ارسال فرم‌ها، اجرای اسکریپت‌ها یا هر عملکرد دیگری مورد استفاده قرار گیرند.
تگ button برخلاف input type="button" می‌تواند محتوای HTML را در خود جای دهد و انعطاف‌پذیری بیشتری در طراحی ارائه می‌دهد.
انواع تگ button
سه نوع اصلی دکمه در HTML وجود دارد:
- دکمه submit: برای ارسال فرم‌ها استفاده می‌شود
- دکمه reset: برای بازنشانی مقادیر فرم
- دکمه معمولی: برای اجرای اسکریپت‌های جاوااسکریپت
| نوع دکمه |
کاربرد |
مثال |
| submit |
ارسال فرم |
<button type="submit">ارسال</button> |
| reset |
بازنشانی فرم |
<button type="reset">پاک کردن</button> |
| button |
عملیات سفارشی |
<button type="button">کلیک کنید</button> |
ویژگی‌های مهم تگ button
تگ button دارای چند ویژگی کلیدی است که باید با آنها آشنا باشید:
- type: نوع دکمه را مشخص می‌کند (submit/reset/button)
- disabled: غیرفعال کردن دکمه
- autofocus: فوکوس خودکار روی دکمه هنگام بارگذاری صفحه
- form: ارتباط دکمه با فرم‌های خارجی
- name/value: برای ارسال داده‌ها با فرم
برای اطلاعات بیشتر درباره ویژگی‌های پیشرفته تگ button می‌توانید تگ button در html.
استایل‌دهی به دکمه‌ها
با استفاده از CSS می‌توانید ظاهر دکمه‌ها را کاملاً سفارشی کنید. برخی از تکنیک‌های رایج:
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
این کد یک دکمه ساده با افکت hover ایجاد می‌کند. برای طراحی دکمه‌های حرفه‌ای‌تر می‌توانید از:
- گرادیانت‌های رنگی
- سایه‌ها (box-shadow)
- انیمیشن‌های CSS
- آیکون‌های فونت‌آسوم
تگ button یکی از پرکاربردترین عناصر در توسعه وب است و تسلط بر آن برای هر توسعه‌دهنده وب ضروری می‌باشد.
