当前位置:知识文库 ❯ 图文

HTML表单：HTML input submit提交按钮完整教程 - 表单提交属性与用法详解

教程简介

<input type="submit"> 是 HTML 表单中用于创建提交按钮的控件，点击该按钮会将所在的表单数据提交到服务器。提交按钮是表单交互中最关键的元素之一，它是用户完成表单填写的最后一步操作。通过 value 属性可以设置按钮上显示的文字，通过 formaction、formmethod 等属性可以覆盖表单的默认提交行为，实现同一表单多种提交方式的功能。理解提交按钮的工作原理和各种属性，对于构建功能完善的表单至关重要。

核心概念

什么是 submit 输入类型

提交按钮是一种特殊的表单控件，它在页面上渲染为一个可点击的按钮。当用户点击提交按钮时，浏览器会收集所在表单中所有有效控件的值，按照表单的 method 和 action 属性指定的方式发送到服务器。

提交按钮的工作流程

用户点击提交按钮
浏览器触发表单的 submit 事件
浏览器收集表单中所有有效控件的值
如果 submit 事件未被阻止，浏览器按照 method 和 action 发送请求
服务器接收并处理请求

submit 与 button 的对比

特性	input type="submit"	button type="submit"
内容	纯文本（value 属性）	可包含 HTML 子元素
样式	样式受限	样式灵活
图标	不支持	支持内嵌图标
换行	不支持	支持
语义	自闭合标签	闭合标签
推荐度	简单场景可用	更推荐使用

表单提交的触发方式

方式	描述
点击提交按钮	最常见的触发方式
在文本框中按 Enter 键	如果表单有提交按钮，按 Enter 会触发提交
调用 `form.submit()`	JavaScript 编程式提交（不触发 submit 事件）
调用 `form.requestSubmit()`	JavaScript 编程式提交（触发 submit 事件）

语法与用法

基本语法

代码示例

<input type="submit" value="提交">

属性表格

属性	值类型	描述
`value`	字符串	按钮上显示的文字，同时作为提交数据的值
`name`	字符串	提交数据的字段名称
`disabled`	布尔值	禁用按钮
`form`	字符串	关联的 form 元素的 id
`formaction`	字符串	覆盖表单的 action 属性
`formmethod`	字符串	覆盖表单的 method 属性（get/post）
`formenctype`	字符串	覆盖表单的 enctype 属性
`formtarget`	字符串	覆盖表单的 target 属性
`formnovalidate`	布尔值	覆盖表单的 novalidate 属性
`tabindex`	数字	Tab 键导航顺序

form 系列属性详解

属性	可选值	描述
`formaction`	URL	指定提交的目标 URL
`formmethod`	`get` / `post`	指定提交的 HTTP 方法
`formenctype`	`application/x-www-form-urlencoded` / `multipart/form-data` / `text/plain`	指定提交数据的编码方式
`formtarget`	`_self` / `_blank` / `_parent` / `_top`	指定提交结果的显示位置
`formnovalidate`	布尔值	提交时跳过表单验证

代码示例

示例 1：基本的提交按钮

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>submit 基本示例</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            max-width: 500px;
            margin: 40px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .card {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 16px;
        }
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }
        input[type="text"], input[type="email"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }
        input:focus {
            outline: none;
            border-color: #4CAF50;
        }
        input[type="submit"] {
            width: 100%;
            padding: 12px;
            background: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }
        input[type="submit"]:hover { background: #388E3C; }
        input[type="submit"]:active { background: #2E7D32; }
        .result {
            margin-top: 16px;
            padding: 12px;
            background: #e8f5e9;
            border-radius: 6px;
            color: #2e7d32;
            display: none;
        }
    </style>
</head>
<body>
    <h1>用户注册</h1>

    <form id="registerForm" class="card">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" required>
        </div>
        <input type="submit" value="注册">
    </form>

    <div class="result" id="result"></div>

    <script>
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = {};
            formData.forEach((v, k) => data[k] = v);

            const result = document.getElementById('result');
            result.style.display = 'block';
            result.textContent = '注册成功！用户名：' + data.username;
        });
    </script>
