एचटीएमएल <button> टैग

  • पिछला पृष्ठ <br>
  • अगला पृष्ठ <canvas>

परिभाषा और उपयोग

<button> टैग एक क्लिक करने योग्य बटन को परिभाषित करता है।

में <button> एलिमेंट के अंदर, आपको टेक्स्ट (और <i>、<b>、<strong>、<br>、<img> जैसे टैग) रख सकते हैं। यह <input> एलिमेंट क्रिएशन बटन द्वारा नहीं किया जा सकता!

सूचना:हमेशा type का निर्धारण करें <button> एलीमेंट से निर्धारित type गुणको देखें, ताकि ब्राउज़र को बताया जा सके कि बटन क्या प्रकार का है।

सूचना:आप CSS के द्वारा बटन को आसानी से शैली दे सकते हैं! नीचे के उदाहरणों को देखें या हमारे CSS बटन शिक्षण。

विस्तृत वर्णन

<button> कंट्रोल और <input type="button"> की तुलना में, अधिक शक्तिशाली और अधिक समृद्ध सामग्री प्रदान करता है。<button> और </button> टैगों के बीच की सभी सामग्री बटन की सामग्री है, जिसमें कोई भी स्वीकार्य लेखांकन शामिल है, जैसे लेखांकन या मल्टीमीडिया सामग्री। उदाहरण के लिए, हम बटन में एक इमेज और संबंधित लेखांकन को शामिल कर सकते हैं और उनको बटन में एक आकर्षक टैग इमेज के रूप में बना सकते हैं。

एकमात्र निषिद्ध एलीमेंट इमेज मैप है क्योंकि इसके माउस और कीबोर्ड की कार्रवाई नज़र आने से फॉर्म बटन के व्यवहार में बाधा पड़ सकती है。

बटन के लिए हमेशा type का निर्धारण करें type गुण।इंटरनेट एक्सप्लोरर का डिफ़ॉल्ट टाइप "button"और अन्य ब्राउज़रों में (वॉयसी स्पेसिफ़िकेशन सहित) डिफ़ॉल्ट मान "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 में इवेंट प्रतियोगिता。

डिफ़ॉल्ट CSS सेटिंग

नहीं है।

और उदाहरण

उदाहरण 2

CSS के द्वारा बटन शैली सेट करें:

!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

CSS के द्वारा बटन शैली सेट करें (हॉवर इफेक्ट सहित):

!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>