Blog Belajar HTML: Input type number HTML5

Pada HTML5, tag <input> memiliki atribut type baru yaitu number. Atribut number digunakan untuk memastikan inputan user hanya berupa angka, tidak diizinkan karakter lain. Atribut ini sangat penting saat validasi data, misalnya data umur. Umur bernilai angka, maka tidak menerima karakter string.

Contoh penggunaan: typeatribut.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag type atribut number</title>
        </head>
    <body>
    Masukkan umur: <input type="number" name="umur" required/>
    </body>
</html>

Output:

Tampilan di Firefox 35.01.

Anda dapat mengetik langsung angka ke dalamnya atau mengklik tanda panah atas dan panah bawah di samping kanan bidang. Arah atas untuk angka menaik, arah bawah untuk menurun.

Klik arah atas atau bawah.

Jika seandainya user memasukkan bukan angka dan mengklik sembarang di area kosong (fokus kursor berpindah dari bidang) maka timbul warna latar merah muda sebagai peringatan bahwa harus diisi dengan angka dan tidak boleh kosong.

Tidak boleh kosong dan harus diisi dengan angka.

Referensi tulisan:

Easy form validation with HTML5; ditulis oleh: Danny Markov, demo.tutorialzine.com, diakses 06 Februari 2015.

Thursday, February 5, 2015

Input type number HTML5

No comments:

Post a Comment