Html 无法设置wtform属性的样式
尊敬的各位委员 .py文件具有以下内容:Html 无法设置wtform属性的样式,html,css,flask,jinja2,flask-wtforms,Html,Css,Flask,Jinja2,Flask Wtforms,尊敬的各位委员 .py文件具有以下内容: from flask import Flask, render_template, flash, session, redirect, url_for from flask_wtf import FlaskForm from wtforms import StringField,SubmitField from wtforms.validators import DataRequired app = F
from flask import Flask, render_template, flash, session, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField
from wtforms.validators import DataRequired
app = Flask(__name__)
app.config['SECRET_KEY'] = 'kmykey'
class SimpleForm(FlaskForm):
username = StringField("Username:", validators=[DataRequired()])
password = StringField("Password:", validators=[DataRequired()])
submit = SubmitField("Submit")
@app.route('/', methods = ['GET', 'POST'])
def index():
form = SimpleForm()
if form.validate_on_submit():
session['username'] = form.username.data
session['password'] = form.password.data
return redirect(url_for('index'))
return render_template('Login_Page.html', form=form)
if __name__ == '__main__':
app.run()
body{
background: url(railway-tracks.jpeg);
background-repeat: no-repeat;
}
h1{
color: black;
}
p{
font-family: 'Anton', sans-serif;
font-size: 200%;
color: black;
}
.uname{
display: inline-block;
min-width: 90px;
color: red;
}
.passwd{
display: inline-block;
min-width: 90px;
color: red;
}
相应的jinja模板包括:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ticket Booking</title>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='Login_Page.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div align="center" class="main1">
<form method="POST">
<h1>Railway Booking Portal</h1>
<h2>Welcome!</h2>
<br>
{# This hidden_tag is a CSRF security feature. #}
{{ form.hidden_tag() }}
{{ form.username.label(class_='uname') }} {{ form.username(placeholder='email here') }}
<br>
{{ form.password.label(class_='passwd') }} {{ form.password() }}
<br>
<a class="abc" href="Sign_Up.html"><u>SignUp</u></a>
<br>
<a class="abc1" href="Password_Reset.html"><u>ForgotPassword</u></a>
<br>
<br>
{{ form.submit() }}
<br>
<p>"One's destination is never a place, but a new way of seeing things." - Henry Miller</p>
</form>
</div>
请指导我丢失或使用不正确的部分是什么
多谢各位
(更新)您有:
class_='uname'
class_='passwd'
但风格:
.username{}
.password{}
类名应该匹配
操作编辑后更新
您尚未将类声明添加到标签中。您已将它们添加到字段中。尝试:
{{ form.username.label(class_='uname') }} {{ form.username(placeholder='email here') }}
{{ form.password.label(class_='passwd') }} {{ form.password}}
或者尝试:
{{ form.username.label, extra_classes='uname' }} {{ form.username(placeholder='email here') }}
{{ form.password.label, extra_classes='passwd' }} {{ form.password}}
它的工作原理是:
您好,这两个名称在我的编辑器中都是相同的,但是当我将其粘贴到这里时,我将其更改为区分css类名和wtforms属性。我已经更新了我的查询。请指导为什么样式仍然不起作用?什么是可能断开的链接?嗨,首先,非常感谢你帮助我。不幸的是,我仍然不能改变这些标签的颜色。在css文件中,我将内联块设置为使两个输入字段彼此保持分散,但无法这样做。我刚刚编辑了这些文件,以显示我正在使用的内容。我衷心感谢你对此事的指导。RegardsOt可能是您的css文件是invaid<代码>背景:url(rail.jpeg)应该是
背景:url(“rail.jpeg”)代码>尊敬的成员,我能够成功地将html与css文件连接起来,即当应用程序在本地主机上通过flask运行时,背景图像已经在工作。我真诚地为扩展这个幼稚的问题道歉,但我很难抓住这个问题/漏洞。我包含了完整的代码以提供一个清晰的画面,我将感谢您的善意和慷慨的帮助。RegardsHi,根据指示,我对jinja模板进行了更改,这是我看到的错误“jinja2.exceptions.TemplateSyntaxError:应为标记‘打印结束语句’,获得了’=”。我试着用谷歌搜索错误,看看可能出了什么问题,但还没有弄清楚。如有任何见解,将不胜感激。当做