back to top

Il tag <input> di HTML

Il tag inputdi HTML è utilizzato, all’interno di un modulo generato mediante tag <form>, a creare una casella attraverso la quale l’utente, in vario modo, può inserire dei dati.

Il tag <input> può assumere un diverso aspetto ed un altrettanto differente funzionamento a seconda del valore impostato per l’attributo type.

La sintassi del tag <input>

La sintassi base è la seguente:

<input type="text" name="nome">

Gli attributi type e name sono sicuramente i più importanti e non dovrebbero mai essere omessi.

Si noti che il tag input non prevede alcun tag di chiusura, in XHTML, pertanto, deve essere chiuso in questo modo:

<input ... />

L’attributo type

L’attributo type se omesso genera, per default, una casella di testo ma è buona norma specificarlo in ogni caso.

Come detto, col tag <input> si possono creare diversi elementi di un form, specificando diversi valori per l’attributo type. I principali valori di type sono i seguenti:

  • text – il tag <input> assume l’aspetto di una casella di testo semplice.
  • hidden – il tag <input> diventa "invisibile" e non può essere, pertanto, valorizzato dall’utente (serve, quindi, per trasportare dei dati per finalità per lo più applicative).
  • password – il tag <input> assume l’aspetto di una casella di testo ma i dati in essa inserita non sono visibili in quanto sostituiti da "pallini" per questioni di privacy/sicurezza.
  • radio – il tag <input> assume l’aspetto di un pulsante d’opzione. Solitamente i radio sono utilizzati in gruppi di due o più. Non consentono scelte multiple (in un gruppo di radio può essere selezionata una sole opzione).
  • checkbox – il tag <input> assume l’aspetto di un pulsante di scelta. In questo caso, a differenza dei radio sono ammesse scelte multiple.
  • file – il tag <input> consente all’utente di selezionare un file dal proprio hard-disk al fine di inviarlo al server remoto.
  • button – il tag <input> assume l’aspetto di un bottone semplice.
  • submit – il tag <input> assume l’aspetto di un bottone di invio (è utilizzato per inviare i dati, inseriti all’interno del modulo, allo script specificato nell’attributo action del tag <form>).
  • image – il tag <input> assume l’aspetto di un bottone funzionante come un submit che consente, però, di impostare un’immagine come interfaccia del bottone.

Oltre ai tipi citati, HTML5 ne ha introdotti diversi altri (si faccia riferimento alla tabella più sotto per un elenco completo dei possibili valori dell’attributo type).

Tutti gli attributi del tag <input>

Di seguito una tabella riepilogativa di tutti i possibili attributi del tag in oggetto. E’ opportuno segnalare che taluni attributi sono ammissibili solo se il campo ha uno specifico valore per il fondamentale attributo type.

