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.
| Attributo | Valore | Descrizione | Type |
|---|---|---|---|
| accept | estensione_file / media_typeaudio/* / video/* / image/* | Imposta un filtro sul tipo di file che è possibile selezionare per l’upload. | file |
| alt | testo | Imposta un testo alternativo per l’immagine. | image |
| autocomplete | on / off | E’ utilizzato per abilitare o disabilitare l’autocompletamento. | |
| autofocus | autofocus | Se previsto il campo ottiene il focus al momento del caricamento della pagina. | |
| checked | checked | Se previsto il pulsante di selezione sarà pre-selezionato. | checkbox / radio |
| dirname | inputname.dir | Fornisce informazioni sulla direzione del testo (ad es. ltr). | |
| disabled | disabled | Se specificato il campo è disabilitato. | |
| form | form_id | E’ 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). | |
| formaction | URL | E’ 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 |
| formenctype | application/x-www-form-urlencoded / multipart/form-data / text/plain | E’ 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 |
| formmethod | get / post | E’ 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 |
| formnovalidate | formnovalidate | E’ utilizzato per specificare se le informazioni del form devono essere validate o meno. | submit / image |
| formtarget | _blank / _self / _parent / _top / nome_frame | E’ 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 |
| height | pixel | E’ utilizzato per specificare l’altezza dell’immagine (in pixel). | image |
| list | datalist_id | E’ utilizzato per indicare un riferimento ad un <datalist> in cui sono previsto i possibili valori per il campo <input>. | |
| max | numero / data | E’ utilizzato per specificare l’eventuale valore massimo ammesso nel campo <input>. | number / range / date / datetime / datetime-local / month / time / week |
| maxlength | numero | E’ utilizzato per specificare l’eventuale numero massimo di caratteri che è possibile digitare nel campo <input>. | |
| min | numero / data | E’ utilizzato per specificare l’eventuale valore minimo ammesso nel campo <input>. | number / range / date / datetime / datetime-local / month / time / week |
| multiple | multiple | Se previsto sarà possibile inserire più di un valore per il campo <input>. | email / file |
| name | testo | E’ utilizzato per specificare il nome del campo <input>. | |
| pattern | regexp | E’ 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 |
| placeholder | testo | E’ utilizzato per specificare un testo "segnaposto" per il campo <input>. | |
| readonly | readonly | Se specificato il campo è di sola lettura. | |
| required | required | Se specificato il campo è richiesto e deve essere obbligatoriamente compilato. | |
| size | numero | E’ utilizzato per specificare una lunghezza esatta del numero di caratteri da inserire nel campo <input>. | text / search / tel / url / email / password |
| src | URL | E’ utilizzato per specificare la URL dell’immagine. | image |
| step | numero | E’ utilizzato per specificare l’intervallo tra i valori ammessi. | |
| type | button / checkbox / color / date / datetime-local / email / file / hidden / image / month / number / password / radio / range / reset / search / submit / tel / text / time / url / week | E’ utilizzato per specificare il tipo del campo <input>. | |
| value | testo | E’ utilizzato per specificare un valore predefinito per il campo <input>. | |
| width | pixel | E’ 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"> DonnaIl 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"> RagazzeIn 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".
