HTML表单如何实现成功提示？怎样显示表单提交成功的消息？

div

span

<form id="myForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">提交</button>
</form>

<div id="successMessage" style="display:none; color: green; margin-top: 15px; padding: 10px; border: 1px solid green; background-color: #e6ffe6;">
    表单提交成功！感谢您的信息。
</div>

style

event.preventDefault()

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('myForm');
    const successMessage = document.getElementById('successMessage');

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为（页面刷新）

        // 这里通常会进行表单数据的收集和发送到服务器
        // 比如使用 fetch API 发送数据，像这样：
        /*
        fetch('/api/submit-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                name: document.getElementById('name').value,
                email: document.getElementById('email').value
            }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) { // 假设服务器返回 success: true
                successMessage.style.display = 'block'; // 显示成功消息
                form.reset(); // 清空表单
                // 也可以设置一个定时器让消息自动消失
                setTimeout(() => {
                    successMessage.style.display = 'none';
                }, 5000); // 5秒后自动隐藏
            } else {
                // 处理服务器返回的错误，比如显示 data.message
                console.error('表单提交失败:', data.message);
            }
        })
        .catch(error => {
            console.error('网络或服务器错误:', error);
        });
        */

        // 如果是纯前端模拟成功，或者服务器交互成功后，直接执行以下代码：
        successMessage.style.display = 'block';
        form.reset(); // 清空表单，这通常是个好习惯
        setTimeout(() => {
            successMessage.style.display = 'none'; // 5秒后自动隐藏
        }, 5000);
    });
});

fetch

event.preventDefault()

Fetch API

XMLHttpRequest (XHR)

Fetch API

/api/submit-form

// 假设你已经从表单里收集到了数据，比如一个FormData对象或者一个普通JS对象
const formData = new FormData(form); // 从表单元素直接创建FormData对象
// 或者
// const data = {
//     name: document.getElementById('name').value,
//     email: document.getElementById('email').value
// };

fetch('/api/submit-form', {
    method: 'POST', // 或者 'GET', 'PUT', 'DELETE' 等，看你的API设计
    body: formData, // 如果是FormData，不用设置Content-Type，浏览器会自动设置
    // 如果是JSON数据，则需要：
    // headers: {
    //     'Content-Type': 'application/json',
    // },
    // body: JSON.stringify(data),
})
.then(response => {
    if (!response.ok) { // HTTP状态码不是2xx，表示请求失败
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 解析JSON响应
})
.then(data => {
    // 这里就是服务器返回的数据
    if (data.success) {
        successMessage.textContent = '表单提交成功！';
        successMessage.style.display = 'block';
        successMessage.style.color = 'green'; // 确保是绿色
        successMessage.style.borderColor = 'green';
        form.reset();
        setTimeout(() => successMessage.style.display = 'none', 5000);
    } else {
        // 处理服务器返回的业务逻辑错误
        successMessage.textContent = `提交失败: ${data.message || '未知错误'}`;
        successMessage.style.color = 'red';
        successMessage.style.borderColor = 'red';
        successMessage.style.display = 'block';
    }
})
.catch(error => {
    // 处理网络错误、解析错误等
    successMessage.textContent = `网络或服务器连接异常: ${error.message}`;
    successMessage.style.color = 'red';
    successMessage.style.borderColor = 'red';
    successMessage.style.display = 'block';
    console.error('提交过程中出现错误:', error);
});

fetch

aria-live="polite"