HTML 提交按钮

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

HTML 提交按钮是表单、输入标签、按钮标签和 HTML 元素的重要字段。提交按钮由 HTML 表单的输入标签和提交类型创建。提交按钮根据需要将用户信息保存到数据库表中。我们可以使用表单插入文本、电子邮件、联系电话、消息和其他用户信息。

开发人员主要使用 HTML 提交按钮获取保存的信息以及其他功能。HTML 提交按钮有助于重定向到其他页面链接，例如 PHP 或 Java 页面。提交按钮对于用户交互式表单（例如登录、注册、注册和其他自定义表单）至关重要。

使用输入标签制作 HTML 提交按钮

输入标签用于插入或获取用户交互信息。它与带有 ID 和类名的元素的提交类型一起使用。该值是为按钮提供标题所必需的。

语法

以下语法用于在 HTML 中操作提交按钮。此按钮与其他输入相关标签一起放置在表单标签内。

<input type = "submit" value = "Save Data"  >
OR
<form>
<input type = "submit" value = "Save Data"  name = "submit_data" id="submit_data">
</form>

描述

名称和 ID 对于 HTML 提交按钮是可选的。
输入标签对于提交按钮的提交类型至关重要。
表单标签使用提交按钮来操作用户信息。

示例

这些示例展示了带有 HTML 提交按钮的不同类型的表单。HTML 按钮与 JavaScript 和 jQuery 一起使用。我们可以使用 CSS 属性对其进行样式设置，使其看起来更具吸引力。

示例 1

该示例展示了带有基本 HTML 提交按钮的用户注册表单。我们可以使用输入标签作为提交按钮。

<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 250px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5> We can see the basic submit button with form </h5>
<div class = "flex-containers">
<form>
  <label> User Name: </label>
  <input type = "text" id = "username" name = "username">
  <br><br>
  <label> Email: </label>
  <input type = "email" id = "email" name = "email">
  <br><br>
  <label> Contact: </label>
  <input type = "text" id = "email" name = "email">
  <br><br>
  <center> <input type="submit" value="Submit Data">  </center>
</form> 
</div>
</div>
</body>
</html>

输出

输出显示带有基本提交按钮的表单。

示例 2

该示例展示了带有基本 HTML 提交按钮的用户注册表单。该按钮有助于重定向到页面以操作数据。我们可以使用 ID 和名称作为参考按钮关键字。

<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> HTML SUBMIT BUTTON </h3>
<h5> 
we can redirect to the save.php page after clicking on the button
</h5>
<div class = "flex-containers">
<form action="path/save.php">
  <label> User Name: </label>
  <input type = "text" id = "username" name = "username">
  <br><br>
  <label> Email: </label>
  <input type = "email" id = "email" name = "email">
  <br><br>
  <label> Contact: </label>
  <input type = "text" id = "contact" name = "contact">
  <br><br>
  <center> <input type = "submit" value = "Save Data"  name = "submit_data" id="submit_data">  </center>
</form> 
</div>
</div>
</body>
</html>

输出

输出显示带有提交按钮的表单。

示例 3

该示例展示了使用 CSS 样式属性和 HTML 提交按钮的用户注册表单。我们可以使用提交按钮的背景颜色、字体大小、粗细和颜色。

<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
#submit_data{
background-color: navy;
color: white;
height: 30px;
width: 80px;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5> 
we can redirect to the save.php page after clicking on the button
</h5>
<div class = "flex-containers">
<form action="path/save.php">
  <label> User Name: </label>
  <input type = "text" id = "username" name = "username">
  <br><br>
  <label> Email: </label>
  <input type = "email" id = "email" name = "email">
  <br><br>
<label> Contact: </label>
  <input type = "text" id = "contact" name = "contact">
  <br><br>
  <center> <input type = "submit" value = "Save Data"  name = "submit_data" id="submit_data">  </center>
</form> 
</div>
</div>
</body>
</html>

输出

输出显示带有样式的提交按钮。

示例 4

该示例展示了使用 JavaScript 函数和 HTML 提交按钮的用户注册表单。我们可以使用带有警报框的 JavaScript 功能。

<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
#submit_data{
background-color: navy;
color: white;
height: 30px;
width: 80px;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> HTML SUBMIT BUTTON </h3>
<h5> 
we can use the javascript function after clicking the submit button
</h5>
<div class = "flex-containers">
<form>
  <label> User Name: </label>
  <input type = "text" id = "username" name = "username">
  <br><br>
  <label> Email: </label>
  <input type = "email" id = "email" name = "email">
  <br><br>
