HTML इनपुट टाइप step एट्रिब्यूट कानूनी संख्या अंतराल सेट करता है। स्टेप्स संख्या स्टेप्स होते हैं जैसे 0, 2, 4, 6, 8, 10, आदि। step एट्रिब्यूट का उपयोग max और min एट्रिब्यूट्स के साथ कानूनी मानों की रेंज बनाने के लिए किया जा सकता है।
HTML में एक रेंज इनपुट में अलग-अलग स्टेप एट्रिब्यूट का उपयोग करने के लिए, हम JavaScript का उपयोग करेंगे। पहले, आइए देखें कि स्टेप एट्रिब्यूट का उपयोग कैसे करें।
उदाहरण 1: बेसिक स्टेप एट्रिब्यूट
इनपुट स्टेप एट्रिब्यूट के साथ संख्या का स्टेप बनाने के लिए निम्न कोड चलाएं। यहां, हम स्टेप 2 बना रहे हैं, इसलिए वैध इनपुट 2, 4, 6, 8, 10, आदि होगा। इसके अलावा कोई संख्या दर्ज करने और सबमिट बटन दबाने पर, निम्न संदेश दिखाई देगा: "Please enter a valid value"। यह आपको दो निकटतम मान भी बताएगा।
<!DOCTYPE html> <html> <head> <title>HTML input step attribute</title> </head> <body> <form action="/cgi-bin/hello_get.cgi" method="get"> <input type="number" name="points" step="2"><br> <input type="submit" value="Submit"> </form> </body> </html>
उदाहरण 2: जावास्क्रिप्ट से डायनामिक स्टेप
हम एक रेंज इनपुट में HTML में अलग-अलग स्टेप एट्रिब्यूट प्रदान करने के लिए jQuery का उपयोग करेंगे। यहां, हमने दो स्टेप्स यानी 10 और 2 जोड़े हैं। रेंज यहां 100 से 450 तक है, जो min और max एट्रिब्यूट के तहत सेट है।
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script type="text/javascript"> $(function() { $('#points').on('input change', function() { var element = $('#points'), value = element.val(), step; // नियम यहां सेट करें if (value < 205) { step = 10; } else { step = 2; } element.attr('step', step); $('#value').text(value); $('#step').text(step); }); }); </script> </head> <body> <div> Value: <span id="value"></span> </div> <div> Current step: <span id="step"></span> </div> <div> <input id="points" type="range" value="100" min="100" max="450" /> </div> </body> </html>
