---

Search posts under HTML5:

---

N characters integer only in HTML5

How to limit number of integer characters in HTML?

To limit number of integer characters in HTML, we can take advantage of few attributes introducted in HTML5 and they are

• pattern - help us to filter the characters entered by user using Regular expression
• maxlength - limit the maximum number of characters in the text box

<form method="post">
<input type="text" class="form-control" name="contactPhone" id="contactPhone" 
      required pattern="[0-9]{10}"  maxlength="10" />
<input type="submit" value="Submit" />
</form>

In the above code snippet, notice the highlighted attributes

• required - makes the text box mandatory
• pattern -"[0-9]{10}" - forces the user to write only integer and 10 characters only (not less than that)
• maxlength - forces the user to write maximum of 10 characters in the text box