range merupakan atribut baru pada elemen input HTML5, sebuah kontrol untuk memasukkan angka yang lebih tepat dengan adanya batasan awal dan akhir angka. Pengguna hanya perlu menggeser ke arah kanan untuk angka lebih besar dan ke kiri untuk angka lebih kecil.Atribut range memiliki nilai default jika programer tidak mendeklarasikannya:
min: angka minimal=0.
max: angka maksimal=100.
value: nilai (angka) yang didapatkan=min + (max-min)/2
Contoh: typerange.html
<!DOCTYPE HTML>
<html>
<head>
<title>Input type range HTML5</title>
</head>
<body>
Level keahlian Anda (1-100): <input type="range" name="levelp" min="1" max="100" required/>
</body>
</html>
Tampilan atribut range di Google Chrome:
 |
| Tampilan atribut range. |
Dengan bantuan php, Anda dapat mendapatkan nilai range dengan mudah. Misalnya menggunakan metode POST. File aksi diarahkan ke get.php. Langkah pertama, modifikasi typerange.html: typerange2.html
<!DOCTYPE HTML>
<html>
<head>
<title>Input type range HTML5</title>
</head>
<body>
<form method="POST" action="get.php">
Level keahlian Anda (1-100): <input type="range" name="levelp" min="1" max="100" required/><br />
<button type="submit">Ambil nilai range</button>
</form>
</body>
</html>Skrip get.php
<?php
$range=$_POST["levelp"];
echo $range;
?>
Catatan: Untuk mengeksekusi kedua file dibutuhkan web server lokal seperti wamp, xamp atau appverserv. Letakkan kedua file di folder htdocs atau www.
Referensi tulisan:
- input - HTML; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 Maret 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
No comments:
Post a Comment