Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 46 di 58
  • livello principiante
Indice lezioni

I bottoni (sumbit, reset, button, image) in HTML

Inserire i bottoni o bottoni di immagine per inviare i moduli
Inserire i bottoni o bottoni di immagine per inviare i moduli
Link copiato negli appunti

Non c'è form HTML 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> in HTML

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 per i button:

<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 per Input type

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

Ti consigliamo anche