Gli elementi in HTML hanno attributi; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.
Lista degli attributi
Nome dell'attributo | Elementi supportati | Descrizione |
---|---|---|
accept | <form> , <input> |
Lista di tipi che il server accetta, normalmente un file di tipo type. |
accept-charset | <form> |
Lista delle codifiche di caratteri supportate. |
accesskey | Attributo globale | Definisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento. |
action | <form> |
L' URI di un programma che processa le informazioni inviate per mezzo di un modulo. |
align | <applet> , <caption> , <col> , <colgroup> , <hr> , <iframe> , <img> , <table> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr> |
Specifica l'allineamento orizzontale dell'elemento. |
alt | Testo alternativo in caso un immagine non possa essere visualizzata. | |
async | <script> |
Indica che lo script deve essere eseguito in modalità asincrona. |
autocomplete | <form> , <input> |
Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser. |
autofocus | <button> , <input> , <keygen> , <select> , <textarea> |
L'elemento riceve il focus automaticamente dopo il caricamento della pagina. |
autoplay | <audio> , <video> |
L'audio o il video devo partire appena possibile. |
bgcolor | <body> , <col> , <colgroup> , <marquee> , <table> , <tbody> , <tfoot> , <td> , <th> , <tr> |
Colore di sottofondo dell'elemento. Nota: Questo è un attibuto ereditato. Utilizzare la proprietà |
border | <img> , <object> , <table> |
La larghezza del bordo. Nota: Questo è un attributo ereditato. Utilizzare la proprietà CSS |
buffered | <audio> , <video> |
Contiene l'intervallo di tempo del media già bufferizzato. |
challenge | <keygen> |
Una stringa che viene presentata con la chiave pubblica. |
charset | <meta> , <script> |
Dichiara la codifica di caratteri della pagina o dello script. |
checked | <command> , <input> |
Indica che l'elemento deve essere conrollato al caricamento della pagina. |
cite | <blockquote> , <del> , <ins> , <q> |
Contiene un URI che punta alla sorgente di quanto citato o modificato. |
class | Attributo globale | Usato spesso con i CSS per modellare elementi con proprietà comuni. |
code | <applet> |
Specifica l'URL del file class della applet che deve essere caricato ed eseguito. |
codebase | <applet> |
Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet referenziata dall'attributo code è memorizzato. |
color | <basefont> , <font> , <hr> |
Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB. Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS |
cols | <textarea> |
Definisce il numero delle colonne in un'area di testo. |
colspan | <td> , <th> |
L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi. |
content | <meta> |
Un valore associato con http-equiv o name a seconda del contesto. |
contenteditable | Attributo globale | Indica che il contenuto dell'elemento è editabile. |
contextmenu | Attributo globale | Definisce l'ID di un elemento <menu> che servirà come menù contestuale dell'elemento. |
controls | <audio> , <video> |
Indica che il browser deve visualizzare i controlli di playack per l'utente. |
coords | <area> |
Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione. |
data | <object> |
Specifica l'URL della risorsa. |
datetime | <del> , <ins> , <time> |
Indica data e ora associate con l'elemento. |
default | <track> |
Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente. |
defer | <script> |
Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata. |
dir | Attributo globale | Definisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra) |
dirname | <input> , <textarea> |
|
disabled | <button> , <command> , <fieldset> , <input> , <keygen> , <optgroup> , <option> , <select> , <textarea> |
Indica che l'utente non può interagire con l'elemento. |
download | <a> , <area> |
Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa. |
draggable | Attributo globale | Definisce l'elemeno come trascinabile. |
dropzone | Attributo globale | Indica che l'elemento consente l'eliminazione dei contenuti da esso. |
enctype | <form> |
Definisce il tipo di contenuto dei dati del form quando il method è POST. |
for | <label> , <output> |
Descrive elementi che appartengono a questo. |
form | <button> , <fieldset> , <input> , <keygen> , <label> , <meter> , <object> , <output> , <progress> , <select> , <textarea> |
Indicano il form al quale l'elemento si riferisce. |
headers | <td> , <th> |
L'ID che gli elementi <th> applicano a quest'ultimi. |
height | <canvas> , <embed> , <iframe> , <img> , <input> , <object> , <video> |
Note: In qualche caso, come per <div> , questo attributo è ereditato, e quindi deve essere usata la proprietà CSS height in sostituzione. In altri casi, come per <canvas> , l'altezza deve essere specificata con questo attributo. |
hidden | Global attribute | Indica la rilevanza di un elemento. |
high | <meter> |
Indica il limite inferiore del range superiore |
href | <a> , <area> , <base> , <link> |
L'URL di una risorsa collegata. |
hreflang | <a> , <area> , <link> |
Specifica la lingua della risorsa collegata. |
http-equiv | <meta> |
|
icon | <command> |
Spefifica una figura che rappresenta il comando. |
id | Attributo globale | Spesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico. |
ismap | <img> |
Indica che l'immagine è una parte della mappa immagine lato server. |
itemprop | Attributo globale | |
keytype | <keygen> |
Specifica il tipo della chiave da generata. |
kind | <track> |
Specifica il tipo della traccia di testo. |
label | <track> |
Specifica un titolo leggibile dall'utente della traccia di testo. |
lang | Attributo globale | Definisce la lingua usata nell'elemento. |
language | <script> |
Definisce la lingua dello script usato nell'elemento. |
list | <input> |
Identifica una lista di opzioni predefinite da suggerire all'utente. |
loop | <audio> , <bgsound> , <marquee> , <video> |
Indica che il media deve essere riprodotto dall'inizio quando terminato. |
low | <meter> |
Indica il valore limite superiore del campo inferiore. |
manifest | <html> |
Specifica l'URL del manifesto della cache del documento. |
max | <input> , <meter> , <progress> |
Indica il valore massimo consentito. |
maxlength | <input> , <textarea> |
Definisce il numero massimo di caratteri consentiti nell'elemento. |
media | <a> , <area> , <link> , <source> , <style> |
Specifica un suggerimento del media per il quale è stata disegnata la risorsa. |
method | <form> |
Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST. |
min | <input> , <meter> |
Indica il valore minimo consentito. |
multiple | <input> , <select> |
Indica che possono essere inseriti valori multipi come input ad un tipo email o file . |
name | <button> , <form> , <fieldset> , <iframe> , <input> , <keygen> , <object> , <output> , <select> , <textarea> , <map> , <meta> , <param> |
Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso. |
novalidate | <form> |
Questo attributo indica che il form non deve essere validato alla sottomissione. |
open | <details> |
Indica se i dettagli verranno visualizzati al caricamento della pagina. |
optimum | <meter> |
Indica il valore numerico ottimale. |
pattern | <input> |
Definisce un'espressione regolare con la quale validare il valore dell'elemento. |
ping | <a> , <area> |
|
placeholder | <input> , <textarea> |
Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo. |
poster | <video> |
Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca. |
preload | <audio> , <video> |
Indica se l'intera risorsa, parte di essa o niente deve essere precaricata. |
pubdate | <time> |
Indica che queste data e ora sono dati dell'elemento progenitore più vicino <article> . |
radiogroup | <command> |
|
readonly | <input> , <textarea> |
Indica se l'elemento è editabile. |
rel | <a> , <area> , <link> |
Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento. |
required | <input> , <select> , <textarea> |
Indica se questo elemento deve essere compilato o meno. |
reversed | <ol> |
Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente. |
rows | <textarea> |
Definisce il numero di righe in area di testo. |
rowspan | <td> , <th> |
Definisce il numero di righe sopra le quali si estende la cella della tabella. |
sandbox | <iframe> |
|
spellcheck | Attributo globale | Indica se il controllo ortografico è consentito per l'elemento. |
scope | <th> |
|
scoped | <style> |
|
seamless | <iframe> |
|
selected | <option> |
Definisce un valore che sarà selezionato al caricamento della pagina. |
shape | <a> , <area> |
|
size | <input> , <select> |
Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri. |
sizes | <link> |
|
span | <col> , <colgroup> |
|
src | <audio> , <embed> , <iframe> , <img> , <input> , <script> , <source> , <track> , <video> |
L'URL del contenuto incorporabile. |
srcdoc | <iframe> |
|
srclang | <track> |
|
start | <ol> |
Definisce il primo numero se diverso da 1. |
step | <input> |
|
style | Attributo globale | Definisce gli stili CSS che sovrasteranno gli stili precedentemente impostati. |
summary | <table> |
|
tabindex | Attributo globale | Sovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo. |
target | <a> , <area> , <base> , <form> |
|
title | Attributo globale | Testo da visualizzare in un suggerimento quando si passa sopra all'elemento. |
type | <button> , <input> , <command> , <embed> , <object> , <script> , <source> , <style> , <menu> |
Definisce il tipo dell'elemento. |
usemap | <img> , <input> , <object> |
|
value | <button> , <option> , <input> , <li> , <meter> , <progress> , <param> |
Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina. |
width | <canvas> , <embed> , <iframe> , <img> , <input> , <object> , <video> |
Nota: In qualche caso, come per <div> , questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS width in sostituzione. In altri casi, come per <canvas> , la larghezza deve essere specificata con questo attributo. |
wrap | <textarea> |
Indica se il testo deve essere circondato. |
Attributi di contenuto contro attributi IDL
In HTML, molti attributi hanno due facce: l'attributo di contenuto e l'attributo IDL.
L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite element.setAttribute()
o element.getAttribute()
. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il maxlength
di un elemento <input>
a 42 usando l'attributo di contenuto, occorre chiamare setAttribute("maxlength", "42")
su quell'elemento.
L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come element.foo
. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.
Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il type
di default per gli elementi <input>
è "text", se viene impostato come input.type="foobar"
, l'elemento <input>
sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL type
ritornerà la stringa "text".
Gli attributi IDL non sono sempre stringhe; ad esempio, input.maxlength
è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi input.maxlength
ritornerà sempre un numero e quando si imposta input.maxlength
,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.
L'attributo IDL può riflettere altri tipi come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà le norme stabilite nelle specifiche, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi si comportano stranamente (select.size
, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.