我如何使用 Jinja2 和 HTML 设计联系表单
我使用 Jinja2 和 Flask-WTF 来制作联系表单作为我网站的一部分，对于输入，我使用 Jinja2 语法。我如何才能设计 Jinja 和 HTML 的样式，使其看起来美观且令观看者满意。目前，如果我尝试为输入添加自己创建的类，它们将无法使用“contact.html”文件中的 jinja2 语法。感谢您的帮助。
contact.py
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
class contactForm(FlaskForm):
name = StringField('Name')
email = StringField('Email')
message = StringField('Message')
submit = SubmitField('Send')
联系方式.html
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/contact.css') }}">
{% endblock %}
{% block body %}
<br><br>
<h1><center>Get In Touch With Us!</center></h1>
<br><br>
<form action="" method="POST">
{{form.name.label}}
{{form.name(size=40)}}
{{form.email.label}}
{{form.email(size=60)}}
{{form.message.label}}
{{form.message()}}
{{form.submit()}}
</form>
{% endblock %}
app.py（只是联系部分）
@app.route('/contact', methods=['GET', 'POST'])
def contact():
form = contactForm()
if form.is_submitted():
result = request.form
return render_template('sent.html', result=result)
return render_template('contact.html', form=form)
繁星coding1回答
-
30秒到达战场
bootstrap 4您可以在 jinja2 代码中使用类。但为此你必须在 html 模板中添加 bootstrap 的 CSS。我是这样做的：<!DOCTYPE html><html><head> <title>{{ title }}</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet"></head><body> <style type="text/css"> body{ font-family: 'Montserrat', sans-serif; } </style> <form action="your route fucntion" method="POST"> {{ form.hidden_tag() }} {{ form.name.label() }} {{ form.name(class="form-control pt-4") }} {{ form.email.label(class="pt-4") }} {{ form.email(class="form-control pt-4") }} {{ form.message.label(class="pt-4") }} {{ form.message(class="form-control pt-4") }} {{ form.submit(class="btn btn-outline-success ml-1 mt-5") }} </form> </div> <p class="text-info ml-5 pt-4">**All fields are required.</p></body></html>
随时随地看视频慕课网APP
相关分类
Html5