Pregunta ¿Cómo crear un botón HTML que actúa como un enlace?


Me gustaría crear un botón HTML que actúe como un enlace. Entonces, cuando haces clic en el botón, lo redirige a una página. Me gustaría que sea lo más accesible posible.

También me gustaría que no haya caracteres adicionales o parámetros en la URL.

¿Cómo puedo conseguir esto?


En base a las respuestas publicadas hasta el momento, actualmente estoy haciendo esto:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

pero el problema con esto es que Safari y Explorador de Internet, agrega un carácter de interrogación al final de la URL. Necesito encontrar una solución que no agregue ningún carácter al final de la URL.

Hay otras dos soluciones para hacer esto: usar JavaScript o diseñar un enlace para que parezca un botón.

Usando JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Pero esto obviamente requiere JavaScript, y por esa razón es menos accesible para los lectores de pantalla. El objetivo de un enlace es ir a otra página. Por lo tanto, tratar de hacer que un botón actúe como un enlace es la solución incorrecta. Mi sugerencia es que debe usar un enlace y estilo para que parezca un botón.

<a href="/link/to/page2">Continue</a>

1369
2018-05-25 16:39


origen


Respuestas:


HTML

La forma simple de HTML es ponerlo en una <form> donde especifica la URL objetivo deseada en action atributo.

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

Si es necesario, configure CSS display: inline; en el formulario para mantenerlo en el flujo con el texto que lo rodea. En lugar de <input type="submit"> en el ejemplo anterior, también puedes usar <button type="submit">. La única diferencia es que el <button> elemento permite a los niños.

Intuitivamente esperarías poder usar <button href="http://google.com"> análogo con el <a> elemento, pero lamentablemente no, este atributo no existe de acuerdo con Especificación de HTML.

CSS

Si se permite CSS, simplemente use un <a> que estilo para que parezca un botón utilizando entre otros el appearance propiedad (solo el soporte de Internet Explorer actualmente (julio de 2015) sigue siendo deficiente)

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

O elija una de esas muchas bibliotecas CSS como Oreja.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Si JavaScript está permitido, configure el window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

1578
2018-05-25 16:40



<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

406
2018-05-25 16:44



Si se trata de la apariencia visual de un botón que está buscando en una etiqueta de anclaje HTML básica, entonces puede usar el Twitter Bootstrap marco para formatear cualquiera de los siguientes enlaces / botones comunes de tipo HTML para que aparezcan como un botón. Tenga en cuenta las diferencias visuales entre la versión 2, 3 o 4 del marco:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) apariencia de la muestra:

Sample output of Boostrap v4 buttons

Bootstrap (v3) apariencia de la muestra:

Sample output of Boostrap v3 buttons

Bootstrap (v2) apariencia de la muestra:

Sample output of Boostrap v2 buttons


396
2017-12-05 08:59



Utilizar:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Lamentablemente, este marcado ya no es válido en HTML5 y no validará ni siempre funcionará como se espera. Usa otro enfoque.


130
2018-05-25 16:42



A partir de HTML5, los botones admiten la formaction atributo. Lo mejor de todo es que no se necesita Javascript o trucos.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Advertencias

  • Debe estar rodeado por <form> etiquetas.
  • <button> tipo debe ser "enviar" (o no especificado), no pude hacerlo funcionar con el tipo "botón". Que trae el punto a continuación.
  • Reemplaza la acción predeterminada en un formulario. En otras palabras, si haces esto dentro de otra forma, va a causar un conflicto.

Referencia: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Soporte del navegador: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


90
2017-07-02 19:03



En realidad es muy simple y sin usar ningún elemento de formulario. Puedes usar la etiqueta <a> con un botón dentro de :).

Me gusta esto:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

Y cargará el href en la misma página. ¿Quieres una nueva página? Solo usa target="_blank".


41
2018-02-11 15:29



Si está usando una forma interna, agregue el atributo type = "reset" junto con el elemento de botón. Evitará la acción de forma.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

35
2018-01-24 06:59



<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

24
2018-05-25 16:41



Simplemente puede poner una etiqueta alrededor del elemento:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


22
2018-01-16 04:24



¿Hay algún inconveniente para hacer algo como lo siguiente?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Dónde a.nostyle es una clase que tiene el estilo de tu enlace (donde puedes deshacerte del estilo de enlace estándar) y span.button es una clase que tiene el estilo para su "botón" (fondo, borde, degradado, etc.).


17
2018-03-30 22:46



