अट्रीब्यूट disabled
अट्रीब्यूट disabled HTML फॉर्म के एलिमेंट को अवरोधित करता है,
यानी उसे निष्क्रिय बनाता है। यह एक बिना मूल्य वाला अट्रीब्यूट है।
एलिमेंट्स को अवरोधित करना आमतौर पर इसलिए जरूरी होता है, ताकि उपयोगकर्ता को कुछ मान बदलने से रोका जा सके (जो, फिर भी, उपयोगकर्ता को फॉर्म एलिमेंट्स के रूप में दिखाए जाने चाहिए)। कभी-कभी एलिमेंट्स को JavaScript की मदद से अवरोधित किया जाता है (और अवरोध हटाया जाता है)।
व्यवहार
बटन (button
या input
जिसमें type अट्रीब्यूट के मान button,
reset या submit हों) के मामले में अवरोध
का मतलब है कि बटन को दबाया नहीं जा सकेगा।
टेक्स्ट इनपुट फील्ड (input
या textarea)
के मामले में उसके टेक्स्ट को बदला या कॉपी नहीं
किया जा सकेगा। चेकबॉक्स
और रेडियो
के मामले में उनकी स्थिति (चेक किया हुआ है या नहीं) को
बदला नहीं जा सकेगा। ड्रॉप-डाउन सूची
select
के मामले में चयनित सूची आइटम को नहीं बदला जा सकेगा।
अवरोधित एलिमेंट का डिफ़ॉल्ट रूप से ग्रे बैकग्राउंड होता है। वह Tab की मदद से होने वाले ट्रांज़िशन में भी भाग नहीं लेगा।
उदाहरण . अवरोधित बटन
आइए अट्रीब्यूट disabled की मदद से एक बटन को अवरोधित करें।
तुलना के लिए बगल में एक गैर-अवरोधित बटन का उदाहरण है
(आइए उसे दबाने की कोशिश करें):
<button disabled>text</button>
<button>text</button>
:
उदाहरण . अवरोधित चेकबॉक्स
और अब आइए एक अवरोधित चेकबॉक्स फ्लैग देखें। तुलना के लिए बगल में एक गैर-अवरोधित फ्लैग का उदाहरण देखें:
<input type="checkbox" disabled>
<input type="checkbox">
:
उदाहरण . अवरोधित और चेक किया गया चेकबॉक्स
आइए देखें कि अवरोधित और अट्रीब्यूट checked
की मदद से चेक किया गया चेकबॉक्स फ्लैग कैसा दिखता है।
तुलना के लिए बगल में
एक गैर-अवरोधित चेक किए गए फ्लैग का उदाहरण देखें:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
उदाहरण . अवरोधित टेक्स्ट इनपुट
और अब आइए एक इनपुट को अवरोधित करें। तुलना के लिए बगल में एक गैर-अवरोधित इनपुट का उदाहरण देखें:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
उदाहरण . अवरोधित टेक्स्टएरिया
और यहाँ हम एक अवरोधित टेक्स्टएरिया देखेंगे (ध्यान दें कि अवरोधित textarea का आकार बदला जा सकता है)। तुलना के लिए बगल में एक गैर-अवरोधित टेक्स्टएरिया का उदाहरण देखें:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
उदाहरण . अवरोधित ड्रॉप-डाउन सूची
आइए देखें कि अवरोधित
select कैसे काम करता है।
तुलना के लिए बगल में एक गैर-अवरोधित
ड्रॉप-डाउन सूची का उदाहरण देखें:
<select disabled>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
<select>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
:
