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
heightDetermina l'altezza di un elemento HTML in pixel
formenctypeapplication-x-www-form-urlencoded
multipart/form-data
text/plain
Definisce il tipo di codifica dei dati di un elemento input
formmethodget
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:

 

<input type="text">

<input type="button">

<input type="submit">

<input type="email">

<input type="password">

<input type="tel">

<input type="url">

<input type="hidden">

<input type="color">

<input type="checkbox">

<input type="radio">

<input type="range">

<input type="image">

<input type="file">

<input type="date">

<input type="datetime">

<input type="datetime-local">

<input type="time">

<input type="week">

<input type="month">

<input type="number">

<input type="reset">

<input type="search">