我正在尝试制作一个表格，要求用户输入一些标题信息，然后在下面输入一些表格信息。
我正在使用 Flask 来组织表单请求，但是当我在表单标题中输入文本然后单击选项卡时，它会自动触发 POST 请求，这不是预期的效果。我有一个单独的“保存并退出”按钮来执行此操作，但我无法弄清楚为什么在不单击该按钮的情况下将表单标题信息推送到 POST 请求。
如果您将表单标题留空，您可以在不触发 POST 请求的情况下单击选项卡，我已经尝试从标题表单中删除“required”，但这也不起作用。
任何人都可以给我一些关于我哪里出错的指示吗？非常感谢！
<html>
<head>
<style>
.w3-tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.w3-tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Style the tab content */
.w3-tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<script type='text/javascript'>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="w3-tabcontent" and hide them
tabcontent = document.getElementsByClassName("w3-tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<form method="post">
</p><button class="button" style="float: right;" type="submit">Save and exit</button></p>
<!-- About Section -->
<div class="container">
<div class="container">
<h3><b>About</b></h3>
<input class="input" type="text" placeholder="Enter name" name="city-name" required>
</div>
<div class="container">
<input class="input" type="text" placeholder="Enter description" name="city-description" required>
</div>
</div>
<!-- Tab section -->
<div class="w3-tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
</div>
<div id="London" class="w3-tabcontent">
<p> Here is some random tab content </p>
</div>
</body>
</html>
本页的Flask设置：
from flask import (Blueprint, flash, g, redirect, render_template, request,
session, url_for)
bp.route('city-hub/new-city', methods=['GET', 'POST'])
def new_city():
""" The create city page """
session.clear()
if request.method == 'POST':
persona_name = request.form['city-name']
persona_description = request.form['city-description']
data = {'city-name':city_name,
'city-description':city_description}
return render_template('creation_suite/mwe.html')