HTML
CSS
Introduzione
Coming Soon
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

<INPUT>

Il tag <input> definisce un campo per l'inserimento di dati

Il tag INPUT permette di creare elementi che consentono agli utenti di immettere dati, vengono usati all'interno del tag <form>. Esistono diversi tipi di campi input e dipendono del tipo di attributo abbinato ed è un elemento vuoto, infatti non richiere il tag di chiusura e contiene solo gli attributi.
Il tag INPUT è un elemento di tipo inline

HTML

Categoria: Flow content , Phrasing content , Se l'attributo "type" non è in stato "hidden": Interactive content , Se l'attributo "type" non è in stato "hidden": Palpable content

Contenuti consentiti: Nessuno

Elementi padre consentiti: Ogni elemento che può contenere Phrasing content

Esempio: Tag INPUT


Esempio: <INPUT>

CODE: HTMLpreleva codice
  1. <html>
  2.     <head>
  3.         <title>Titolo Documento</title>
  4.     </head>
  5.     <body>
  6. <form id="test-form" action="test-form.php" method="get" onsubmit="return false">
  7.  <fieldset>
  8.   <legend>Test input</legend>
  9.  
  10. text: <input type="text" name="text" value="testo" /><br />
  11. password: <input type="password" name="password" value="123456" /><br />
  12. radio: <input type="radio" name="radio" value="" /><br />
  13. checkbox: <input type="checkbox" name="checkbox" value="" /><br />
  14. file: <input type="file" name="file" value="" /><br />
  15. hidden: <input type="hidden" name="hidden" value="" />(non visibile)<br />
  16. image: <input type="image" name="image" value="" src="ow_icon_21.png" /><br />
  17. button: <input type="button" name="button" value="button" /><br />
  18. reset: <input type="reset" name="reset" value="reset" /><br />
  19. submit: <input type="submit" name="submit" value="submit" /><br />
  20.  
  21.  </fieldset>
  22. </form>
  23.     </body>
  24. </html>

Note:
In HTML il tag input non ha tag di chiusura ( <input> )
In XHTML il tag input deve avere la spunta di chiusura preceduta da uno spazio ( <input /> )


Risultato: <input>

Test input text:
password:
radio:
checkbox:
file:
hidden: (non visibile)
image:
button:
reset:
submit:

Supporto Browser

Browser Support

Leggenda

= Solo per HTML5

= Non Supportato in HTML5

= Solo per CSS3

= Non Supportato in CSS3

Elenco Attributi:

Attributo Valore Descrizione
class Nome della classe Specifica il nome della classe a cui appartiene l'elemento
id id (nome unico) Specifica il nome unico (id) dell'elemento
style Defininizione dello stile Specifica lo stile per l'elemento
title Testo informativo Specifica informazioni aggiuntive dell'elemento
lang Codice linguaggio Specifica il codice lingua del contenuto negli elementi.
xml:lang Codice linguaggio Specifica il codice lingua del contenuto negli elementi in documenti XHTML.
dir rtl
ltr
Specifica la direzione del testo contenuto negli elementi.
accept media_type
file_extension
audio/*
video/*
image/*
Indica con un elenco separato da virgole, i tipi di file che il server accetta (solo per type="file")
alt Testo Indica un testo alternativo per le immagini (solo per type="image")
checked checked Indica sè l'elemento dove essere pre-selezionato al caricamento della pagina (solo type="checkbox" o type="radio")
disabled disabled Indica sè l'elemento è disabilitato
maxlength Numero Indica il numero massimo di caratteri consentiti in un elemento
name Testo Indica il nome di un elemento
readonly readonly Indica che l'elemento è un campo di sola lettura
size Numero Indica la larghezza in caratteri di un elemento
src URL Indica l'indirizzo dell'immagine da usare (solo per type="image")
type button
checkbox
file
hidden
image
password
radio
reset
submit
text
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Indica il tipo di elemento da visualizzare
value testo Indica il valore di un elemento
NOTE: Questo attributo non è valido per documenti con doctype di tipo Strict
Resta valido per documenti con doctype di tipo Transitional e Frameset.
align top
left
right
middle
bottom
Indica l'allineamento di un immagine (solo per type="image")

Elenco Attributi HTML:

accesskey Valore tasto una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento
contenteditable true
false
Indica se il contenuto di un elemento è modificabile o meno
contextmenu menu (id) Indica un menu contestuale per un elemento, appare il menu contestuale quando un utente fa clic-destro sull'elemento
data-* Valore Utilizzato per memorizzare dati personalizzati privati dalla pagina o applicazione
draggable true
false
auto
Indica se è possibile trascinare l'elemento
dropzone copy
move
link
Indica se i dati trascinati devono essere copiati, spostati, o collegati al rilascio
hidden hidden Indica sè un elemento non è visible
itemid -- API sperimentale (attualmente non deve essere utilizzata)
itemprop -- API sperimentale (attualmente non deve essere utilizzata)
itemref -- API sperimentale (attualmente non deve essere utilizzata)
itemscope -- API sperimentale (attualmente non deve essere utilizzata)
itemtype -- API sperimentale (attualmente non deve essere utilizzata)
spellcheck true
false
Indica se l'elemento ha controllo ortografico e grammaticale
tabindex Numero Sovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato
translate yes
no
Indica se il contenuto di un elemento dovrebbe essere tradotto
autocomplete on
off
Indica se il completamento automatico è abilitato
autofocus autofocus Indica che dovrebbe avere il focus quando la pagina viene caricata
form form (id) Indica a quale form appartiene l'elemento
formaction URL Indica l'indirizzo del file che elaborerà i dati quando il modulo viene inviato (per type="submit" e type="image")
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Indica come i dati del form devono essere codificati per l'invio al server (per type="submit" e type="image")
formmethod get
post
Indica il metodo HTTP per l'invio dei dati (per type="submit" e type="image")
formnovalidate formnovalidate Indica che l'elemento non dovrebbero essere convalidato quando inviato
formtarget _blank
_self
_parent
_top
Indica dove visualizzare la risposta del server dopo l'invio del modulo
list datalist (id) Indica un riferimento all'elemento <datalist> contenete opzioni predefinite
max numero
data
Indica il valore massimo per l'elemento
min numero
data
Indica il valore minimo per l'elemento
multiple multiple Indica che l'utente può inserire più di un valore
pattern regexp Indica un'espressione regolare di confronto per l'elemento
placeholder testo Indica una descrizione del valore atteso per l'elemento
required required Indica che il campo dell'elemento deve essere compilato prima di essere inviato
step numero Indica gli intervalli numerici validi per l'elemento
width pixel Indica la larghezza dell'elemento (solo per type="image")
height pixel Indica l'altezza dell'elemento (solo per type="image")

Attributi Evento:

Attributo Evento Valore Descrizione
onblur Codice Script Lo script viene eseguito quando un elemento perde il focus
onchange Codice Script Lo script viene eseguito quando un elemento controllo perde il focus e il suo valore è stato modificato. Questo attributo si applica ai seguenti elementi: INPUT, SELECT e TEXTAREA
onclick Codice Script Lo script viene eseguito al click del mouse
ondblclick Codice Script Lo script viene eseguito al doppio click del mouse
onfocus Codice Script Lo script viene eseguito quando quando un elemento riceve il focus. Questo attributo può essere usato con i seguenti elementi: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, e BUTTON.
onload Codice Script Lo script viene eseguito al caricamento del documento. Questo attributo può essere usato con gli elementi BODY e FRAMESET.
onmousedown Codice Script Lo script viene eseguito quando viene premuto il pulsante sinistro del mouse
onmousemove Codice Script Lo script viene eseguito quando il puntatore del mouse si muove dentro un elemento
onmouseout Codice Script Lo script viene eseguito quando il puntatore del mouse si muove fuori da un elemento
onmouseover Codice Script Lo script viene eseguito quando il puntatore del mouse si trova sopra un elemento
onmouseup Codice Script Lo script viene eseguito quando il pulsante sinistro del mouse viene rilasciato
onreset Codice Script Lo script viene eseguito quando un modulo viene azzerato. Si applica solo all'elemento FORM.
onselect Codice Script Lo script viene eseguito quando un utente seleziona del testo in un campo di testo. Questo attributo può essere usato con gli elementi INPUT e TEXTAREA.
onsubmit Codice Script Lo script viene eseguito quando viene inviato un modulo. Si applica solo all'elemento FORM.
onkeydown Codice Script Lo script viene eseguito quando viene premuto un tasto
onkeypress Codice Script Lo script viene eseguito quando un tasto viene premuto e rilasciato
onkeyup Codice Script Lo script viene eseguito quando viene rilasciato un tasto
onunload Codice Script Lo script viene eseguito quando un documento viene chiuso. Questo attributo può essere usato con gli elementi BODY e FRAMESET.

Attributi Evento HTML:

onabort Codice Script --
onautocomplete Codice Script --
onautocompleteerror Codice Script --
oncancel Codice Script --
oncanplay Codice Script Lo script viene eseguito quando il browser stima che la risorsa media potrebbe non essere riprodotta con valore di rate corrente fino alla fine senza pause per il buffering
oncanplaythrough Codice Script Lo script viene eseguito quando il browser stima che la risorsa media potrebbe essere riprodotta con valore di rate corrente fino alla fine senza pause per il buffering
onclose Codice Script --
oncontextmenu Codice Script Lo script viene eseguito quando un menu contestuale viene attivato
oncuechange Codice Script Lo script viene eseguito quando uno o più spunti nella traccia sono diventate attive o smesso di essere attiva
ondrag Codice Script Lo script viene eseguito quando un elemento viene trascinato
ondragend Codice Script Lo script viene eseguito al termine di un'operazione di trascinamento
ondragenter Codice Script Lo script viene eseguito quando un elemento viene trascinato su una destinazione di rilascio valida
ondragexit Codice Script --
ondragleave Codice Script Lo script viene eseguito quando un elemento lascia una destinazione di rilascio valida
ondragover Codice Script Lo script viene eseguito quando un elemento viene trascinato su una destinazione di rilascio valida
ondragstart Codice Script Lo script viene eseguito all'inizio di un'operazione di trascinamento
ondrop Codice Script Lo script viene eseguito quando l'elemento trascinato viene rilasciato
ondurationchange Codice Script Lo script viene eseguito quando l'attributo "duration" viene aggiornato.
onemptied Codice Script Lo script viene eseguito quando il file è improvvisamente non disponibile a causa di un errore fatale durante il caricamento o perché il metodo load() è stato richiamato mentre l'algoritmo di selezione delle risorse era già in esecuzione
onended Codice Script Lo script viene eseguito quando il supporto multimediale è arrivare alla fine
onerror Codice Script Lo script viene eseguito quando si verifica un errore
oninput Codice Script Lo script viene eseguito quando un elemento riceve l'input dell'utente
oninvalid Codice Script Lo script viene eseguito quando un elemento non è valido
onloadeddata Codice Script Lo script viene eseguito quando il browser carica i dati multimediali nella posizione di riproduzione corrente per la prima volta
onloadedmetadata Codice Script Lo script viene eseguito quando i metadati (dimensioni, durata, tracce di testo) sono stati caricati
onloadstart Codice Script Lo script viene eseguito quando inizia a caricare i dati multimediali
onmouseenter Codice Script --
onmouseleave Codice Script --
onmousewheel Codice Script --
onpause Codice Script Lo script viene eseguito quando l'utente ha messo in pausa la riproduzione o tramite il metodo pause()
onplay Codice Script Lo script viene eseguito quando il browser ha avviato la riproduzione, tramite il metodo play() o l'attributo "autoplay" ha iniziato la riproduzione
onplaying Codice Script Lo script viene eseguito quando la riproduzione è pronto per iniziare, dopo essere stato messo in pausa o ritardata a causa della mancanza di dati multimediali
onprogress Codice Script Lo script viene eseguito quando il browser sta recuperando dati multimediali
onratechange Codice Script Lo script viene eseguito ogni volta che cambia la velocità di riproduzione
onresize Codice Script Lo script viene eseguito quando la finestra del browser viene ridimensionata
onscroll Codice Script Lo script viene eseguito quando si scorre la barra di scorrimento di un elemento
onseeked Codice Script Lo script viene eseguito quando l'attributo "seeking" è impostato su false per indicare che ricerca è finita, e dopo la posizione di riproduzione corrente è stata cambiata
onseeking Codice Script Lo script viene eseguito quando l'attributo "seeking" è impostata su true per indicare che la ricerca è attiva, e dopo che la posizione di riproduzione ha iniziato a spostarsi in una nuova posizione
onshow Codice Script Lo script viene eseguito quando un elemento <menu> mostra un menu contestuale
onsort Codice Script --
onstalled Codice Script Lo script viene eseguito quando il browser non può recuperare i dati multimediali per qualsiasi motivo
onsuspend Codice Script Lo script viene eseguito in caso di arresto durante il recupero i dati dei media per qualsiasi motivo
ontimeupdate Codice Script Lo script viene eseguito quando la posizione di riproduzione è cambiata
ontoggle Codice Script Lo script viene eseguito quando l'utente apre o chiude l'elemento <details>
onvolumechange Codice Script Lo script viene eseguito ogni volta che l'attributo "volume" o l'attributo "mute" cambia
onwaiting Codice Script Lo script viene eseguito quando l'elemento <video> o <audio> si ferma perché il fotogramma successivo non è ancora disponibile (buffer) in attesa di riprendere
NOTE: Si consiglia di scrivere SEMPRE i tag, gli Attributi e gli Attributi Evento in minuscolo.

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies