Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML DOM इनपुट नंबर ऑब्जेक्ट

परिचय

HTML DOM इनपुट नंबर ऑब्जेक्ट type="number" वाले <input> एलिमेंट को दर्शाता है।

सिंटैक्स - नंबर ऑब्जेक्ट बनाना

var numberInput = document.createElement("INPUT");
numberInput.setAttribute("type", "number");

प्रॉपर्टीज़

प्रॉपर्टीव्याख्या
autocompleteनंबर इनपुट फील्ड के autocomplete एट्रिब्यूट का मान प्राप्त/सेट करता है।
autofocusपेज लोड पर नंबर इनपुट फील्ड को फोकस मिलना चाहिए या नहीं, यह प्राप्त/सेट करता है।
disabledनंबर इनपुट फील्ड अक्षम है या नहीं, यह प्राप्त/सेट करता है।
defaultValueनंबर इनपुट फील्ड का डिफ़ॉल्ट मान प्राप्त/सेट करता है।
formनंबर इनपुट फील्ड वाले फॉर्म का रेफरेंस लौटाता है।
listनंबर इनपुट फील्ड वाले डेटालिस्ट का रेफरेंस लौटाता है।
maxनंबर इनपुट फील्ड के max एट्रिब्यूट का मान प्राप्त/सेट करता है।
minनंबर इनपुट फील्ड के min एट्रिब्यूट का मान प्राप्त/सेट करता है।
nameनंबर इनपुट फील्ड के name एट्रिब्यूट का मान प्राप्त/सेट करता है।
readOnlyनंबर इनपुट फील्ड रीड-ओनली है या नहीं, यह प्राप्त/सेट करता है।
requiredफॉर्म सबमिट करने से पहले नंबर फील्ड भरना अनिवार्य है या नहीं, यह प्राप्त/सेट करता है।
stepनंबर इनपुट फील्ड के step एट्रिब्यूट का मान प्राप्त/सेट करता है।
typeनंबर इनपुट फील्ड के type एट्रिब्यूट का मान लौटाता है।
valueनंबर इनपुट फील्ड के value एट्रिब्यूट का मान प्राप्त/सेट करता है।
placeholderनंबर इनपुट फील्ड के placeholder एट्रिब्यूट का मान प्राप्त/सेट करता है।

मेथड्स

मेथडव्याख्या
stepUp()पैरामीटर में निर्दिष्ट मान से नंबर इनपुट फील्ड का मान बढ़ाता है।
stepDown()पैरामीटर में निर्दिष्ट मान से नंबर इनपुट फील्ड का मान घटाता है।

उदाहरण

नोट: दिए गए उदाहरण में मंथ इनपुट फील्ड का उपयोग किया गया है, लेकिन नंबर ऑब्जेक्ट बनाने का सिद्धांत समान है।

<!DOCTYPE html>
<html>
<style>
  body { text-align: center; background-color: #363946; color: #fff; }
  form { margin: 2.5rem auto; }
  button {
    background-color: #db133a;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    color: #fff;
    border-radius: 5px;
    font-size: 1.05rem;
    outline: none;
  }
  .show { font-weight: bold; font-size: 1.4rem; }
</style>
<body>
<h1>form प्रॉपर्टी डेमो</h1>
<form id="Form 1">
  <fieldset>
    <legend>Form 1</legend>
    <input type="month" class="monthInput">
  </fieldset>
</form>
<button onclick="identify()">मंथ इनपुट फील्ड पहचानें</button>
<p class="show"></p>
<script>
  function identify() {
    var formId = document.querySelector(".monthInput").form.id;
    document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
  }
</script>
</body>
</html>

आउटपुट

नंबर इनपुट फील्ड बनाने के लिए समान पैटर्न का उपयोग करें: document.createElement("INPUT") और setAttribute("type", "number")।

  1. HTML DOM Input Reset ऑब्जेक्ट HTML DOM Input Reset ऑब्जेक्ट

    HTML DOM Input Reset ऑब्जेक्ट type reset वाले <input> एलिमेंट से जुड़ा होता है। हम createElement() और getElementById() मेथड का उपयोग करके क्रमशः type reset वाले इनपुट एलिमेंट को बना और एक्सेस कर सकते हैं। प्रॉपर्टीज Input reset ऑब्जेक्ट के लिए निम्नलिखित प्रॉपर्टीज हैं: प्रॉपर्टीविवरण aut

  1. HTML DOM HR ऑब्जेक्ट HTML DOM HR ऑब्जेक्ट

    विवरण HTML DOM HR ऑब्जेक्ट HTML दस्तावेज़ के तत्व को दर्शाता है। HR ऑब्जेक्ट बनाएं सिंटैक्स document.createElement(HR); उदाहरण आइए hr ऑब्जेक्ट का एक उदाहरण देखें: <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff; color: #0197F6;

  1. HTML DOM Ul ऑब्जेक्ट HTML DOM Ul ऑब्जेक्ट

    HTML DOM Ul ऑब्जेक्ट HTML में <ul> एलिमेंट को दर्शाता है। <ul> एलिमेंट बनाना var ulObject = document.createElement(UL) यहां, ulObject के निम्नलिखित गुण हो सकते हैं लेकिन HTML5 में समर्थित नहीं हैं - गुणविवरण compactअनऑर्डर्ड लिस्ट को सामान्य से छोटा प्रदर्शित करना चाहिए या नहीं, सेट