2023.11.18html中如何使用input/button进行网页跳转
在做网页时有时会用<button>
元素,有时会用<input>
元素进行form表单操作或者网页跳转,但是用bootstrap时两种元素会出现不同的样式,为了样式一致,有时需要使用这两种元素相互实现其常用功能。
使用<button>
元素进行网页跳转:
<!DOCTYPE html>
<html>
<head>
<title>Button Redirect</title>
<script>
function redirectToPage() {
window.location.href = "https://www.example.com";
}
</script>
</head>
<body>
<button onclick="redirectToPage()">跳转到 Example 网站</button>
</body>
</html>
使用js调用redirectToPage()
函数,该函数使用window.location.href
实现网页跳转。
使用<input>
实现网页跳转。可以使用<input>
元素的type="button"
属性创建一个按钮,并使用JavaScript的onclick事件来执行跳转操作:
<!DOCTYPE html>
<html>
<head>
<title>Input Redirect</title>
<script>
function redirectToPage() {
window.location.href = "https://www.example.com";
}
</script>
</head>
<body>
<input type="button" value="跳转到 Example 网站" onclick="redirectToPage()">
</body>
</html>