正文

HTML5表单按钮代码示例：构建一个简单的表单，包含提交、重置和取消按钮。

/0 浏览量
0515

在HTML5中，表单按钮是用户与表单交互的关键元素。一个典型的表单可能包含提交、重置和取消按钮。下面，我将为你提供一个简单的表单示例，其中包含了这三种按钮。

1. 提交按钮

提交按钮用于将表单数据发送到服务器。当用户点击提交按钮时，表单数据会被发送到服务器进行处理。

<form action="/submit-form" method="post">
  <!-- 其他表单元素 -->
  <input type="submit" value="提交">
</form>

在上面的代码中，action 属性指定了表单提交后要发送到的URL，method 属性指定了数据发送的方式（通常为 get 或 post）。

2. 重置按钮

重置按钮用于将表单中的所有输入字段重置为初始值。这意味着用户填写的所有内容都会被清空。

<form action="/submit-form" method="post">
  <!-- 其他表单元素 -->
  <input type="reset" value="重置">
</form>

3. 取消按钮

取消按钮通常用于关闭表单或返回上一个页面。虽然HTML本身没有内置的取消按钮，但我们可以通过JavaScript来实现。

<form action="/submit-form" method="post">
  <!-- 其他表单元素 -->
  <button type="button" onclick="history.back()">取消</button>
</form>

在上面的代码中，onclick 属性定义了点击按钮时执行的JavaScript代码。这里，我们使用了 history.back() 方法来返回上一个页面。

完整的表单示例

下面是一个包含提交、重置和取消按钮的完整表单示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单按钮示例</title>
</head>
<body>
  <form action="/submit-form" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <button type="button" onclick="history.back()">取消</button>
  </form>
</body>
</html>

在这个示例中，我们创建了一个简单的表单，包含用户名和邮箱两个字段。用户可以填写这些字段，然后点击提交、重置或取消按钮来执行相应的操作。

-- 展开阅读全文 --