Indice

<input>: l'elemento Input

L'elemento HTML <input> viene utilizzato per creare controlli interattivi per moduli basati sul Web al fine di accettare dati dall'utente; è disponibile un'ampia varietà di tipi di dati di input e widget di controllo, a seconda del dispositivo e dell'agente utente . L'elemento <input> è uno dei più potenti e complessi di tutto l'HTML a causa dell'enorme numero di combinazioni di tipi di input e attributi

Tipi di <input>

Il modo in cui <input> funziona varia considerevolmente a seconda del valore del suo attributo type, quindi i diversi tipi sono trattati in pagine di riferimento separate. Se questo attributo non è specificato, il tipo predefinito adottato è text.

Le tipologie disponibili sono le seguenti:

Tipo Descrizione Esempi di base
button Un pulsante senza comportamento predefinito che visualizza il valore dell'attributo value , vuoto per impostazione predefinita.

checkbox Una casella di controllo che consente di selezionare/deselezionare singoli valori.

color Un controllo per specificare un colore; aprendo un selettore colore quando è attivo nei browser di supporto.

date Un controllo per l'immissione di una data (anno, mese e giorno, senza ora). Apre un selettore di data o ruote numeriche per giorno, mese, anno quando è attivo nei browser di supporto.

datetime-local Un controllo per inserire una data e un'ora, senza fuso orario. Apre un selettore di data o ruote numeriche per i componenti di data e ora quando è attivo nei browser di supporto.

e-mail Un campo per la modifica di un indirizzo email. Sembra un input text, ma ha parametri di convalida e tastiera pertinente per supportare browser e dispositivi con tastiere dinamiche.

