: l’elemento Input (Form Input)

accept

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

alt

Valido solo per il pulsante image, il fornisce un testo alternativo per l’immagine, mostrando il valore dell’attributo se l’immagine src manca o non viene caricata altrimenti. Visualizza il tipo di input dell’immagine.

autocomplete

(Non è un attributo booleano!) L’attributo autocomplete prende come valore una stringa separata da spazi che descrive il tipo di funzionalità di completamento automatico eventualmente fornito dall’input. Una tipica implementazione del completamento automatico richiama i valori precedenti immessi 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 email indirizzi in un campo di immissione dell’email. Consulta Valori nell’attributo di completamento automatico HTML per i valori consentiti.

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.

Consulta L’attributo di completamento automatico HTML f o informazioni aggiuntive, comprese le informazioni sulla sicurezza della password e su come autocomplete è leggermente diverso per hidden rispetto ad altri tipi di input.

autofocus

Un attributo booleano che, se presente, indica che l’input deve essere automaticamente attivo quando la pagina ha terminato il caricamento (o quando <dialog> contenente l’elemento è stato visualizzato).

Nota: un elemento con l’attributo autofocus può ottenere lo stato attivo prima che DOMContentLoaded l’evento viene generato.

Non più di un elemento nel documento può avere l’attributo autofocus. Se messo 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.

Avvertenza: la messa a fuoco automatica di un controllo del modulo può confondere le persone con problemi di vista che utilizzano la tecnologia di lettura dello schermo e le persone con disabilità cognitive. Quando viene assegnato autofocus, gli screen reader “teletrasportano” il loro utente al controllo del modulo senza avvisarlo in anticipo.

Fai attenzione all’accessibilità quando applicando l’attributo autofocus. Concentrarsi automaticamente su 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 uno screen reader annuncerà l’etichetta del controllo del modulo che riceve lo stato attivo, lo screen reader non annuncerà nulla prima dell’etichetta e l’utente vedente su un piccolo dispositivo perderà ugualmente il contesto creato dal contenuto precedente.

capture

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

checked

Valido sia per radio e checkbox types, 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 con lo stesso nome. 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. (Viene aggiornato solo l’attributo IDL HTMLInputElement checked.)

Nota: a differenza di altri controlli di input, i valori delle caselle di controllo e dei pulsanti di opzione sono inclusi solo nei dati inviati se sono attualmente checked. In caso affermativo, vengono inviati il nome e i valori dei controlli selezionati.

Ad esempio, se una casella di controllo il cui name è fruit ha un value di cherry e la casella di controllo è selezionata, i dati del modulo inviati includeranno fruit=cherry. Se la casella di controllo non è attiva, non è affatto elencata nei dati del modulo. Il valore predefinito value per le caselle di controllo e i pulsanti di opzione è on.

dirname

Valido solo per i tipi di input text e search, dirname l’attributo abilita la sottomissione della direzionalità dell’elemento. Quando incluso, il controllo del 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 ltr o rtl impostato dal browser.

Quando viene inviato il modulo sopra, l’input causa la coppia name / value di fruit=cherry e la dirname / coppia di direzioni fruit.dir=ltr da inviare.

disabled

Un attributo booleano che, se presente, indica che l’utente non dovrebbe essere in grado di interagire con l’input. Gli ingressi disabilitati vengono in genere visualizzati con un colore più attenuato o utilizzando qualche altra forma di indicazione che il campo non è disponibile per l’uso.

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

Nota: sebbene non sia richiesto dalle specifiche, Firefox manterrà per impostazione predefinita lo stato disabilitato dinamico di un <input> nei caricamenti della pagina. Utilizza l’attributo autocomplete per controllare questa funzione.

form

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

L’attributo form ti consente inserire un input in un punto qualsiasi del documento, ma includerlo in un modulo altrove nel documento.

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

formaction

Valido solo per i tipi di input image e submit. Per ulteriori informazioni, consulta il tipo di input di invio.

formenctype

Valido per image e submit solo tipi di input. Per ulteriori informazioni, consulta il tipo di input di invio.

formmethod

Valido per image e submit solo tipi di input. Per ulteriori informazioni, consulta il tipo di input di invio.

formnovalidate

Valido per image e submit solo tipi di input. Per ulteriori informazioni, consulta il tipo di input di invio.

formtarget

Valido per image e submit solo tipi di input. Per ulteriori informazioni, consulta il tipo di input di invio.

height

