创建表单提交按钮主要有两种方式：使用 或
在HTML中，创建一个表单提交按钮主要通过两种方式实现：使用
<input type="submit">元素或者
<button type="submit">元素。它们都能触发表单数据向服务器发送的动作，但在灵活性和内容承载上略有不同。
解决方案
要创建一个提交按钮，最直接的方式是在你的
<form>标签内部放置以下代码：
使用 <input type="submit">
：
立即学习“前端免费学习笔记（深入）”；
<form action="/submit-form" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br><br>
<input type="submit" value="提交信息">
</form>这里的
value属性定义了按钮上显示的文本。这种方式非常简洁，但按钮内容仅限于纯文本。
使用 <button type="submit">
：
<form action="/submit-form" method="post">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<br><br>
<button type="submit">
<span>立即提交</span>
@@##@@
</button>
</form><button>标签的优势在于，它内部可以包含HTML内容，比如文本、图片甚至是其他元素，这为按钮的设计提供了极大的自由度。
<input type="submit">
和 <button type="submit">
有何不同？
这可能是许多初学者甚至是有经验的开发者都会思考的问题，毕竟它们看起来都能完成同样的事情。在我看来，核心差异在于它们的“内容模型”和默认行为的一些细微之处。
input type="submit"更像是一个“自包含”的元素。它的显示文本由
value属性决定，你无法在它内部嵌套其他HTML标签。这使得它在结构上非常简单，适合那些只需要一个纯文本标签的提交按钮。它的优点是语义清晰，且在各种浏览器中的表现一致性非常好，很少出幺蛾子。
而
<button type="submit">则是一个容器。它允许你在其内部放置各种HTML元素，比如
<span>、
@@##@@，甚至是更复杂的布局。这意味着你可以创建带有图标、多行文本或者其他自定义样式的提交按钮，而无需依赖复杂的CSS背景图片技巧。这种灵活性在现代网页设计中非常宝贵，尤其是在追求更丰富视觉效果和用户体验时。
一个不常被提及但很重要的一点是，
<button>元素的
type属性默认值在不同浏览器中可能不一致（虽然现代浏览器大多默认为
submit）。为了安全起见，当你使用
<button>时，始终显式地设置
type="submit"是一个好习惯，这能确保它在所有环境下都按预期工作，避免出现意外的表单提交行为，比如在某些旧浏览器中它可能被当作普通的按钮而不会提交表单。我个人更倾向于使用
<button type="submit">，因为它的灵活性确实能解决很多设计上的限制，而且通过CSS可以非常精细地控制其内部元素的布局和样式。
如何定制提交按钮的外观和行为？
定制提交按钮的外观和行为是提升用户体验的关键一环。这不仅仅是让它看起来漂亮，更是让它在用户操作时能给出恰当的反馈。
外观定制（CSS）：
提交按钮本质上也是一个HTML元素，所以你可以像对其他任何元素一样，使用CSS来对其进行样式化。这包括改变背景颜色、文本颜色、字体大小、边框、圆角、内边距等等。
/* 为所有提交按钮设置基本样式 */
input[type="submit"],
button[type="submit"] {
background-color: #007bff; /* 蓝色背景 */
color: white; /* 白色文本 */
padding: 10px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 5px; /* 圆角 */
font-size: 16px;
cursor: pointer; /* 鼠标悬停时显示手型光标 */
transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
/* 鼠标悬停时的样式 */
input[type="submit"]:hover,
button[type="submit"]:hover {
background-color: #0056b3; /* 鼠标悬停时颜色变深 */
}
/* 按钮被禁用时的样式 */
input[type="submit"]:disabled,
button[type="submit"]:disabled {
background-color: #cccccc; /* 灰色背景 */
cursor: not-allowed; /* 显示禁止光标 */
opacity: 0.7;
}通过这些CSS规则，你可以让按钮看起来更符合你的品牌风格，并在用户交互时提供视觉反馈。
行为定制（JavaScript）：
有时，你可能需要在表单提交之前执行一些操作，比如客户端验证数据、显示加载动画，或者阻止表单的默认提交行为。这通常通过JavaScript来完成。
你可以监听表单的
submit事件，或者按钮的
click事件（尽管监听表单的
submit事件更推荐，因为它能捕获到所有提交方式，包括用户按回车键）。
document.querySelector('form').addEventListener('submit', function(event) {
// 假设这里有一些验证逻辑
const usernameInput = document.getElementById('username');
if (usernameInput.value.trim() === '') {
alert('用户名不能为空！');
event.preventDefault(); // 阻止表单默认提交行为
return;
}
// 可以在这里显示加载动画
const submitButton = event.submitter; // 获取触发提交的按钮
if (submitButton) {
submitButton.textContent = '提交中...';
submitButton.disabled = true; // 禁用按钮，防止重复提交
}
// 如果验证通过，表单将正常提交
// 实际项目中，你可能会在这里发送Ajax请求而不是直接提交表单
});在这个例子中，
event.preventDefault()是一个非常关键的方法，它能阻止浏览器执行表单的默认提交行为。这为你提供了在提交发生之前进行任何自定义操作的机会。
提交按钮在用户体验（UX）设计中需要注意什么？
一个好的提交按钮不仅仅是功能性的，它更是用户与网站交互的“对话”枢纽。在用户体验（UX）设计中，提交按钮有一些非常重要的考量点，这些往往比技术实现本身更值得我们深思。
首先是清晰的标签和文案。按钮上的文字应该明确告诉用户点击后会发生什么。避免使用“点击这里”这种模糊的词语，而是使用“提交订单”、“注册”、“保存更改”、“发送消息”等具体的动词短语。在我看来，一个好的按钮文案能显著降低用户的认知负担，让他们感到操作是可控且明确的。
其次是位置和可见性。提交按钮应该放置在用户预期它出现的地方，通常是表单的底部。它应该足够显眼，与表单中的其他元素区分开来，但又不至于喧宾夺主。颜色、大小和对比度都是需要考虑的因素。如果一个表单很长，考虑在顶部或侧边也放置一个“粘性”的提交按钮，或者在用户滚动到表单底部时才显示。
视觉反馈至关重要。当用户点击提交按钮后，网站不应该“死掉”或者没有任何反应。
-
加载状态： 在数据处理期间，按钮应该显示加载指示（例如，文字变为“提交中...”或显示一个旋转图标），并且应该被禁用（
disabled
属性），防止用户重复点击。 - 成功/失败反馈： 提交成功后，应该给出明确的成功提示（例如，跳转到成功页面，或者在当前页面显示一个绿色的成功消息）。如果提交失败，则需要给出清晰的错误信息，指明问题所在，并指导用户如何修正。仅仅显示一个“出错了”是远远不够的。
可访问性（Accessibility）是现代Web开发的基石。确保提交按钮可以通过键盘（Tab键）聚焦，并且可以通过Enter键激活。对于屏幕阅读器用户，确保按钮的文本是可读的，必要时可以使用ARIA属性来增强语义，比如
aria-label。
最后，要考虑按钮的层级。在一个页面上，可能不只有一个按钮。哪个是主要动作？哪个是次要动作（如“取消”、“返回”）？主要动作的按钮通常应该在视觉上更突出，而次要动作则可以设计得更低调。这种视觉上的优先级区分，能帮助用户更快地识别出他们需要执行的核心操作。在我看来，提交按钮不仅仅是一个触发器，它更是用户完成目标路径上的一个重要里程碑，它的设计质量直接影响到用户对整个产品或服务的感受。
