Tag <input>

Definizione

Il tag <input> permette di definire e creare aree di testo di varia tipologia e consente agli utenti di inviare dati al server per una successiva elaborazione.

<input> è usato principalmente per definire aree di input in un modulo HTML con il tag <form>, tuttavia può essere usato anche in altri ambiti all'interno di un documento HTML.

Gli utenti possono compilare liberamente le aree testuali definite tramite questo tag, e possono essere multipli all'interno di un form. Gli input di differenziano per tipologia tramite l'attributo type come "type="text"" o "type="password"", e ogni input utilizza un attributo name univoco per inviare dati al server.

<input>

tag HTML

Definisce un area di input per l'invio di dati e informazioni

Posizione:	<body>
Tag di chiusura:	No

Esempio

<form action="/page.php" method="post"> <label for="nome">Nome e cognome:</label> <input type="nome" id="nome" name="nome"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="doc">Documento personale:</label> <input type="file" id="doc" name="doc"><br><br> <input type="submit" value="invia"> </form>

Attributi

Attributo	Valore	Descrizione
name	testo	Determina il nome degli elementi HTML o fornisce dati su un attributo associato.
src	URL	Indica la provenienza di una risorsa esterna (tramite URL).
title	title="testo/titolo elemento" title="breve descrizione dell'elemento"	Indica informazioni aggiuntive riguardo un elemento HTML
type	media type	Specifica la tipologia/funzione di un elemento.
disabled	disabled	Impedisce la modifica di un input
multiple	multiple	Converte in lista a selezione multipla
required	required	Rende obbligatorio un campo di input
size	numero	Determina le dimensioni dell'elemento in base al valore contenuto
form	id form	Specifica a quale form appartiene un elemento.
autofocus	autofocus	Attiva un elemento al caricamento della pagina.
value	testo numero true/false	Valore alfanumerico o booleano contenuto in un elemento
autocomplete	on off	Indica l'opzione di auto completamento delle aree di input e/o di un form
accept	estensione file image/* audio/* video/* media type	Definisce e filtra il formato dei file per il tag <input type=file>
checked	checked	Pre-imposta su 'true' il valore di un elemento input checkbox o radio
dirname	name.dir	Invia informazioni sulla direzione di scrittura da un elemento input
formaction	URL	Permette di definire l'URL di una pagina web a cui inviare i dati di un form
height		Determina l'altezza di un elemento HTML in pixel
formenctype	application-x-www-form-urlencoded multipart/form-data text/plain	Definisce il tipo di codifica dei dati di un elemento input
formmethod	get post	Definisce il metodo di invio dei dati oltre a method
formnovalidate	formnovalidate	Impedisce la convalida di un singolo elemento input
list	id datalist	Collega un elemento input con una lista di opzioni datalist
max	numero data data e orario orario	Imposta il valore numerico o temporale massimo per un elemento input
min	numero data data e orario orario	Imposta il valore numerico o temporale minimo per un elemento input
maxlength	numero intero	Determina il numero massimo di caratteri consentiti in un elemento input
minlength	numero intero	Determina il numero minimo di caratteri per un elemento input
placeholder	Testo	Definisce un testo segnaposto per un elemento input o textarea

<input> supporta gli attributi di livello globale.

Compatibilità

Tutti i moderni browser supportano questo elemento.

Approfondimento

Se l'attributo type non è dichiarato, l'input si comporterà come un "type="text"", dunque come un area di testo semplice e senza convalida dei valori.

Il tag input è quasi sempre accompagnato dal tag <label> per definire un etichetta descrittiva ed indicare agli utenti lo scopo dell'area di input.

Le tipologie di input sono molte e tutte hanno uno scopo e uno stile grafico differente. Alcuni esempi qui in basso: