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

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

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

Questo articolo contiene link di affiliazione: acquisti o ordini effettuati tramite tali link permetteranno al nostro sito di ricevere una commissione nel rispetto del codice etico. Le offerte potrebbero subire variazioni di prezzo dopo la pubblicazione.

Ti consigliamo anche