仅用HTML/CSS实现输入数字提交后跳转对应页面的技术咨询

Got it, let's work through this problem. Since you're sticking to HTML/CSS (and let's be real—we need a tiny snippet of JavaScript here because plain HTML can't handle conditional, dynamic redirects on its own), here's a straightforward solution that fits your requirements perfectly:

Step 1: Build the HTML Form with Basic Styling #

First, we'll create the text input, submit button, and add some optional CSS to make it look clean. The JavaScript will handle the logic of checking the input and redirecting to the right page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Redirect Tool</title>
    <!-- Optional CSS for styling -->
    <style>
        .redirect-container {
            margin: 3rem auto;
            width: fit-content;
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        #page-input {
            padding: 0.75rem 1rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            width: 100px;
        }
        #submit-btn {
            padding: 0.75rem 1.5rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }
        #submit-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="redirect-container">
        <input type="number" id="page-input" min="1" placeholder="输入数字" required>
        <button id="submit-btn">跳转</button>
    </div>

    <script>
        // Grab our elements from the DOM
        const pageInput = document.getElementById('page-input');
        const submitBtn = document.getElementById('submit-btn');

        // Add a click listener to the submit button
        submitBtn.addEventListener('click', function() {
            // Get the input value and convert it to a number
            const pageNumber = parseInt(pageInput.value);

            // Validate the input is a valid number >=1
            if (!isNaN(pageNumber) && pageNumber >= 1) {
                // Redirect to the corresponding page
                window.location.href = `www.website/page${pageNumber}.html`;
            } else {
                // Show an alert if the input is invalid
                alert('请输入一个大于等于1的有效整数哦！');
                // Clear the input field for better UX
                pageInput.value = '';
            }
        });

        // Optional: Allow pressing Enter to submit too
        pageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                submitBtn.click();
            }
        });
    </script>
</body>
</html>

Key Details to Note: #

• Why JavaScript? Plain HTML can only submit forms to a fixed URL via the action attribute—there's no built-in way to dynamically change the target based on user input. The JS snippet here is lightweight and fits entirely within your front-end stack.
• Input Validation: We check that the input is a valid number and at least 1 to prevent broken redirects. You can adjust the validation rules if your page numbering has different constraints.
• UX Touches: Added support for pressing Enter to submit, plus clearing the input if the user enters something invalid.
• CSS Flexibility: The CSS is optional—you can tweak it to match your existing site's styling, or remove it entirely if you don't need custom visuals.

Alternative (No Text Input, Dropdown with Minimal JS) #

If you'd prefer to avoid free-text input (to reduce user error), you could use a dropdown menu instead. This still uses a tiny bit of JS, but it's even simpler:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Redirect Dropdown</title>
    <style>
        .redirect-container {
            margin: 3rem auto;
            width: fit-content;
        }
        #page-select {
            padding: 0.75rem;
            font-size: 1rem;
            margin-right: 1rem;
        }
    </style>
</head>
<body>
    <div class="redirect-container">
        <select id="page-select">
            <option value="">选择页面</option>
            <option value="www.website/page1.html">页面1</option>
            <option value="www.website/page2.html">页面2</option>
            <!-- Add more options as needed -->
        </select>
        <button onclick="window.location.href = document.getElementById('page-select').value;">跳转</button>
    </div>
</body>
</html>

This is great if you have a fixed set of pages and want to avoid typos, but it doesn't support arbitrary number input like your original request.

内容的提问来源于stack exchange，提问作者Arjen Den Dulk