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

HTML DOM Form autocomplete प्रॉपर्टी

HTML DOM Form autocomplete प्रॉपर्टी फॉर्म एलिमेंट के autocomplete एट्रिब्यूट से जुड़ी होती है। autocomplete प्रॉपर्टी का उपयोग करके हम दिए गए फॉर्म के autocomplete एट्रिब्यूट मान को सेट या वापस कर सकते हैं। यह प्रॉपर्टी निर्दिष्ट करती है कि इनपुट फील्ड को यूजर द्वारा लिखे जा रहे टेक्स्ट को ऑटोकम्प्लीट करना चाहिए या नहीं, जो टेक्स्ट फील्ड में पहले लिखा गया था।

यदि फॉर्म के लिए autocomplete ऑन पर सेट है तो विशिष्ट इनपुट फील्ड्स के लिए autocomplete को बंद किया जा सकता है और इसका विपरीत भी सच है।

सिंटैक्स

Autocomplete प्रॉपर्टी सेट करने का सिंटैक्स:

formObject.autocomplete = on|off

यहां, डिफ़ॉल्ट रूप से "on" होता है और ब्राउज़र पिछले टेक्स्ट के आधार पर यूजर मानों को ऑटोकम्प्लीट करने का प्रयास करता है। इसे off पर सेट करने का अर्थ है कि ब्राउज़र यूजर इनपुट को पूरा नहीं करेगा और यूजर को मान स्वयं टाइप करने होंगे।

उदाहरण

Autocomplete प्रॉपर्टी का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> 
<style> 
  form{ 
    border:2px solid blue; 
    margin:2px; 
    padding:4px; 
  } 
</style> 
<script> 
  function changeAuto() { 
    document.getElementById("FORM1").autocomplete = "on"; 
    document.getElementById("Sample").innerHTML = "The input text will now be autocomplete"; 
  } 
</script> </head> <body> 
<h1>Form autocomplete property example</h1> 
<form id="FORM1" autocomplete="off"> 
  <label>User Name <input type="text" name="usrN"></label> <br><br> 
  <label>Password <input type="password" name="pass"></label> 
</form> 
<br> 
<button onclick="changeAuto()">CHANGE</button> 
<p id="Sample"></p> 
</body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

HTML DOM Form autocomplete प्रॉपर्टी

CHANGE बटन पर क्लिक करने और User Name फील्ड में टेक्स्ट टाइप करने पर:

HTML DOM Form autocomplete प्रॉपर्टी

उदाहरण की व्याख्या

  • हमने id="Form1" वाला एक फॉर्म बनाया और autocomplete को "off" पर सेट किया। इसका अर्थ है कि यूजर को वेब ब्राउज़र की मदद के बिना स्वयं मान टाइप करने होंगे। फॉर्म में एक टेक्स्ट फील्ड और एक पासवर्ड फील्ड भी है।
  • फिर हमने एक CHANGE बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर changeAuto() मेथड को एक्जीक्यूट करता है।
  • changeAuto() मेथड getElementById() मेथड का उपयोग करके फॉर्म एलिमेंट को प्राप्त करता है और इसके autocomplete प्रॉपर्टी को "off" से "on" पर सेट करता है। id "Sample" वाले पैराग्राफ की innerHTML प्रॉपर्टी का उपयोग करके हम इस परिवर्तन को यूजर को टेक्स्ट प्रदर्शित करके दिखाते हैं।
function changeAuto() { 
  document.getElementById("FORM1").autocomplete = "on"; 
  document.getElementById("Sample").innerHTML = "The input text will now be autocomplete"; 
}
  1. HTML DOM टेक्स्टएरिया form प्रॉपर्टी: पैरेंट फॉर्म पहचानना HTML DOM टेक्स्टएरिया form प्रॉपर्टी: पैरेंट फॉर्म पहचानना

    HTML DOM टेक्स्टएरिया form प्रॉपर्टी उस फॉर्म का संदर्भ लौटाती है जिसमें टेक्स्टएरिया शामिल है। सिंटैक्स object.form उदाहरण: टेक्स्टएरिया के फॉर्म की पहचान करना <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #363946; color: #fff; } form { margin:

  1. HTML DOM Object form प्रॉपर्टी HTML DOM Object form प्रॉपर्टी

    परिचय HTML DOM Object form प्रॉपर्टी <object> एलिमेंट के लिए घेरने वाले फॉर्म का रेफरेंस लौटाती है। सिंटैक्स form ऑब्जेक्ट का रेफरेंस वापस करना: ObjectElement.form उदाहरण <!DOCTYPE html> <html> <head> <title>HTML DOM Object form</title> <style> form { w

  1. HTML DOM Title text प्रॉपर्टी HTML DOM Title text प्रॉपर्टी

    HTML DOM Title text प्रॉपर्टी डॉक्यूमेंट के <title> एलिमेंट के मान को सेट या लौटाती है। सिंटैक्स titleElementObject.text मान सेट करना titleElementObject.text = string उदाहरण <!DOCTYPE html> <html> <head> <title id="titleSelect">HTML DOM Title text</title&g