author Ahmad Muhardian

Tutorial HTML: Cara Membatasi Nilai Input Maksimum dan Minimum pada Form


Tutorial HTML untuk Pemula

Atribut min dan max merupakan atribut untuk membatasi nilai maksimum dan minimum yang boleh diinputkan pada form. Atribut ini biasanya digunakan pada inputan yang berkaitan dengan angka.

Misalnya tidak boleh menginput angka negatif, angka lebih dari 10, tanggal kurang dari tahun 2000, dsb.

Sedangkan untuk inputan berupa teks, atribut ini tidak bisa bekerja.

Mari kita coba langsung dengan contoh:

Tidak Boleh input Angka Negatif pada Form

Agar tidak bisa menginputkan anka negatfi, maka kita perlu batasi nilai minimanya menjadi nol (0).

<input type="number" min="0" />

Kode di atas akan menghasilkan:

Coba masukkan angka negatif dengan mengklik ikon arah bawah ⬇️, maka hasilnya akan mentok di nilai 0.

Tapi…

Kita masih bisa memberikan nilai negatif dengan mengetik langsung. Bagaimana donk?

Yap, itu memang bisa dilakukan. Namun saat kita melakukan submit HTML 5 akan memberi tahu, bahwa nilai inputan salah.

Nilai inputan tidak boleh negatif

Mari kita coba contoh yang lain.

Hanya Terima Angka dari 1 sampai 5

Nilai yang boleh diinputkan dari 1 sampai 5, maka kita hanya perlu menentukan nilai terkecilnya 1 dan terbesar 5.

<input type="number" min="1" max="5" />

Kode di atas akan menghasilkan:

Hanya Boleh Input Tanggal diatas Tahun 2000

Agar tanggal yang dinputkan diatas tahun 2000, maka kita perlu mengatur batas bawahnya (min) menjadi 2000-12-30.

<input type="date" min="2000-12-30" />

Kode di atas akan menghasilkan:

Demo:

Atribut Min-Max – Petani Kode on jsbin.com

Akhir Kata…

Dari beberapa contoh di atas, kita sudah dapat memahami fungsi dari atribut min dan max. Selanjutnya terserah anda mau diaplikasikan seperti apa.

Referensi: w3schools

Baca Juga ini

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Memahami apa itu Tag, Elemen, dan Atribut. Serta perbedaanya.

Belajar HTML #11: Cara Membuat Form pada HTML

Belajar HTML #11: Cara Membuat Form pada HTML

Pada tutorial ini, kita akan belajar cara membuat form di HTML agar visitor website kita bisa menginputkan data.

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web

Panduan lengkap cara membuat link di HTML. Pada tutorial ini, kita akan belajar membuat link menggunakan tag a dan mengenal atribut-atribut yang biasanya digunakan untuk membuat link.

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Ketika saya menggunakan modal untuk menampilkan peta (Google Maps), petanya tidak mau tampil. Entah mengapa? setelah ukuran layarnya di-resize, petanya bisa tampil. Mungkin karena div di dalam modal bersifat dinamis atau responsif. Peta kosong, hanya ada warna abu-abu. Solusi dari masalah ini saya temukan di Stackoverflow. MarcoK memberikan penjelasan jawaban atas masalah ini. Google Maps memang akan menampilkan area abu-abu (grey) kalau ditempatkan di elemen dinamis. Oleh karna itu, kita perlu memanggil fungsi “resize” ketika animasi modal sudah selesai.

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation. Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi. Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba. Sudah siap? Mari kita mulai… googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); Mengenal Objek MarkerMarker merupakan sebuah objek yang bisa kita buat dengan kode berikut: var marker = new google.

Menulis Rumus Matematika di HTML dengan MathJax

Menulis Rumus Matematika di HTML dengan MathJax

Rumus matematika biasanya akan sering kita temui pada web pendidikan atau akademis. Contohnya seperti ini: Rumus matematika di HTML sebenarnya bisa kita tampilkan dengan gambar. Namun, tidak interaktif dan dinamis. Selain dengan Gambar, kita juga busa menampilkannya dengan MathML. MathML adalah sebuah bahasa markup yang khusus untuk menulis rumus matematika di HTML dan XML. Namun, kekurangan dari MathML adalah sintaksnya ditulis dengan sintaks ala bahasa HTML dan XML, yakni dengan tag.