<style scoped>
input:invalid, textarea:invalid { color: red; }
</style>
<label for="fNumber">Number</label>
<input type="number" id="fNumber">
<label for="fNumber2">Number with min max step</label>
<input id="fNumber2" type="number" min="100" max="999" step="5">
Hasilnya akan tampak seperti berikut:
Jenis input number adalah untuk angka: bilangan bulat atau bilangan floating point.
- Browser pendukung harus menampilkan spinner untuk menaikkan dan menurunkan nilai.
- Keypad dinamis harus menampilkan keypad numerik on focus, mengabaikan atribut inputmode yang disertakan.
- Secara default step, atau kenaikan, adalah 1. Untuk menerima float, atau nilai yang tidak harus ditambah 1 dari nilai min, pastikan untuk mengatur atribut step ke any: step="any".
- Jika step sudah diatur, spinner akan meningkat atau menurun dengan nilai stepnya. Jika langkah dihilangkan, atur ke nilai default 1, atau setel ke any, spinner akan bertambah dengan 1.
- Jika pengguna memasukkan nomor yang merupakan step mismatch, klik panah atas pada spinner akan membulat jumlahnya sampai kenaikan step berikutnya, dan ke bawah akan membulatkan ke bawah. Metode stepDown () dan stepUp () akan meningkat dan penurunan nilainya juga.
- Atribut global, autocomplete, list, max, min, placeholder, readonly, required, step, dan nilai relevan dengan input type number. Atribut pattern dan size tidak relevan untuk tipe number dan akan diabaikan jika disertakan.
- Saat min, max dan step disetel, beberapa browser mungkin menampilkan kotak input yang lebih sempit untuk input type number, karena nilai width valid terluas sangat terbatas. Chrome dan iOS 7 termasuk yang saat ini melakukan hal ini.
- IE, iOS Safari, Android, dan Chrome for Android menampilkan keypad numerik, namun tidak menyediakan UI spinner. Pada sebagian besar perangkat, keypad numerik tidak terbatas hanya pada keyboard telepon nomor telepon saja: tombol ini memiliki lebih banyak tombol yang tersedia, seperti period, dan memungkinkan kita mengakses semua tombol pada beberapa keypads, seperti iOS. IE, bagaimanapun, keypad numerik lebih terbatas daripada tel, memberi kita 10 digit dan period.
- Non Angka floating tidak valid. iOS 5+ dan IE 10+ akan menghapus apapun yang kita masukkan ke dalam input yang bukan merupakan bagian dari nomor floating point (misalnya periode dan tanda hubung OK) pada blur. Chrome biasa melakukan ini, namun tidak lagi menghapus data yang tidak valid secara blur. Opera dan Firefox juga tidak.
- Chrome 12-14 digunakan untuk memformat ulang otomatis untuk memasukkan koma (misalnya 2000000 berubah menjadi 2.000.000, yang akan menjadi aneh untuk nomor jaminan sosial atau kartu kredit. Ini telah diselesaikan sejak Chrome 15.
- Karena UI pemintal, tipe input nomor tidak sesuai untuk string numerik seperti kode pos, nomor jaminan sosial atau nomor kartu kredit.
- Validasi jenis nomor akan diuji untuk melihat apakah ada typeMismatch, dan jika atribut min, max, atau step juga ada, akan mencari rangeUnderflow, rangeOverflow atau stepMismatch.
- Jika invalid, Firefox, Chrome, dan IE memberikan pesan kesalahan. Opera memberikan fokus elemen tanpa verbiage. Safari (Saat ini 7) tidak memberikan batasan validasi pada form submission.
- Cross verbiage browser, jika min = 100, max = 999, step = 5, angka yang dimasukkan menjadi 1000, 0, 111 dan -e
Firefox:
Please select a value that is lower than 999.
Please select a value that is higher than 100.
Please select a valid value. The two nearest valid values are 110 and 115.
Please enter a number.
Chrome:
Value must be less than or equal to 999.
Value must be greater than or equal to 100.
Please enter a valid value. The two nearest valid values are 110 and 115.
Please enter a number.
Internet Explorer
You must enter a value between 100 and 999
You must enter a value between 100 and 999
You must enter a valid value
(Menghapus entri yang salah, jadi tidak ada pesan kesalahan berdasarkan nilai non-numerik)
Incrementing bekerja dengan mouse scroller.
