[HTML] [attributo] type

Nel caso di tag <button>, il valore dell’attributo type può essere:

1. button, che costruisce un bottone generico (generalmente usato per attivare uno script):

   <button type="button">OK</button>
   

   Vedi risultato

   OK
2. submit, che costruisce il bottone di un form:

   <form>
     <button type="submit">OK</button>
   </form>
   

   Vedi risultato

   OK
3. reset, che costruisce un bottone di reset di un form:

   <form>
     <input type="text" placeholder="inserisci un testo qui e poi clicca sul bottone">
     <button type="reset">cancella</button>
   </form>
   

   Vedi risultato

   
   cancella
   

in costruzione.

in costruzione

Nel caso di tag <input>, il valore dell’attributo type può essere uno dei seguenti (con la precisazione che, se manca o se ha un valore non riconosciuto o non ammesso, come ad es. type="ambarabà", l’input avrà automaticamente attributo type="text"):

1. button, che costruisce un bottone generico (generalmente usato per attivare uno script):

   <input type="button">
   

   Vedi risultato
2. checkbox, che costruisce una casella di controllo per la scelta tra valori preimpostati, in modo non alternativo tra loro (tale esigenza è soddisfatta dall’attributo radio):

   <form>
     A: <input type="checkbox">
     B: <input type="checkbox">
   </form>
   

   Vedi risultato

   A:
   B:
   
3. color, che costruisce un selettore (picker) di colori (da una tavolozza o palette), eventualmente indicando il colore predefinito (in codice hex cioè esadecimale) mediante l’ulteriore attributo value:

   Scegli il colore: <input id="scegli_colore" type="color" value="#6699ff" onchange="javascript:document.getElementById('colore_scelto').value = document.getElementById('scegli_colore').value;">
   Codice Hex del colore scelto: <input type="text" id="colore_scelto" type="text" readonly value="#6699ff">
   

   Vedi risultato

   Scegli il colore:
   Codice Hex del colore scelto:
4. date, che costruisce un campo data (che è possibile selezionare da un calendario), eventualmente tra un valore minimo (mediante l’ulteriore attributo min) ed uno massimo (mediante l’ulteriore attributo max) e con l’indicazione, sempre eventuale, dello step tra i predetti due (mediante l’ulteriore attributo step) che altrimenti è di default 1 giorno:

   <input type="date" min="2016-01-01" max="2016-12-31" step="3">
   

   Vedi risultato
5. datetime-local, che costruisce un campo data e orario (che è possibile selezionare da un calendario), eventualmente tra un valore minimo (mediante l’ulteriore attributo min) ed uno massimo (mediante l’ulteriore attributo max) e con l’indicazione, sempre eventuale, dello step tra i predetti due (mediante l’ulteriore attributo step) che altrimenti è di default 1 secondo:

   <input type="datetime-local" min="2016-01-01T00:00:00.0" max="2016-12-31T00:00:00.0" step="259200">
   

   Vedi risultato
6. email, che costruisce un campo per l’inserimento (e il controllo) della email:

   <input type="email">
   

   Vedi risultato
7. file, che costruisce un campo per la selezione di un file da caricare sul server tramite il form:

   <input type="file">
   

   Vedi risultato
8. hidden, che costruisce un campo nascosto (generalmente usato per inviare ulteriori dati di un form, ad esempio id del record di un database, ecc.):

   <input type="hidden">
   

   Vedi risultato
9. image, che costruisce l’immagine del bottone, da indicare tramite l’ulteriore attributo src:

   <input type="image" src="http://goo.gl/0bRYKb">
   

   Vedi risultato
10. month, che costruisce un campo per l’inserimento (e il controllo) di un mese dell’anno (che è possibile selezionare da un calendario), eventualmente tra un valore minimo (mediante l’ulteriore attributo min) ed uno massimo (mediante l’ulteriore attributo max) e con l’indicazione, sempre eventuale, dello step tra i predetti due (mediante l’ulteriore attributo step) che altrimenti è di default 1 mese:

    <input type="month" min="2016-01" max="2016-12" step="2">
    

    Vedi risultato
