HTML Tipuri Input. Tip de intrare number. Restricții de intrare. Tip de intrare range.

Susține Lectii-Virtuale!

Tip de intrare number (Input Type Number)

<input type="number"> definește un câmp de introducere numerică. 
Puteți seta, de asemenea, restricții la numerele acceptate.
Următorul exemplu afișează un câmp de introducere numerică, unde puteți introduce o valoare de la 1 la 6:

Exemplu:

<form>
  Cantitatea (între 1 și 6):
  <input type="number" name="quantity" min="1" max="6">
</form>

Restricții de intrare

Iată o listă a unor restricții comune de intrare:
 

Atribut	Descriere
checked	Specifică faptul că un câmp de intrare ar trebui să fie preselectat atunci când se încarcă pagina (type="checkbox" sau type="radio")
disabled	Specifică faptul că un câmp de intrare trebuie dezactivat
max	Specifică valoarea maximă pentru un câmp de intrare
maxlength	Specifică numărul maxim de caractere pentru un câmp de intrare
min	Specifică valoarea minimă pentru un câmp de intrare
pattern	Specifică o expresie regulată pentru a verifica valoarea de intrare
readonly	Specifică faptul că un câmp de intrare este doar de citire (nu poate fi modificat)
required	Specifică faptul că este necesar un câmp de intrare (trebuie completat)
size	Specifică lățimea (în caractere) a unui câmp de intrare
step	Specifică intervalele de numere legale pentru un câmp de introducere
value	Specifică valoarea implicită pentru un câmp de intrare

Următorul exemplu afișează un câmp de intrare numeric, unde puteți introduce o valoare de la 0 la 100, în pași de 10. Valoarea implicită este 30:

Exemplu:

<form>
  Cantitate:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Tip de intrare range (Input Type Range)

<input type="range"> definește un control pentru introducerea unui număr a cărui valoare exactă nu este importantă (cum ar fi un control al slide-rului). Intervalul implicit este de la 0 la 100. Cu toate acestea, puteți seta restricții la numerele acceptate cu atributele min, max și pas:

Exemplu:

<form>
  <input type="range" name="points" min="0" max="10">
</form>