我显示了三个单独的表单，根据这三个表单，可以在网页顶部单击三个按钮中的一个。当我刷新页面时，所有三个表单都会显示出来，一个在另一个下面。当我点击"一"时，第一个(最短的(表单单独显示很好，但如果我点击"两个"或"三个"，按钮下面的所有内容都会消失。每当我点击该按钮时，只有"一"表格会显示，我不知道如何通过点击各自的按钮使"表格二"或"表格三"单独显示。
我已经包含了我的html和python(因为这些表单将信息发送到python脚本，该脚本将把表单输入作为用户输入来运行(。
custom.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fill out one of three forms</title>
<link rel="stylesheet" type="text/css" href="../static/css/style2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../static/materialize/js/materialize.js"></script>
<script src="../static/js/app.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/materialize/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/materialize/css/materialize-social.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script>
$(document).ready(function() {
$("#one").click(function() {
$("#one_animal").show();
$("#two_animals").hide();
$("#three_animals").hide();
});
$("#two").click(function() {
$("#one_animal").hide();
$("#two_animals").show();
$("#three_animals").hide();
});
$("#three").click(function() {
$("#one_animal").hide();
$("#two_animals").hide();
$("#three_animals").show();
});
});
</script>
</head>
<body>
<h5 style="color:white">How many animals do you want to include?</h5>
<div class="container">
<div class="row">
<button id="one" class="btn waves-effect waves-light">1 animal</button>
<button id="two" class="btn waves-effect waves-light">2 animals</button>
<button id="three" class="btn waves-effect waves-light">3 animals</button>
</div>
</div>
<!-- ONE ANIMAL FORM -->
<form id="one_animal" action="/form_input_one" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button>
</form>
<!-- TWO ANIMAL FORM -->
<form id="two_animals" action="/form_input_two" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What second animal are you looking for?</h5>
<input type="text" name="second_species" style="color:white">
<h5 id="second_species2" style="color:white">Is there something about this second animal you''re interested in?</h5>
<p>
<label>
<input name="second_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button>
</form>
<!-- THREE ANIMAL FORM -->
<form id="three_animals" action="/form_input_three" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What second animal are you looking for?</h5>
<input type="text" name="second_species" style="color:white">
<h5 style="color:white">Is there something about this second animal you''re interested in?</h5>
<p>
<label>
<input name="second_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What third animal are you looking for?</h5>
<input type="text" name="third_species" style="color:white">
<h5 style="color:white">Is there something about this third animal you''re interested in?</h5>
<p>
<label>
<input name="third_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="third_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="third_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button>
</form>
</body>
</html>
主.py
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/form_input_one', methods=['POST'])
def form_input_one():
species = request.form['species']
features = request.form['features']
return 'First species? %s <br/> Features? %s <br/> <a href="/">Back Home</a>' % (species, features)
@app.route('/form_input_two', methods=['POST'])
def form_input_two():
species = request.form['species']
features = request.form['features']
second_species = request.form['second_species']
second_features = request.form['second_features']
return 'First species? %s <br/> Features? %s <br/> Second species? %s <br/> Second features? %s <br/> <a href="/">Back Home</a>' % (species, features, second_species, second_features)
@app.route('/form_input_three', methods=['POST'])
def form_input_three():
species = request.form['species']
features = request.form['features']
second_species = request.form['second_species']
second_features = request.form['second_features']
third_species = request.form['third_species']
third_features = request.form['third_features']
return 'First species? %s <br/> Features? %s <br/> Second species? %s <br/> Second features? %s <br/> Third species? %s <br/> Third features? %s <br/> <a href="/">Back Home</a>' % (species, features, second_species, second_features, third_species, third_features)
@app.route("/")
def index():
return render_template('index.html')
@app.route("/custom.html")
def custom():
return render_template('custom.html')
if __name__ == "__main__":
app.run()
附加说明：当用户请求另一只动物时，我尝试用额外的字段"扩展"最短的表单，而不是创建三个单独的表单。但我不断收到向python脚本发送表单输入的糟糕请求(例如，因为当我提交一个有两个和三个字段仍然隐藏的单动物表单时，隐藏字段被认为没有被填充(。
以下是我研究过的一些问题和资源，它们让我走到了这一步：
将输入从html传递到python并返回
带单选按钮的烧瓶手柄形式
Flask错误："方法不允许该方法不允许用于请求的URL">
w3schools:jquery_hide_show
在我决定使用三个单独的表单之前，加上其他一些"如何使用JS隐藏/显示元素"。
提前谢谢。
您有3个div标签在中未关闭
<div><input type="text" name="species" style="color:white">
关闭标签后代码正在工作：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fill out one of three forms</title>
<link rel="stylesheet" type="text/css" href="../static/css/style2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../static/materialize/js/materialize.js"></script>
<script src="../static/js/app.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/materialize/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/materialize/css/materialize-social.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script>
$(document).ready(function() {
$("#one").click(function() {
$("#one_animal").show();
$("#two_animals").hide();
$("#three_animals").hide();
});
$("#two").click(function() {
$("#one_animal").hide();
$("#two_animals").show();
$("#three_animals").hide();
});
$("#three").click(function() {
$("#one_animal").hide();
$("#two_animals").hide();
$("#three_animals").show();
});
});
</script>
</head>
<body>
<h5 style="color:white">How many animals do you want to include?</h5>
<div class="container">
<div class="row">
<button id="one" class="btn waves-effect waves-light">1 animal</button>
<button id="two" class="btn waves-effect waves-light">2 animals</button>
<button id="three" class="btn waves-effect waves-light">3 animals</button>
</div>
</div>
<!-- ONE ANIMAL FORM -->
<form id="one_animal" action="/form_input_one" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button></div>
</form>
<!-- TWO ANIMAL FORM -->
<form id="two_animals" action="/form_input_two" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What second animal are you looking for?</h5>
<input type="text" name="second_species" style="color:white">
<h5 id="second_species2" style="color:white">Is there something about this second animal you''re interested in?</h5>
<p>
<label>
<input name="second_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button></div>
</form>
<!-- THREE ANIMAL FORM -->
<form id="three_animals" action="/form_input_three" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What second animal are you looking for?</h5>
<input type="text" name="second_species" style="color:white">
<h5 style="color:white">Is there something about this second animal you''re interested in?</h5>
<p>
<label>
<input name="second_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What third animal are you looking for?</h5>
<input type="text" name="third_species" style="color:white">
<h5 style="color:white">Is there something about this third animal you''re interested in?</h5>
<p>
<label>
<input name="third_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="third_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="third_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button></div>
</form>
</body>
</html>