I bottoni (sumbit, reset, button, image)

17 marzo 2006

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 action=ìì>
    <inputtype=”text”><br>
    <input type=”reset” value=”cancella”>
</form>

cioè


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

<form action=ìì>
    <input type=”button”value=”bottone generico”>
</form>

che dà:

Il tag <button>

Con l’HTML 4 è stato introdotto il tag <button> cheoffre 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.ittarget=”_blank”>

 <input type=”text”><br>

 <buttontype=”button”>
   bottone generico
 </button>

 <buttontype=”reset”>
   cancella
 </button>

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

</form>

cioè:


Ed ecco un esempio complesso:

<form action=http://www.html.it target=_blank>
 <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>invia adesso</b>
 </button>
</form>

che dà:

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

Es:

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

o anche:

<form action=ìì>
 <input disabled=”disabled” type=”submit” value=”invia”>

 <button disabled=”disabled” type=submit>
   invia
 </button>
</form>

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:

<form action=http://www.html.it target=_blank>
 
 <input name=”invia il modulo” type=”image” src=”invia.gif” alt=”invia il modulo” title=”invia il modulo” width=”78″
height=”38″>
</form>

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>.

Tutte le lezioni

1 ... 45 46 47 ... 58

Se vuoi aggiornamenti su I bottoni (sumbit, reset, button, image) inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su I bottoni (sumbit, reset, button, image)

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy