Numero Input HTML
Qual è il tag di input del numero in HTML?
Il tag di input numero in HTML consente di inserire un input numerato. Questo input può essere qualsiasi numero, inclusi numeri interi negativi e non negativi, nonché "0". Il tag di input numero in HTML consente di inserire l'ingresso numerato tramite la tastiera o selezionarlo dall'elenco fornito da questo tag. Inoltre, questo tag ha anche alcuni altri attributi ad esso utilizzati per servire a scopi diversi. Ad esempio, è possibile utilizzare gli attributi "min" e "max" del tag di input numero per specificare il limite di input minimo e massimo. Allo stesso modo, è possibile utilizzare l'attributo "Step" per specificare gli intervalli di input. Per saperne di più su come funziona il tag di input del numero in HTML, dovrai passare attraverso le sezioni precedenti di questo articolo.
Utilizzo del tag di input numero in HTML:
Per padroneggiare l'uso del tag di input numerico in HTML, dovrai capire i seguenti due esempi:
Esempio n. 1: entrare in età tra un certo limite:
Progetteremo questo esempio in modo tale da poter raccogliere l'età di un utente entro il limite specificato. Lo script HTML che abbiamo usato è mostrato nell'immagine seguente:
In questo esempio, abbiamo prima definito l'etichetta per il nostro input numerato, i.e., Età. Quindi, abbiamo usato il tag di input del numero per definire il limite di età, che abbiamo mantenuto tra 15 e 30 anni. Significa che questo script HTML chiederà all'utente di entrare nella sua età, ma quell'età deve essere vincolata tra 15 e 30 anni. Inoltre, abbiamo aggiunto un pulsante di invio a questo script per renderlo più presentabile.
Al momento dell'esecuzione dello script HTML mostrato sopra, la seguente pagina Web è stata visualizzata nel nostro browser. Puoi vedere che ci è stato fornito un campo di input in cui possiamo digitare un numero particolare che si trova nell'intervallo specificato con la nostra tastiera o possiamo persino utilizzare i tasti freccia associati al campo di input numero per selezionare l'età desiderata.
L'immagine mostrata di seguito rappresenta un'età selezionata in modo casuale:
Inoltre, poiché il limite di età minima è di 15, non saremo in grado di digitare qualcosa al di sotto di esso né di selezionare un numero inferiore a 15 utilizzando le frecce. Una volta raggiunto il limite di età minima, quel numero verrà automaticamente evidenziato come mostrato nella seguente immagine, indicando che non possiamo passare al di sotto di questo limite di età.
Allo stesso modo, non ci sarà nemmeno permesso di andare oltre il limite di età massima, che è "30" in questo caso. Questo è illustrato nell'immagine mostrata di seguito:
Esempio n. 2: immettere il numero di mele con un intervallo specificato:
In questo esempio, ti presenteremo un nuovo attributo associato al tag di input numerico di HTML, i.e., l'attributo del passaggio. Questo attributo viene utilizzato per specificare gli intervalli con cui si desidera aumentare o ridurre l'input numerato. Per fare ciò, abbiamo scritto il seguente script HTML:
In questo esempio, volevamo che l'utente inserisse il numero di mele che voleva in chilogrammi in multipli di "2", i.e., Lui/lei può entrare 2, 4, 6, 8 e così via. Per ottenere questa funzionalità, abbiamo specificato l'attributo "Step" con il tag Tipo di input e abbiamo mantenuto il suo valore come "2".
Quando abbiamo eseguito questo script, ci è stato presentato con la pagina Web mostrata nell'immagine seguente:
La seguente immagine mostra che abbiamo selezionato 6 chilogrammi di mele:
Tuttavia, in questo esempio, non abbiamo definito alcun limite inferiore o superiore a causa della possibilità che l'utente potesse finire per selezionare un numero negativo (che sarebbe tecnicamente non valido), come mostrato nell'immagine seguente:
Per evitare che ciò accada, modificheremo leggermente lo script sopra utilizzando l'attributo "min" per specificare che la quantità minima di mele non può essere inferiore a 2 chilogrammi come mostrato nella seguente immagine:
Quando abbiamo eseguito il nostro script HTML dopo aver effettuato questa modifica, non ci è stato permesso di andare al di sotto di 2 chilogrammi, come mostrato nell'immagine seguente:
Conclusione:
Attraverso questo articolo, volevamo trasmettere l'uso del tag di input numerico Oin HTML ai nostri lettori. Per prima cosa abbiamo sviluppato una comprensione di base di questo tag discutendo alcuni degli attributi ad esso associati. Dopodiché, abbiamo spiegato l'uso di questo tag con l'aiuto di due esempi rilevanti. Una volta attraversato questa guida, capirai chiaramente come funziona il tag di input del numero in HTML.