تگ button در HTML

  /  فرانت اند   /  HTML   /  تگ button در HTML

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

مثال

<button type="button">دکمه</button>


تعریف و کاربرد

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

در عنصر button می توانید از تگ های ( <i> یا <b> یا <strong> یا <br> یا <img> ) استفاده کنید ، اما اگر برای ساخت دکمه از تگ <input> استفاده کنید نمی توانید همچین کاری را انجام دهید.

نکته: همیشه هنگام تعریف و استفاده از تگ button نوع آن type را مشخص کنید ، تا به مرورگر ها بگویید این چه نوع دکمه ای هست.

نکته: به راحتی می توانید طراحی پیش فرض عنصر button را با CSS شخصی سازی کنید.


پشتیبانی مرورگر ها

عنصر
<button>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیحات
autofocusautofocusمشخص می کند بعد از اتمام بارگذاری صفحه بر روی کدام دکمه متمرکز ( focus ) شود.
disableddisabledمشخص می کند که یک دکمه باید غیرفعال شود.
formform_idمشخص می کند که دکمه مربوط به کدام فرم ( form ) در صفحه هست.
formactionURLمشخص می کند که داده های درون فرم به چه آدرسی باید ارسال شود ، فقط در حالت submit عمل می کند ( type = submit )
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
مشخص می کند که اطلاعات قبل از ارسال به سرور رمزنگاری شود ، فقط در حالت submit عمل می کند type = submit
formmethodget
post
روش متد ارسال اطلاعات فرم را مشخص می کند ، فقط در حالت submit عمل می کند type = submit
formnovalidateformnovalidateمشخص میکند که هنگام ارسال داده های فرم ، داده ها اعتبار سنجی نشوند ، فقط در حالت submit عمل می کند type = submit
formtarget_blank
_self
_parent
_top
framename
نحوه باز شدن صفحه مقصد را پس از ارسال داده های فرم مشخص میکند ، فقط در حالت submit عمل می کند type = submit
namenameنام دکمه را مشخص می کند
typebutton
reset
submit
نوع دکمه را مشخص می کند
valuetextمقدار پیش فرض و اولیه دکمه را مشخص می کند

خواص عمومی

تگ button از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ button از رویداد های عمومی در HTML پشتیبانی میکند.


مثال های بیشتر

در مثال زیر با استفاده از CSS استایل خاصی را برای تگ button در HTML تعریف میکنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>

<h1>The button element - Styled with CSS</h1>
<p>Change the background color of a button with the background-color property:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>

</body>
</html>


در مثال زیر با استفاده از CSS افکت hover به button خود داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}

.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}

.button1:hover {
background-color: #4CAF50;
color: white;
}

.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}

.button2:hover {
background-color: #008CBA;
color: white;
}

</style>
</head>
<body>

<h1>The button element - Styled with CSS</h1>

<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>

</body>
</html>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر