Guida introduttiva: Aggiunta di un pulsante (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Apprendi come creare tipi diversi di controlli button.
Prerequisiti
Informazioni sui pulsanti e sui relativi eventi
Per creare un pulsante in HTML, devi aggiungere un elemento button al tuo codice HTML. Per impostare il contenuto del pulsante in HTML, devi aggiungere il testo tra il tag button di apertura e quello di chiusura. Un tag button può avere tipi diversi di contenuto, ad esempio testo e immagini. La maggior parte dei pulsanti contiene solo testo.
<button>A button</button>
Per creare un button in JavaScript, crea un nuovo oggetto button e collegalo al DOM (Document Object Model). Per impostare il testo del pulsante, usa la proprietà innerHTML.
var newButton = document.createElement("button");
newButton.innerHTML = "A button";
var buttonParent = document.getElementById("buttonParent");
buttonParent.appendChild(newButton);
Ci sono tre tipi di pulsanti: standard, di invio e di reimpostazione. Per specificare il tipo di pulsante che vuoi usare, imposta l'attributo type su "button", "submit", o "reset".
Il tipo principale di interazione degli utenti con un pulsante è il clic, quindi quando aggiungi un pulsante standard alla tua app, devi gestirne l'evento click. Non è necessario gestire l'evento click per i pulsanti di invio e di reimpostazione, perché questi eseguono automaticamente un'azione per l'elemento form a cui appartengono.
Quando gestisci l'evento click, il tuo gestore riceve un oggetto MouseEvent che puoi usare per trovare le coordinate del punto di clic, il pulsante che ha attivato l'evento e altre informazioni.
L'evento click è valido per mouse, tocco e input tramite penna o stilo. Per l'elenco completo di tutti gli eventi dei pulsanti, vedi la pagina button reference page.
Aggiungere un pulsante standard
Usa un button standard per avviare un'azione immediata.
Non usare un pulsante quando l'azione è il passaggio a un'altra pagina. In questo caso, usa invece un link. Eccezione: per lo spostamento nelle procedure guidate, usa pulsanti con etichette Indietro e Avanti. Per altri tipi di spostamento all'indietro o a un livello superiore, usa un pulsante con lo stile win-backbutton.
Per creare un button standard, aggiungi semplicemente un elemento button al markup. Quindi, fra i tag di apertura e chiusura del controllo button, aggiungi il testo da visualizzare sulla superficie del pulsante.
Questo esempio crea un button standard e un paragrafo di output.
<button
id="standardButton"
onclick="ButtonExamples.standardButtonClicked(event)">Click me!</button>
<p id="outputParagraph"></p>
L'esempio successivo definisce il gestore dell'evento ButtonExamples.standardButtonClicked e lo rende accessibile pubblicamente. Quando si fa clic sul pulsante, questo esempio visualizza del testo nel paragrafo di output definito nell'esempio precedente.
function standardButtonClicked(eventInfo) {
document.getElementById("outputParagraph").innerText = "Click!";
}
WinJS.Namespace.define("ButtonExamples",
{ standardButtonClicked : standardButtonClicked });
Per creare un pulsante standard puoi anche creare un elemento input, impostandone l'attributo type su "button".
Aggiungere un pulsante standard all'interno di un modulo
All'interno di un form, un elemento button senza alcun attributo svolge la funzione di pulsante di invio se è il primo pulsante del modulo. Se vuoi un pulsante standard, imposta l'attributo type dell'elemento button su "button".
<form>
<button
type="button"
onclick="ButtonExamples.standardFormButtonClicked(event)">I'm a standard button!</button>
<p id="outputParagraph2"></p>
</form>
function standardFormButtonClicked(eventInfo) {
document.getElementById("outputParagraph2").innerText = "Click!";
}
WinJS.Namespace.define("ButtonExamples",
{ standardFormButtonClicked: standardFormButtonClicked });
Aggiungere un pulsante di invio
Usa un pulsante di invio all'interno di un form per inviare i dati immessi nei controlli del modulo. Per creare un pulsante di invio, aggiungi un elemento button e impostane l'attributo type su "submit".
<form action="https://www.bing.com" method="get"
onsubmit="ButtonExamples.formSubmitted(event)">
<input type="text" id="searchQuery" name="q" placeholder="Enter a search query." />
<button type="submit">Search</button>
<button type="reset">Clear</button>
</form>
<p id="formOutput"></p>
function formSubmitted(eventInfo) {
document.getElementById("formOutput").innerText =
"You searched for " + document.getElementById("searchQuery").value;
}
WinJS.Namespace.define("ButtonExamples",
{ formSubmitted: formSubmitted });
Nota che non è necessario creare un gestore di eventi per il pulsante: se si fa clic, l'azione del modulo viene attivata automaticamente.
Per creare un pulsante di invio puoi anche creare un elemento input impostandone l'attributo type su "submit".
Aggiungere un pulsante di reimpostazione
Un pulsante di reimpostazione reimposta gli elementi di input del modulo sui valori iniziali. Per creare un pulsante di reimpostazione, aggiungi un elemento button e impostane l'attributo type su "reset".
<form action="https://www.bing.com" method="get">
<input type="text" id="searchQuery2" name="q" placeholder="Enter a search query." />
<button type="submit">Search</button>
<button type="reset">Clear</button>
</form>
Nota che non è necessario creare un gestore di eventi per il pulsante: se si fa clic, il modulo viene reimpostato automaticamente.
Per creare un pulsante di reimpostazione puoi anche creare un elemento input, impostandone l'attributo type su "reset".
Pulsanti con stili
Per informazioni sui pulsanti con stili, vedi l'articolo sull'applicazione di stili ai pulsanti.
Riepilogo
In questa guida introduttiva hai imparato ad aggiungere tipi diversi di controlli button.