img
PORTALE 
HomeSito
Home
Sintesi
Guida HtmL5
Intro HtmL5
Pag. 1
Pag. 2
Pag. 3
Pag. 4
Pag. 5
Pag. 6
Elementi Html5
Caratt.Speciali
Guida Css3
Intro Css3
Pag. 1
Pag. 2
Pag. 3
Pag. 4
Pag. 5
Regole
Proprietà
Guida JScript
Intro JS
Pag. 1
Pag. 2
Pag. 3
Pag. 4
Pag. 5
Pag. 6
ECMA 5
Guida JQuery
Intro jQuery
Pag. 1
Pag. 2
Pag. 3
Pag. 4
Pag. 5
Pag. 6
Selettori
Guida Grafica
Intro Grafica
Guida Colore
TabelleColore
Layout Colore
Layout Pro
Pratica
Intro Pratica
Esempi Html
Pratica Html
Pratica CSS
Pratica JScript
Es.Calcolatrice
Es.Modulo
Ajax 1
Ajax 2
MappaSito 

"Esempi Pratici HtmL"

Il Flusso del testo

Titoli

Uscita GraficaSorgente

Titolo 1

<h1>Titolo 1</h1>

Titolo 2

<h2>Titolo 2</h2>

Titolo 3

<h3>Titolo 3</h3>

Titolo 4

<h4>Titolo 4</h4>
Titolo 5
<h5>Titolo 5</h5>
Titolo 6
<h6>Titolo 6</h6>

Paragrafi

Uscita GraficaSorgente

paragrafo1

paragrafo2

paragrafo3
Interruzione di linea

paragrafo4

 
<p>paragrafo1</p>
<p>paragrafo2</p>
<p>paragrafo3<br>Interruzione di linea (br)</p>
<p>paragrafo4</p>

Formattazione

Formattazione semantica

Uscita GraficaSorgente
<em>: Esempio di testo. <em>Esempio di testo.</em>
<strong>: Esempio di testo. <strong>Esempio di testo.</strong>
<cite>: Esempio di testo. <cite>Esempio di testo.</cite>
<dfn>: Esempio di testo. <dfn> Esempio di testo.</dfn>
<code>: Esempio di testo. <code>Esempio di testo.</code>
<samp>: Esempio di testo. <samp>Esempio di testo.</samp>
<kbd>: Esempio di testo. <kbd>Esempio di testo.</kbd>
<var>: Esempio di testo. <var>Esempio di testo.</var>
<abbr>: Esempio di testo. <abbr>Esempio di testo.</abbr>
<acronym>: Esempio di testo. <acronym>Esempio di testo.</acronym>
<q>: Esempio di testo. <q>Esempio di testo.</q>

<blockquote>:

Una citazione più lunga.

 <blockquote> <p> Una citazione più lunga.</p> </blockquote>
<pre>
          Testo preformattato
   che va a capo senza bisogno di tag speciali

<pre>
          Testo preformattato
   che va a capo senza bisogno di tag speciali
</pre>

<ins>Testo inserito
<del>Testo cancellato 

<p>
   <ins>Testo inserito</ins>
     <br>
   <del>Testo cancellato</del>
</p>

<address>:

via Roma, 3 - mailto: mario.rossi@mail.it
 <address> via Roma, 3 - mailto: mario.rossi@mail.it</address>

Formattazione di base

Uscita GraficaSorgente
<tt>: Esempio di testo. <tt> Esempio di testo.</tt>
<i>: Esempio di testo. <i> Esempio di testo.</i>
<b>: Esempio di testo. <b> Esempio di testo.</b>
<big>: Esempio di testo. <big> Esempio di testo.</big>
<small>: Esempio di testo. <small> Esempio di testo.</small>
<sub>: Esempio di testo. <sub> Esempio di testo.</sub>
<sup>: Esempio di testo. <sup> Esempio di testo.</sup>

Liste

Ordinate

Uscita GraficaSorgente
  1. Primo elemento della lista
  2. Secondo elemento della lista
  3. Terzo elemento della lista
 
<ol>
   <li>Primo elemento della lista</li>
   <li>Secondo elemento della lista</li>
   <li>Terzo elemento della lista</li>
</ol>

Non ordinate

Uscita GraficaSorgente
  • Primo elemento della lista
  • Secondo elemento della lista
  • Terzo elemento della lista
 
<ul>
   <li>Primo elemento della lista</li>
   <li>Secondo elemento della lista</li>
   <li>Terzo elemento della lista</li>
</ul>

Di termini

Uscita GraficaSorgente
Termine1
Significato termine 1
Termine 2
Significato termine 2
Termine 3
Significato termine 3
 
 <dl>
    <dt>Termine1</dt>
       <dd>Significato termine 1</dd>
    <dt>Termine 2</dt>
       <dd>Significato termine 2</dd>    
    <dt>Termine 3</dt>
       <dd>Significato termine 3</dd>
 </dl>

Collegamenti

Uscita GraficaSorgente
Collegamento semplice a nuovaPagina <a href="nuovaPagina.php">Collegamento semplice a nuovaPagina</a>
"segnaposto" alla stessa pagina <a id="segnaposto">Collegamento interno nel punto "segnaposto" della stessa pagina</a>
Collegamento con accesso dal tasto a della tastiera <a href="nuovaPagina.php" accesskey="a">Collegamento con accesso dal tasto a della tastiera</a>
Collegamento con title <a href="nuovaPagina.php" title="Titolo del link">Collegamento con title</a>


Le Immagini

Uscita GraficaSorgente

Standard: Testo alternativo

<img src="Home.gif" alt="Testo alternativo" />

Non caricata: Testo alternativo

<img src="Home1.gif" alt="Testo alternativo" />

Dimensione orizzontale=100: Testo alternativo

<img src="Home.gif" width="100" alt="Testo alternativo" />

Dimensione verticale=100: Testo alternativo

<img src="Home.gif" height="100" alt="Testo alternativo" />

Dimensioni 50x100: Testo alternativo

<img src="Home.gif" width="50" height="100" alt="Testo alternativo"/>

Link con immagini

Uscita GraficaSorgente

Normale:
Testo alternativo 

<a href="nuovaPagina.php"><img src="Home.gif" alt="
Testo alternativo"/></a>

Server-side map: Testo alternativo

<a href="pippo.php"><img src="Home.gif"ismap="ismap"alt=" Testo alternat"/></a>

prima seconda Client-side map con aree: Testo alternativo 

<map id="mappa" name="mappa">
   <area alt="prima" shape="rect" coords="0,0,5,5"
   href="area1.php" />
   <area alt="seconda" shape="circle" coords="20,20,5"
   href="area2.php" />
</map>	
<img src="Home.gif" usemap="mappa" alt="
Testo alternativo" />

area1

area2

Client-side map con link: Testo alternativo 

<map id="mappa2" name="mappa2">
   <p> <a shape="rect" coords="0,0,5,5"
   href="area1.php">area1</a> </p>
   <p> <a shape="circle" coords="20,20,5"
   href="area2.php">area2</a> </p>
</map>	
<img src="Home.gif" usemap="mappa2" alt="
Testo alternativo" />

Client-side map mescolata a link esterno: Testo alternativo

<a href="pippo.php"> <img src="Home.gif" usemap="mappa" alt="Testo alt"/> </a>

Tabelle

Tabella di base

Uscita GraficaSorgente
Intest. 1 Intest. 2 Intest. 3
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table>
  <tr>
    <th>Intest. 1</th>
    <th>Intest. 2</th>
    <th>Intest. 3</th>
  </tr>
  <tr>
    <td>Cella 1,1</td>
    <td>Cella 1,2</td>
    <td>Cella 1,3</td>
  </tr>
  <tr>
    <td>Cella 2,1</td>
    <td>Cella 2,2</td>
    <td>Cella 2,3</td>
  </tr>
  <tr>
    <td>Cella 3,1</td>
    <td>Cella 3,2</td>
    <td>Cella 3,3</td>
  </tr>