11. number, che costruisce un campo per l’inserimento (e il controllo) di un numero, eventualmente tra un valore minimo (mediante l’ulteriore attributo min) ed uno massimo (mediante l’ulteriore attributo max) e con l’indicazione, sempre eventuale, dello step tra i predetti due (mediante l’ulteriore attributo step):

    <input type="number" min="100" max="1000" step="50">
    

    Vedi risultato
12. password, che costruisce un campo per l’inserimento di una password (visualizzata con asterischi o pallini):

    <input type="password">
    

    Vedi risultato
13. radio, che costruisce un bottone radio per la scelta tra valori preimpostati, in modo alternativo tra loro (a condizione che l’ulteriore attributo name abbia il medesimo valore nominale):

    <form>
      1: <input type="radio" name="a">
      2: <input type="radio" name="a">
    </form>
    

    Vedi risultato

    1:
    2:
    
14. range, che costruisce una barra di scorrimento o slider (il cui aspetto varia da browser a browser), eventualmente tra un valore minimo (mediante l’ulteriore attributo min) ed uno massimo (mediante l’ulteriore attributo max) e con l’indicazione, sempre eventuale, dello step tra i predetti due (mediante l’ulteriore attributo step):

    <input type="range" min="100" max="1000" step="50">
    

    Vedi risultato
15. reset, che costruisce un bottone per l’azzeramento dei dati di un form:

    <form>
      <input type="text" placeholder="inserisci un testo qui e poi clicca sul bottone">
      <input type="reset">
    </form>
    

    Vedi risultato

    
    
    
16. search, che costruisce un campo da usare per effettuare ricerche:

    <input type="search">
    

    Vedi risultato
17. submit, che costruisce il bottone di un form:

    <input type="submit">
    

    Vedi risultato
18. tel, che costruisce un campo per l’inserimento (e il controllo) di un numero di telefono o fax:

    <input type="tel">
    

    Vedi risultato
19. text, che costruisce un campo per l’inserimento di un testo:

    <input type="text">
    

    Vedi risultato
20. time, che costruisce un campo per l’inserimento (e il controllo) di un orario, eventualmente tra un valore minimo (mediante l’ulteriore attributo min) ed uno massimo (mediante l’ulteriore attributo max) e con l’indicazione, sempre eventuale, dello step tra i predetti due (mediante l’ulteriore attributo step) che altrimenti è di default 1 secondo:

    <input type="time" min="12:00:00.0" max="12:30:00.0" step="300">
    

    Vedi risultato
21. url, che costruisce un campo per l’inserimento (e il controllo) di un indirizzo internet:

    <input type="url">
    

    Vedi risultato
22. week, che costruisce un campo per l’inserimento (e il controllo) di una settimana dell’anno, eventualmente tra un valore minimo (mediante l’ulteriore attributo min) ed uno massimo (mediante l’ulteriore attributo max) e con l’indicazione, sempre eventuale, dello step tra i predetti due (mediante l’ulteriore attributo step) che altrimenti è di default 1 settimana:

    <input type="week" min="2016-W01" max="2016-W08" step="3">
    

    Vedi risultato

L’attributo type permette di stabilire i diversi criteri di enumerazione della lista, ovvero: 1) numeri arabi (type="1") – opzione di default; 2) numeri romani minuscoli (type="i"); 3) numeri romani maiuscoli (type="I"); 4) alfabeto minuscolo (type="a"); 5) alfabeto maiuscolo (type="A").

<ol>
  <li>voce 1</li>
  <li type="i">voce 2</li>
  <li type="I">voce 3</li>
  <li type="a">voce 4</li>
  <li type="A">voce 5</li>
</ol>

in costruzione.

<link rel="stylesheet" type="text/css" href="mio_css.css">

Nel caso di tag <menu>, il valore dell’attributo type specifica il tipo di menu da visualizzare e può essere:

1. list, che …:

   in costruzione
   

   Vedi risultato

   in costruzione
2. toolbar, che …:

   in costruzione
   

   Vedi risultato

   in costruzione
3. context, che …:

   in costruzione
   

   Vedi risultato

   in costruzione

in costruzione.

in costruzione

in costruzione.

in costruzione

in costruzione.

in costruzione