如何在每个输出文本的边上显示提交按钮
要在每个输出文本的边上显示提交按钮，通常需要使用HTML、CSS和JavaScript来实现这一功能。以下是一个简单的示例，展示了如何实现这一需求：
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text with Submit Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="text-container">
<p>This is some sample text.</p>
<button class="submit-btn">Submit</button>
</div>
<div class="text-container">
<p>Another piece of text here.</p>
<button class="submit-btn">Submit</button>
</div>
<!-- Add more text-container as needed -->
<script src="script.js"></script>
</body>
</html>CSS样式
/* styles.css */
.text-container {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.text-container p {
flex-grow: 1;
margin-right: 10px;
}
.submit-btn {
padding: 8px 16px;
cursor: pointer;
}JavaScript交互（可选）
如果你需要为每个提交按钮添加特定的功能，可以使用JavaScript：
// script.js
document.addEventListener('DOMContentLoaded', function() {
const submitButtons = document.querySelectorAll('.submit-btn');
submitButtons.forEach(button => {
button.addEventListener('click', function() {
alert('Button clicked!');
// 这里可以添加更多的逻辑，比如发送数据到服务器等
});
});
});解释
- HTML结构：每个文本段落 (
<p>) 和对应的提交按钮 (<button>) 被包裹在一个div容器中，类名为text-container。 - CSS样式：使用Flexbox布局确保文本和按钮在同一行显示，并适当调整间距和对齐方式。
- JavaScript交互：为每个提交按钮添加点击事件监听器，以便执行特定操作（如弹出警告框或发送数据）。
应用场景
这种设计适用于需要用户对每段文本进行确认或提交操作的场景，例如：
- 表单填写：用户在填写多段文本后，每段文本旁边都有一个提交按钮以便即时验证或保存。
- 评论系统：在每条评论旁边放置一个提交按钮，允许用户单独提交或修改评论。
- 数据录入：在数据录入界面中，每条记录旁边都有一个提交按钮，方便用户逐条提交数据。
通过这种方式，可以提高用户体验，使用户能够更直观地管理和操作页面上的各个元素。
相关·内容
4回答
我的要求是，当用户在没有输入任何数据的情况下点击提交按钮时，它会在两个文本框的边上显示一条红色的消息“不能为空”如何在不使用Javascript的情况下完成？
浏览 0提问于2009-07-09得票数 1
我正在创建一个Google窗体页面，它以文件上传按钮结束。该文件上传按钮应被启用，一旦上述现有的表单项目，如复选框，文本字段等得到验证。如何在Google中使用AppsScript实现这一点？我无法提交任何显示如何在表单中验证字段的资源。
浏览 1提问于2016-02-29得票数 0
如何在表单中创建提交操作，不是通过按钮(使用submit_tag)也不是通过图像(image_submit_tag)？谢谢
浏览 3提问于2011-10-19得票数 3
回答已采纳
我是RxSwift的新手，想要在我的项目中实现一个功能。我必须验证2个字段，动态口令和确认动态口令使用输入/输出MVVM使用RxSwift在提交点击。Case1:如果任何文本字段为空，则应禁用提交按钮，因此如果用户开始输入第一个文本字段，提交按钮将被启用(确认动态口令文本字段也是如此)
Case2:在提交点击时，我需要验证其中一个文本字段是否为空，并在屏
浏览 1提问于2021-01-18得票数 1
我是一个非常基本的SWIFT Xcode程序员。我制作小应用程序。在过去的两天里，我被困在一件非常简单的事情上，我相信在你的指导下，我可以迅速做出决定。我在布局中有一个UIViewController类和一个xib，我有4个文本字段据我所知，我将制作另一个UIViewController，另一个XIB文件，如果用户选择允
浏览 1提问于2016-04-30得票数 0
回答已采纳
2回答
我试图让用户在表单中输入信息(通过单选按钮)，操作输入数据，并将结果文本写到网页的中间--在单选按钮表单的下方。当用户单击Submit按钮时，函数的工作方式与预期的一样，最终会写入输出字符串。问题是如何在页面中间写入字符串值。HTML：在用户按下表单的提交按钮后
浏览 4提问于2011-03-23得票数 0
回答已采纳
6回答
我有两个按钮，一个是id=enterToSubmit，另一个是id=clickToSubmit。当用户点击Enter键时，我希望"enterToSubmit“按钮而不是"clickToSubmit”按钮提交表单。在同一个页面上，我有一个文本框id=title，在页面加载时，我隐藏了"enterToSubmit“按钮，直到用户在文本框中输入内容，然后用户可以点击Enter键提交表单。当用户按回车键时，预览"clic
浏览 1提问于2010-11-02得票数 10
回答已采纳
1回答
我有一个包含多个按钮的按钮组，每个按钮都有一个与之相关联的键盘快捷键。
如何在按钮上同时显示键盘快捷键和按钮文本？虽然其他选项，如工具提示是可用的，我希望这是工作。
浏览 0提问于2012-08-20得票数 0
如何在Visual中创建文本、单选按钮和提交按钮的显示，以便向用户显示文本
用户无法编辑文本，用户选择单选按钮，显示的问题可以存储在单击按钮上
浏览 2提问于2011-10-31得票数 0
我想使用一个有两个提交按钮的表单。每个按钮调用相同的表单操作，但为其中一个字段提交不同的值。</s:submit><sx:su
浏览 0提问于2011-10-16得票数 0
回答已采纳
1回答
但问题是，web表单中有3个提交按钮，当您单击其中任何一个按钮时，服务器将检查已单击的按钮。在iOS或可可中，我该如何告诉服务器这件事？以下是html中表单的代码：
<form name="myform" action="checkLogin.jsp" method="post" onSubmit="return checkSubmit
浏览 2提问于2013-10-28得票数 0
回答已采纳
2回答
这个应用程序的基础是我可以创建一个问题。一个问题可能有很多列。这些列将显示在表结构中。然后用户将填写详细信息。下面是样品。因此，我将在下面的表格中显示这些数据。用户将填写行并单击submit按钮。另一个空行将被添加以添加另一个响应，如下所示。像这样，no的列将是动态的，而且每个
浏览 3提问于2015-04-03得票数 0
回答已采纳
4回答
如何防止在按enter键时提交表单。默认情况下，单击enter按钮将提交表单。所以我拿不到输出。我在提交按钮的onclick事件上写了return false，然后它就可以工作了。因此，我想知道如何在按enter键的同时防止表单提交。
浏览 1提问于2011-06-09得票数 3
回答已采纳
1回答
我的应用程序有一个带有两个提交按钮的表单：<input namewith base 10: 'Voir la r\xe9ponse'
ValueError: invalid literal for int() with base 10: 'Sauter&#x
浏览 1提问于2010-09-21得票数 2
2回答
我有这段代码，它获取文件中的信息并显示结果。这一切都像预期的那样工作。我不能做的是，当它被按下时，导出函数中的按钮值，这样按下的按钮的值就会转移到我的php函数中的一个变量。我该怎么做呢？
浏览 0提问于2014-01-18得票数 0
我不打算使用React路由器，而且我知道React是一个更大的文件，所以如果不用每次加载它，那就太好了。
浏览 4提问于2016-08-31得票数 1
回答已采纳
2回答
我知道在Microsoft Windows中，“确定”/“取消”按钮通常按以下顺序出现。另一方面，在Linux发行版中，我经常看到的是Cancel/OK。(Yes/No)、(Yes/No/Cancel)、(Add/Edit/Remove)和其他常用按钮怎么办？
这些有没有标准的放置顺序？
浏览 0提问于2011-07-12得票数 5
回答已采纳
我是新的php和网页开发。我试图对文本字段做一个简单的验证。点击提交按钮后，我想在文本字段旁边显示一个红色的注释。<form method="post" action="<?php echo htmlspecialchars($_SERV
浏览 6提问于2014-11-27得票数 1
云服务器
ICP备案
对象存储
腾讯会议
云直播
腾讯云开发者
