Number input. HTML

Question

How can I create the number input in which user will be able to type only numbers which consist of five digits? I tried this but user still can type as many digits as he/she wan

Answer 1

<input type="text" placeholder="1" required="required" pattern="[0-9]{1,5}" />

/* 
   Pattern
   0-9 = Only number.
   1,  = Minimum length,
   5  = Maximum Length
*/
/*required="required" attribute also needed*/

Best way if you use JavaScript form validation. Thanks.

Answer 2

You can try the below:

 <input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "5"

/>

Answer 3

You can use HTML5 'pattern' attribute.

According to the docs

The pattern attribute specifies a regular expression that the element's value is checked against.

For your case, you can add a pattern attribute to the HTML as follows

pattern="[0-9]{5}"

[0-9] specifies that the character entered should be a number and {5} specifies that there should be 5 digits.

Thus your complete HTML would be as follows

<input type="number" placeholder="1" pattern="[0-9]{5}">