<input type="image">
Gli elementi <input>
di tipo image
vengono utilizzati per creare pulsanti di invio grafici, ovvero pulsanti di invio che assumono la forma di un'immagine anziché di testo.
Valore
Gli elementi <input type="image">
non accettano attributi value
. Il percorso dell'immagine da visualizzare è specificato nell'attributo src
.
Attributi aggiungitvi
Oltre agli attributi condivisi da tutti gli elementi <input>
, gli input image
dei pulsanti supportano i seguenti attributi.
alt
L'attributo alt
fornisce una stringa alternativa da utilizzare come etichetta del pulsante se l'immagine non può essere visualizzata (a causa di un errore, un programma utente che non può o è configurato per non mostrare le immagini, o se l'utente utilizza un dispositivo di lettura dello schermo). Se fornita, deve essere una stringa non vuota appropriata come etichetta per il pulsante.
Ad esempio, se hai un pulsante grafico che mostra un'immagine con un'icona e/o il testo dell'immagine "Accedi ora", dovresti anche impostare l'attributo alt
su qualcosa come Login Now
.
Nota: sebbene l' altattributo sia tecnicamente facoltativo, dovresti sempre includerne uno per massimizzare l'usabilità dei tuoi contenuti.
Funzionalmente, l'attributo alt
su <input type="image">
funziona proprio come l'attributo alt
sugli elementi <img>
.
formaction
Una stringa che indica l'URL a cui inviare i dati. Questo ha la precedenza sull'attributo action
dell'elemento <form>
che possiede l'<input>
.
Questo attributo è disponibile anche sugli elementi <input type="submit">
e <button>
.
formenctype
Una stringa che identifica il metodo di codifica da utilizzare quando si inviano i dati del modulo al server. Ci sono tre valori consentiti:
application/x-www-form-urlencoded
Questo, il valore predefinito, invia i dati del modulo come una stringa dopo la codifica URL del testo utilizzando un algoritmo come encodeURI()
.
multipart/form-data
Utilizza l'API FormData per gestire i dati, consentendo l'invio dei file al server. È necessario utilizzare questo tipo di codifica se il modulo include elementi <input>
di tipo file (<input type="file">
)
text/plain
Testo normale; per lo più utile solo per il debug, quindi puoi facilmente vedere i dati che devono essere inviati.
Se specificato, il valore dell'attributo formenctype
sovrascrive l'attributo action
del modulo proprietario.
Questo attributo è disponibile anche sugli elementi <input type="submit">
e <button>
.
formmethod
Una stringa che indica il metodo HTTP da utilizzare durante l'invio dei dati del modulo; questo valore sovrascrive qualsiasi attributo method
fornito nel modulo proprietario. I valori ammessi sono:
get
Un URL viene costruito iniziando con l'URL fornito dall'attributo formaction
o action
, aggiungendo un punto interrogativo ("?"), quindi aggiungendo i dati del modulo, codificati come descritto da formenctype
o l'attributo enctype
del modulo. Questo URL viene quindi inviato al server utilizzando una richiesta get HTTP. Questo metodo funziona bene per moduli semplici che contengono solo caratteri ASCII e non hanno effetti collaterali. Questo è il valore predefinito.
post
I dati del modulo sono inclusi nel corpo della richiesta che viene inviata all'URL fornito dall'attributo formaction
o action
utilizzando una richiesta HTTP post. Questo metodo supporta dati complessi e file allegati.
dialog
Questo metodo viene utilizzato per indicare che il pulsante chiude la finestra di dialogo a cui è associato l'input e non trasmette affatto i dati del modulo.
Questo attributo è disponibile anche sugli elementi <input type="submit">
e <button>
.
formnovalidate
Un attributo booleano che, se presente, specifica che il modulo non deve essere convalidato prima dell'invio al server. Questo sovrascrive il valore dell'attributo novalidate
nel modulo proprietario dell'elemento.
Questo attributo è disponibile anche sugli elementi <input type="submit">
e <button>
.
formtarget
Una stringa che specifica un nome o una parola chiave che indica dove visualizzare la risposta ricevuta dopo l'invio del modulo. La stringa deve essere il nome di un contesto di navigazione (ovvero una scheda, una finestra o <iframe>
. Un valore specificato qui sovrascrive qualsiasi destinazione fornita dall'attributo target
sul <form>
proprietario di questo input.
Oltre ai nomi effettivi di schede, finestre o frame inline, ci sono alcune parole chiave speciali che possono essere utilizzate:
_self
Carica la risposta nello stesso contesto di navigazione di quello che contiene il modulo. Questo sostituirà il documento corrente con i dati ricevuti. Questo è il valore predefinito utilizzato se non ne viene specificato nessuno.
_blank
Carica la risposta in un nuovo contesto di navigazione senza nome. Si tratta in genere di una nuova scheda nella stessa finestra del documento corrente, ma può differire a seconda della configurazione dell'agente utente .
_parent
Carica la risposta nel contesto di navigazione padre di quello corrente. Se non esiste un contesto padre, si comporta come _self
.
_top
Carica la risposta nel contesto di navigazione di primo livello; questo è il contesto di navigazione che è l'antenato più in alto del contesto corrente. Se il contesto corrente è il contesto più in alto, si comporta come _self
.
Questo attributo è disponibile anche sugli elementi <input type="submit">
e <button>
.
height
Un numero che specifica l'altezza, in pixel CSS, alla quale disegnare l'immagine specificata dall'attributo src
.
src
Una stringa che specifica l'URL del file immagine da visualizzare per rappresentare il pulsante di invio grafico. Quando l'utente interagisce con l'immagine, l'input viene gestito come qualsiasi altro pulsante di input.
width
Un numero che indica la larghezza alla quale disegnare l'immagine, in pixel CSS.
Attributi obsoleti
Il seguente attributo è stato definito da HTML 4 per gli input di tipo image
, ma non è stato implementato da tutti i browser e da allora è stato deprecato.
usemap
Se usemap
è specificato, deve essere il nome di un elemento della mappa immagine, <map>
, che definisce una mappa immagine da utilizzare con l'immagine. Questo utilizzo è obsoleto; dovresti passare all'uso dell'elemento <img>
quando vuoi usare le mappe di immagini.