我是html编码的新手。我正在尝试实现一个简单的应用程序，要求用户输入称呼，名字和姓氏。在提交时，我只想在表单下面显示一个警告或打印语句，而不是将名称存储到数据库中，这些语句显示为"Welcome" + salutation + last name。
我想我可以使用一个简单的python脚本和一个包含所有内容的html文件来实现它。还有更多的东西吗？
app.朋友
#!/usr/bin/env python3
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def main():
return render_template('form.html')
if __name__ == "__main__":
app.run()
form.html
<html lang="en">
<body>
<div class="container">
<div class="jumbotron">
<h1>Gettin' a feel for docker</h1>
<form class="form" method= "post" onSubmit= "alert('Welcome')">
<label for="salutation" class="sr-only">Salutation</label>
<input type="salutation" name="salutation" id="salutation" class="form-control" required autofocus><br>
<label for="firstName" class="sr-only">First Name</label>
<input type="name" name="firstName" id="firstName" class="form-control" required autofocus><br>
<label for="lastName" class="sr-only">Last Name</label>
<input type="name" name="lastName" id="lastName" class="form-control" required><br>
<button id="submit" class="btn btn-lg btn-primary btn-block" type="button">Submit</button>
</form>
</div>
</div>
</body>
</html>
为了在单击按钮时动态显示用户输入的结果，您将不得不使用jquery。
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</header>
<body>
<div class='wrapper'>
<input type='text' id='salutation'>
<input type='text' id='firstname'>
<input type='text' id='lastname'>
<button class='get_greeting'>Display</button>
<div class='results'></div>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('click', '.get_greeting', function(){
$('.results').html('<p>Welcome, '+$('#salutation').val()+' '+$('#firstname').val()+' '+$('#lastname').val()+'</p>')
});
});
</script>
</html>
根据form.html的要求，代码应如下：
<html lang="en">
<body>
<div class="container">
<div class="jumbotron">
<h1>Gettin' a feel for docker</h1>
<form class="form" method= "post" onSubmit= "alert('Welcome')">
<label for="salutation" class="sr-only">Salutation</label>
<input type="salutation" name="salutation" id="salutation" class="form-control" required autofocus><br>
<label for="firstName" class="sr-only">First Name</label>
<input type="name" name="firstName" id="firstName" class="form-control" required autofocus><br>
<label for="lastName" class="sr-only">Last Name</label>
<input type="name" name="lastName" id="lastName" class="form-control" required><br>
<button id="submit" class="btn btn-lg btn-primary btn-block" type="button" onclick="show_alert()">Submit</button>
</form>
</div>
</div>
<script type="text/javascript">
function show_alert(){
alert("Welcome, "+ document.getElementById('salutation').value + " " + document.getElementById('firstName').value + " " + document.getElementById('lastName').value);
}
</script>
</body>
</html>