Codewith.it

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

<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">