</table>

Bordo e celle non specificate

Uscita GraficaSorgente
Intest. 1 Intest. 2
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 
<table border="1">
  <tr>
    <th>Intest. 1</th>
    <th>Intest. 2</th>
  </tr>
  <tr>
    <td>Cella 1,1</td>
    <td>Cella 1,2</td>
    <td>Cella 1,3</td>
  </tr>
  <tr>
    <td>Cella 2,1</td>
    <td>Cella 2,2</td>
    <td>Cella 2,3</td>
  </tr>
  <tr>
    <td>Cella 3,1</td>
  </tr>
</table>

Cell padding e spacing

Uscita GraficaSorgente
cellpadding=10
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1" cellpadding="10"> 
<caption>cellpadding=10</caption>
  <tr>
    <td>Cella 1,1</td>
    <td>Cella 1,2</td>
    <td>Cella 1,3</td>
  </tr>
  <tr>
    <td>Cella 2,1</td>
    <td>Cella 2,2</td>
    <td>Cella 2,3</td>
  </tr>
  <tr>
    <td>Cella 3,1</td>
    <td>Cella 3,2</td>
    <td>Cella 3,3</td>
  </tr>
</table>
cellspacing=10
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1" cellspacing="10"> 
<caption>cellspacing=10</caption>
   <tr>
     <td>Cella 1,1</td>
     <td>Cella 1,2</td>
     <td>Cella 1,3</td>
   </tr>
   <tr>
     <td>Cella 2,1</td>
     <td>Cella 2,2</td>
     <td>Cella 2,3</td>
   </tr>
   <tr>
     <td>Cella 3,1</td>
     <td>Cella 3,2</td>
     <td>Cella 3,3</td>
   </tr>
   </table>

Col e Row Span

Uscita GraficaSorgente
Cella 1,1 Cella 1,2
Cella 2,2 Cella 2,3
Cella 3,2 Cella 3,3 
<table border="1">
  <tr>
    <td rowspan="3">Cella 1,1</td>
    <td colspan="2">Cella 1,2</td>
  </tr>
  <tr>
    <td>Cella 2,2</td>
    <td>Cella 2,3</td>
  </tr>
  <tr>
    <td>Cella 3,2</td>
    <td>Cella 3,3</td>
  </tr>
</table>

Frames e Rules

Uscita GraficaSorgente
frame=visides, rules=cols
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1" frame="vsides" rules="cols">
  <caption>frame=visides, rules=cols</caption>
  <tr>
    <td>Cella 1,1</td>
    <td>Cella 1,2</td>
    <td>Cella 1,3</td>
  </tr>
  <tr>
    <td>Cella 2,1</td>
    <td>Cella 2,2</td>
    <td>Cella 2,3</td>
  </tr>
  <tr>
    <td>Cella 3,1</td>
    <td>Cella 3,2</td>
    <td>Cella 3,3</td>
  </tr>
</table>
frame=hisides, rules=rows
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1" frame="hsides" rules="rows">
  <caption>frame=hisides, rules=rows</caption>
  <tr>
    <td>Cella 1,1</td>
    <td>Cella 1,2</td>
    <td>Cella 1,3</td>
  </tr>
  <tr>
    <td>Cella 2,1</td>
    <td>Cella 2,2</td>
    <td>Cella 2,3</td>
  </tr>
  <tr>
    <td>Cella 3,1</td>
    <td>Cella 3,2</td>
    <td>Cella 3,3</td>
  </tr>
