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

برای یادگیری عملی، ویدیوی زیر را تماشا کنید که نحوه استفاده از تگ <button>، ویژگی‌ها و استایل‌دهی را توضیح می‌دهد:

تگ <button> در HTML برای ایجاد دکمه‌های تعاملی در صفحات وب استفاده می‌شود. این تگ به کاربران امکان می‌دهد با کلیک، اقداماتی مثل ارسال فرم، اجرای اسکریپت جاوااسکریپت یا هدایت به صفحه‌ای دیگر را انجام دهند. در این مقاله، ویژگی‌ها، کاربردها و نکات کلیدی تگ <button> را بررسی می‌کنیم.

ویژگی‌های مهم تگ button

تگ<button> از ویژگی‌های متنوعی پشتیبانی می‌کند که عملکرد و ظاهر آن را بهبود می‌بخشند:

type: نوع دکمه را مشخص می‌کند:
- submit: برای ارسال فرم.
- reset: برای بازنشانی فرم.
- button: برای دکمه‌های عمومی.
disabled: دکمه را غیرفعال می‌کند و از تعامل کاربر جلوگیری می‌کند.
onclick: رویداد جاوااسکریپت را برای کلیک تعریف می‌کند.
id و class: برای استایل‌دهی با CSS یا شناسایی در جاوااسکریپت.
value: مقداری برای ارسال به سرور در فرم‌ها.
form: دکمه را به یک فرم خاص متصل می‌کند

ارسال فرم با ویژگی type="submit""

وقتی type="submit" استفاده می‌کنیم، با کلیک روی دکمه، فرم به آدرسی که در action تعیین شده ارسال می‌شود. اگر از یک رویداد onsubmit یا JavaScript استفاده کنیم (مثل همین مثال)، می‌توانیم قبل از ارسال، فرم را بررسی یا پیامی نمایش بدهیم.

<form onsubmit="alert('فرم ارسال شد!'); return false;">
  <input type="text" placeholder="نام شما">
  <button type="submit" style="background:green;color:white;padding:5px 10px;">ارسال فرم</button>
</form>

بازگرداندن مقادیر اولیه با type="reset""

بیایم این بار type="reset" رو با هم در قالب همون استایل دوست‌داشتنی (قسمت پایین مقاله ) پیاده کنیم تا دقیق ببینی چه‌کار می‌کنه. وقتی type="reset" در دکمه استفاده می‌کنیم، تمام فیلدهای فرم به حالت اولیه (مقادیر پیش‌فرض یا خالی) برمی‌گردند. این برای مواقعی که کاربر می‌خواهد سریع کل فرم را پاک کند کاربرد دارد. دقت کن که اگر فرم قبلاً مقداری پیش‌فرض داشته باشد، Reset آن‌ها را برمی‌گرداند، نه صرفاً خالی می‌کند. شما در قسمت پایین نمونه انجام شده وکد قابل کپی رو میبینید که میتونید استفاده کنید .

<form>
  <input type="text" value="مقدار اولیه">
  <button type="reset" style="background:red;color:white;padding:5px 10px;">بازنشانی</button>
</form>

اجرای عملیات سفارشی با type="button" و رویداد onclick

در این قسمت type="button" رو همراه با رویداد onclick میسازیم تا ببینی چطور می‌شه با کلیک یک دکمه، هر عملی رو که خواستی اجرا کنی — از نمایش پیام گرفته تا تغییر استایل یا حتی ارسال داده‌ها با AJAX. وقتی type="button" استفاده می‌کنیم، دکمه به‌طور پیش‌فرض هیچ کاری در فرم انجام نمی‌دهد (برخلاف submit که فرم می‌فرستد). با onclick می‌توانیم هر کاری که می‌خواهیم از طریق JavaScript اجرا کنیم—مثل نمایش پیام، تغییر متن، گرفتن داده از ورودی‌ها، یا حتی ارسال درخواست Ajax به سرور. .