Parece que hay tres soluciones para este problema (todas con pros y contras).

Solución 1: Botón en un formulario.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Pero el problema con esto es que en algunas versiones de navegadores populares como Chrome, Safari e Internet Explorer, agrega un carácter de interrogación al final de la URL. Entonces, en otras palabras, para el código de arriba su URL terminará luciendo así:

http://someserver/pages2?

Hay una forma de solucionar esto, pero requerirá la configuración del lado del servidor. Un ejemplo usando Apache Mod_rewrite sería redirigir todas las solicitudes con un seguimiento ? a su URL correspondiente sin el ?. Aquí hay un ejemplo usando .htaccess, pero hay un hilo completo aquí:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Configuraciones similares pueden variar dependiendo del servidor web y la pila utilizada. Entonces, un resumen de este enfoque:

Pros:

  1. Este es un botón real, y semánticamente tiene sentido.
  2. Como es un botón real, también actuará como un botón real (por ejemplo, un comportamiento que se puede arrastrar y / o imitar un clic cuando se presiona la barra espaciadora cuando está activo).
  3. Sin JavaScript, no se requiere un estilo complejo.

Contras:

  1. Trailing ? se ve feo en algunos navegadores. Esto se puede solucionar mediante un hack (en algunos casos) utilizando POST en lugar de GET, pero la forma limpia es tener un redireccionamiento del lado del servidor. La desventaja con el redireccionamiento del lado del servidor es que causará una llamada HTTP adicional para estos enlaces debido a la redirección 304.
  2. Agrega extra <form> elemento
  3. El posicionamiento de los elementos cuando se usan formularios múltiples puede ser complicado y se vuelve aún peor cuando se trata de diseños receptivos. Algunos diseños pueden ser imposibles de lograr con esta solución dependiendo del orden de los elementos. Esto puede terminar afectando la usabilidad si el diseño se ve afectado por este desafío.

Solución 2: Usar JavaScript.

Puede usar JavaScript para activar onclick y otros eventos para imitar el comportamiento de un enlace con un botón. El siguiente ejemplo podría mejorarse y eliminarse del HTML, pero está ahí simplemente para ilustrar la idea:

<button onclick="window.location.href='/page2'">Continue</button>

Pros:

  1. Simple (para requisitos básicos) y mantener la semántica sin requerir una forma adicional.
  2. Como es un botón real, también actuará como un botón real (por ejemplo, un comportamiento que se puede arrastrar y / o imitar un clic cuando se presiona la barra espaciadora cuando está activo).

Contras:

  1. Requiere JavaScript lo que significa menos accesible. Esto no es ideal para un elemento base (núcleo) como un enlace.

Solución 3: Ancla (enlace) con el estilo de un botón.

Diseñar un enlace como un botón es relativamente fácil y puede proporcionar una experiencia similar en diferentes navegadores. Oreja hace esto, pero también es fácil de lograr por su cuenta usando estilos simples.

Pros:

  1. Simple (para requisitos básicos) y buen soporte entre navegadores.
  2. No necesita una <form> trabajar.
  3. No necesita JavaScript para funcionar.

Contras:

  1. La semántica está algo rota, porque quieres un botón que actúe como un enlace y no un enlace que actúe como un botón.
  2. No reproducirá todos los comportamientos de la solución n. ° 1. No admitirá el mismo comportamiento que el botón. Por ejemplo, los enlaces reaccionan de manera diferente cuando se arrastran. Además, el activador del enlace "barra espaciadora" no funcionará sin un código JavaScript adicional. Agregará mucha complejidad ya que los navegadores no son consistentes en la forma en que admiten keypress eventos en botones.

Conclusión

Solución n. ° 1 (Botón en forma) parece ser el más transparente para los usuarios con un mínimo de trabajo requerido. Si su diseño no se ve afectado por esta opción y el ajuste del lado del servidor es factible, esta es una buena opción para los casos en que la accesibilidad es la principal prioridad (por ejemplo, enlaces en una página de error o mensajes de error).

Si JavaScript no es un obstáculo para sus requisitos de accesibilidad, entonces la solución n. ° 2 (JavaScript) sería preferible a # 1 y # 3.

Si por algún motivo, la accesibilidad es vital (JavaScript no es una opción), se encuentra en una situación en la que el diseño y / o la configuración del servidor impiden utilizar la opción n. ° 1, luego la solución n. ° 3 (Anchor diseñado como un botón) es una buena alternativa para resolver este problema con un impacto mínimo de usabilidad.


17
2018-05-19 23:29