</table>
frame=below, rules=none
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1" frame="below" rules="none">
  <caption>frame=below, rules=none</caption>
  <tr>
    <td>Cella 1,1</td>
    <td>Cella 1,2</td>
    <td>Cella 1,3</td>
  </tr>
  <tr>
    <td>Cella 2,1</td>
    <td>Cella 2,2</td>
    <td>Cella 2,3</td>
  </tr>
  <tr>
    <td>Cella 3,1</td>
    <td>Cella 3,2</td>
    <td>Cella 3,3</td>
  </tr>
</table>

Header, Footer e Body

Uscita GraficaSorgente
Tabella con thead
Intest.1 Intest.2 Intest.3
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1">
  <caption>Tabella con thead</caption>
  <thead>
    <tr>
      <th>Intest.1</th>
      <th>Intest.2</th>
      <th>Intest.3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>
Tabella con thead e tfoot
Intest.1 Intest.2 Intest.3
Chiusura1 Chiusura2 Chiusura3
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1">
  <caption>Tabella con thead e tfoot</caption>
  <thead>
    <tr>
      <th>Intest.1</th>
      <th>Intest.2</th>
      <th>Intest.3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Chiusura1</td>
      <td>Chiusura2</td>
      <td>Chiusura3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>

Carattersitiche delle colonne

Uscita GraficaSorgente
Tabella con colonne predefinite (allineamento e ampiezza)
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1">
  <caption>Tabella con colonne predefinite 
  (allineamento e ampiezza)</caption>
  <col align="left" width="50pt" valign="top" />
  <col align="center" width="100pt" />
  <col align="right" width="70pt" valign="bottom" />
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>
Tabella con colonne predefinite (definizione multipla con span)
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1">
  <caption>Tabella con colonne predefinite 
  (definizione multipla con span)</caption>
  <col align="left" width="50pt" valign="top" />
  <col align="center" width="100pt" span="2" />
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>
Tabella con colonne predefinite (colonna omessa)
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1">
  <caption>Tabella con colonne predefinite 
  (colonna omessa)</caption>
  <col align="left" width="50pt" valign="top" />
  <col align="center" width="100pt" />
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>

Gruppi di colonne

Uscita GraficaSorgente
Tabella con due gruppi di colonne
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1">
  <caption>Tabella con due gruppi di colonne<
  /caption>
  <colgroup align="right" width="150pt" valign="
  bottom" span="2" />
  <colgroup align="left" width="270pt" valign="top" />
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>
Tabella con due gruppi di colonne, rules=groups
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1" rules="groups">
  <caption>Tabella con due gruppi di colonne, 
  rules=groups< /caption>
  <colgroup align="right" width="150pt" valign="
  bottom" span="2" />
  <colgroup align="left" width="270pt" valign="top" />
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>
Tabella con due gruppi di colonne, ciascuna definita separatemente
Cella 1,1 Cella 1,2 Cella 1,3
Cella 2,1 Cella 2,2 Cella 2,3
Cella 3,1 Cella 3,2 Cella 3,3 
<table border="1">
  <caption>Tabella con due gruppi di colonne, 
     ciascuna definita separatemente</caption>
  <colgroup align="right" width="150pt" 
  valign="bottom">
    <col align="left" width="50pt" valign="top" />
    <col align="center" width="100pt" />
  </colgroup>
  <colgroup align="left" width="270pt" valign="top" />
  <tbody>
    <tr>
      <td>Cella 1,1</td>
      <td>Cella 1,2</td>
      <td>Cella 1,3</td>
    </tr>
    <tr>
      <td>Cella 2,1</td>
      <td>Cella 2,2</td>
      <td>Cella 2,3</td>
    </tr>
    <tr>
      <td>Cella 3,1</td>
      <td>Cella 3,2</td>
      <td>Cella 3,3</td>
    </tr>
  </tbody>
</table>

Moduli, Form

Tipologie di input

