Tag HTML <input>

Definizione e uso

<input> Il tag definisce il campo di input, dove l'utente può inserire dati.

<input> L'elemento è l'elemento più importante del modulo.

<input> L'elemento può essere visualizzato in vari modi, a seconda di proprietà type.

Ecco diversi tipi di input:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(valore predefinito)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Vedere proprietà type，per vedere un esempio per ogni tipo di input!

Esempio

Modulo HTML contenente tre campi di input; due campi di testo e un pulsante di invio:

<form action="/action_page.php">
  <label for="fname">Nome:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Cognome:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

Prova personalmente

Suggerimenti e commenti

Suggerimento:Utilizza sempre il tag <label> per definire etichette per i seguenti elementi:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Proprietà

Proprietà Valore Descrizione
accept
  • Estensione del file
  • audio/*
  • video/*
  • image/*
  • Tipo di media

Stabilisce il tipo di file che deve essere presentato tramite il caricamento del file.

Stabilisce quali filtri di tipo di file possono essere selezionati dall'utente nel dialogo di scelta del file (applicato solo a type="file").
alt Testo Stabilisce il testo alternativo dell'immagine (applicato solo a type="image").
autocomplete
  • on
  • off
 Stabilisce se l'elemento <input> deve abilitare la completa automazione.
autofocus autofocus Stabilisce che l'elemento <input> deve ottenere automaticamente l'intera focus durante il caricamento della pagina.
checked checked Stabilisce che l'elemento <input> deve essere selezionato in anticipo durante il caricamento della pagina (applied to type="checkbox" or type="radio").
dirname inputname.dir Stabilisce la direzione del testo da presentare.
disabled disabled Stabilisce che l'elemento <input> deve essere disabilitato.
form ID del modulo Stabilisce il modulo a cui appartiene l'elemento <input>.
formaction URL Stabilisce l'URL del file da elaborare per il controllo di input durante la presentazione del modulo (applied to type="submit" and type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Definisce come codificare i dati del modulo quando vengono inviati al server (valido per type="submit" e type="image").
formmethod
  • get
  • post
 Definisce il metodo HTTP utilizzato per inviare i dati all'URL dell'azione (valido per type="submit" e type="image").
formnovalidate formnovalidate Definisce che il modulo non dovrebbe essere validato durante l'invio.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Nome della cornice 		Definisce dove visualizzare la risposta ricevuta dopo aver inviato il modulo (valido per type="submit" e type="image").
height Pixel Definisce l'altezza dell'elemento <input> (valido solo per type="image").
list datalist_id Riferimento all'elemento <datalist> predefinito che contiene le opzioni dell'<input>.
max
  • numero
  • Data
 Definisce il valore massimo dell'elemento <input>.
maxlength numero Definisce il numero massimo di caratteri consentiti per l'elemento <input>.
min
  • numero
  • Data
 Definisce il valore minimo dell'elemento <input>.
minlength numero Definisce il numero minimo di caratteri necessari nell'elemento <input>.
multiple multiple Definisce che l'utente può inserire più valori nell'elemento <input>.
name Testo Definisce il nome dell'elemento <input>.
pattern Espressione regolare Definisce l'espressione regolare per verificare il valore dell'elemento <input>.
placeholder Testo Definisce un breve suggerimento per il valore atteso dell'elemento <input>.
popovertarget ID dell'elemento Definisce l'elemento di popup da chiamare (valido solo per type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Definisce cosa accade quando si clicca sul pulsante (valido solo per type="button").
readonly readonly Definisce che il campo di input è readonly.
required required Definisce che i campi di input devono essere compilati prima di inviare il modulo.
size numero Definisce la larghezza dell'elemento <input> (in numero di caratteri).
src URL Indica l'URL dell'immagine utilizzata come pulsante di invio (valido solo per type="image").
step
  • numero
  • any
 Definisce l'intervallo tra numeri validi nel campo di input.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Definisce il tipo dell'elemento <input> da visualizzare.
value Testo Definisce il valore dell'elemento <input>.
width Pixel Definisce la larghezza dell'elemento <input> (aplica solo a type="image").

Proprietà globali

<input> Il tag supporta anche Proprietà globali dell'HTML.

Proprietà di evento

<input> Il tag supporta anche Proprietà di evento nell'HTML.

Impostazioni CSS predefinite

Nessuno.

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Pagine correlate

Corso HTML:

Manuale di riferimento HTML DOM: