¿Cómo hago para que un <input type=button> actúe como un hipervínculo y lo redireccione con una solicitud GET?¿Cómo hacer que un tipo de entrada = botón actúe como un hipervínculo y lo redirija usando una solicitud get?
Hay varias maneras diferentes de hacer que - en primer lugar, sólo tiene que ponerlo dentro de una forma que apunte a donde quiera que vaya:
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
Esto tiene la ventaja de trabajar incluso sin Javascript activado .
En segundo lugar, utilizar un botón independiente con javascript:
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
Esto, sin embargo, se producirá un error en los navegadores sin JavaScript (Nota: esto es realmente mala práctica - usted debe utilizar controladores de eventos, no código en línea como esto - esto es sólo la forma más sencilla de ilustrar el tipo de cosas que estoy hablando)
la tercera opción es el estilo de un vínculo efectivo como un botón:
<style type="text/css">
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
// :hover and :active styles left as an exercise for the reader.
</style>
<div class="my_content_container">
<a href="/my/link/location/">Go to my link location</a>
</div>
Esto tiene la ventaja de funcionar en todas partes y, lo que significa lo que probablemente desee que signifique.
No lo hagas. Es posible que desee ejecutar mi coche con sangre de mono. Tengo mis razones, pero a veces es mejor seguir usando las cosas de la forma en que fueron diseñadas, incluso si no coincide "absolutamente perfectamente" con el aspecto exacto por el que conduces.
Para respaldar mi argumento, presento lo siguiente.
onclick="location.href". (Este es un ejemplo de producción de mi predecesor en la vida real). Esto puede hacer que los usuarios duden en hacer clic en el enlace, ya que no tienen idea de dónde los está llevando.
También está realizando la optimización de motores de búsqueda más difícil la OMI, así como hacer la depuración y la lectura de su código/html más complejo. Un botón de enviar debe enviar un formulario. ¿Por qué usted (la comunidad de desarrollo) debería intentar crear una interfaz de usuario no estándar?
<script type="text/javascript">
<!--
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>
Aquí está la otra manera, es más simple que la otra.
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
Es más simple.
es un poco complicado para un ejemplo simple, pero objetivamente correcto. Bienvenido a SO. – qdot
–
mejor :) ahora edite su publicación para incluir eso también - Creo que acabo de votar lo suficiente como para editar sus propias publicaciones - ¡siéntase libre de explorar esta comunidad! – qdot
Puede hacer <button> etiqueta para hacer una acción como esta:
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
o:
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
Es muy sencillo y no requiere JavaScript!
NOTA:
Este enfoque no es válido a partir de la estructura HTML. Pero, funciona en muchos navegadores modernos. Consulte la referencia siguiente:
¿Cómo esta NO es la respuesta a esta pregunta? Perfecto. – DelightedD0D
Porque ["El botón' elemento interactivo' no debe aparecer como un descendiente del elemento 'a'."] (Http://www.w3.org/TR/html-markup/button.submit.html#button. someter-restricciones). Sin embargo, funciona bien con la mayoría de los navegadores. – RandomSeed
@YaK Y un
Creo que es su necesidad.
a href="#" onclick="document.forms[0].submit();return false;"
Para aquellos que tropiezan con esto de una búsqueda (Google) y están tratando de traducir a .NET y código MVC. (Como en mi caso)
@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
Esto mostrará un botón llamado "Proceso" y lo llevará a "/ Proceso/RemoveLostRolls". Sin "FormMethod.Get" funcionó, pero fue visto como una "publicación".
Um, supongo que uno nos lleva al Departamento de Tangible y el otro a Asistencia al Cliente. La mayoría de los usuarios ni siquiera miran la línea de estado (ni siquiera entienden de qué se trata). Los desarrolladores lo hacen, pero los usuarios no. A los usuarios les gustan los botones, pero desconfían de los enlaces (porque los enlaces los llevan a alguna parte, los botones son simplemente imperativos). Vaya a sitios populares como Amazon y vea los botones. –
No es una respuesta. Buenos puntos, pero todavía no una respuesta a la pregunta. –