html table input integer type?

Question

I made a table where input is integer, but somehow I am still able to pass any text.

<tr>
      <td>number: </td>
      <td><input type="integer" name="number" value=""/></td>
    </tr>

is the type="integer" correct?

The set of `type` values supported is finite and documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input — David, Jan 25 '18 at 17:57

score 4 · Accepted Answer · answered Jan 25 '18 at 18:07

In short, integer is not the correct type - what you seek is number

<input type='number' />

Additional attributes for this type of input are possible, including:

min: the lowest value the input will allow
max: the highest value the input will allow
step: the incremental value that the up/down selectors will increment the current value by

More information & example usage from MDN

score 3 · Answer 2 · answered Jan 25 '18 at 17:52

3

<input type="number" name="number" value="" min="0" step="1"/>

answered Jan 25 '18 at 17:52

Sohel0415

9,523
21
30

what does min and step mean? – Martin Švejda Jan 25 '18 at 17:57
@MartinŠvejda this will allow only integer – Sohel0415 Jan 25 '18 at 17:58

Aftab H. · Answer 3 · 2018-01-25T18:18:23.037

For numeric, you should use type="number" . For detailed, you can follow the reference .

Your updated code is given as-

<tr>
      <td>number: </td>
      <td><input type="number" name="number" value=""/></td>
    </tr>

Other Solution: you can do it using JavaScript validation as given below.

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

<input type="text"  value="" name="number" onkeypress="return isNumber(event)" />

html table input integer type?

3 Answers3