<button type="button" onclick="alert('سلام دنیا!')" style="background:blue;color:white;padding:5px 10px;">
  نمایش پیام
</button>

غیرفعال‌کردن دکمه‌ها با ویژگی disabled

این ویژگی باعث میشه المان (مثل دکمه ) غیرفعال بشه و کاربر نتونه باهاش تعامل کنه — شبیه «در حال تعمیر» بودن یک دکمه!
افزودن disabled به یک دکمه یا فیلد ورودی باعث می‌شود قابل کلیک یا تغییر نباشد.
مرورگرها معمولاً استایل پیش‌فرض خاکستری و اشاره‌گر “not-allowed” به آن اعمال می‌کنند.
با CSS (:disabled) می‌توانیم ظاهر غیرفعال را سفارشی کنیم.
.

<button type="button" disabled style="background:gray;color:white;padding:5px 10px;">غیرفعال</button>

تنظیم مقدار پیش‌فرض با ویژگی value

value یکی از اون ویژگی‌های پرکاربرد هست که توی دکمه‌ها و ورودی‌ها تعیین می‌کنه چه متنی یا مقدار پیش‌فرض داشته باشند. درinput، مشخص می‌کند مقدار پیش‌فرض فیلد چیست. درinput type="button" یاinput type="submit"، مشخص می‌کند متن روی دکمه چه باشد. کاربر می‌تواند در فرم، مقدار value ورودی‌ها را تغییر دهد اما در دکمه‌ها، value ثابت تا وقتی که خودت با JavaScript تغییر ندی.

<form onsubmit="alert('مقدار: ' + document.querySelector('button').value); return false;">
  <button type="submit" value="btn123" style="background:purple;color:white;padding:5px 10px;">ارسال با value</button>
</form>

اتصال عناصر بیرون از فرم با ویژگی form

ویژگی form توی تگ‌هایی مثل input, button یا select بهت اجازه می‌ده اون المان رو به یک فرم خاص وصل کنی حتی اگه داخلش نباشه. این زمانی خیلی کاربردی میشه که بخوای فیلد یا دکمه‌ای رو بیرون از بدنه فرم قرار بدی اما همچنان جزو همون فرم عمل کنه. ویژگی form="id-of-form" به مرورگر می‌گوید این المان جزو آن فرم خاص است. این کار برای مواقعی عالیه که بخوای دکمه‌ها یا ورودی‌ها رو در محل دیگری از صفحه قرار بدی ولی همچنان با فرم اصلی کار کنند. .

<form id="f1" onsubmit="alert('فرم f1 ارسال شد!'); return false;">
  <input type="text" placeholder="نام">
</form>

<button type="submit" form="f1" style="background:orange;color:white;padding:5px 10px;">ارسال فرم f1</button>

مثال کاربردی

<button type=”submit” onclick=”submitForm()”>ارسال</button>

این کد یک دکمه ایجاد می‌کند که با کلیک، تابع showMessage() را اجرا می‌کند.

استایل‌دهی به دکمه

با CSS می‌توانید دکمه‌ها را جذاب‌تر کنید:

دکمه تغییر رنگ با هاور

این دکمه به صورت پیش‌فرض سبز است و وقتی نشانگر موس روی آن می‌رود قرمز می‌شود.

پیش‌نمایش:

<style>
.my-button{
  background-color: green;
  color: white; 
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease; 
}
.my-button:hover{
  background-color: red;
}
</style>

<button type="button" class="my-button" onclick="alert('سلام')">کلیک کنید</button>

نکات کلیدی

ویژگی type را همیشه مشخص کنید تا رفتار دکمه قابل پیش‌بینی باشد.
برای دسترسی‌پذیری، از <button> به‌جای <div> یا <a> استفاده کنید.
از ویژگی aria-label برای کاربران با نیازهای ویژه بهره ببرید.
متن دکمه را واضح و معنادار انتخاب کنید.
برای دکمه‌های غیرفعال، استایل متفاوتی مثل رنگ خاکستری اعمال کنید.