۝ OraWeb.it ۝ <template>

<TEMPLATE>

Il tag <template> definisce frammenti di codice HTML che può essere clonato

Il tag TEMPLATE permette di dichiarare frammenti di codice HTML che può essere clonato e inserito nel documento, forniscono un metodo per la dichiarazione di sottostrutture DOM inerti e manipolabili per istanziare frammenti di documenti con contenuto identico. Quando le pagine web modificano dinamicamente il contenuto dei documenti (ad esempio nuovi dati provenienti dal server) richiedono frammenti di HTML che possono richiedere ulteriori modifiche prima dell'uso, come l'inserimento di valori appropriati per il contesto di utilizzo. L'elemento consente la dichiarazione dei frammenti di documenti, che sono inutilizzati dal documento quando vengono caricati, ma vengono analizzati come HTML e sono disponibili in fase di esecuzione per l'uso da pagina web.

Categoria: Metadata content , Flow content , Phrasing content

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

I contesti in cui questo elemento può essere utilizzato

Quando è previsto il contenuto Metadata content.
Quando è previsto il contenuto Phrasing content.
Dove sono previsti elementi Script-supporting.
Come un figlio di un elemento <colgroup> che non dispone di un attributo "span".

Contenuto Modello

O: contenuto Metadata content.
Oppure: Flow content.
Oppure: Modello di contenuto dell'elemento <ol> e <ul>.
Oppure: Modello di contenuto dell'elemento <dl>.
Oppure: Modello di contenuto dell'elemento <figure>.
Oppure: Modello di contenuto dell'elemento <ruby>.
Oppure: Modello di contenuto dell'elemento <object>.
Oppure: Modello di contenuto dell'elemento <audio> e <video>.
Oppure: Modello di contenuto dell'elemento <table>.
Oppure: Modello di contenuto dell'elemento <colgroup>.
Oppure: Modello di contenuto dell'elemento <thead>, <tbody> e <tfoot>.
Oppure: Modello di contenuto dell'elemento <tr>.
Oppure: Modello di contenuto dell'elemento <fieldset>.
Oppure: Modello di contenuto dell'elemento <select>.
Oppure: Modello di contenuto dell'elemento <details>.
Oppure: Modello di contenuto dell'elemento <menu> il cui attributo "type" è in stato di menu a comparsa (popup).

Esempio: Tag TEMPLATE

Esempio: <TEMPLATE>

CODE: HTML preleva codice

```
<!DOCTYPE html>
```
```
<html>
```
```
  <head>
```
```
    <meta charset="utf-8" />
```
```
    <title>Cat data</title>
```
```
    <style type="text/css">
```
```
      table { background: #000; }
```

      table td, table th { background: #fff; padding: 5px; }

```
    </style>
```
```
<script type="text/javascript">
```
```
// <![CDATA[
```

// I dati sono memorizzati qui, ma potrebbero venire dal server

```
var data = [
```

 { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },

 { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },

```
];
```
```
// ]]>
```
```
</script>
```
```
  </head>
```
```
  <body>
```
```
<table>
```
```
 <thead>
```
```
  <tr>
```
```
   <th>Name <th>Color <th>Sex <th>Legs
```
```
 <tbody>
```
```
 
```
```
  <template id="row">
```
```
 
```
```
   <tr><td><td><td><td></tr>
```
```
 
```
```
  </template>
```
```
 
```
```
</table>
```
```
<script type="text/javascript">
```
```
// <![CDATA[
```

 var template = document.querySelector('#row');

 for (var i = 0; i < data.length; i += 1) {

```
   var cat = data[i];
```

   var clone = template.content.cloneNode(true);

   var cells = clone.querySelectorAll('td');

```
   cells[0].textContent = cat.name;
```
```
   cells[1].textContent = cat.color;
```
```
   cells[2].textContent = cat.sex;
```
```
   cells[3].textContent = cat.legs;
```

   template.parentNode.appendChild(clone);

```
 }
```
```
// ]]>
```
```
</script>
```
```
  </body>
```
```
</html>
```

Risultato: <template>

Name	Color	Sex	Legs

Note:
Le indicazioni dei Browser supportati sono indicative, grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

+22

+26

+7.1

+15.0

Supporto Browser

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.

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

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.

<TEMPLATE>

Il tag <template> definisce frammenti di codice HTML che può essere clonato

I contesti in cui questo elemento può essere utilizzato

Contenuto Modello

Esempio: Tag TEMPLATE

Supporto Browser

Leggenda

Follow us

Quick Links

Information

Contact Information