Valido solo per il pulsante di input image, il pulsante height è l’altezza del file immagine da visualizzare per rappresentare il pulsante di invio grafico. Visualizza il tipo di input dell’immagine.

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 <label> “s for 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 dei suoi contenuti. I valori includono none, text, tel, url, email, numeric, decimal e search.

list

Il valore assegnato all’attributo list deve essere id di un elemento <datalist> situato nello stesso documento. <datalist> fornisce un elenco di valori predefiniti da suggerire all’utente per questo input. Tutti i valori nell’elenco che non sono compatibili con type non 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 su text, search, url, tel, email, date, month, week, time, datetime-local, number, range e color.

Secondo le specifiche, l’attributo list non è supportato da hidden, password, checkbox, radio, file o qualsiasi dei tipi di pulsante.

A seconda del browser, l’utente potrebbe visualizzare una tavolozza di colori personalizzata suggerita, segni di tac lungo un intervallo o persino un input che si apre come un <select> ma consente va non in elenco lues. Controlla la tabella di compatibilità del browser per gli altri tipi di input.

Vedi l’elemento <datalist>.

max

Valido per date, month, week, time, datetime-local, number e range, definisce il valore più grande nell’intervallo dei valori consentiti. Se 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 (come per le date o gli orari), il valore di max potrebbe essere inferiore al valore di min, che indica che l’intervallo può wrap around; ad esempio, questo ti 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 versione successiva. Se non viene specificato alcun 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 .

L’input fallirà la convalida del vincolo se la lunghezza del testo immesso nel campo è maggiore di maxlength Unità di codice UTF-16 lunghe. Per impostazione predefinita, i browser impediscono agli utenti di inserire più caratteri di quelli consentiti dall’attributo maxlength. Vedi Convalida lato client per ulteriori informazioni.

min

Valido per date, month, week, time, datetime-local, number e range, definisce il valore più negativo nell’intervallo di valori consentiti. Se value immesso nell’elemento è inferiore a questo valore, 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 di l’attributo max. Se l’attributo min è presente ma non è specificato o non è valido, nessun min. Se l’attributo min è valido e un valore non vuoto è inferiore al minimo consentito da min attributo, la convalida del vincolo impedirà l’invio del modulo. Vedere Convalida lato client per ulteriori informazioni.

Esiste un caso speciale: se il tipo di dati è periodico (ad esempio per date o ore), il valore di max potrebbe essere inferiore al valore di min, che indica che l’intervallo può andare a capo; ad esempio, questo ti consente di specificare un’ora va dalle 22:00 alle 4:00.

minlength

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 alcun 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 è inferiore a minlength unità di codice UTF-16, impedendo l’invio del modulo. Vedi Convalida lato client per ulteriori informazioni.

multiple

L’attributo booleano multiple, se impostato, indica l’utente può inserire indirizzi email separati da virgola nel widget email o può scegliere più di un file con l’input file. Vedere l’email e il tipo di input del 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.

Cosa c’è in un nome

Considera name un attributo obbligatorio (anche se “non lo è). Se un input non ha name specificato o name è vuoto, il il valore di 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.

Esistono due casi speciali:

  1. _charset_: se utilizzato come nome di un <input> elemento di tipo nascosto, l’input “s value viene impostato automaticamente da l’agente utente alla codifica dei caratteri utilizzata per inviare il modulo.
  2. isindex: per motivi storici, il nome isindex non è consentito.
nome e pulsanti di opzione

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

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

Quando si inserisce una scheda in una serie di -nominato gruppo di pulsanti di opzione, se uno è selezionato, quello riceverà il focus. Se non sono raggruppati in ordine di origine, se uno del gruppo è spuntato, il tabbing nel gruppo inizia quando viene incontrato il primo del gruppo, saltando tutti quelli che non sono spuntati. In altre parole, se uno è selezionato, la tabulazione salta i pulsanti di opzione deselezionati nel gruppo. Se nessuno è selezionato, il gruppo di pulsanti di opzione viene attivato quando viene raggiunto il primo pulsante nello stesso gruppo di nomi.

Una volta che uno dei pulsanti di opzione in un gruppo è attivo, utilizzando i tasti freccia si navigherà attraverso tutti i pulsanti di opzione con lo stesso nome, anche se i pulsanti di opzione non sono raggruppati insieme nell’ordine di origine.

HTMLFormElement.elements

Quando a un elemento di input viene assegnato un name, quel nome diventa una proprietà dell’elemento modulo proprietario “s HTMLFormElement.elements. Se hai un input il cui name è impostato su guest e un altro il cui name è hat-size, il codice seguente può essere utilizzato:

Quando questo codice è stato eseguito, guestName sarà HTMLInputElement per il campo guest e hatSize l’oggetto per hat-size campo.

Avviso: evita di dare agli elementi del modulo un name che corrisponde a una proprietà incorporata del modulo, poiché sovrascriveresti la proprietà o il metodo predefinito con questo riferimento all’input corrispondente.

pattern

L’attributo pattern, se specificato, è un’espressione regolare che il input “s value deve corrispondere affinché il valore superi la convalida del vincolo. Deve essere un’espressione regolare JavaScript valida, come quella utilizzata dal tipo RegExp e come documentato nella nostra guida sulle espressioni regolari; il flag "u" viene specificato durante la compilazione dell’espressione regolare, in modo che il modello venga trattato come una sequenza di punti di codice Unicode, invece che come ASCII. Nessuna barra deve essere specificata intorno al testo del pattern.

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

Suggerimento: se si utilizza pattern attributo, informa 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 un suggerimento. La spiegazione visibile è necessaria per l’accessibilità. La descrizione comando è un miglioramento.

Vedi Convalida lato client per ulteriori informazioni.

placeholder

Il 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 suggerimento. Il testo non deve includere ritorni a capo o avanzamenti riga. Quindi, ad esempio, se si prevede che un campo catturi il nome di un utente e la sua etichetta è “First Name”, un segnaposto adatto potrebbe essere “e.g. Mustafa “.

Nota: l’attributo placeholder non è semanticamente utile come altri modi per spiegare il modulo e può causare problemi tecnici imprevisti con il tuo contenuto. Vedi Etichette in < input >: l’elemento Input (Form Input) per ulteriori informazioni.

readonly

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

Consulta l’attributo HTML: readonly per ulteriori informazioni.

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

Vedi Convalida lato client e attributo HTML: required per ulteriori informazioni.

sizeValido peremail,password,tele solo i tipitextinput. Specifica la quantità di input visualizzata. Fondamentalmente crea lo stesso risultato dell’impostazione della proprietà CSSwidthcon alcune specialità. L’unità effettiva del valore dipende dal tipo di ingresso. Perpasswordetext, è un numero di caratteri (oemunità) con un valore predefinito di20e per gli altri èpixels. La larghezza CSS ha la precedenza sull’attributo size.src

Valido solo per il image pulsante di input, il src specifica la stringa l’URL del file immagine da visualizzare per rappresentare il pulsante di invio grafico. Visualizza il tipo di input dell’immagine.

step

Valido per i tipi di input numerico, incluso number, data / time input types e range, l’attributo step è un numero che specifica la granularità a cui il valore deve aderire.

Se non esplicitamente incluso:

  • step il valore predefinito è 1 per number e range.
  • Per i tipi di input di data / ora, step è espresso in secondi, con il passaggio predefinito di 60 secondi . Il fattore di scala del passo è 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 esplicitamente, valori validi per number, tipi di input di data / ora e range i tipi di input sono uguali alla base per il passaggio: il valore min e gli incrementi del valore del passo, fino al max valore, se specificato.

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

Nota: quando i dati inseriti dall’utente non aderiscono alla configurazione “stepping”, il valore è considerato non valido in contravvenzione e corrisponderà a :invalid pseudoclasse.

Vedi Convalida lato client per ulteriori informazioni.

tabindex

Attributo globale valido per tutti gli elementi, inclusi tutti i tipi di input, un attributo intero che indica se l’elemento può essere attivato per l’input (è attivabile), se deve partecipare alla navigazione sequenziale da tastiera. Come tutti i tipi di input tranne l’input di tipo nascosto sono focalizzabili, questo attributo non dovrebbe essere usato sui controlli del form, perché così facendo richiederebbe la gestione del foc ordiniamo 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 le informazioni di avviso relative all’elemento a cui appartiene. Tali informazioni possono in genere, ma non necessariamente, essere presentate all’utente come descrizione comando. Il titolo NON deve essere utilizzato come spiegazione principale dello scopo del controllo del modulo. Utilizza invece l’elemento <label> con un for attributo impostato sul controllo del modulo “s id attributo. Consulta le etichette di seguito.

type

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

I valori consentiti sono elencati nei <input> tipi sopra.

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 al rispettivo HTMLInputElement oggetto “s value. L’attributo value è sempre facoltativo, ma dovrebbe essere considerato obbligatorio per checkbox, radio e hidden.

width

Valido per image solo pulsante di input, width è la larghezza del file immagine da visualizzare per rappresentare il pulsante di invio grafico. Vedi il tipo di input dell’immagine.

Leave a Reply

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *