تگ button در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ button در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

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

تگ button چیست؟

تگ button که ترجمه آن به زبان فارسی دکمه می شود برای ساخت دکمه های قابل کلیک به کار می رود.

این تگ با <button> شروع و با </button> پایان می یابد.

<button>Text</button>

صفات تگ button

در این بخش با صفات تگ button آشنا خواهید شد.

صفت autofocus

این صفت بعد از بالا آمدن صفحه، به صورت خودکار بر روی دکمه فوکوس می کند.

<button autofocus>Text</button>

صفت disabled

برای غیر فعال کردن دکمه به کار می رود.

<button disabled>Text</button>

صفت form

فرمی که قرار است اطلاعاتش به سمت سرور ارسال شود را انتخاب می کند.

<button form="id">Text</button>

نام مقدار این صفت باید با مقدار صفت id فرم مورد نظر برابر باشد.

مثال:

<form method="post" id="data">
  <input type="text" name="comment">
</form>

<button type="submit" form="data" value="data">Send</button>

صفت formaction

این صفت زمانی کاربرد دارد که دکمه از نوع submit تعریف شود و آدرس صفحه ارسال فرم را مشخص می کند.

<button type="submit" formaction="URL">Text</button>

مثال:

<form action="/form.php" method="get">
  <input type="text" name="comment">
  <button type="submit">Send 1</button>
  <button type="submit" formaction="/form2.php">Send</button>
</form>

در مثال بالا دو دکمه قرار داده شده که دکمه اول اطلاعات به آدرس فرم اصلی form.php ارسال می شود و دکمه دوم اطلاعات توسط صفت formaction به آدرس form2.php ارسال می شود.

صفت formenctype

این صفت زمانی کاربرد دارد که دکمه از نوع submit تعریف شود و نوع رمزگذاری داده های فرم هنگام ارسال به سمت سرور را مشخص می کند.

<button type="submit" formenctype="application/x-www-form-urlencoded|multipart/form-data|text/plain">text</button>

application/x-www-form-urlencoded

تمام داده ها را قبل ارسال رمزگذاری می کند. (پیش فرض)

multipart/form-data

برای آپلود فایل کاربرد دارد.

text/plain

داده ها را بدون رمزگذاری ارسال می کند.

صفت formmethod

این صفت زمانی کاربرد دارد که دکمه از نوع submit تعریف شود و نوع متد ارسال فرم را مشخص می کند.

<button type="submit" formmethod="get|post">Text</button>

صفت formnovalidate

این صفت زمانی کاربرد دارد که دکمه از نوع submit تعریف شود و داده ها را هنگام ارسال اعتبارسنجی نمی کند.

<button type="submit" formnovalidate>Text</button>

صفت formtarget

این صفت زمانی کاربرد دارد که دکمه از نوع submit تعریف شود و نحوه باز شدن صفحه مقصد فرم را مشخص می کند.

<button type="submit" formtarget="_blank|_self|_parent|_top|frame">Text</button>

مقدار پیش فرض این صفت به صورت _self تعیین شده یعنی در همان صفحه فرم ارسال می شود. در صورتی که قصد دارید فرم در پنجره یا تب جدید باز شود باید از مقدار _blank استفاده کنید.

صفت name

برای دکمه نام انتخاب می کند.

<button name="Value">Text</button>

صفت type

نوع دکمه را مشخص می کند.

<button type="button|submit|reset">Text</button>

button

برای دکمه های قابل کلیک استفاده می شود.

submit

برای ارسال داده های فرم به کار می رود.

reset

داده های فرم را به مقدار اولیه خود بر می گرداند.

صفت value

مقدار دکمه را مشخص می کند.

<button value="Text">Text</button>

مثال های تگ button

مثال 1:

<button onclick="alert('پیام')">کلیک</button>

اجرا

مثال 2:

<form method="post" id="contact">
  <input type="text" name="email">
</form>

<button type="submit" form="contact">ارسال</button>

سازگاری با مرورگرها

تگ button با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS