<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>
<html>
<head>
<title>Titolo Documento</title>
</head>
<body>
<form id="test-form" action="test-form.php" method="get" onsubmit="return false">
<fieldset>
<legend>Test input</legend>
text: <input type="text" name="text" value="testo" /><br />
password: <input type="password" name="password" value="123456" /><br />
radio: <input type="radio" name="radio" value="" /><br />
checkbox: <input type="checkbox" name="checkbox" value="" /><br />
file: <input type="file" name="file" value="" /><br />
hidden: <input type="hidden" name="hidden" value="" />(non visibile)<br />
image: <input type="image" name="image" value="" src="ow_icon_21.png" /><br />
button: <input type="button" name="button" value="button" /><br />
reset: <input type="reset" name="reset" value="reset" /><br />
submit: <input type="submit" name="submit" value="submit" /><br />
</fieldset>
</form>
</body>
</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>
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 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 | -- | |
onautocomplete |
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 | |
oncanplay |
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 | |
onloaded |
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. |