咨询：如何在不使用JavaScript的情况下为HTML按钮添加功能

如果你完全不想编写JavaScript代码，可以借助HTML和CSS的原生特性实现按钮的基础功能，以下是几种常见场景的实现方式：

• 提交表单数据
  HTML的<button>标签在表单内默认类型为submit，点击后会自动提交表单，无需任何JS代码。

<form action="/your-submit-endpoint" method="POST">
  <input type="text" name="username" placeholder="输入用户名">
  <button>提交表单</button>
</form>

如果需要明确指定按钮行为，可添加type="submit"属性避免歧义。

• 页面跳转/锚点定位
  可以通过两种方式实现：一是利用按钮的formaction属性（需嵌套在表单中）；二是用<a>标签模拟按钮样式，直接通过href跳转。
  示例1：使用按钮的formaction跳转页面

<form>
  <button formaction="/about">跳转到关于页</button>
</form>

示例2：用a标签模拟按钮跳转到页面锚点

<a href="#content-section" style="padding: 8px 16px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333;">跳转到内容区</a>
<div id="content-section" style="margin-top: 600px;">这是页面内容区</div>

• 触发页面样式变化
  借助CSS的:checked伪类和隐藏的复选框/单选框，结合兄弟选择器，可以实现点击按钮后改变元素样式的效果。
  示例：点击按钮切换文本样式

<input type="checkbox" id="style-toggle" style="display: none;">
<label for="style-toggle" style="padding: 8px 16px; border: 1px solid #2196F3; border-radius: 4px; cursor: pointer; color: #2196F3;">点击切换文本样式</label>
<p class="target-text">这是要修改样式的文本</p>

<style>
#style-toggle:checked ~ .target-text {
  color: #f44336;
  font-weight: bold;
  font-size: 1.2em;
}
</style>

• 重置表单内容
  使用type="reset"的按钮，点击后会自动清空表单内所有输入项的内容。

<form>
  <input type="email" name="user-email" placeholder="输入邮箱">
  <button type="reset">重置表单</button>
</form>

你之前尝试的onclick绑定函数的方式本质上还是依赖JavaScript，所以如果要完全规避JS，就根据你的具体需求选择上面这些HTML/CSS原生方案即可。

内容的提问来源于stack exchange，提问作者Lucky Mafuta