ایچ تی ایم ایل <button> تیگ

  • ਪਿਛਲਾ ਪੰਨਾ <br>
  • ਅਗਲਾ ਪੰਨਾ <canvas>

تعریف اور استعمال

<button> تگ کا تعریف، کلک سکتا بٹن کا تعریف کیا جاتا ہے

وائس <button> عنصر کی داخلی جگہ، آپ میں متن (اور مثلاً <i>،<b>،<strong>،<br>،<img> جیسے تگ) رکھ سکتے ہیں۔ یہ سے آئنپٹ ایکم بند: عناصر کیوکلیک کا پنجرا نہیں کر سکتا!

ਸੁਝਾਅਤਾ:请始终为 <button> 元素指定 type ਵਿਸ਼ੇਸ਼ਤਾ，以告知浏览器它是什么类型的按钮。

ਸੁਝਾਅਤਾ:您可以使用 CSS 轻松地为按钮添加样式！请查看下面的例子或访问我们的 CSS ਬਟਨ ਟੂਰੀਅਲ.

ਵਿਸਤਾਰ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ

<button> ਕੰਟਰੋਲ ਨਾਲ <input type="button"> ਮੁਕਾਬਲੇ ਵਿੱਚ ਵਧੇਰੇ ਮਜ਼ਬੂਤ ਸਮਰੱਥਾਵਾਂ ਅਤੇ ਵਧੇਰੇ ਸਮਾਂਤਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ。<button> ਨਾਲ </button> ਟੈਗ ਦੇ ਅੰਦਰ ਸਾਰੀਆਂ ਚੀਜਾਂ ਬਟਨ ਦਾ ਸਮਾਂਤਰ ਹੁੰਦੀਆਂ ਹਨ ਜਿਵੇਂ ਕਿ ਕਿਸੇ ਸਵੀਕਾਰਯੋਗ ਪਾਠ ਦੇ ਨਾਲ ਜੋੜੇ ਹੋਏ ਮੀਡੀਆ ਸਮਾਂਤਰ ਹੁੰਦੇ ਹਨ। ਉਦਾਹਰਣ ਵਜੋਂ ਅਸੀਂ ਬਟਨ ਵਿੱਚ ਇੱਕ ਚਿੱਤਰ ਅਤੇ ਸਬੰਧਤ ਪਾਠ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਉਨ੍ਹਾਂ ਨਾਲ ਬਟਨ ਵਿੱਚ ਇੱਕ ਆਕਰਸ਼ਕ ਟੈਗ ਚਿੱਤਰ ਬਣਾ ਸਕਦੇ ਹਾਂ。

ਇੱਕੋ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਚਿੱਤਰ ਮੈਪਿੰਗ ਹੈ ਕਿਉਂਕਿ ਇਹ ਮਾਉਸ ਅਤੇ ਕੀਬੋਰਡ ਨਾਲ ਸੰਪਰਕ ਵਾਲੇ ਕਾਰਵਾਈਆਂ ਨਾਲ ਫਾਰਮ ਬਟਨ ਦਾ ਵਰਤਾਰਾ ਬੁਰਾ ਕਰ ਸਕਦੀ ਹੈ。

ਹਰ ਸਮੇਂ ਬਟਨ ਲਈ type ਵਿਸ਼ੇਸ਼ਤਾਹੈ। ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਦਾ ਮੂਲ ਮੁੱਲ "button"ਅਤੇ ਹੋਰ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ (ਜਿਵੇਂ ਕਿ W3C ਸਟੈਂਡਰਡ) ਮੂਲ ਮੁੱਲ "submit".

ਇਸ ਵੱਲ ਵੀ ਦੇਖੋ:

HTML DOM ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ:Button ਅਬਜੈਕਟ

CSS ਟੂਰੀਅਲ:ਬਟਨ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ

ਉਦਾਹਰਣ

ਇਸ ਤਰ੍ਹਾਂ ਕਿਸੇ ਕਲਿੱਕ ਸਮਰੱਥ ਬਟਨ ਨੂੰ ਟੈਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

<button type="button">ਮੈਂ ਕਲਿੱਕ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹਾਂ!</button>

ਸਵੈ ਜਾਇਜ਼ ਕਰੋ

ਸੁਝਾਅਤਾ:ਪੰਨੇ ਦੇ ਨਿਚੋਰ ਪਾਸੇ ਹੋਰ ਉਦਾਹਰਣਾਂ ਮਿਲਣਗੇ。

ਵਿਸ਼ੇਸ਼ਤਾ

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਵਰਣਨ
autofocus autofocus ਬਟਨ ਨੂੰ ਪੰਨੇ ਲੋਡ ਹੋਣ ਦੇ ਬਾਅਦ ਆਪਣੇ ਹੀ ਫੋਕਸ ਮਿਲਣਾ ਚਾਹੀਦਾ ਹੈ ਵਿਨਿਯਮਾ ਹੈ。
disabled disabled ਬਟਨ ਨੂੰ ਨਿਸ਼ਚਿਤ ਰੂਪ ਨਾਲ ਨਾਬਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਵਿਨਿਯਮਾ ਹੈ。
form form_id ਬਟਨ ਕਿਸ ਫਾਰਮ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਹੈ ਵਿਨਿਯਮਾ ਹੈ。
formaction URL

