2023.11.18html中如何使用input/button进行网页跳转

leigh_chen2023-11-21 9:30

在做网页时有时会用<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>