qual è la differenza tra il <button onclick = ...> e <a href="#" onclick=.../>

Question

I find many times the pages use "a" tag and want to make it like a button. it's something like this:

<a href="#" class="button" onclick="...." /> 

I'm confusing about why not just use "button" tag? like this:

<button onclick="....">button</button> 

what is the difference between? I really want to learn it, thanks!

One more situation question:

Three "button-like < a > tag" as below:

Hint:

• Different one call ajax then get different period record
• Need to use onclick="location.replace()" because back to last page smoothly.

Original code:

<a href="url" class="btn" >Today</a> 

I have changed to:

<a href="#" onclick="location.replace(url)" class="btn" >Today</a> 

Consider about:

<button onclick="location.replace(url)">Today</button> 

What will you do in this situation? Is any incorrect to use button tag ?

Answer 1

Questo è fondamentalmente un manufatto storico.

Deriva dal momento in cui era molto più semplice applicare uno stile personalizzato a un'ancora. Si possono facilmente costruire ancore "a bottone" dimensionate automaticamente usando più elementi all'interno dell'ancora stessa.

Oggi, con opzioni CSS avanzate e una migliore compatibilità con il browser, questo non è necessario. Quando button è l'elemento semantico corretto, non hai motivo di usare a.

Quindi, utilizzare gli ancoraggi per i collegamenti ad altre pagine. Dovrebbe sempre avere un href, anziché utilizzare solo # e onclick. Ora puoi ancora usare lo onclick - assicurati che lo href ti indirizza agli stessi dati di onclick. Questo è molto utile quando vuoi che i bot di ricerca abbiano un modo per navigare nel tuo sito, anche se gli utenti effettivi verranno presentati per es. un'interfaccia più reattiva (ad esempio, il download del contenuto aggiornato tramite AJAX). Assicurarsi che i metodi comuni di apertura del collegamento in una nuova finestra/scheda funzionino ancora (né Ctrl + clic, clic destro e clic centrale dovrebbero eseguire l'azione onclick).

I pulsanti sono gli elementi che consentono di interagire con la pagina in cui ci si trova attualmente, sia che si tratti di eseguire script sul lato client o di inviare un modulo al server.

EDIT:

Con la modifica alla tua domanda, è ovvio che si dovrebbe semplicemente utilizzare un ancoraggio con un normale href. Non c'è motivo di utilizzare onclick o button e tu sono solo creando un semplice collegamento ipertestuale, ecco a cosa servono gli ancoraggi.

Answer 2

So the answer here is: semantics.

An anchor should be used for a hyperlink. Navigational items used to move from one page to another. It's a reference to data that the user can get to by clicking the link.

A button is a button. It's used for functionality.

In your example they're both calling an onclick event, so they're only going to have one difference. In the case of the anchor you have to override the default behavior using event.preventDefault().

Also, the top 3 results via Google:

http://davidwalsh.name/html5-buttons

HTML/CSS - Buttons - When to use what

http://www.reddit.com/r/Frontend/comments/1y9zdh/anchor_vs_button_a_question_on_html_semantics/