ਫਾਰਮ ਭੇਜਣ ਦੇ ਸਮੇਂ ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਕਿਥੇ ਭੇਜਣਾ ਚਾਹੀਦਾ ਹੈ ਵਿਨਿਯਮਾ ਹੈ。

type="submit" ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਹੀ ਉਪਯੋਗੀ ਹੈ。
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਸਰਵਰ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਕਿਵੇਂ ਕੋਡ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਵਿਨਿਯਮਾ ਹੈ。

type="submit" ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਹੀ ਉਪਯੋਗੀ ਹੈ。
formmethod
  • get
  • post

ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਕਿਵੇਂ ਭੇਜਣਾ ਚਾਹੀਦਾ ਹੈ (ਕਿਸ ਤਰ੍ਹਾਂ ਦਾ HTTP ਮੈਥਡ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ) ਵਿਨਿਯਮਾ ਹੈ。

type="submit" ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਹੀ ਉਪਯੋਗੀ ਹੈ。
formnovalidate formnovalidate

ਫਾਰਮ ਭੇਜਣ ਦੇ ਸਮੇਂ ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਚੈਕ ਨਹੀਂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਵਿਨਿਯਮਾ ਹੈ。

type="submit" ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਹੀ ਉਪਯੋਗੀ ਹੈ。
formtarget
  • ਫਰੇਮ ਨਾਮ

ਫਾਰਮ ਭੇਜਣ ਤੋਂ ਬਾਅਦ ਕਿਥੇ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿਖਾਈ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ ਵਿਨਿਯਮਾ ਹੈ。

type="submit" ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਹੀ ਉਪਯੋਗੀ ਹੈ。
name ਨਾਮ ਬਟਨ ਦਾ ਨਾਮ ਵਿਨਿਯਮਾ ਹੈ。
popovertarget element_id ਕਿਸੇ ਪੋਪਅਵਰਟ ਵਿੰਡੋ ਐਲੀਮੈਂਟ ਨੂੰ ਚੁਣਨ ਲਈ ਵਿਨਿਯਮਾ ਹੈ。
popovertargetaction
  • hide
  • show
  • toggle
 ਬਟਨ ਦੇ ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਪੈਪਲ ਵਿੱਚ ਐਲੀਮੈਂਟ ਦੇ ਕੰਮ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
type
  • button
  • reset
  • submit
 ਬਟਨ ਦੀ ਕਿਸਮ ਨਿਰਧਾਰਿਤ ਕਰੋ。
value ਲੇਖ ਬਟਨ ਦੀ ਮੂਲ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。

ਸਾਰਵਤਰਿਕ ਪ੍ਰਤੀਯੋਗੀਆਂ

<button> ਟੈਗ ਨੂੰ ਵੀ ਸਮਰਥਨ ਹੈ HTML ਵਿੱਚ ਸਾਰਵਤਰਿਕ ਪ੍ਰਤੀਯੋਗੀਆਂ.

�ਵੈਂਟ ਪ੍ਰਤੀਯੋਗੀਆਂ

<button> ਟੈਗ ਨੂੰ ਵੀ ਸਮਰਥਨ ਹੈ HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗੀਆਂ.

ਮੂਲਤਬੀ ਸ਼ੈਸਟ ਸੈਟਿੰਗ

ਨਹੀਂ ਹੈ。

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ਸ਼ੈਸਟ ਸੀਐੱਸਐੱਸ ਨਾਲ ਬਟਨ ਸਟਾਈਲ ਸੈਟ ਕਰੋ:

!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;} /* ਹਰਾਇਆ */
.button2 {background-color: #008CBA;} /* ਨੀਲਾ */
</style>
</head>
<body>
<button class="button button1">ਹਰਾਇਆ</button>
<button class="button button2">ਨੀਲਾ</button>
</body>
</html>

ਸਵੈ ਜਾਇਜ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਸ਼ੈਸਟ ਸੀਐੱਸਐੱਸ ਨਾਲ ਬਟਨ ਸਟਾਈਲ ਸੈਟ ਕਰੋ (ਸਿਲਸਲੇ ਪ੍ਰਭਾਵ ਨਾਲ):

!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>
<button class="button button1">ਹਰਾਇਆ</button>
<button class="button button2">ਨੀਲਾ</button>
</body>
</html>

ਸਵੈ ਜਾਇਜ਼ ਕਰੋ

ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ

Chrome Edge Firefox ਸਫਾਰੀ ਓਪਰਾ
Chrome Edge Firefox ਸਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ
  • ਪਿਛਲਾ ਪੰਨਾ <br>
  • ਅਗਲਾ ਪੰਨਾ <canvas>