How would I create a form field where only numbers between 1-10 can be entered?

Question

So I would like to create a form field where the user is only able to input numbers between 1-10, and I would like it to show an error upon submission if the user enters any number bigger than that.

I know I need to use the title tag for the error, and pattern tag for it however what expressions would I use for the pattern tag?

Answer 1

Use this

<input type="number" min="1" max="10"> with html5 min and max attributes you can restrict the value of some input fields like dates and numbers.

Answer 2

You can use html5 validation by adding required attribute alongside with min and max:

<form action="">
  <input type="number" max="10" min="1" required />
  <button>submit</button>
</form>

The required attribute

Answer 3

This solution has a bit of JavaScript code, and works also with no HTML5 compliant browsers
(older and new one).

var widget = document.querySelector('input[name="onlyDigits"]');
widget.addEventListener('input', function() {
  this.value = this.value.replace(/\D/g, '');
});

<input type="text" name="onlyDigits" />

Answer 4

<form action="">
  Num 1-10:<br>
  <input type="number" step="1" min="1" max="10" required />
  <input type="submit">
</form>