<label> Contact: </label>
  <input type = "text" id = "contact" name = "contact">
  <br><br>
  <center> <input type = "submit" value = "Save Data"  name = "submit_data" id="submit_data" onclick="return dataDisplay()">  </center>
</form> 
</div>
</div>
<script>
function dataDisplay(){
alert("the submit button click successfully!!!!");
return true;
}
</script>
</body>
</html>

输出

输出显示带有样式的提交按钮。

使用按钮标签制作 HTML 提交按钮

按钮标签有助于在 HTML 中创建带有类型的提交按钮。我们可以使用该按钮提交和操作表单数据。

语法

使用按钮标签，以下语法用于在 HTML 中操作提交按钮。

示例

这些示例展示了带有 HTML 提交按钮的表单的按钮标签。HTML 按钮与 JavaScript 和 jQuery 一起使用。我们可以使用 CSS 属性对其进行样式设置，使其看起来更具吸引力。

示例 1

该示例展示了带有基本 HTML 提交按钮的用户注册表单。我们可以使用按钮标签和提交类型作为 HTML 表单。

<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: grey;
height: 250px;
width: 350px;
border : 2px solid grey;
}

</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5> We can see the submit button with button form in the Html form </h5>
<div class = "flex-containers">
<form>
  <label> User Name: </label>
  <input type = "text" id = "username" name = "username">
  <br><br>
  <label> Job Position: </label>
  <input type = "text" id = " Position" name = "Position">
  <br><br>
  <center> <button type = "submit" value="Submit Data"> Submit Data </button>  </center>
</form> 
</div>
</div>
</body>
</html>

输出

输出显示带有基本提交按钮的表单。

示例 2

该示例展示了使用 JavaScript 函数和 HTML 提交按钮的基本表单。在单击提交按钮后，我们可以在 JavaScript 函数中使用警报选项卡。

<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5> 
we can use the javascript function after clicking the submit button
</h5>
<div class = "flex-containers">
<form>
  <label> User Name: </label>
  <input type = "text" id = "username" name = "username">
  <br><br>
  <label> Email: </label>
  <input type = "email" id = "email" name = "email">
  <br><br>
<label> Contact: </label>
  <input type = "text" id = "contact" name = "contact">
  <br><br>
  <center> <button type = "submit"  name = "submit_data" id="submit_data" onclick="return dataDisplay()">  Save Data </button> </center>
</form> 
</div>
</div>
<script>
function dataDisplay(){
alert("the html submit button click successfully using button tag!!!!");
return true;
}
</script>
</body>
</html>

输出

输出显示带有样式的提交按钮。

示例 3

该示例展示了带有基本 HTML 提交按钮的用户登录或订阅表单。我们可以使用按钮标签和提交类型作为 HTML 表单。我们可以使用 CSS 属性来设计提交按钮。

<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: grey;
height: 250px;
width: 350px;
border : 2px solid grey;
}
button{
background-color: navy;
color: white;
height: 30px;
width: 100px;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON with subscribe form </h3>
<h5> We can see the submit button with button form in the Html form </h5>
<div class = "flex-containers">
<form>
  <label> Email Id: </label>
  <input type = "email" id = "email" name = "email">
  <br><br>
  <center> <button type = "submit" value="Submit Data"> Submit Data </button>  </center>
</form> 
</div>
</div>
</body>
</html>

输出

输出显示带有基本提交按钮的表单。

结论

HTML 提交按钮有助于在 HTML 表单上插入、创建、编辑和执行用户相关操作。开发人员大多在按钮中使用提交类型来实现直接数据保存功能。

下一主题HTML 目标属性

HTML 提交按钮

使用输入标签制作 HTML 提交按钮

语法

示例

使用按钮标签制作 HTML 提交按钮

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 提交按钮

使用输入标签制作 HTML 提交按钮

语法

示例

使用按钮标签制作 HTML 提交按钮

语法

示例

结论

相关帖子

如何在 HTML 中使用 Image 标签

HTML 网格

HTML 文本消息

如何在 HTML 中换行

HTML 深色模式样式

HTML 与 ASP

Web 设计中的微交互

HTML 图片链接

如何使用 HTML 分隔行

HTML Valign

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器