HTML ইনপুট টাইপের step অ্যাট্রিবিউট বৈধ সংখ্যা ইন্টারভাল সেট করে। স্টেপ হলো সংখ্যার ধাপ যেমন ০, ২, ৪, ৬, ৮, ১০ ইত্যাদি। step অ্যাট্রিবিউট max এবং min অ্যাট্রিবিউটের সাথে মিলে বৈধ মানগুলোর একটি রেঞ্জ তৈরি করতে ব্যবহৃত হয়।
একটি রেঞ্জ ইনপুটে ভিন্ন ভিন্ন step অ্যাট্রিবিউট ব্যবহার করতে জাভাস্ক্রিপ্ট ব্যবহার করা হয়। প্রথমে step অ্যাট্রিবিউট ব্যবহারের পদ্ধতি দেখি।
সادهরণ step অ্যাট্রিবিউট উদাহরণ
নিচের কোডটি চালিয়ে ইনপুট step অ্যাট্রিবিউট দিয়ে সংখ্যার ধাপ তৈরি করা যাবে। এখানে step ২ সেট করা হয়েছে, তাই বৈধ ইনপুট হবে ২, ৪, ৬, ৮, ১০ ইত্যাদি। এই বাদে অন্য সংখ্যা দিয়ে সাবমিট করলে "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>
জাভাস্ক্রিপ্ট দিয়ে ডাইনামিক step পরিবর্তন
jQuery ব্যবহার করে একটি রেঞ্জ ইনপুটে ভিন্ন ভিন্ন step অ্যাট্রিবিউট প্রদান করা যাবে। এখানে দুটি step যোগ করা হয়েছে — ১০ এবং ২। রেঞ্জটি ১০০ থেকে ৪৫০ পর্যন্ত, যা 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>
