提交按钮

提交按钮是表单的核心交互元素，用于将用户填写的数据提交到服务器。

按钮类型

button标签

HTML

<!-- 提交按钮 -->
<button type="submit">提交</button>

<!-- 重置按钮 -->
<button type="reset">重置</button>

<!-- 普通按钮 -->
<button type="button">普通按钮</button>

input按钮

HTML

<!-- 提交按钮 -->
<input type="submit" value="提交">

<!-- 重置按钮 -->
<input type="reset" value="重置">

<!-- 普通按钮 -->
<input type="button" value="普通按钮">

<!-- 图像按钮 -->
<input type="image" src="submit.png" alt="提交">

type属性对比

type值	功能	说明
`submit`	提交表单	触发form提交
`reset`	重置表单	恢复初始值
`button`	无默认行为	需JS绑定事件

按钮属性

常用属性

HTML

<button type="submit" name="action" value="save">保存</button>
<button type="submit" disabled>禁用按钮</button>
<button type="submit" form="myForm">关联外部表单</button>
<button type="submit" formaction="/custom-submit">自定义提交地址</button>

属性	说明
`disabled`	禁用按钮
`name`	按钮名称（提交时传递）
`value`	按钮值
`form`	关联外部表单id
`formaction`	自定义提交地址
`formmethod`	自定义提交方式
`formenctype`	自定义编码类型
`formtarget`	自定义目标窗口

formmethod使用

HTML

<form action="/submit" method="POST">
    <!-- 默认POST提交 -->
    <button type="submit">POST提交</button>

    <!-- 指定GET提交 -->
    <button type="submit" formmethod="GET">GET提交</button>
</form>

button与input对比

特性	`<button>`	`<input type="submit">`
内容	可包含HTML	只能纯文本
样式	更灵活	受限
图标	可嵌入图标	无法嵌入
兼容性	全浏览器	全浏览器

HTML

<!-- button可包含图标 -->
<button type="submit">
    <span class="icon">✓</span> 提交
</button>

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

实际应用示例

双按钮提交

HTML

<form action="/submit" method="POST">
    <input type="text" name="title">
    <textarea name="content"></textarea>

    <button type="submit" name="action" value="save">保存草稿</button>
    <button type="submit" name="action" value="publish">发布文章</button>
</form>

禁用状态

HTML

<!-- 禁用按钮（灰色、不可点击） -->
<button type="submit" disabled>提交中...</button>

<!-- JavaScript动态控制 -->
<script>
    const btn = document.querySelector('button');
    btn.disabled = true;  // 禁用
    btn.disabled = false; // 启用
</script>

要点总结

type必写：明确按钮类型，默认为submit
button推荐：内容灵活，可嵌入图标
form属性：按钮可关联外部表单
disabled控制：防止重复提交时禁用按钮

📝 发现内容有误？点击此处直接编辑