<input type=number> în HTML

<input type="number" name="cantitate" min="1" max="10" step="1">

Ce face <input type=number>

<input type="number"> acceptă doar numere. Pe calculator, browserul afișează în dreapta două săgeți mici pentru mărire și micșorare, iar pe telefon deschide tastatura numerică. Chrome nu lasă utilizatorul să scrie litere; Firefox și Safari le lasă, dar valoarea devine invalidă.

Atributele min și max stabilesc limitele, iar step pasul (implicit 1, deci doar numere întregi). Pentru zecimale, de exemplu prețuri în lei, folosește step="0.01", sau step="any" pentru orice valoare. Un număr în afara limitelor sau care nu respectă pasul este respins la trimitere.

Folosește tipul doar pentru cantități care se pot aduna sau compara (vârstă, bucăți, notă). Numerele de telefon, codurile poștale sau numerele de card nu sunt cantități: pentru ele există type="tel" sau un câmp text cu inputmode="numeric".

Atribute

Atribut	Descriere
min / max	Valoarea minimă și maximă acceptată.
step	Pasul între valorile valide (implicit 1). any permite orice zecimală.
value	Valoarea inițială.
placeholder	Text de ajutor afișat cât timp câmpul este gol.
required	Câmpul nu poate rămâne gol.

Exemple

Exemplul 1: Cantitate în coșul de cumpărături

Clientul poate comanda între 1 și 10 bucăți.

<label for="cantitate">Cantitate</label>
<input type="number" id="cantitate" name="cantitate"
       min="1" max="10" value="1">

Ce afișează browserul

Câmp cu valoarea 1 și săgeți sus/jos.
Săgeata sus se oprește la 10; dacă scrii 15 și trimiți, browserul cere o valoare mai mică sau egală cu 10.

Exemplul 2: Preț în lei cu două zecimale

step="0.01" acceptă bani; fără el, 49.90 ar fi respins.

<label for="pret">Preț (lei)</label>
<input type="number" id="pret" name="pret"
       min="0" step="0.01" placeholder="49.90">

Ce afișează browserul

49.90 și 120 sunt acceptate.
49.905 este respins: browserul propune cele mai apropiate valori valide, 49.9 și 49.91.

Exemplul 3: Notă școlară de la 1 la 10

Valoarea trimisă la server este textul numărului, de exemplu "9".

<label for="nota">Nota la matematică</label>
<input type="number" id="nota" name="nota" min="1" max="10" required>

Ce afișează browserul

Câmp gol, obligatoriu.
La trimitere fără valoare, browserul cere completarea câmpului; 0 sau 11 sunt respinse.

Greșeli frecvente

• Folosirea lui type="number" pentru telefon, cod poștal sau card: zerourile de la început se pierd, iar săgețile de mărire nu au sens.
• Uitarea lui step pentru zecimale: cu pasul implicit 1, valoarea 12.5 este invalidă.
• Presupunerea că valoarea ajunge ca număr: serverul primește tot text și trebuie să o verifice și să o convertească.

Comenzi înrudite

• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <input type=range>: Glisorul (slider) pentru alegerea unei valori aproximative dintr-un interval, cum ar fi volumul sau un buget.
• <input type=tel>: Câmpul pentru numere de telefon: pe mobil deschide tastatura numerică, iar formatul se verifică doar cu pattern.
• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.