Può un <button> in HTML fare qualcosa senza javascript?

Question

Ho una pagina web con un pulsante. Attualmente lego questo pulsante a un gestore JavaScript che reindirizza la pagina a un determinato URL quando viene fatto clic.

HTML:

<button class="click-me">Clike me to navigate</button> 

JS:

$('.click-me').on('click', function() { window.location = '/myloc'; }); 

ora sto cercando di costruire un ripiego (no-javascript) versione di questa pagina. Vorrei che questo pulsante facesse lo stesso lavoro ma senza usare javascript. In altre parole, sto cercando di rendere questo pulsante funzionale anche se javascript del browser è disabilitato.

So che questo può essere ottenuto tramite il modulo (come mostrato di seguito). Ma sto cercando qualsiasi implementazione più pulita.

<form name="hack" action="/myloc"> 
    <button type="submit" class="click-me">Click me to navigate</button> 
</form> 

Answer 1

Utilizzare un elemento a, questo è quello che stanno per:

<a class="click-me" href="/path/to/whatever/page">Click me to navigate</a> 

E poi semplicemente stile come button.

Ad esempio, con il seguente CSS:

.clickMe { 
    -moz-appearance: button; 
    -ms-appearance: button; 
    -o-appearance: button; 
    -webkit-appearance: button; 
    appearance: button; 
    text-decoration: none; 
    color: #000; 
    padding: 0.2em 0.4em; 
}​ 

JS Fiddle demo.

(Ovviamente questo presuppone l'uso di un browser che supporti la proprietà CSS appearance (o versioni vendor-prefisso).)

Riferimenti:

• appearance (albeit it's the -moz- prefixed MDN documentation).
• appearance property, at the W3C.
• Unfortunately-dropped CSS3 features (at the W3C).

Answer 2

Per rispondere alla domanda posta nell'intestazione, sì, lo button element può "fare le cose" senza JavaScript. Con type=submit, invia un modulo, come nell'esempio alla fine della domanda. Con type=reset, cancella tutto l'input dell'utente dal modulo. È solo type=button (l'impostazione predefinita quando l'elemento è all'esterno di qualsiasi modulo) che è dipendente da JavaScript e non esegue nulla senza script.

Per rispondere alla domanda che avresti dovuto chiedere: Usa link, Luke. Puoi modellare un link in modo molto simile a un pulsante, se lo desideri (potrebbe avere un senso in un contesto simile ad un'applicazione), anche usando solo CSS 2.1 e miglioramenti CSS3 opzionali come gli angoli arrotondati.

Answer 3

Si può semplicemente aggiungere realizzazione del pulsante di scatto (se che fa riferimento qualsiasi pagina web) con l'aggiunta di tag prima dolce sensuale esempio:

<a href="https://www.youtube.com/"> 
<button>Youtube</button> 
</a> 

Questo doesnot bisogno di alcun JavaScript per quanto ne so.