<form method = "link"> o <a>? ¿Cual es la diferencia?

Question

I saw que podemos escribir:

<form method="link" action="foo.html" > 
<input type="submit" /> 
</form> 

para hacer un "botón de enlace".

Pero sé que podemos escribir:

<a href="foo.html" ><input type="button" /></a> 

Qué va a hacer lo mismo.

¿Cuál es la diferencia? ¿Cuál es la compatibilidad de su navegador?

Answer 1

Esa página que enlaza es incorrecta. No hay valor de method="LINK". Esto hará que el formulario vuelva al método predeterminado, GET, que es equivalente a un elemento de anclaje con un atributo href de todos modos.

<form method="GET" action="foo.html"> 
    <input type="submit" /> 
</form> 

Esto es igual a su ejemplo, pero válido; y es equivalente a:

<a href="foo.html"> 

Debe usar la semántica para determinar la forma de implementar su formulario. Como no hay campos de formulario para que el usuario complete, no se trata realmente de un formulario y, por lo tanto, no necesita usar <form> para obtener el efecto.

Un ejemplo de cuándo utilizar una forma GET es un cuadro de búsqueda:

<form action="/search"> 
    <input type="search" name="q" placeholder="Search" value="dog" /> 
    <button type="submit">Search</button> 
</form> 

Lo anterior permite al visitante a la entrada de su propia consulta de búsqueda, mientras que este elemento de anclaje no:

<a href="https://stackoverflow.com/search?q=dog">Search for "dog"</a> 

Sin embargo, ambos irán a la misma página cuando se envíen/hagan clic (suponiendo que el usuario no cambia el campo de texto en el primer

---

Como acotación al margen, yo uso el siguiente CSS para conseguir enlaces que parecen botones:

button, 
.buttons a { 
    cursor: pointer; 
    font-size: 9.75pt; /* maximum size in WebKit to get native look buttons without using zoom */ 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -webkit-tap-highlight-color: transparent; 
} 
.buttons a { 
    margin: 2px; 
    padding: 3px 6px 3px; 
    border: 2px outset buttonface; 
    background-color: buttonface; 
    color: buttontext; 
    text-align: center; 
    text-decoration: none; 
    -webkit-appearance: button; 
} 
button img, 
.buttons a img { 
    -webkit-user-drag: none; 
    -ms-user-drag: none; 
} 
.buttons form { 
    display: inline; 
    display: inline-block; 
} 

Answer 2

Todos los métodos mencionados lograr el mismo resultado, salvo si contienen múltiples argumentos, tales como:

<input type="button" value="Cancel"> 
<input type="button" value="Submit"> 

Como referencia que utilizo:

<form> 
<INPUT TYPE='button' onClick="parent.location='location'"> 
</form> 

Para un botón de enlace

Answer 3

El segundo caso no manejará los argumentos de entrada de suma dentro de la etiqueta A. Seguirá href solo mientras que form agregará todas las entradas para solicitar la cadena GET.

<form action='http://localhost/?' method='get'><input type="text" name="test"><input type="submit" value="GO"/></form> 

y

<a href='http://localhost/?'><input type="text" name="test"><input type="submit" value="GO"/></a> 

funcionaría diferentes

Answer 4

Las diferencias en la funcionalidad.

Si bien, ambos se comportan de forma similar, todavía hay algunas razones para usar elementos para lo que están destinados. En su mayor parte, pierde funcionalidad con un enlace de botón; no puede hacer clic derecho y abrir en una nueva pestaña o ventana, por ejemplo.

Considere también la semántica y las especificaciones: El elemento del botón (cualquiera que sea la variación que utilice; <input type="button"> o <button></button>) fue diseñado para ser utilizado por los formularios.

Answer 5

Con un <a name="markname"></a> puede desplazar la posición de esa etiqueta a la vista mediante el uso de la URL, p. http://example.com/index.html#markname. No creo que ni la forma ni la entrada lo hagan. Y creo que para usar <input type="button" window.location.href='foo.html'/>, JavaScript debería estar activado. Además, <form>s generalmente causa un salto de línea, <a>s no.