предел для шаблона входного значения в html5

Question

Как установить минимальное и максимальное значение для текстового поля ввода. Я пытался, но не работал. Как решить эту проблему? Этот шаблон будет поддерживать только до 10, но я хочу от 100 до 100000 Так как изменить этот шаблон для этого?

 <input type="number" placeholder="User Id" required  pattern="(10|([1-2][0-9])|[1-9])"  [(ngModel)]="userId" name="userId"  #pickedId="ngModel">

Answer 1

Попробуйте это:

legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    width: 43%;
}

input {
    margin: 1rem 0;
}

label {
    display: inline-block;
    font-size: .8rem;
}

input:invalid + span:after {
    content: '✖';
    color: #f00;
    padding-left: 5px;
}

input:valid + span:after {
    content: '✓';
    color: #26b72b;
    padding-left: 5px;
}

 <span class="validity"></span>

<input type="number" id="userId" name="userId"
           placeholder="Min: 100, max: 10000"
           min="100" max="10000" />
    <span class="validity"></span>

Answer 2

Попробуйте использовать атрибуты min и max.

 <input type="number" min="1" max="999" />