Uscita GraficaSorgente
Input (type=button): <input type="button" name="i1" value="valore" />
Input (type=text): <input type="text" name="i2" value="valore" />
Input (type=checkbox): <input type="checkbox" name="i3" value="valore" checked="checked" />
Input (type=file): <input type="file" name="i4" value="valore" />
Input (type=password): <input type="password" name="i5" value="valore" />
Input (type=radio): <input type="radio" name="i6" value="valore" /> <input type="radio" name="i6" value="valore2" checked="checked" />
Input (type=reset): <input type="reset" name="i7" value="valore" />
Input (type=submit): <input type="submit" name="i8" value="valore" />
Input (type=image): <input type="image" name="i9" value="valore" src="Home.gif" />

Campi disabilitati...

Uscita GraficaSorgente
Input (type=button): <input type="button" name="i1d" value="valore" disabled="disabled" />
Input (type=text): <input type="text" name="i2d" value="valore" disabled="disabled" />
Input (type=checkbox): <input type="checkbox" name="i3d" value="valore" checked="checked" disabled="disabled" />
Input (type=file): <input type="file" name="i4d" value="valore" disabled="disabled" />
Input (type=password): <input type="password" name="i5d" value="valore" disabled="disabled" />
Input (type=radio): <input type="radio" name="i6d" value="valore" disabled="disabled"/> <input type="radio" name="i6d" value="valore2" checked="checked" disabled="disabled" />
Input (type=reset): <input type="reset" name="i7d" value="valore" disabled="disabled" />
Input (type=submit): <input type="submit" name="i8d" value="valore" disabled="disabled" />
Input (type=image): <input type="image" name="i9d" value="valore" src="Home.gif" disabled="disabled" />

Campi readonly...

Uscita GraficaSorgente
Input (type=button): <input type="button" name="i1r" value="valore" readonly="readonly" />
Input (type=text): <input type="text" name="i2r" value="valore" readonly="readonly" />
Input (type=checkbox): <input type="checkbox" name="i3r" value="valore" checked="checked" readonly="readonly" />
Input (type=file): <input type="file" name="i4r" value="valore" readonly="readonly" />
Input (type=password): <input type="password" name="i5r" value="valore" readonly="readonly" />
Input (type=radio): <input type="radio" name="i6r" value="valore" readonly="readonly"/> <input type="radio" name="i6r" value="valore2" checked="checked" readonly="readonly" />
Input (type=reset): <input type="reset" name="i7r" value="valore" readonly="readonly" />
Input (type=submit): <input type="submit" name="i8r" value="valore" readonly="readonly" />
Input (type=image): <input type="image" name="i9r" value="valore" src="Home.gif" readonly="readonly" />

Dimensione dei campi...

Uscita GraficaSorgente
Input (type=button): <input type="button" name="i1s" value="valore" size="100" />
Input (type=text): <input type="text" name="i2s" value="valore" size="100" />
Input (type=checkbox): <input type="checkbox" name="i3s" value="valore" checked="checked" size="100" />
Input (type=file): <input type="file" name="i4s" value="valore" size="100" />
Input (type=password): <input type="password" name="i5s" value="valore" size="100" />
Input (type=radio): <input type="radio" name="i6s" value="valore" /> <input type="radio" name="i6s" value="valore2" checked="checked" size="100" />
Input (type=reset): <input type="reset" name="i7s" value="valore" size="100" />
Input (type=submit): <input type="submit" name="i8s" value="valore" size="100" />
Input (type=image): <input type="image" name="i9s" value="valore" src="Home.gif" size="100" />

Textarea

Uscita GraficaSorgente
<textarea rows="10" cols="50" name="i10">Testo della textarea</textarea>

Select

Uscita GraficaSorgente
Select (size=1)
 
<select name="i11" size="1">
  <option>Opzione senza label e valore</option>
  <option value="v1">Opzione senza label</option>
  <option value="v2" label="label3">Opzione con 
  label</option>
  <option value="v3" label="label4"></option>
  <option disabled="disabled">
  Opzione disabilitata</option>
  <option selected="selected">
  Opzione selezionata</option>
