在 HTML 中创建带有自定义按钮的表单

在 HTML 中创建表单是非常常见的操作，可以通过添加各种输入字段和按钮来收集用户输入并将其提交到服务器。在本文中，我们将介绍如何在 HTML 中创建带有自定义按钮的表单。我们将演示如何添加一个提交按钮和一个重置按钮。

添加提交按钮

提交按钮用于将用户输入提交到服务器。要添加提交按钮，请在 form 标签中添加一个 button 标签，并将 type 属性设置为 submit。您可以将按钮的文本设置为任何您喜欢的内容。

<form>
  <!-- 其他表单字段 -->
  <button type="submit">提交</button>
</form>

添加重置按钮

重置按钮可用于清除表单中的所有数据。要添加重置按钮，请在 form 标签中添加一个 button 标签，并将 type 属性设置为 reset。您可以将按钮的文本设置为任何您喜欢的内容。

<form>
  <!-- 其他表单字段 -->
  <button type="reset">重置</button>
</form>

自定义按钮样式

默认情况下，提交和重置按钮的样式可能不符合您的要求。您可以使用 CSS 自定义按钮的样式。以下是一个自定义样式的示例：

<style>
  button {
    background-color: #4CAF50; /* 绿色背景 */
    border: none; /* 没有边框 */
    color: white; /* 文本颜色为白色 */
    padding: 15px 32px; /* 按钮内边距 */
    text-align: center; /* 文本居中 */
    text-decoration: none; /* 没有下划线 */
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
</style>

将此 CSS 代码添加到 HTML 文件的头部，即可自定义按钮样式。

结论

现在，您已经知道如何在 HTML 中创建带有自定义按钮的表单。通过添加提交和重置按钮，并使用 CSS 自定义按钮样式，您可以创建自己喜欢的表单，以收集和处理用户输入。