file Un controllo che consente all'utente di selezionare un file. Utilizzare l'attributo [accept](#attr-accept) per definire i tipi di file che il controllo può selezionare.

hidden Un controllo che non viene visualizzato ma il cui valore viene inviato al server. C'è un esempio nella colonna successiva, ma è nascosto!  
image Un pulsante grafico submit. Visualizza un'immagine definita dall'attributo src. L'attributo [alt](#attr-alt) viene visualizzato se manca l'immagine [src](#attr-src).

month Un controllo per inserire un mese e un anno, senza fuso orario.

number Un controllo per inserire un numero. Visualizza uno spinner e aggiunge la convalida predefinita quando supportata. Visualizza un tastierino numerico in alcuni dispositivi con tastiere dinamiche.

password Un campo di testo a riga singola il cui valore è oscurato. Avviserà l'utente se il sito non è sicuro.

radio Un pulsante di opzione, che consente di selezionare un singolo valore tra più scelte con lo stesso valore [name](#attr-name).

range Un controllo per inserire un numero il cui valore esatto non è importante. Viene visualizzato come un widget di intervallo predefinito sul valore medio. Utilizzato insieme a [min](#attr-min) e [max](#attr-max) per definire l'intervallo di valori accettabili.

reset Un pulsante che reimposta il contenuto del modulo ai valori predefiniti. Non consigliato.

search Un campo di testo a riga singola per l'immissione di stringhe di ricerca. Le interruzioni di riga vengono automaticamente rimosse dal valore di input. Può includere un'icona di eliminazione nei browser di supporto che può essere utilizzata per cancellare il campo. Visualizza un'icona di ricerca invece del tasto Invio su alcuni dispositivi con tastiere dinamiche.

submit Un pulsante che invia il modulo.

tel Un controllo per inserire un numero di telefono. Visualizza una tastiera telefonica in alcuni dispositivi con tastiere dinamiche.

text Il valore predefinito. Un campo di testo a riga singola. Le interruzioni di riga vengono automaticamente rimosse dal valore di input.

time Un controllo per inserire un valore di tempo senza fuso orario.

url Un campo per inserire un URL. Sembra un textinput, ma ha parametri di convalida e tastiera pertinente per supportare browser e dispositivi con tastiere dinamiche.

week Un controllo per l'immissione di una data composta da un numero dell'anno della settimana e un numero della settimana senza fuso orario.

Valori obsoleti
datetime Un controllo per inserire una data e un'ora (ora, minuti, secondi e frazioni di secondo) in base al fuso orario UTC.

Attributi

L'elemento <input> è così potente a causa dei suoi attributi; l'attributo type, descritto con gli esempi sopra, è il più importante. Poiché ogni elemento <input>, indipendentemente dal tipo, è basato sull'interfaccia HTMLInputElement, tecnicamente condividono lo stesso identico insieme di attributi. Tuttavia, in realtà, la maggior parte degli attributi ha effetto solo su un sottoinsieme specifico di tipi di input. Inoltre, il modo in cui alcuni attributi influiscono su un input dipende dal tipo di input, influendo sui diversi tipi di input in modi diversi.

Questa sezione fornisce una tabella che elenca tutti gli attributi con una breve descrizione. Questa tabella è seguita da un elenco che descrive ogni attributo in modo più dettagliato, insieme ai tipi di input a cui sono associati. Quelli che sono comuni alla maggior parte oa tutti i tipi di input sono definiti più dettagliatamente di seguito. Gli attributi che sono univoci per particolari tipi di input, o gli attributi che sono comuni a tutti i tipi di input ma hanno comportamenti speciali quando utilizzati su un determinato tipo di input, sono invece documentati nelle pagine di quei tipi. Questo elemento include gli attributi globali . Quelli con maggiore importanza in relazione a <input> sono evidenziati.

Attributo Tipo o Tipi Descrizione
accept file Suggerimento per il tipo di file previsto nei controlli di caricamento file
alt image attributo alt per il tipo di immagine. Necessario per l'accessibilità
autocomplete tutti Suggerimento per la funzione di compilazione automatica dei moduli
autofocus tutti Attiva automaticamente il controllo modulo quando la pagina viene caricata
capture file Metodo di input per l'acquisizione multimediale nei controlli di caricamento file
checked radio, checkbox Se il comando o il controllo è selezionato
dirname text, search Nome del campo del modulo da utilizzare per inviare la direzionalità dell'elemento nell'invio del modulo
disabled tutti Se il controllo del modulo è disabilitato
form tutti Associa il controllo a un elemento del modulo
formaction image, submit URL da utilizzare per l'invio del modulo
formenctype image, submit Tipo di codifica del set di dati del modulo da utilizzare per l'invio del modulo
formmethod image, submit Metodo HTTP da utilizzare per l'invio dei moduli
formnovalidate image, submit Ignora la convalida del controllo del modulo per l'invio del modulo
formtarget image, submit Contesto di navigazione per l'invio del modulo
height image Come attributo height per <img>; dimensione verticale
list quasi tutto Valore dell'attributo id delle opzioni <datalist> di completamento automatico
max tipi numerici Valore massimo
maxlength password, search, tel, text, url Lunghezza massima (numero di caratteri) di value
min tipi numerici Valore minimo
minlength password, search, tel, text, url Lunghezza minima (numero di caratteri) di value
multiple email, file booleano. Se consentire più valori
name tutti Nome del controllo modulo. Inviato con il modulo come parte di una coppia nome/valore.
pattern password, text, tel Modello value che deve corrispondere per essere valido
placeholder password, submit, tel, text, url Testo visualizzato nel controllo modulo quando non è impostato alcun valore
readonly quasi tutto booleano. Il valore non è modificabile
required quasi tutto booleano. Un valore è obbligatorio o deve essere verificato per poter inviare il modulo
size email, password, tel, text, url Dimensione del controllo
src image Come attributo src per <img>; indirizzo della risorsa immagine
step tipi numerici Valori incrementali validi.
type tutti Tipo di controllo del modulo
value tutti Il valore iniziale del controllo.
width image Come attributo width per <img>

Alcuni attributi aggiuntivi non standard sono elencati dopo le descrizioni degli attributi standard.

Attributi individuali

accept

Valido solo per il tipo di input file, l'attributo accept definisce quali tipi di file sono selezionabili in un controllo di caricamento file.

alt

Valido solo per il pulsante image, l'attributo alt fornisce un testo alternativo per l'immagine, visualizzando il valore dell'attributo se l'origine dell'immagine è mancante o altrimenti non riesce a caricare.

autocomplete

( Non è un attributo booleano!) L'attributo autocomplete prende come valore una stringa separata da spazi che descrive quale tipo di funzionalità di completamento automatico dovrebbe fornire l'input. Un'implementazione tipica del completamento automatico richiama i valori precedenti inseriti nello stesso campo di input, ma possono esistere forme più complesse di completamento automatico. Ad esempio, un browser potrebbe integrarsi con l'elenco dei contatti di un dispositivo per completare automaticamente gli indirizzi in un campo email di immissione e-mail.

L'attributo autocomplete è valido su hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, e password. Questo attributo non ha effetto sui tipi di input che non restituiscono dati numerici o di testo, essendo valido per tutti i tipi di input tranne checkbox, radio, file o qualsiasi tipo di pulsante.

autofocus

Un attributo booleano che, se presente, indica che l'input deve avere automaticamente lo stato attivo al termine del caricamento della pagina (o quando è stato visualizzato l'elemento <dialog> contenente l'elemento).

Non più di un elemento nel documento può avere l'attributo autofocus. Se inserito su più di un elemento, il primo con l'attributo riceve il focus.

L'attributo autofocus non può essere utilizzato su input di tipo hidden, poiché gli input nascosti non possono essere focalizzati.

Prestare attenzione all'accessibilità quando si applica l'attributo autofocus. La messa a fuoco automatica di un controllo può causare lo scorrimento della pagina durante il caricamento. Lo stato attivo può anche causare la visualizzazione di tastiere dinamiche su alcuni dispositivi touch. Mentre un'utilità per la lettura dello schermo annuncerà l'etichetta del controllo modulo che riceve lo stato attivo, l'utilità per la lettura dello schermo non annuncerà nulla prima dell'etichetta e l'utente vedente su un piccolo dispositivo mancherà ugualmente il contesto creato dal contenuto precedente.

capture

Introdotto nella specifica HTML Media Capture e valido solo per il tipo di input file, l'attributo capture definisce quale supporto (microfono, video o fotocamera) deve essere utilizzato per acquisire un nuovo file da caricare con controllo del caricamento file negli scenari di supporto.

checked

Valido per entrambi i tipi radio e checkbox, checked è un attributo booleano. Se presente su un tipo radio, indica che il pulsante di opzione è quello attualmente selezionato nel gruppo di pulsanti di opzione omonimi. Se presente su un tipo checkbox, indica che la casella di controllo è selezionata per impostazione predefinita (al caricamento della pagina). Non indica se questa casella di controllo è attualmente selezionata: se lo stato della casella di controllo viene modificato, questo attributo di contenuto non riflette la modifica

dirname

Valido solo per i tipi di input text e search, l' attributo dirname abilita l'invio della direzionalità dell'elemento. Quando incluso, il controllo modulo verrà inviato con due coppie nome/valore: la prima è name e value, la seconda è il valore di dirname come nome con il valore di lrt o rtl impostato dal browser.

disabled

Un attributo booleano che, se presente, indica che l'utente non dovrebbe essere in grado di interagire con l'input. Gli input disabilitati sono in genere resi con un colore più scuro o utilizzando un'altra forma di indicazione che il campo non è disponibile per l'uso.

In particolare, gli input disabilitati non ricevono l'evento click e gli input disabilitati non vengono inviati con il modulo.

form

Una stringa che specifica l'elemento <form> a cui è associato l'input (ovvero il suo proprietario del modulo ). Il valore di questa stringa, se presente, deve corrispondere a all'id di un elemento <form> nello stesso documento. Se questo attributo non è specificato, l'elemento <input> è associato al modulo contenitore più vicino, se presente.

L'attributo form ti consente di inserire un input in un punto qualsiasi del documento ma di averlo incluso in un modulo in un altro punto del documento.

Nota: un input può essere associato a un solo modulo.

formaction

Valido solo per i tipi di input image e submit.

formenctype

Valido solo per i tipi di input image e submit.

formmethod

Valido solo per i tipi di input image e submit.

formnovalidate

Valido solo per i tipi di input image e submit.

formtarget

Valido solo per i tipi di input image e submit.

height

Valido imagesolo per il pulsante di immissione, height è l'altezza del file immagine da visualizzare per rappresentare il pulsante di invio grafico.

id

Attributo globale valido per tutti gli elementi, inclusi tutti i tipi di input, definisce un identificatore univoco (ID) che deve essere univoco in tutto il documento. Il suo scopo è identificare l'elemento durante il collegamento. Il valore viene utilizzato come valore dell'attributo for di <label> per collegare l'etichetta al controllo del modulo. Vedi <label>.

inputmode

Valore globale valido per tutti gli elementi, fornisce un suggerimento ai browser sul tipo di configurazione della tastiera virtuale da utilizzare durante la modifica di questo elemento o del suo contenuto. I valori includono none, text, tel, url, email, numeric, decimal e search.

list

Il valore assegnato all'attributo list dovrebbe essere l'id di un elemento <datalist> che si trova nello stesso documento. Fornisce un elenco di valori <datalist> predefiniti da suggerire all'utente per questo input. Eventuali valori nell'elenco che non sono compatibili con typenon sono inclusi nelle opzioni suggerite. I valori forniti sono suggerimenti, non requisiti: gli utenti possono selezionare da questo elenco predefinito o fornire un valore diverso.

È valido il text, search, url, tel, email, date, month, week, time, datetime-local, number, range, e color.

In base alle specifiche, l'attributo list non è supportato dai tipi di pulsante hidden, password, checkbox, radio, file, o da alcun tipo di pulsante.

A seconda del browser, l'utente può vedere suggerita una tavolozza di colori personalizzata, segni di graduazione lungo un intervallo o anche un input che si apre come un <select> ma consente valori non elencati.

 

max

Valido per date, month, week, time, datetime-local, number e range, definisce il valore massimo nell'intervallo di valori consentiti. Se il valore value immesso nell'elemento supera questo valore, l'elemento non supera la convalida del vincolo. Se il valore dell'attributo max non è un numero, l'elemento non ha un valore massimo.

C'è un caso speciale: se il tipo di dati è periodico (ad esempio per date o orari), il valore di max può essere inferiore al valore di min, il che indica che l'intervallo può essere avvolto; ad esempio, ciò consente di specificare un intervallo di tempo dalle 22:00 alle 4:00.

maxlength

Valido per text, search, url, tel, email e password, definisce il numero massimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo. Deve essere un valore intero 0 o superiore. Se viene non specificato maxlength o viene specificato un valore non valido, il campo non ha una lunghezza massima. Questo valore deve anche essere maggiore o uguale al valore di minlength.

L'input fallirà la convalida del vincolo se la lunghezza del testo immesso nel campo maxlength è maggiore delle unità di codice UTF-16. Per impostazione predefinita, i browser impediscono agli utenti di inserire più caratteri di quelli consentiti dall'attributo maxlength.

min

Valido per date, month, week, time, datetime-local, number e range, definisce il valore più negativo nell'intervallo di valori consentiti. Se il valore value immesso nell'elemento è inferiore a questo, l'elemento non supera la convalida del vincolo . Se il valore dell'attributo min non è un numero, l'elemento non ha un valore minimo.

Questo valore deve essere minore o uguale al valore dell'attributo max. Se l'attributo min è presente ma non è specificato o non è valido, non viene applicato alcun valore min. Se l' attributo min è valido e un valore non vuoto è inferiore al minimo consentito dall'attributo min, la convalida del vincolo impedirà l'invio del modulo.

C'è un caso speciale: se il tipo di dati è periodico (ad esempio per date o orari), il valore di max può essere inferiore al valore di min, il che indica che l'intervallo può essere avvolto; ad esempio, ciò consente di specificare un intervallo di tempo dalle 22:00 alle 4:00.

minlenght

Valido per text, search, url, tel, email e password, definisce il numero minimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di immissione. Deve essere un valore intero non negativo minore o uguale al valore specificato da maxlength. Se non viene specificato minlength o viene specificato un valore non valido, l'input non ha una lunghezza minima.

L'input fallirà la convalida del vincolo se la lunghezza del testo inserito nel campo minlength è inferiore alle unità di codice UTF-16, impedendo l'invio del modulo.

multiple

L'attributo booleano multiple, se impostato, significa che l'utente può inserire indirizzi e-mail separati da virgole nel widget e-mail o può scegliere più di un file con l'input file.

name

Una stringa che specifica un nome per il controllo di input. Questo nome viene inviato insieme al valore del controllo quando vengono inviati i dati del modulo.

Considera l'attributo name come obbligatorio (anche se non lo è). Se un input non ha un attributo name specificato o name è vuoto, il valore dell'input non viene inviato con il modulo! (Anche i controlli disabilitati, i pulsanti di opzione deselezionati, le caselle di controllo deselezionate e i pulsanti di ripristino non vengono inviati.)

Ci sono due casi speciali:

  1. _charset_: Se utilizzato come nome di un elemento <input> di tipo hidden , l'attributo value dell'input viene automaticamente impostato dall'interprete sulla codifica dei caratteri utilizzata per inviare il modulo.
  2. isindex: Per motivi storici, il nome isindex non è consentito.

 

L'attributo name crea un comportamento unico per i pulsanti di opzione.

È possibile selezionare un solo pulsante di opzione alla volta in un gruppo di pulsanti di opzione con lo stesso nome. La selezione di qualsiasi pulsante di opzione in quel gruppo deseleziona automaticamente qualsiasi pulsante di opzione attualmente selezionato nello stesso gruppo. Il valore di quel pulsante di opzione selezionato viene inviato insieme al nome se il modulo viene inviato.

Quando si seleziona una serie di pulsanti di opzione con lo stesso nome, se uno è selezionato, quello riceverà lo stato attivo. Se non sono raggruppati nell'ordine di origine, se uno dei gruppi è selezionato, il tab nel gruppo inizia quando viene incontrato il primo del gruppo, saltando tutti quelli che non sono selezionati. In altre parole, se uno è selezionato, la tabulazione salta i pulsanti di opzione non selezionati nel gruppo. Se nessuno è selezionato, il gruppo di pulsanti di opzione riceve lo stato attivo quando viene raggiunto il primo pulsante nel gruppo con lo stesso nome.

Una volta che uno dei pulsanti di opzione in un gruppo ha lo stato attivo, l'utilizzo dei tasti freccia consente di navigare tra tutti i pulsanti di opzione con lo stesso nome, anche se i pulsanti di opzione non sono raggruppati nell'ordine di origine.

pattern

L'attributo pattern, quando specificato, è un'espressione regolare a cui l'input valuedeve corrispondere affinché il valore superi la convalida del vincolo .

Se l'attributo pattern è presente ma non è specificato o non è valido, non viene applicata alcuna espressione regolare e questo attributo viene completamente ignorato. Se l'attributo del modello è valido e un valore non vuoto non corrisponde al modello, la convalida del vincolo impedirà l'invio del modulo.

Nota: se si utilizza l' patternattributo, informare l'utente sul formato previsto includendo testo esplicativo nelle vicinanze. Puoi anche includere un attributo title per spiegare quali sono i requisiti per soddisfare il modello; la maggior parte dei browser visualizzerà questo titolo come suggerimento. La spiegazione visibile è necessaria per l'accessibilità. Il suggerimento è un miglioramento.

placeholder

L'attributo placeholder è una stringa che fornisce un breve suggerimento all'utente sul tipo di informazioni previste nel campo. Dovrebbe essere una parola o una breve frase che fornisce un suggerimento sul tipo di dati previsto, piuttosto che una spiegazione o un prompt. Il testo non deve includere ritorni a capo o avanzamenti di riga. Quindi, ad esempio, se ci si aspetta che un campo acquisisca il nome di un utente e la sua etichetta è "Nome", un segnaposto adatto potrebbe essere "eg Mustafa".

readonly

Un attributo booleano che, se presente, indica che l'utente non dovrebbe essere in grado di modificare il valore dell'input. L'attributo readonly è supportato dai tipi di input text, search, url, tel, email, date, month, week, time, datetime-local, number e password.

required

required è un attributo booleano che, se presente, indica che l'utente deve specificare un valore per l'input prima di poter inviare il modulo proprietario. L'attributo required è supportato da input text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, e file.

size

Valido solo per i tipi email, password e tel . Specifica la quantità di input visualizzata. Fondamentalmente crea lo stesso risultato dell'impostazione della proprietà CSS width con alcune specialità. L'unità effettiva del valore dipende dal tipo di ingresso. Per password e text, è un numero di caratteri (o unità em ) con un valore predefinito di 20, e per gli altri è pixel. La larghezza CSS ha la precedenza sull'attributo size.

src

Valida solo per il pulsante di immissione image, src è la stringa che specifica l'URL del file immagine da visualizzare per rappresentare il pulsante di invio grafico.

step

Valido per i tipi di input numerici, inclusi i tipi di input number di data/ora e range, l' attributo step è un numero che specifica la granularità a cui deve rispettare il valore.

Se non esplicitamente incluso:

  • il valore step predefinito per number e range è 1.
  • Per i tipi di input di data/ora, step è espresso in secondi, con lo step predefinito di 60 secondi . Il fattore di scala dello step è 1000 (che converte i secondi in millisecondi, come utilizzato in altri algoritmi).

 

Il valore deve essere un numero positivo, intero o float, o il valore speciale any, il che significa che non è implicito alcun passaggio e qualsiasi valore è consentito (salvo altri vincoli, come min e max ).

Se any non è impostato in modo esplicito, i valori validi per i tipi di input number, data/ora e i tipi di input range sono uguali alla base per il passaggio: il valore min e gli incrementi del valore del passaggio, fino al valore max, se specificato.

Ad esempio, se hai <input type="number" min="10" step="2">, qualsiasi numero intero pari 10o maggiore è valido. Se omesso, <input type="number">, qualsiasi intero è valido, ma i float (come 4.2) non sono validi, perché stepil valore predefinito è 1. Per essere valido 4.2, avrebbe step dovuto essere impostato su any, 0.1, 0.2 o qualsiasi valore min avrebbe dovuto essere un numero che termina con .2, come <input type="number" min="-5.2">

tabindex

Attributo globale valido per tutti gli elementi, inclusi tutti i tipi di input, un attributo intero che indica se l'elemento può assumere lo stato attivo dell'input (è attivabile), se deve partecipare alla navigazione sequenziale da tastiera. Poiché tutti i tipi di input tranne l'input di tipo nascosto sono attivabili, questo attributo non dovrebbe essere utilizzato sui controlli dei moduli, poiché ciò richiederebbe la gestione dell'ordine di focus per tutti gli elementi all'interno del documento con il rischio di danneggiare l'usabilità e l'accessibilità se fatto in modo errato.

title

Attributo globale valido per tutti gli elementi, inclusi tutti i tipi di input, contenente un testo che rappresenta informazioni di avviso relative all'elemento a cui appartiene. Tali informazioni possono in genere, ma non necessariamente, essere presentate all'utente come un suggerimento. Il titolo NON deve essere utilizzato come spiegazione principale dello scopo del controllo del modulo. Utilizzare invece l'elemento <label> con un attributo for impostato sull'attributo del controllo modulo id.

type

Una stringa che specifica il tipo di controllo di cui eseguire il rendering. Ad esempio, per creare una casella di controllo, viene utilizzato un valore di checkbox. Se omesso (o viene specificato un valore sconosciuto), viene utilizzato il tipo di input text, creando un campo di input di testo normale.

value

Il valore del controllo di input. Quando specificato nell'HTML, questo è il valore iniziale e da quel momento in poi può essere modificato o recuperato in qualsiasi momento utilizzando JavaScript per accedere alla proprietà del rispettivo value dell'oggetto HTMLInputElement. L' attributo value è sempre facoltativo, anche se dovrebbe essere considerato obbligatorio per checkbox, radio, e hidden.

width

Valido solo per il pulsante di immissione image, width è la larghezza del file immagine da visualizzare per rappresentare il pulsante di invio grafico.

Metodi

I seguenti metodi sono forniti dall'interfaccia HTMLInputElement che rappresenta gli elementi <input> nel DOM.

checkValidity()

Restituisce true se il valore dell'elemento supera i controlli di validità; in caso contrario, restituisce false e attiva un evento invalid sull'elemento.

reportValidity()

Restituisce true se il valore dell'elemento supera i controlli di validità; in caso contrario, restituisce false, attiva un evento invalid sull'elemento e (se l'evento non viene annullato) segnala il problema all'utente.

select()

Seleziona l'intero contenuto dell'elemento <input>, se il contenuto dell'elemento è selezionabile. Per gli elementi senza contenuto di testo selezionabile (come un selettore di colori visivo o l'input della data del calendario), questo metodo non esegue alcuna operazione.

setCustomValidity()

Imposta un messaggio personalizzato da visualizzare se il valore dell'elemento di input non è valido.

setRangeText()

Imposta il contenuto dell'intervallo di caratteri specificato nell'elemento di input su una determinata stringa. È disponibile un parametro selectMode per consentire il controllo dell'effetto sul contenuto esistente.

setSelectionRange()

Seleziona l'intervallo di caratteri specificato all'interno di un elemento di input testuale. Non fa nulla per gli input che non sono presentati come campi di input di testo.

stepDown()

Decrementa il valore di un input numerico di uno, per impostazione predefinita o del numero di unità specificato.

stepUp()

Incrementa il valore di un input numerico di uno o del numero di unità specificato.

CSS

Gli input, essendo elementi sostituiti, hanno alcune caratteristiche non applicabili agli elementi non di forma. Esistono selettori CSS che possono indirizzare in modo specifico i controlli dei moduli in base alle loro funzionalità dell'interfaccia utente, note anche come pseudo-classi dell'interfaccia utente. L'elemento di input può anche essere scelto come target per tipo con selettori di attributi. Ci sono anche alcune proprietà particolarmente utili.

Pseudo-classi dell'interfaccia utente

Didascalie rilevanti per l'elemento <input>

Pseudo-classe Descrizione
:enabled Qualsiasi elemento attualmente abilitato che può essere attivato (selezionato, cliccato, digitato, ecc.) o accettare lo stato attivo e ha anche uno stato disabilitato, in cui non può essere attivato o accettare lo stato attivo.
:disabled Qualsiasi elemento attualmente disabilitato che ha uno stato abilitato, il che significa che altrimenti potrebbe essere attivato (selezionato, cliccato, digitato, ecc.) o accettare lo stato attivo se non fosse disabilitato.
:read-only Elemento non modificabile dall'utente
:read-write Elemento modificabile dall'utente.
:placeholder-shown Elemento che sta attualmente visualizzando il testo segnaposto , inclusi gli elementi <input> e <textarea> con l' attributo placeholder presente che non ha ancora alcun valore.
:default Elementi del modulo che sono l'impostazione predefinita in un gruppo di elementi correlati. Corrisponde ai tipi di input checkbox e radio che sono stati selezionati durante il caricamento o il rendering della pagina.
:checked Corrisponde ai tipi di input checkbox e radio attualmente selezionati (e a in un elemento <select> attualmente selezionato).
:indeterminate elementi checkbox la cui proprietà indeterminata è impostata su true da JavaScript, elementi radio , quando tutti i pulsanti di opzione con lo stesso valore del nome nel modulo sono deselezionati ed elementi <progress> in uno stato indeterminato
:valid Controlli del modulo a cui è possibile applicare la convalida dei vincoli e che sono attualmente validi.
:invalid Controlli del modulo a cui è stata applicata la convalida del vincolo e attualmente non sono validi. Corrisponde a un controllo modulo il cui valore non corrisponde ai vincoli impostati su di esso dai suoi attributi, come require , pattern , step e max .
:in-range Un input non vuoto il cui valore corrente rientra nei limiti di intervallo specificati dagli attributi [min](#htmlattrdefmin) e [max](#htmlattrdefmax) e da [step](#htmlattrdefstep) .
:out-of-range Un input non vuoto il cui valore corrente NON rientra nei limiti di intervallo specificati dagli attributi min e max o non aderisce al vincolo di step .
:required un elemento <input>, <select> o <textarea> su cui è impostato l'attributo required . Corrisponde solo agli elementi che possono essere richiesti. L'attributo incluso in un elemento non richiesto non creerà una corrispondenza.
:optional un elemento <input>, <select> o <textarea> su cui NON è impostato l'attributo richiesto . Non corrisponde a elementi che non possono essere richiesti.
:blank elementi <input> e <textarea> che attualmente non hanno valore.
:user-invalid Simile a :invalid, ma è attivato sulla sfocatura. Corrisponde all'input non valido ma solo dopo l'interazione dell'utente, ad esempio concentrandosi sul controllo, lasciando il controllo o tentando di inviare il modulo contenente il controllo non valido.

Esempio di pseudo-classi

Possiamo dare uno stile all'etichetta di una casella di controllo in base al fatto che la casella di controllo sia selezionata o meno. In questo esempio, stiamo applicando uno stile a color e font-weight di <label> che viene immediatamente dopo un input selezionato. Non abbiamo applicato alcuno stile se input non è selezionato.

input:checked + label {
  color: red;
  font-weight: bold;
}

Caratteristiche aggiuntive

Etichette

Le etichette sono necessarie per associare il testo ausiliario a un <input>. L'elemento <label> fornisce informazioni esplicative su un campo del modulo che è sempre appropriato (a parte qualsiasi problema di layout che hai). Non è mai una cattiva idea usare un <label> per spiegare cosa dovrebbe essere inserito in un <input> o <textarea>.

Etichette associate

L'abbinamento semantico di elementi <input> e <label> è utile per le tecnologie assistive come i lettori di schermo. Associandoli utilizzando l'attributo for, leghi l'etichetta all'input in un modo che consente ai lettori di schermo di descrivere gli input agli utenti in modo più preciso.

Problemi di accessibilità

Etichette

Quando si includono gli input, è un requisito di accessibilità aggiungere etichette a lato. Questo è necessario in modo che coloro che utilizzano le tecnologie assistive possano dire a cosa serve l'input. Inoltre, facendo clic o toccando un'etichetta si attiva il controllo modulo associato all'etichetta. Ciò migliora l'accessibilità e l'usabilità per gli utenti vedenti, aumenta l'area su cui un utente può fare clic o toccare per attivare il controllo del modulo. Ciò è particolarmente utile (e persino necessario) per i pulsanti di opzione e le caselle di controllo, che sono minuscole.

Misurare

Gli elementi interattivi come l'input di moduli dovrebbero fornire un'area sufficientemente ampia da renderli facilmente attivabili. Questo aiuta una varietà di persone, comprese le persone con problemi di controllo motorio e le persone che utilizzano forme di input non precise come uno stilo o le dita. Si consiglia una dimensione interattiva minima di 44×44 pixel.