</body>
</html>

示例 2：多个提交按钮（不同操作）

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个提交按钮示例</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
            background-color: #f0f2f5;
        }
        h1 { color: #1a237e; }
        .card {
            background: #fff;
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .form-group {
            margin-bottom: 16px;
        }
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #555;
            font-size: 14px;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
            font-family: inherit;
        }
        input:focus, textarea:focus {
            outline: none;
            border-color: #3f51b5;
        }
        .btn-group {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        input[type="submit"] {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-save { background: #3f51b5; color: #fff; }
        .btn-save:hover { background: #303f9f; }
        .btn-preview { background: #FF9800; color: #fff; }
        .btn-preview:hover { background: #F57C00; }
        .btn-draft { background: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-draft:hover { background: #eee; }
        .result {
            margin-top: 16px;
            padding: 12px;
            border-radius: 6px;
            display: none;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>编辑文章</h1>

    <form id="articleForm" class="card">
        <div class="form-group">
            <label for="title">标题</label>
            <input type="text" id="title" name="title" value="HTML 表单教程" required>
        </div>
        <div class="form-group">
            <label for="content">内容</label>
            <textarea id="content" name="content" rows="6" required>这是一篇关于 HTML 表单的教程...</textarea>
        </div>

        <div class="btn-group">
            <input type="submit" class="btn-draft" name="action" value="保存草稿">
            <input type="submit" class="btn-preview" name="action" value="预览" formnovalidate>
            <input type="submit" class="btn-save" name="action" value="发布文章">
        </div>
    </form>

    <div class="result" id="result"></div>

    <script>
        document.getElementById('articleForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const action = formData.get('action');
            const data = {};
            formData.forEach((v, k) => data[k] = v);

            const result = document.getElementById('result');
            result.style.display = 'block';

            switch (action) {
                case '保存草稿':
                    result.style.background = '#fff3e0';
                    result.style.color = '#e65100';
                    result.textContent = '草稿已保存！';
                    break;
                case '预览':
                    result.style.background = '#e3f2fd';
                    result.style.color = '#1565c0';
                    result.textContent = '预览模式：' + data.title;
                    break;
                case '发布文章':
                    result.style.background = '#e8f5e9';
                    result.style.color = '#2e7d32';
                    result.textContent = '文章已发布！标题：' + data.title;
                    break;
            }
        });
    </script>
</body>
</html>

示例 3：使用 formaction 等属性

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>formaction 属性示例</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            max-width: 500px;
            margin: 40px auto;
            padding: 20px;
            background-color: #fafafa;
        }
        .card {
            background: #fff;
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .form-group {
            margin-bottom: 16px;
        }
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #555;
            font-size: 14px;
        }
        input[type="text"], input[type="email"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }
        input:focus { outline: none; border-color: #FF9800; }
        .btn-group {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        input[type="submit"] {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;
        }
        .btn-primary { background: #FF9800; color: #fff; }
        .btn-primary:hover { background: #F57C00; }
        .btn-secondary { background: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-secondary:hover { background: #eee; }
        .info {
            margin-top: 16px;
            padding: 12px;
            background: #fff3e0;
            border-radius: 6px;
            font-size: 13px;
            color: #e65100;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>用户信息</h1>

    <form id="userForm" class="card" method="post" action="/api/update-profile">
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" required>
        </div>

        <div class="btn-group">
            <!-- 默认提交到 /api/update-profile -->
            <input type="submit" class="btn-primary" value="保存修改">

            <!-- 提交到不同的 URL，使用 GET 方法，在新窗口打开 -->
            <input type="submit" class="btn-secondary" value="导出数据"
                   formaction="/api/export"
                   formmethod="get"
                   formtarget="_blank">
        </div>
    </form>

    <div class="info">
        <strong>说明：</strong><br>
        "保存修改"按钮：POST 提交到 /api/update-profile<br>
        "导出数据"按钮：GET 请求到 /api/export，在新窗口打开
    </div>

    <script>
        document.getElementById('userForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('表单提交！（模拟）\nAction: ' + this.action + '\nMethod: ' + this.method);
        });
    </script>
</body>
</html>

示例 4：防止重复提交

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防止重复提交示例</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            max-width: 500px;
            margin: 40px auto;
            padding: 20px;
            background-color: #f0f2f5;
        }
        .card {
            background: #fff;
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .form-group {
            margin-bottom: 16px;
        }
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #555;
            font-size: 14px;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }
        input:focus { outline: none; border-color: #3f51b5; }
        input[type="submit"] {
            width: 100%;
            padding: 12px;
            background: #3f51b5;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        input[type="submit"]:hover { background: #303f9f; }
        input[type="submit"]:disabled {
            background: #9fa8da;
            cursor: not-allowed;
        }
        .spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            vertical-align: middle;
            margin-right: 8px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .message {
            margin-top: 12px;
            padding: 10px;
            border-radius: 6px;
            font-size: 14px;
            display: none;
        }
        .message.success { background: #e8f5e9; color: #2e7d32; }
        .message.error { background: #ffebee; color: #c62828; }
    </style>
</head>
<body>
    <h1>转账操作</h1>

    <form id="transferForm" class="card">
        <div class="form-group">
            <label for="recipient">收款人</label>
            <input type="text" id="recipient" name="recipient" required>
        </div>
        <div class="form-group">
            <label for="amount">金额</label>
            <input type="text" id="amount" name="amount" required
                   placeholder="请输入转账金额">
        </div>

        <input type="submit" id="submitBtn" value="确认转账">
        <div class="message" id="message"></div>
    </form>

    <script>
        const form = document.getElementById('transferForm');
        const submitBtn = document.getElementById('submitBtn');
        const message = document.getElementById('message');
        let isSubmitting = false;

        form.addEventListener('submit', function(e) {
            e.preventDefault();

            if (isSubmitting) return;

            // 禁用按钮，防止重复提交
            isSubmitting = true;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner"></span>处理中...';

            // 模拟异步提交
            setTimeout(function() {
                isSubmitting = false;
                submitBtn.disabled = false;
                submitBtn.value = '确认转账';

                message.className = 'message success';
                message.textContent = '转账成功！';
                message.style.display = 'block';

                setTimeout(() => { message.style.display = 'none'; }, 3000);
            }, 2000);
        });
    </script>
</body>
</html>

浏览器兼容性

浏览器	支持版本	备注
Chrome	1+	完整支持
Firefox	1+	完整支持
Safari	1+	完整支持
Edge	12+	完整支持
Opera	1+	完整支持
Internet Explorer	1+	基本支持
iOS Safari	1+	完整支持
Android Browser	1+	完整支持

form 系列属性兼容性

属性	Chrome	Firefox	Safari	Edge	IE
`formaction`	9+	4+	5.2+	12+	10+
`formmethod`	9+	4+	5.2+	12+	10+
`formenctype`	9+	4+	5.2+	12+	10+
`formtarget`	9+	4+	5.2+	12+	10+
`formnovalidate`	9+	4+	10.1+	12+	不支持

注意事项与最佳实践

1. 提交按钮必须在 form 内部或通过 form 属性关联

代码示例

<!-- 方式 1：在 form 内部 -->
<form id="myForm">
    <input type="text" name="data">
    <input type="submit" value="提交">
</form>

<!-- 方式 2：在 form 外部，使用 form 属性关联 -->
<form id="myForm" action="/submit">
    <input type="text" name="data">
</form>
<input type="submit" value="提交" form="myForm">

2. value 属性的双重作用

value 属性既控制按钮文字，又作为提交数据的值：

代码示例

<!-- 如果设置了 name，value 会随表单提交 -->
<input type="submit" name="action" value="保存">
<!-- 提交数据：action=保存 -->

<!-- 如果不需要提交按钮的值，不设置 name -->
<input type="submit" value="提交">
<!-- 提交数据中不包含按钮值 -->

3. 防止重复提交

代码示例

let isSubmitting = false;

form.addEventListener('submit', function(e) {
    if (isSubmitting) {
        e.preventDefault();
        return;
    }
    isSubmitting = true;
    submitBtn.disabled = true;
});

4. 使用 formnovalidate 实现草稿保存

代码示例

<form>
    <input type="text" name="title" required>
    <textarea name="content" required></textarea>

    <!-- 发布：需要验证 -->
    <input type="submit" value="发布">

    <!-- 保存草稿：跳过验证 -->
    <input type="submit" value="保存草稿" formnovalidate name="action">
</form>

5. 优先使用 button 元素

<button> 元素比 <input type="submit"> 更灵活：

代码示例

<!-- input submit：只能显示纯文本 -->
<input type="submit" value="提交">

<!-- button submit：可以包含 HTML -->
<button type="submit">
    <svg>...</svg> 提交
</button>

6. 表单验证与提交

代码示例

form.addEventListener('submit', function(e) {
    if (!form.checkValidity()) {
        e.preventDefault();
        // 显示自定义验证消息
    }
});

代码规范示例

代码示例

<form id="contactForm" method="post" action="/api/contact" novalidate>
    <div class="form-field">
        <label for="name">姓名</label>
        <input type="text" id="name" name="name" required>
    </div>

    <div class="form-actions">
        <input type="submit" value="提交" class="btn btn-primary"
               id="submitBtn" aria-label="提交表单">
    </div>
</form>

代码示例

.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
}

input[type="submit"].btn-primary {
    padding: 0.75rem 2rem;
    background: #3f51b5;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

input[type="submit"].btn-primary:hover {
    background: #303f9f;
}

input[type="submit"].btn-primary:active {
    background: #283593;
}

input[type="submit"].btn-primary:disabled {
    background: #9fa8da;
    cursor: not-allowed;
}

input[type="submit"].btn-primary:focus-visible {
    outline: 2px solid #3f51b5;
    outline-offset: 2px;
}

代码示例

/**
 * 防止表单重复提交
 * @param {HTMLFormElement} form - 表单元素
 * @param {HTMLInputElement} submitBtn - 提交按钮
 * @param {Function} onSubmit - 提交回调
 */
function setupFormSubmit(form, submitBtn, onSubmit) {
    let isSubmitting = false;

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        if (isSubmitting) return;

        // 自定义验证
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        isSubmitting = true;
        submitBtn.disabled = true;
        const originalValue = submitBtn.value;
        submitBtn.value = '提交中...';

        const formData = new FormData(form);

        onSubmit(formData)
            .then(() => {
                // 成功处理
            })
            .catch(() => {
                // 错误处理
            })
            .finally(() => {
                isSubmitting = false;
                submitBtn.disabled = false;
                submitBtn.value = originalValue;
            });
    });
}

常见问题与解决方案

问题 1：按 Enter 键触发了非预期的提交

原因：如果表单中只有一个文本输入框，按 Enter 会自动提交表单。

解决方案：

代码示例

<!-- 方法 1：添加隐藏的第二个输入框阻止自动提交 -->
<input type="text" style="display:none">

<!-- 方法 2：在 JavaScript 中拦截 -->
<form onsubmit="return false;">
    <input type="text" name="search">
    <input type="submit" value="搜索" onclick="doSearch(); return false;">
</form>

问题 2：多个提交按钮时如何判断点击了哪个

解决方案：

代码示例

<form id="myForm">
    <input type="text" name="data" required>
    <input type="submit" name="action" value="save">
    <input type="submit" name="action" value="delete">
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
    const formData = new FormData(this);
    const action = formData.get('action');

    if (action === 'delete') {
        if (!confirm('确定要删除吗？')) {
            e.preventDefault();
        }
    }
});
</script>

问题 3：提交按钮样式在不同浏览器中不一致

解决方案：使用 CSS 重置样式：

代码示例

input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.75rem 2rem;
    background: #3f51b5;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 1rem;
    cursor: pointer;
}

问题 4：form.submit() 不触发 submit 事件

原因：form.submit() 是编程式提交，不会触发 submit 事件。

解决方案：

代码示例

// 使用 requestSubmit() 代替 submit()
// requestSubmit() 会触发 submit 事件和表单验证
form.requestSubmit();

// 如果需要兼容旧浏览器
if (form.requestSubmit) {
    form.requestSubmit();
} else {
    // 手动触发 submit 事件
    const event = new Event('submit', { cancelable: true });
    if (form.dispatchEvent(event)) {
        form.submit();
    }
}

问题 5：如何在提交前修改表单数据

解决方案：

代码示例

form.addEventListener('submit', function(e) {
    e.preventDefault();

    // 修改表单数据
    const formData = new FormData(this);
    formData.append('timestamp', Date.now());
    formData.append('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);

    // 使用修改后的数据提交
    fetch(this.action, {
        method: this.method,
        body: formData
    });
});

总结

<input type="submit"> 是 HTML 表单中实现数据提交的核心控件，具有以下特点：

自动提交：点击按钮自动收集并提交表单数据
灵活的提交配置：通过 formaction、formmethod 等属性可以覆盖表单默认行为
多按钮支持：同一表单可以有多个提交按钮，通过 name/value 区分操作
验证跳过：formnovalidate 属性允许跳过验证（如保存草稿场景）
需要防止重复提交：异步提交时需要禁用按钮防止重复操作

在实际开发中，建议优先使用 <button type="submit"> 替代 <input type="submit">，因为前者支持更丰富的内容。始终注意防止重复提交，在异步提交时禁用按钮并显示加载状态。对于需要不同提交行为的场景，可以利用 formaction 等属性或通过 name/value 区分操作类型。

常见问题

submit 和 button 有什么区别？

input type="submit" 只能显示纯文本（通过 value 属性），而 button type="submit" 可以包含 HTML 子元素如图标、换行等。现代开发更推荐使用 button 元素，因为它更灵活。

如何实现一个表单多个提交按钮的不同操作？

给多个提交按钮设置相同的 name 属性但不同的 value 值，在服务器端或 JavaScript 中通过获取该 name 的值来判断用户点击了哪个按钮。也可以使用 formaction 属性让不同按钮提交到不同 URL。

formnovalidate 属性有什么用？

formnovalidate 属性可以让提交按钮跳过表单验证。这在"保存草稿"场景下非常有用，允许用户保存未填写完整的表单而不触发验证错误。

如何防止表单重复提交？

在表单提交事件处理函数中，使用一个标志变量（如 isSubmitting）来跟踪提交状态。提交开始时将按钮设为 disabled 并显示加载状态，提交完成后再恢复按钮状态。

form.submit() 和 form.requestSubmit() 有什么区别？

form.submit() 是编程式提交，不会触发 submit 事件和表单验证；form.requestSubmit() 会触发 submit 事件和表单验证，更接近用户点击提交按钮的行为。推荐优先使用 requestSubmit()。

标签： input submit 提交按钮 HTML表单 formaction 表单提交 HTML教程前端开发

本文涉及AI创作

内容由AI创作，请仔细甄别

list快速访问

poll相关推荐

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

实战项目：项目09：任务管理应用 - 详细教程与实战指南

实战项目：项目08：天气应用界面 - 详细教程与实战指南

快速访问

相关推荐