تگ button در HTML

با ویژگی های تگ button در HTML آشنا شوید.

تگ button با هدف ساخت و ایجاد دکمه ها در وب سایت به کار می رود.

نکات اصلی تگ button:

• تگ button یک دکمه قابل کلیک ایجاد می کند ، که می تواند در هر نقطه از صفحه وب قرار گیرد.
• مرورگرها این دکمه را با توجه به سیستم عامل میزبان ارائه می دهند. با این حال ، شکل ظاهری دکمه های HTML با CSS قابل تغییر است.
• <button> سبک سازی HTML از <input> آسان تر است زیرا نه تنها مقدار متن را می پذیرد.

استفاده و هدف از تگ button در HTML

یادگیری نحوه ساختن یک دکمه در HTML با یادگیری استفاده از تگ button آغاز می شود.

این کد نحوه ساخت دکمه ها را با استفاده از تگ button نشان می دهد:

<button style="background-color: blue;" type="button">
I am a blue button! Click me!
</button>

JavaScript توابع را به دکمه های HTML اضافه می کند:

<button type="button" onclick="alert('Hi user!')">Press me!</button>

یکی از ساده ترین راه های ایجاد پیوند دکمه HTML تکرار کد زیر است:

<p>This button transfers you to another website!</p>
<a href="http://bitdegree.org" target="_blank">
	<button>Click me!</button>

ویژگی های button

autofocus

بعد از بارگیری سند وب ، تمرکز را تنظیم می کند.

<button type="button" autofocus>Hello World!</button>

disabled

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

<button type="submit" disabled>Register</button>

form

این یک شناسه فرم را تعریف می کند که دکمه به آن مرتبط است.

<form action="http://www.bitdegree.org/" method="GET" id="Search">
  Search Term: <input type="text" name="search_query">
</form>
<button type="submit" form="Search">Search</button>

formaction

این مکان را برای ارسال داده های فرم تعیین می کند.

<form action="https://www.bitdegree.org/learn/html-button/#ltbuttongt" method="GET">
  Search Term: <input type="text" name="q">
  <button type="submit" formaction="https://www.google.com/search">Search</button>
</form>

formenctype

این نوع محتوای اعمال شده برای ارسال فرم به سرور را تنظیم می کند.

<form action="https://www.bitdegree.org/learn/best-code-editor/?example=27003" method="get">
  Select Image: <input type="file" name="uploaded_filename">
  <button type="submit" formenctype="multipart/form-data">Upload</button>
</form>

formmethod

نوع روش HTTP را در تگ button تعیین می کند.

<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit" formmethod="get">Search</button>
</form>

formnovalidate

از ویژگی های اعتبار سنجی پشتیبانی نمی کند.

<form action="https://www.bitdegree.org/learn/best-code-editor/?example=27006" method="POST">
  Name: <input type="text" name="name">
  Email ID: <input type="text" name="email">
  <button type="submit" formnovalidate>Search</button>
</form>

formtarget

این مکان را برای پاسخ وب سرور تعیین می کند.

<form action="https://www.bitdegree.org/learn/html-button/#ltbuttongt" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit" formtarget="_blank">Search</button>
</form>

name

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

<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit" name="search">Search</button>
</form>

type

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

<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit">Search</button>
</form>

value

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

<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
  <button type="submit" name="search" value="search_button">Search</button>
</form>

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

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.