HTML.itHTML.it


 I bottoni (sumbit, reset, button, image)


Non c’è form che si rispetti senza bottone di invio.

La sintassi tradizionale per creare un bottone di invio è:

<input type="submit" value="invia I dati">

Ad esempio:

<form action=http://www.html.it target="_blank">
    <input type="submit" value="visita HTML.it">
</form>

cioè:

Un altro bottone utile è il "reset" che – una volta premuto - consente di riportare il form allo stato originario, cancellando ogni cosa scritta finora dall’utente. Ecco un esempio:

<form>
    <input type="text"><br>
    <input type="reset" value="cancella">
</form>

cioè

    
    

Esiste infine un tipo di bottone generico, che non esegue nessuna azione particolare, ma che può essere ad esempio utilizzato per associare degli eventi tramite JavaScript.

<form>
    <input type="button" value="bottone generico">
</form>

che dà:

    

Il tag <button>

Con l’HTML 4 è stato introdotto il tag <button> che offre la possibilità di creare dei bottoni con un aspetto particolarmente ricco.

Il tag <button>, a differenza del tag <input>, dà la possibilità di inserire il testo del bottone tra l’apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice HTML all’interno del tag.

I bottoni che abbiamo appena visto dovrebbero dunque avere questa forma:

<form action=http://www.html.it target="_blank">

     <input type="text"><br>

     <button type="button">
            bottone generico
     </button>

     <button type="reset">
            cancella
      </button>

      <button type="submit">
           invia
      </button>

</form>

cioè:

     
                  


Ed ecco un esempio complesso:

<button name="vai" type="submit">
      invia
     <img src="puntoEsclamativo.gif" width="23" height="67" title="invia adesso" border="1" vspace="5" alt="invia adesso" align="middle">
     <b>adesso</b>
</button>

che dà:

Grazie all’attributo "disable" è infine possibile disabilitare i bottoni.

Es:

<input type="submit" value="invia" disabled>

o anche:

<button type="submit" disabled>
invia
</button>

cioè:



Il campo image

Il campo "image" ci consente di utilizzare come bottoni del form delle vere e proprie immagini e assegnare loro un valore grazie a JavaScript; in questo caso non si tratta propriamente di un bottone ma la funzionalità è la medesima. Ecco il codice:

<input name="invia" type="image" src="invia.gif" alt="invia il modulo" title="invia il modulo" width="78" height="38">

cioè:

come si può vedere, se non si specifica nulla, l’immagine ha valore di submit.
Gli attributi del campo immagine sono molto simili a quelli del tag <img>.

    Torna a inizio pagina