• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

81 - 表单元素 - input标签 - 按钮类型及作用

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:10:33

表单元素 - input 标签 - 按钮类型及作用

在 HTML5 中，<input> 标签是构建表单不可或缺的一部分，它有多种类型，其中按钮类型为用户与网页交互提供了重要的途径。本文将详细介绍 <input> 标签中不同按钮类型的作用，并通过实际代码演示其使用方法。

1. <input type="button">

作用

<input type="button"> 用于创建一个普通按钮，它本身没有默认的行为，需要配合 JavaScript 来实现特定的功能，例如提交表单、弹出提示框等。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>input type="button"</title>
  8. </head>
  10. <body>
  11.     <input type="button" value="点击我" onclick="alert('你点击了按钮！')">
  12. </body>
  14. </html>

在上述代码中，当用户点击 “点击我” 按钮时，会弹出一个提示框显示 “你点击了按钮！”。

2. <input type="submit">

作用

<input type="submit"> 用于创建一个提交按钮，通常放在表单中。当用户点击该按钮时，表单数据会被发送到服务器进行处理，处理的目标地址由表单的 action 属性指定。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>input type="submit"</title>
  8. </head>
  10. <body>
  11.     <form action="submit.php" method="post">
  12.         <label for="username">用户名：</label>
  13.         <input type="text" id="username" name="username"><br>
  14.         <label for="password">密码：</label>
  15.         <input type="password" id="password" name="password"><br>
  16.         <input type="submit" value="提交">
  17.     </form>
  18. </body>
  20. </html>

在这个例子中，当用户填写用户名和密码后点击 “提交” 按钮，表单数据会以 POST 方式发送到 submit.php 文件进行处理。

3. <input type="reset">

作用

<input type="reset"> 用于创建一个重置按钮，放在表单中。当用户点击该按钮时，表单中的所有输入字段会被重置为初始值。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>input type="reset"</title>
  8. </head>
  10. <body>
  11.     <form>
  12.         <label for="email">邮箱：</label>
  13.         <input type="email" id="email" name="email" value="example@example.com"><br>
  14.         <label for="phone">电话：</label>
  15.         <input type="tel" id="phone" name="phone" value="123456789"><br>
  16.         <input type="reset" value="重置">
  17.     </form>
  18. </body>
  20. </html>

当用户点击 “重置” 按钮时，邮箱和电话输入框会恢复到初始值。

总结表格

按钮类型 作用 示例代码
<input type="button"> 创建普通按钮，需配合 JavaScript 实现功能 <input type="button" value="点击我" onclick="alert('你点击了按钮！')">
<input type="submit"> 创建提交按钮，用于提交表单数据到服务器 <input type="submit" value="提交">
<input type="reset"> 创建重置按钮，用于重置表单输入字段为初始值 <input type="reset" value="重置">

通过以上介绍，我们了解了 <input> 标签中不同按钮类型的作用和使用方法。在实际开发中，可以根据具体需求选择合适的按钮类型，以实现良好的用户交互体验。