在网页制作中，input和button元素可用于form表单操作或网页跳转，使用bootstrap时二者样式有差异，有时需相互实现常用功能。介绍了使用input和button元素进行网页跳转的方法，如用js调用函数实现跳转，用button元素属性结合JavaScript的onclick事件执行跳转。
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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
