HTML <button> type 属性

2025年3月17日 | 阅读 3 分钟

引言

在 HTML 页面中，我们可以通过 button 属性值来指定按钮。它将在网页浏览器中被设置为一个按钮元素。<button> 元素的默认类型可能因浏览器而异。

按钮类型属性的语法

我们可以通过以下语法指定按钮类型属性

属性值

按钮标签使用三种属性值。通过这种类型的属性值，我们可以指定按钮标签的功能。

Submit： 借助此属性值，我们可以指定这是一个提交按钮。对于除 Internet Explorer 之外的所有浏览器，它是 submit 按钮的默认值。
Button： 借助此属性值，我们可以指定这是一个可点击的按钮。它是 Internet Explorer 的默认值。
Reset： 借助此属性值，我们可以指定这是一个重置按钮。它用于更改表单中之前的数据。

让我们以每个属性值为例。

示例 1

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example for button attribute value</title>
 </head>
 <body>
  <form action="#" method="get">
   <label for="fname">Enter Your First name:</label>

   <input
    type="text"
    id="fname"
    name="fname"
    placeholder="Enter your first name"
   />

   <label for="lname">Enter Your Last name:</label>
   <input
    type="text"
    id="lname"
    name="lname"
    placeholder="Enter your last name"
   />

   <input type="submit" value="Submit" />
  </form>
 </body>
</html>

输出

说明

在上面的代码中，我们创建了一个表单。它将接受用户的输入。当用户单击 submit 按钮时，所有值都将存储在服务器中。

示例 2

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example for button attribute value</title>
 </head>
 <body>
  <form action="#" method="get">
   <label for="fname">Enter Your First name:</label>

   <input
    type="text"
    id="fname"
    name="fname"
    placeholder="Enter your first name"
   /><br>

   <label for="lname">Enter Your Last name:</label>
   <input
    type="text"
    id="lname"
    name="lname"
    placeholder="Enter your last name"
   /><br>

   <input type="submit" value="Submit" />
   <input type="reset" value="Reset">
  </form>
 </body>
</html>

输出

说明

在上面的代码中，我们创建了一个表单。它将接受用户的输入。当用户单击 submit 按钮时，所有值都将存储在服务器中。当用户单击 reset 按钮时，它将清除整个页面。

示例 3

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example for button attribute value</title>
 </head>
 <body>
  <form action="#" method="get">
   <label for="fname">Enter Your First name:</label>

   <input
    type="text"
    id="fname"
    name="fname"
    placeholder="Enter your first name"
   /><br>

   <label for="lname">Enter Your Last name:</label>
   <input
    type="text"
    id="lname"
    name="lname"
    placeholder="Enter your last name"
   /><br>

   <input type="submit" value="Submit" />
   <input type="reset" value="Reset">
   <button type="button" value="Click me">Sign Up</button>
  </form>
 </body>
</html>

输出

说明

在上面的代码中，我们创建了一个表单。它将接受用户的输入。当用户单击 submit 按钮时，所有值都将存储在服务器中。当用户单击 reset 按钮时，它将清除整个页面。此外，我们还创建了一个 button 标签。用户单击它时，可以在网页上注册自己。

支持的浏览器

HTML <button> type 属性支持的浏览器如下

谷歌浏览器
Edge 12
Internet Explorer
火狐
Safari
Opera

下一个主题HTML 隐藏元素

← 上一个下一个 →

HTML <button> type 属性

引言

按钮类型属性的语法

属性值

示例 1

示例 2

示例 3

支持的浏览器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML <button> type 属性

引言

按钮类型属性的语法

属性值

示例 1

示例 2

示例 3

支持的浏览器

相关帖子

HTML 调查模板

HTML 历史

Figma 转 HTML

HTML 站点地图

HTML 输入元素

HTML 秒表

HTML 初学者活动

HTML 中的图片文字

HTML 中的 span 有什么作用

如何创建 HTML 注册表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器