</select>
Select (size=3) 
<select name="i12" size="3">
  <option>Opzione senza label e valore</option>
  <option value="v1">Opzione senza label</option>
  <option value="v2" label="label3">Opzione con 
  label</option>
  <option disabled="disabled">
  Opzione disabilitata</option>
  <option selected="selected">
  Opzione selezionata</option>
</select>
Select con gruppi (size=1) 
<select name="i13" size="1">
  <optgroup label="gruppo1">
    <option>Opzione senza label e valore</option>
    <option value="v1">Opzione senza label</option>
  </optgroup>
  <optgroup label="gruppo2">
    <option value="v2" label="label3">Opzione con 
    label</option>
    <option disabled="disabled">
    Opzione disabilitata</option>
  </optgroup>
  <option selected="selected">
  Opzione selezionata</option>
</select>
Select con gruppi (size=3) 
<select name="i14" size="3">
  <optgroup label="gruppo1">
    <option>Opzione senza label e valore</option>
    <option value="v1">Opzione senza label</option>
  </optgroup>
  <optgroup label="gruppo2">
    <option value="v2" label="label3">Opzione con 
    label</option>
    <option disabled="disabled">
    Opzione disabilitata</option>
  </optgroup>
  <option selected="selected">
  Opzione selezionata</option>
</select>
Select multipla (size=1) 
<select name="i15" size="1" multiple="multiple">
  <option>Opzione senza label e valore</option>
  <option value="v1">Opzione senza label</option>
  <option value="v2" label="label3">Opzione con 
  label</option>
  <option disabled="disabled">
  Opzione disabilitata</option>
  <option selected="selected">
  Opzione selezionata</option>
</select>
Select multipla (size=3) 
<select name="i16" size="3" multiple="multiple">
  <option>Opzione senza label e valore</option>
  <option value="v1">Opzione senza label</option>
  <option value="v2" label="label3">Opzione con 
  label</option>
  <option disabled="disabled">
  Opzione disabilitata</option>
  <option selected="selected">
  Opzione selezionata</option>
</select>

Bottoni

Uscita GraficaSorgente
<button name="i17" value="valore" type="submit">contenuto (submit)</button>
<button name="i18" value="valore" type="reset">contenuto (reset)</button>
<button name="i19" value="valore" type="button">contenuto (button)</button>
<button name="i20" value="valore" type="button"> <p>contenuto</p> <hr /> <p>articolato</p> </button>
<button name="i20b" value="valore" type="button"> <p>contenuto</p> <hr /> <p><img src="Home.gif" alt="Testo alternativo" /></p> <p>articolato</p> </button>

Label

Uscita GraficaSorgente
Campo: Label: Campo: <input type="text" name="i21" id="Idi21" /> Label: <label for="Idi21">Label per il campo</label>
Campo disabilitato: Label: Campo disabilitato: <input type="text" name="i22" id="Idi22" disabled="disabled" /> Label: <label for="Idi22">Label per il campo</label>

Campi raggruppati (fieldset)

Uscita GraficaSorgente
Input (type=button):
Input (type=text):
Input (type=checkbox):
Input (type=file):

Legenda del fieldset Input (type=password):
Input (type=radio):
Input (type=reset):
Input (type=submit):
Input (type=image): 
<fieldset>				
   <input type="button" name="i23" value="valore" />
   <input type="text" name="i24" value="valore" />
   <input type="checkbox" name="i25" value="valore"
   checked="checked" />
   <input type="file" name="i26" value="valore" />
</fieldset>

<fieldset>
<legend>Legenda del secondo fieldset</legend>
   <input type="password" name="i27" value="valore" />
   <input type="radio" name="i28" value="valore" />
   <input type="radio" name="i29" value="valore2"
   checked="checked" />
   <input type="reset" name="i30" value="valore" />
   <input type="submit" name="i31" value="valore" />
   <input type="image" name="i32" value="valore"
   src="Home.gif" />
</fieldset>