Come aggiungere pulsanti a un modulo HTML5

Il pulsante onnipresente è un fiocco di qualsiasi pagina web, e se si sta costruendo la tua pagina utilizzando HTML5, è possibile includere tutti i soliti tipi di pulsanti. Ci sono tre principali tipi di tasti, anche se tutti sembrano identici per l'utente:

  • Pulsante standard: un normale pulsante appare come un pulsante. Questi pulsanti sono utilizzati un po 'in programmazione JavaScript per innescare qualche tipo di azione sul lato client.
  • Pulsante Invia: Questo pulsante è normalmente utilizzato in programmazione lato server. Esso pacchetti di tutti i dati in forma e lo invia ad un programma che vive su un server Web remoto.
  • Pulsante Reset: Questo tipo di pulsante speciale ha un comportamento incorporato. Quando l'utente fa clic su un pulsante di reset, tutti i dati del modulo viene ripristinato ai valori di default originali.

La forma in figura mostra ogni tipo di pulsante, tutti in cerca più o meno la stessa:

Come aggiungere pulsanti a un modulo HTML5

Oltre ai tre tipi di pulsanti, elementi pulsanti possono essere creati in due modi diversi. Il primo è con l'elemento di ingresso; basta utilizzare il seguente codice:

<Input type = "button"
value = "tasto input" />

Quando utilizzato in questo modo, la proprietà valore diventa l'etichetta del tasto, e la proprietà di tipo indica quale tipo di pulsante che si intende costruire. Non è necessario aggiungere un'etichetta a un pulsante perché l'etichetta è implicita.

Ma poiché questi non sono realmente utilizzati per l'ingresso, ma per specificare che l'utente vuole fare qualcosa, una nuova sintassi tasto è evoluta:

<Tipo di pulsante = "button">
pulsante standard
</ Button>

Questa sintassi introduce un tag pulsante con tag di inizio e di fine. L'attributo type viene utilizzato per indicare il tipo di pulsante che si desidera utilizzare. (Il tipo di default è "submit", ma è utilizzato principalmente per lo sviluppo lato server.)

La sintassi tasto tende ad essere più pulito, e rende CSS formattazione di un po 'più facile, come pulsanti sono raramente formattati nello stesso modo degli altri elementi di input.

Il codice per una pagina web con entrambi i tipi di pulsante appare così:

<! DOCTYPE HTML>
<Html lang = "it">
<Head>
<Title> formDemo.html </ title>
<Meta charset = "UTF-8" />
</ Head>
<Body>
<H1> Modulo Demo </ h1>
<Form>
<Fieldset>
<Legend> Pulsanti </ legend>
<P>
<Tipo di pulsante = "button">
pulsante standard
</ Button>

<Input type = "button"
value = "tasto input" />
<Input type = "reset" />
<Input type = "submit" />
</ P>
</ Fieldset>
</ Form>
</ Body>
</ Html>