Dengan HTML5 kita bisa membuat stepper control dengan mudah. Konsepnya mirip dengan slider tetapi dengan tampilan yang berbeda. Codingnya mudah dibuat dengan satu baris seprti contoh berikut ini:
Quota: <input type=”number” min=”10″ max=”1000″ step=”10″ value=”200″ /> MB<br/>
Coding lengkapnya adalah:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Stepper dengan HTML5</title>
<meta name=”” content=””>
</head>
<body>
Quota: <input type=”number” min=”10″ max=”1000″ step=”10″ value=”200″ /> MB<br/>
</body>
</html>
Demo bisa dilihat di http://aris.proweb.asia/stepper_html5.html dengan tampilan seperti gambar berikut ini:
Pada saat artikel ini ditulis, browser yang bisa menyajikan secara benar adalah Google Chrome versi terbaru dan Opera terbaru. Browser lain belum bisa menampilkan.
Dengan coding yang mudah ini, web developer akan semakin mudah dalam bercoding dan mempercepat pengembangan suatu software berbasis web ataupun website.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.