AttributoValoreDescrizioneType
acceptestensione_file / media_typeaudio/* / video/* / image/*Imposta un filtro sul tipo di file che è possibile selezionare per l’upload.file
alttestoImposta un testo alternativo per l’immagine.image
autocompleteon / offE’ utilizzato per abilitare o disabilitare l’autocompletamento.
autofocusautofocusSe previsto il campo ottiene il focus al momento del caricamento della pagina.
checkedcheckedSe previsto il pulsante di selezione sarà pre-selezionato.checkbox / radio
dirnameinputname.dirFornisce informazioni sulla direzione del testo (ad es. ltr).
disableddisabledSe specificato il campo è disabilitato.
formform_idE’ utilizzato per far riferimento ad uno specifico tag <form> specificandone l’ID (viene utilizzato per i campi input che si trovano "fuori" dal tag form ma ne fanno ugualmente parte).
formactionURLE’ utilizzato per specificare la URL a cui devono essere inviate le informazioni al momento del submit (sovrascrive il valore indicato nell’attributo action del tag <form>).submit / image
formenctypeapplication/x-www-form-urlencoded / multipart/form-data / text/plainE’ utilizzato per specificare la modalità con cui devono essere inviate le informazioni al momento del submit (sovrascrive il valore indicato nell’attributo enctype del tag <form>).submit / image
formmethodget / postE’ utilizzato per specificare il metodo con cui devono essere inviate le informazioni al momento del submit (sovrascrive il valore indicato nell’attributo method del tag <form>).submit / image
formnovalidateformnovalidateE’ utilizzato per specificare se le informazioni del form devono essere validate o meno.submit / image
formtarget_blank / _self / _parent / _top / nome_frameE’ utilizzato per specificare il target della URL a cui vengono inviate le informazioni al momento del submit (sovrascrive il valore indicato nell’attributo target del tag <form>).submit / image
heightpixelE’ utilizzato per specificare l’altezza dell’immagine (in pixel).image
listdatalist_idE’ utilizzato per indicare un riferimento ad un <datalist> in cui sono previsto i possibili valori per il campo <input>.
maxnumero / dataE’ utilizzato per specificare l’eventuale valore massimo ammesso nel campo <input>.number / range / date / datetime / datetime-local / month / time / week
maxlengthnumeroE’ utilizzato per specificare l’eventuale numero massimo di caratteri che è possibile digitare nel campo <input>.
minnumero / dataE’ utilizzato per specificare l’eventuale valore minimo ammesso nel campo <input>.number / range / date / datetime / datetime-local / month / time / week
multiplemultipleSe previsto sarà possibile inserire più di un valore per il campo <input>.email / file
nametestoE’ utilizzato per specificare il nome del campo <input>.
patternregexpE’ utilizzato per specificare un’espressione regolare attraverso la quale validate il valore inserito all’interno del campo <input>.text / date / search / url / tel / email / password
placeholdertestoE’ utilizzato per specificare un testo "segnaposto" per il campo <input>.
readonlyreadonlySe specificato il campo è di sola lettura.
requiredrequiredSe specificato il campo è richiesto e deve essere obbligatoriamente compilato.
sizenumeroE’ utilizzato per specificare una lunghezza esatta del numero di caratteri da inserire nel campo <input>.text / search / tel / url / email / password
srcURLE’ utilizzato per specificare la URL dell’immagine.image
stepnumeroE’ utilizzato per specificare l’intervallo tra i valori ammessi.
typebutton / checkbox / color / date / datetime-local / email / file / hidden / image / month / number / password / radio / range / reset / search / submit / tel / text / time / url / weekE’ utilizzato per specificare il tipo del campo <input>.
valuetestoE’ utilizzato per specificare un valore predefinito per il campo <input>.
widthpixelE’ utilizzato per specificare la larghezza dell’immagine (in pixel).image

Esempi di utilizzo del tag <input>

Vediamo alcuni esempi di utilizzo del tag input nelle sue diverse varianti:

Casella di testo semplice (text)

<input type="text" name="nome" value="Luca" maxlength="10">

Il codice visto sopra imposta una casella di testo semplice con valore predefinito (modificabile) e stabilisce la lunghezza massima consentita in 10 caratteri.

Casella nascosta (hidden)

<input type="hidden" name="funzione" value="xyz">

Il codice crea un campo input invisibile con un valore che, solitamente, viene predefinito dallo sviluppatore oppure attraverso processi applicativi (ad esempio mediante Javascript).

Casella sicura (password)

<input type="password" name="chiave_segreta">

Il codice crea un campo password in cui l’utente può inserire chiavi segrete in socurezza (la stringa digitata non è mostrata a video ma è sostituita da dei puntini).

Casella di opzione (radio)

<input type="radio" name="sesso" value="U" checked="true"> Uomo
<input type="radio" name="sesso" value="D"> Donna

Il codice visto sopra permette di selezionare solo uno dei due valori: si noti che i due campi input hanno entrambi lo stesso name. L’attributo checked imposta il valore preselezionato.

Casella di scelta multipla (checkbox)

<input type="checkbox" name="hobby" value="Internet" checked="true"> Internet
<input type="checkbox" name="hobby" value="Palestra"> Palestra
<input type="checkbox" name="hobby" value="Moto" checked="true"> Moto
<input type="checkbox" name="hobby" value="Viaggiare"> Viaggiare
<input type="checkbox" name="hobby" value="Ragazze"> Ragazze

In tutto e per tutto uguali ai pulsanti di opzione singola, se non per il fatto che possono essere selezionati ed impostati con "checked" anche più valori contemporaneamente.

Casella di selezione file (file)

<input type="file" name="foto" accept="image/*">

Il codice crea un campo di scelta attraverso il quale l’utente può selezionare un file presente sul proprio device per poterlo inviare al server remoto (in pratica è utilizzato per effettuare upload). Abbiamo utilizzato l’attributo accept per limitare i tipi di file che è possibile selezionare (in questo caso solo immagini).

Bottone semplice (button)

<input type="button" name="clicca" value="Clicca qui" onclick="alert('Hello, World!');">

Abbiamo impostato un bottone semplice e definito un’azione mediante Javascript (scatenando un’azione dll’evento onclick).

Bottone di invio (submit)

<form name="modulo" method="post" action="esegui.asp">
  <input type="submit" name="clicca" value="Invia dati">
</form>

Mediante il click sul pulsante l’utente invia i dati al file "esegui.asp".

Bottone di invio con immagine (image)

<form name="modulo" method="post" action="esegui.asp">
  <input type="image" name="clicca" src="bottone.gif">
</form>

Mediante il click sull’immagine l’utente invia i dati al file "esegui.asp". A differenza del precedente non è necessario stabilire il "value" e si utilizza l’attributo src per impostare il nome ed il percorso dell’immagine da visualizzare come bottone, in questo caso "bottone.gif".

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...

Differenza tra sito statico e sito dinamico, vantaggi e svantaggi

Un sito statico è una collezione di pagine web...
Pubblicità